Rounded boxes in gtk

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.

21 thoughts on “Rounded boxes in gtk”

  1. …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!”

  2. 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…

  3. 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…

  4. 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.

  5. 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..

  6. 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 🙂

  7. 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. 🙂

  8. 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!

  9. 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:

    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.

  10. 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.

Comments are closed.