An overlay GTK toolbar/widget - widget

I am writing a custom application in C using GTK+2.0 and Cairo. Just for learning purposes (and if successful, then for deployment), I wish to recreate something similar to a overlay toolbar/widget (I am sorry if the terminology is not correct) that appears when a mouse moves over a given area on the window, and disappears when the mouse moves away. The toolbar, as I imagine, should appear on top of the existing widgets without displacing them or altering the widget packing in any way. Is it possible to accomplish? If yes, can you please point me to relevant tutorials/examples and/or outline a way to do the same?
Thanks in advance.

Not sure this is easily doable in GTK2. However, I learned recently that there's the GtkLayout widget which allows pixel exact rendering of widgets, so you can even display some widgets over others. Or you may implement your own container widget.
Please note that since GTK3, there's GtkOverlay which seem to do what you want.
You may also give a look to Clutter, which might allow this. Furthermore, there are projects of merging GTK and Clutter for GTK 4.

The little known GtkHandleBox is capable of doing what you want. I must warn you it is deprecated in GTK+3 because is going against the usual UI direction. Also, the correct positioning will be subject to the windows manager quirks, so I'd expect some issue in this regard.

Related

Make my website partially transparent to show desktop behind the browser [duplicate]

I'd like to have the users desktop or whatever windows they have open show through the background with a slight bit of opacity. I did a quick mockup in photoshop to try and illustrate what I'm aiming for
I'm fine with using a bit of jQuery if need be, but would prefer to keep the foot print light. I don't really want to add a ton of overhead just for a fancy effect.
No. You cannot make the browser window translucent.
This is completely impossible... using current APIs. It's theoretically possible that one might be implemented in the future, but for now, the best you can do is transparency to the user desired color.
I doubt this is possible since it requires the actual browser window to be transparent, which is almost surely not the case.
Maybe with some plugin for the browser, but not by code in your website.
No, this is impossible.
99.99% of the time, if you've never seen it before, there's a good reason*.
*EDIT: These comments are specific to web programming... not meant to apply to the sum total of human innovation.
The term is Form Opacity, and you have to have access to the applications source code, in most cases to manipulate it. Several programs already have this as a standard or hidden feature, i.e. Trillian, and iCalenderLite, to name a couple.... Windows 7 allows you to do it to any open window.
form.opacity
EDIT: Answer has been getting downvoted without comment, so I added the OP's and my additional remarks here.
Would this still be out of bounds for a website to change though? FREX I couldn't have my website turn form opacity on (just for site X) if it wasn't already? – aslum Jun 7 '11 at 23:33
For that, I would have to say "not possible", unless it was a "live" control, loaded by the browser to begin with. You most likely would not be able to do it on a "by site" basis only. And even though most user initiated events are "technically" replicable via script or code, proper security levels, would render such an event, inaccessible to outside manipulation. – tahwos Jun 8 '11 at 22:04
I am seeing a lot of this is impossible. The correct answer is currently mostly impossible ;) Using programming, you can create a window or application that is transparent. I have never done anything of the sort, but I have used several programs that allow you to control transparency.
My best bet for controlling opacity of a window is DirectX. So If you were to make a browser with DirectX, you could control the opacity of the window by reading the CSS.
So basicly, you could do it your self, much like mozilla firefox reads their own css (-moz-radius) just make your own DirectX based Web browser. I could see someone getting a lot of support on a project like that.

Few Questions about PictureChooser Plugin

I'm trying to use the PictureChooser plugin, specifically the ChoosePictureFromLibrary method, and I have a few questions.
Is it possible to show more than just .jpg? I'd like at least .png as well, though maybe other picture types too.
Is it possible not to resize chosen pictures? The maxPixelDimension parameter seems to always resize the image to that size.
Is it possible to have access to the original file name of the chosen picture?
The PictureChooser is really quite a small plugin - it really only has one small class per platform - https://github.com/MvvmCross/MvvmCross/tree/v3.1/Plugins/Cirrious/PictureChooser
Because of this, the easiest route forwards for your specialist needs is probably to "branch" this small part of the code (by repo-forking or just by "copy and paste"). You should then find it straightforward to get hold of filenames, to avoid resizing, and to add any other features you need on the platforms you need to support.
If you create features that you think others may want, then mvx would love to see them open sourced back to the community - but that's not priority 1 - instead, the most important thing is making your app awesome and shipping it.

Custom cell in list in Flash AS3

I am no expert in Flash, and I need some quick help here, without needing to learn everything from scratch.
Short story, I have to make a list where each cell contains an image, two labels, and a button.
List/Cell example:
img - label - label - button
img - label - label - button
As a Java-programmer, I have tried to quicly learn the syntax and visualness of Flash and AS3, but with no luck so far.
I have fairly understood the basics of movie clips etc.
I saw a tutorial on how to add a list, and add some text to it. So I dragged in a list, and in the code went list.addItem({label:"hello"}); , and that worked ofc. So i thought if I double-clicked the MC of the list, i would get to tweak some things. In there I have been wandering around different halls of cell-renderers etc.
I have now come to the point that I entered the CellRenderer_skinUp or something, and customized it to my liking. When this was done, I expected i could use list.addItem(); and get an empty "version" of my cell, with the img, labels and the button. But AS3 expects an input in addItem. From my object-oriented view, I am thinking that i have to create an object of the cell i have made, but i have no luck reaching it.. I tried to go
var test:CellRenderer = list.listItem;
list.addItem(test);
..But with no luck.
This is just for funsies, but I really want to make this work, however not so much that I am willing to read up on ALOT of Flash and AS3. I felt that I was closing in on the prize, but the compiler expected a semicolon after the variable (list.addItem({test:something});).
Note: If possible, I do NOT want this:
list.addItem({image:"src",label:"text",label"text",button:"text"});
Well.. It actually is what I want, but I would really like to custom-draw everything.
Does anyone get what I am trying to do, and has any answers for me? Am I approaching this the wrong way? I have searched the interwebs for custom list-cells, but with no luck.
Please, any guiding here is appreciated!
Sti
You could use a Datagrid as well, with each column pointing to the appropriate part of the data source (possibly even the same field, depending on what you're doing). You can then just use the ImageCell as the renderer for the second and third colums.
I think you're just not understanding that Adobe, in the own woolly-headed little way, is separating the Model from the View on your behalf. You hand the Model to the View and then get out of the way. The extent of what you can/should change is just telling it what renderer to pop your data into.
In fact, the fl.controls don't give you much control at all about how they work--I wouldn't go down the road of trying to create a custom itemRenderer with any signifcant functionality for them if you don't fully understand how the Display List works and if you're not comfortable digging around in the debugger and ferreting out all kinds of undocumented information.
For more details (to the extent anyone knows anything about how these work), see
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt1.html
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt2.htmlhttp://www.adobe.com/devnet/flash/quickstart/datagrid_pt3.html
http://www.adobe.com/devnet/flash/quickstart/tilelist_component_as3.html
Do you have the option to use the Flex Framework instead of pure Flash? It makes this kind of extension much more satisfying. It's aimed more at application developers, whereas Adobe sees Flash users more as designers.

CSS3 Transforms, Layering, and Diagnostics

I've recently been developing a micro-site that uses some of the newer 3D effects transforms in CSS3. However, I've been trying to get a little too tricky with layering so that certain optical illusions take effect and it's been the cause of numerous headaches...
In general, there's this issue in Chrome (but not Firefox, haven't yet tried Safari or IE) where everything seems to "render" appropriately onscreen, but when I go to click a link or highlight some text in one of the more "tricky-layered" areas, my cursor goes limp and I'm unable to get any functionality. I can see everything just fine, it's just there's an invisible wall preventing my cursor from interacting, if that helps the explanation.
Without pasting a mile-long piece of experimental code, does anyone know off the top of their head what might be causing this issue? My best guess is that the z-index inheritance has gone awry at some point but it's difficult to diagnose... leading to my next question of whether or not anyone knows of any good strategies for layering diagnostics (tools would be great here as well)!
I'm of course well-versed in the standard Developer Tools/Firebug...
Thanks guys!
Okay, so I solved my problem and came up with the following strategy for future reference in diagnosing layering issues...
Check discreet Z-Index values of all elements that may be interfering with one another. Re-order them if necessary and see if that solves the problem. If not, move on.
Check discreet positioning on all elements from step 1. Make sure they are declared to either have "position: absolute" or "position: relative" in CSS markup. DO NOT RELY ON INHERITANCE/DEFAULTS. ABSOLUTE DECLARATION IS KEY.
Check your "backface-visibility" values. If your setup is complex, it's easy to lose track of what's what.
Following that pattern is what finally did it for me. My problems turned out to be a combination of all 3 but they didn't necessarily reveal themselves to me until I followed the steps above.

What are the advantages of using an imageless button?

The discussion on this answer to the question "How can I use Google's new imageless button?" Has prompted this question.
Google seems to think that going imageless is good for some reason, but from the comments cited, I fail to see the advantage. Is it worth it to send dozens of lines of HTML and who knows how much CSS to render these imageless buttons, rather than simply load another image, especially when techniques like CSS sprites are available?
When would this technique be preferred? The other question asks how it can be done, but I want to know why it should be done.
Localization (it's easier to translate text than images)
Skinning/themeing (it's easier to change the look and feel with single CSS than recreate multiple images)
Accessibility (screen readers can read properly, text scaling works properly)
Performance (the CSS is shared and so is loaded once from the server)
Functionality (it's easier to expand the button with new UX elements like dropdown arrow when you don't have to change the whole picture)
Btw, the "imageless" button might as well contain an image inside the visual template. This approach is quite similar to XAML's approach to templating and styling the visual tree.
I think in this specific case I can only see the advantage that the buttons can be programatically generated. If you don't know what your button will say it's probably easy to make this way than generating it using somekind of image library generator.
Also changing one CSS can make you change the look-and-feel of all buttons at once. Using image buttons you'll need to update everyone and each of images.
Isn't this done because the height of the button may vary (for example the text size)?
The page load is smoother as no images have to be loaded and will appear later than the rest
The button text is also readable in the case somebody cannot read/view images, yet you have the graphical look. (building a graphical button with images in the traditional way around real text is as complicated HTML as this method)
As they mentioned in their blog, these buttons are skinnable without creating and storing custom images.
Basically, you get all the advantages of plain text buttons over custom imaging, while still having a nice, skinnable graphical look.