Dear lazyweb,
Is there a GTK+ widget that draws a box with a rounded corner, just like those found in Gwibber? And that I could put my own stuff inside it?
Or it’s possible to do this easily?
I’m afraid not, so I will have to do it in HTML/WebKitGTK.
Use a custom RC style for your program?
…You’re more willing to make a hybrid web-app than try another toolkit?
This is what’s wrong with GNOME.
“My tools aren’t doing what I want. I think I’ll make a new hammer with a special head for these new nails I had an idea for. Hmm… Those boards aren’t taking the nails well. Better make some boards out of glue and cardboard. What? It’s shaped like a house! Doorknobs are confusing to users. This one opens automatically when you push on it! It’s an improvement!”
I’ve used Cairo in the past for this kind of stuff. Much more Gnome-y.
You are looking at maybe 10 lines of code if you are using a nice high level language. Basically just pack your widgets into a Gtk.Bin of some sort, hook into its expose event and do some simple drawing with cairo.
the code looks a bit like (C# syntax, please excuse)
bin.ExposeEvent += (o, a) => {
using (Cairo.Context cr = Gdk.CairoHelper.Create (bin.GdkWindow)) {
double radius = 5;
int x = a.Event.Area.X;
int y = a.Event.Area.Y;
int width = a.Event.Area.Width;
int height = a.Event.Area.Height;
cr.MoveTo (x + radius, y);
cr.Arc (x + width – radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
cr.Arc (x + width – radius, y + height – radius, radius, 0, Math.PI * .5);
cr.Arc (x + radius, y + height – radius, radius, Math.PI * .5, Math.PI);
cr.Arc (x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
cr.Color = new Cairo.Color (.5, .3, .7, 1);
cr.Fill ();
}
};
Not too bad. Please note I did not test this at all…
It’s an acknowledged problem with Gtk – it’s not easy to do custom widgets well. The usual solution, as Mark said, is to use Cairo to draw your own – though I don’t know how easy it would be to embed other content within it.
Almost certainly less effort than embedding WebKit in your app, though, unless you’re already doing that for other reasons…
Subclass a GtkBin and draw a rounded box with Cairo, filled with a linear gradient pattern in its expose event handler, e.g.
Vala code:
http://pastebin.valadoc.org/1509.html
Screenshot:
http://img682.imageshack.us/img682/3342/rbox.png
I think you might be able to pull some code from the cairo notifications/plugins system, as I’d imagine that the drawing code is already done.
another vote for cairo.
That’s clear: Cairo.
Don’t know if you’re using C or C++.
If it’s in C++, use GTKmm. (http://library.gnome.org/devel/gtkmm-tutorial/unstable/sec-cairo-drawing-arcs.html.en)
The user have chosen his gtk theme, respect that… it is not up to you to decide whether should have round or square widgets…
Look at Banshee, they have hard coded some of the design, nooot nice.
All that being said, custom RC can be used or Cairo can be used.
If using Cairo, you need more than ten lines. you need to draw with with the same settings(at least colors) as the current gtk theme and you also need to connect to the gtk theme changed signal, and do a redraw if that happens..
Another +1 for Cairo, although if you want to respect the theme, you can use gtk_paint_box (with detail parameter set to “button” if you want it to look like a button).
It’s not that hard to create native-looking widgets: http://chrislord.net/blog/Software/Dates/jana-gtk-themeing-demo.enlighten
Just remember that some of us like boring looking applications. One thing I like about gtk+ apps is that they do all look really similar. I don’t know if it has any actual benefit (perhaps it helps you concentrate on the bits that are actually different? perhaps it lets one person with a good sense of taste make the whole thing pretty?), but looking like every other application is not the end of the world 🙂
Sorry, but those aren’t rounded corners 🙂
@Hylke: Out of curiosity… I have read about rounded corners on http://jimmac.musichall.cz/log/?p=435 but I still feel stupid. Is there a blog post that explains the rounded corners issue for a non-designer? What are correct rounded corners? As a developer I’m always willing to learn.
Actually, the corners of the two rectangles (it looks like it’s being build as a rectangle in a rectangle instead of a rectangle with a border) are perfectly round, but the inner rectangle’s radius is too small it seems, so it looks really weird. 🙂
Yeah I did not mean to imply the code I pasted would at all follow the gtk theme, however the example screenshot he posted did not do that either so I went for the simplest possible approach.
You can pull all the gtk theme colors using the style property available to your widget, which will give you all the colors you need. gtk_paint_box works too, but it wont give you consistent results, plus learning cairo is fun!
Use Cairo or Clutter.
In an earlier version of Gwibber, before I started using WebKit, I actually did the round boxes manually with Cairo. It was a bit of a pain and it was hard to get it to look right. You can see the code here: http://is.gd/4SNy2
Qt’s support for CSS theming makes it trivially easy to do this with native widgets. It’s unfortunate that GTK+ is so far behind in this area.
Dude, seriously. GTK is there to give you a box that conveys that its contents are a semantic unit. It’s not there because “oh it would be so nice to have rounded edges”. That’s something that is a subjective judgement and should be made by the user in their GTK theme choice. As a programmer you should respect your users enough to consider giving them clean efficient software and the choice of how it looks instead of bloating your program with hacks to circumvent a system that enables users to have their programs appear in the fashion they find most attractive and usable.
You can pull all the gtk theme colors using the style property available to your widget.
You should be made by user with GTK for themes.