Styling GtkSpinButton

kepica · **Posted:** Mon Jul 23, 2012 9:10 am

I use DEVHELP ver 3.4.1 on Fedora 17.
Found a bug.
Open GTK+3 Reference Manual > Theming in GTK+ > GtkStyleContext
> scroll down to paragraph DESCRIPTION > paragraph TRANSITION ANIMATIONS
there is Example 9. Using enumeration to identify animatable regions

Code:

enum {
  REGION_ENTRY,
  REGION_BUTTON_UP,
  REGION_BUTTON_DOWN
};

...

gboolean
spin_button_draw (GtkWidget *widget,
                  cairo_t   *cr)
{
  GtkStyleContext *context;

  context = gtk_widget_get_style_context (widget);

  gtk_style_context_push_animatable_region (context,
                                            GUINT_TO_POINTER (REGION_ENTRY));

  gtk_render_background (cr, 0, 0, 100, 30);
  gtk_render_frame (cr, 0, 0, 100, 30);

  gtk_style_context_pop_animatable_region (context);

  ...
}

first of all
gtk_render_background (cr, 0, 0, 100, 30);
gtk_render_frame (cr, 0, 0, 100, 30);
should be
gtk_render_background (context, cr, 0, 0, 100, 30);
gtk_render_frame (context, cr, 0, 0, 100, 30);

but it is only part of problem. there is much worse:
if you try this:

Code:

GList *m_list = gtk_style_context_list_regions(context);

you will get NULL pointer - there are NO regions for spin button ?!

is it BUG or what ?!

zerohour · **Posted:** Tue Jul 24, 2012 12:36 am

No, there aren't any regions defined for GtkSpinButton. Have a look in gtkspinbutton.c then look at gtknotebook.c for comparison.

gtknotebook.c adds the region GTK_STYLE_REGION_TAB in the function gtk_notebook_draw_tab() using gtk_style_context_add_region()

gtk_style_context_add_region() is defined in gtkstylecontext.c

What are you trying to do?

kepica · **Posted:** Tue Jul 24, 2012 5:55 am

zerohour, thanks for reply
I change topic subject to Styling GtkSpinButton and will continue:

I tried to change style of plus/minus button in GtkSpinButton - with no luck.

I can change color for +/- buttons, but not font size. I have embedded device with touch screen, so I need wider buttons in spin button. After all it looks that I have to work with separate GtkEntry and two more buttons. Then I lost elegance of GtkAdjustment inherit in spin button.

Is there any chance to make buttons in GtkSpinButton widget wider ?

1) perhaps I can change label or icon on these buttons ?

is this meant I have to change theme or what ?
any hint how-to ?

in fact, I can set background image for buttons, but can't change button's width !

Code:

.spinbutton.button
{
 background-image: url('/some/path/to/image');
}

one more thing, this will NOT work. why ?!

Code:

.spinbutton.button GtkLabel
{
 font: Serif 36;
}

2) implement GtkAdjustment with GtkEntry and two separate GtkButtons
any hint how-to ?

zerohour · **Posted:** Tue Jul 24, 2012 11:33 pm

Quote:

1) perhaps I can change label or icon on these buttons ?

GtkSpinButton is a GtkEntry with "buttons" The "buttons" don't use icon's or label's. Instead each one is a drawn background, frame and arrow using:
gtk_render_background()
gtk_render_frame()
gtk_render_arrow()

http://developer.gnome.org/gtk3/3.2/GtkStyleContext.html#gtk-render-arrow

The size of everything in GtkSpinButton is based on the font size used in the GtkEntry. Notice how everything scales proportionally when you change the font size using CSS. You couldn't just draw over the existing "buttons" either because there's no way to get access to the GtkEntry. You'd need access to GtkEntry in order to determine where to start drawing. That's done using gtk_style_context_set_junction_sides()
Look in gtkspinbutton.c at gtk_spin_button_draw_arrow()

Quote:

2) implement GtkAdjustment with GtkEntry and two separate GtkButtons

I asked this same question a while back and tadeboro gave an example but its only two buttons and a label with the disadvantages you mentioned.
http://www.gtkforums.com/viewtopic.php?f=3&t=55182

Sorry I'm not sure how to create a composite widget like you want but I've very interested, what is your embedded device and touch screen?

kepica · **Posted:** Wed Jul 25, 2012 6:09 am

zerohour, thanks a lot !
and of course - thumbs up for Tadej - man you are cool !

my fault - I made a post without search forum.
I will change Tadej code just a little and publish new version here - very soon.

I work with atmel EVK1100 board + standard linux box ( PC ) + standard 15" touch monitor
EVK1100 do business logic and PC simple act as HMI

this custom widget solution is ok
- now it is easy also, when Tadej made all the job :-)

but still miss posibility to style buttons width via CSS.
where can one report such a thing as bug - missing feature ?

zerohour · **Posted:** Wed Jul 25, 2012 3:39 pm

Since gtk+-3.4 multitouch is supported, so the developers are obviously are aware of the huge increase in touch enabled devices.
http://blogs.gnome.org/carlosg/2012/01/20/multitouch-is-near/

I think having widgets with disproportionately large areas in them such as the spinbutton we've been talking about would violate the new height for width model. But this is key to usability on small touch devices. I agree, It seams they need to somehow address this.

I wouldn't call it a bug, just a request. I followed the links from here: http://www.gtk.org/development.php and I think this is where you would make a request: https://bugzilla.gnome.org/request.cgi

Maybe this will be easier to do when gtk+-4.0 is introduced. It will have much more extensive Clutter integration. But that's 18-24 months away the last I read.

I still have an Atmel EVK1100 but mine is an earlier ES model "engineering sample" that has several flaws. The seller didn't show it was a engineering sample. So I'm a bit soured on Atmel. Between that and the lack of speed compared with a BeagleBoard and similar devices, I got frustrated with it and it just sits in my drawer. I'm anxiously waiting for the a13-olinuxino: http://olimex.wordpress.com/tag/a13/

GTK+ Forums

Styling GtkSpinButton

Who is online