GTK+ Forums

Discussion forum for GTK+ and Programming. Ask questions, troubleshoot problems, view and post example code, or express your opinions.
It is currently Sat Jul 23, 2016 11:10 pm

All times are UTC




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: Gtk 3 CSS GtkButton
PostPosted: Sat Jan 23, 2016 5:15 pm 
Offline
Familiar Face

Joined: Sat Jan 31, 2015 4:16 pm
Posts: 23
Location: Plymouth, Devon
OS: Centos 7
Lang: C
Gtk 3.14.13

Just started trying to get my head around CSS for Gtk 3 run into problem. I want to change the background color of some toggle buttons when they are depressed, the docs are sketchy at best and its taken some time to get this far. I've not been able to find a definitive list of these attributes: prelight, insensitive, active. The ones that I have found won't do the job. Active for instance only changes the button while the mouse is within the widget and the mouse button is pressed.

Code:
From the docs
GtkButton { 
border-radius: 3px;
background-color: blue;
color: #FFFFFF;       /* font color (*Oh no it isn't)*/ 
}

* my note.
Not even close, one has to wonder if anyone actually tried this, certainly not the documenter.

I'm getting frustrated with Gtk, the docs really are poor and either broken or Devhelp is broken, I know this isn't the place for a rant but when I find it I'm gona have a doosy of a rant. Currently, though I've not done any C++ for over 20 years (not a lover), considering taking another look at QT, I'm sure it can't be in as bad a place as Gtk is atm.

_________________
RickTee

Gtk version: 3.14.13
Distro: Centos 7 Desktop: KDE Lang: C IDE: NetBeans


Top
 Profile  
 
 Post subject: Re: Gtk 3 CSS GtkButton
PostPosted: Sat Jan 23, 2016 6:28 pm 
Offline
Never Seen the Sunlight

Joined: Mon Apr 28, 2008 5:52 am
Posts: 1034
Location: UK
Hallo,

What you are probably looking at is the API documentation. It will give you the basics of each function, macro or structure. It is very short and a bit dry to read. If each function described exactly how to use it and with what other others to use it with etc..... The documentation would turn into reading "War and Peace" and the full works of Shakespeare many times over. Probably not what you want to do. :) GTK+ and all its associated libraries is not something that can be picked up over night and will take some time to learn. I have been using it since version 1 and still keep learning new things about it.

As it is ranting here will get you now where. The developers will not see it. Bug reports, errors etc need to be reported to http://bugzilla.gnome.org/.

The best thing with anything programming is to break it up into small steps. If things are getting to you step away from it and do some other section of the code or take a break. Then go back to it with a less frustrated mind.

I don't know if you have tried https://developer.gnome.org/ there is a load of information there that might help. Specifically on buttons at https://developer.gnome.org/Buttons/.

There is a tutorial here done by zerohour starting at http://www.gtkforums.com/viewtopic.php?f=3&t=988&p=72088=GTK3+with+CSS#p72088. He has done a load of work on these which includes CSS for buttons among others. It is in the form of a series of postings.

As for C++, a lot has changed in 20 years it has gone through standardisation with in 5th ISO standard coming out next year (possibly). There is a C++ binding for GTK+ called gtkmm with many other languages that you can use.

_________________
E.


Top
 Profile  
 
 Post subject: Re: Gtk 3 CSS GtkButton
PostPosted: Sat Jan 23, 2016 7:40 pm 
Offline
Never Seen the Sunlight

Joined: Sat Jul 26, 2014 11:43 pm
Posts: 404
If CSS isn't working for you then you can draw your own toggle button with cairo. Could even use tensor product meshes with cairo drawings if you really want to get artsy. Some really great stuff you can do with cairo and GTK+. You can compare a cairo toggle button with a css toggle button in the following program.

Code:
//Tested with GTK3.10 on Ubuntu14.04
//gcc -Wall toggle_button1.c -o toggle_button1 `pkg-config --cflags --libs gtk+-3.0`

#include <gtk/gtk.h>

gboolean draw_button1(GtkWidget *widget, cairo_t *cr, gpointer user_data)
  {
    guint width=gtk_widget_get_allocated_width(GTK_WIDGET(widget));
    guint height=gtk_widget_get_allocated_height(GTK_WIDGET(widget));

    if(gtk_toggle_button_get_active(GTK_TOGGLE_BUTTON(widget)))
      {
        cairo_set_source_rgb(cr, 0.0, 1.0, 0.0);
        cairo_paint(cr);
      }
    else
      {
        cairo_set_source_rgb(cr, 0.0, 0.0, 1.0);
        cairo_paint(cr);
      }
   
    //Draw purple rectangle around the button.
    cairo_set_line_width(cr, 4.0);
    cairo_set_source_rgb(cr, 1.0, 0.0, 1.0);
    cairo_rectangle(cr, 0, 0, width, height);
    cairo_stroke_preserve(cr);

    //Add the text.
    cairo_set_source_rgb(cr, 1.0, 1.0, 0.0);
    cairo_text_extents_t extents;
    cairo_select_font_face(cr, "Courier", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);
    cairo_set_font_size(cr, 20);
    cairo_text_extents(cr, "Cairo Toggle!", &extents);
    cairo_move_to(cr, width/2 - extents.width/2, height/2 + extents.height/2);
    cairo_show_text(cr, "Cairo Toggle!"); 

    return TRUE;
  }
int main(int argc, char **argv)
  {     
    gtk_init(&argc, &argv);   

    GtkWidget *window=gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 100);
    gtk_window_set_title(GTK_WINDOW(window), "Toggle Buttons");
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    GtkWidget *button1=gtk_toggle_button_new_with_label("button1");
    gtk_widget_set_app_paintable(button1, TRUE);
    gtk_widget_set_hexpand(button1, TRUE);
    gtk_widget_set_vexpand(button1, TRUE);
    g_signal_connect(button1, "draw", G_CALLBACK(draw_button1), NULL);

    GtkWidget *button2=gtk_toggle_button_new_with_label("Standard Toggle");
    gtk_widget_set_hexpand(button2, TRUE);
    gtk_widget_set_vexpand(button2, TRUE);
     
    GtkWidget *grid=gtk_grid_new();
    gtk_container_set_border_width(GTK_CONTAINER(grid), 10);
    gtk_grid_attach(GTK_GRID(grid), button1, 0, 0, 1, 1);
    gtk_grid_attach(GTK_GRID(grid), button2, 0, 1, 1, 1);

    gtk_container_add(GTK_CONTAINER(window), grid);

    //Draw second toggle button with CSS.
    GError *css_error=NULL;
    gchar css_string[]="GtkToggleButton:active{background: #00ff00; color: #ffff00} GtkToggleButton{background: #0000ff; color: #ffff00}";
    GtkCssProvider *provider = gtk_css_provider_new();
    GdkDisplay *display = gdk_display_get_default();
    GdkScreen *screen = gdk_display_get_default_screen(display);
    gtk_style_context_add_provider_for_screen(screen, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
    gtk_css_provider_load_from_data(provider, css_string, -1, &css_error);
    if(css_error!=NULL) g_print("CSS loader error %s\n", css_error->message);
    g_object_unref(provider);

    gtk_widget_show_all(window);                 
    gtk_main();
    return 0;
}


Top
 Profile  
 
 Post subject: Re: Gtk 3 CSS GtkButton
PostPosted: Mon Jan 25, 2016 3:14 pm 
Offline
Familiar Face

Joined: Sat Jan 31, 2015 4:16 pm
Posts: 23
Location: Plymouth, Devon
Apologies for the whine.

Thank you kind folks for your help.

Buy reporting the apparent lack of a state for toggle button depressed the dev gave me the solution, 'checked'. And finally after weeks of struggling with a broken Devhelp I found a version which works and compiles on Centos 7. Though there is no mention in the docs of it being fixed or even broken and no bug reports which is odd. Had to keep downloading newer versions until i found one that worked and would compile. :(

Just for clarification and in case anyone else is having problems with Devhelp:

Code:
Search: gtk widget set
Result: gtk_action_bar_set_center_widget
gtk_box_set_center_widget
gtk_drag_set_icon_widget
ca_gtk_proplist_set_for_widget

Search: gtk_widget_set
Result: <nothing>

Search: gtk_widget_set_name
Result: <nothing>

Search: gtk button new
Result: gtk_button_box_new
gtk_dialog_new_with_buttons


Search: gtk_button_new
Result: <nothing>

Bad huh!

_________________
RickTee

Gtk version: 3.14.13
Distro: Centos 7 Desktop: KDE Lang: C IDE: NetBeans


Top
 Profile  
 
 Post subject: Re: Gtk 3 CSS GtkButton
PostPosted: Mon Jan 25, 2016 6:40 pm 
Offline
Never Seen the Sunlight

Joined: Sat Jul 26, 2014 11:43 pm
Posts: 404
I use Devhelp and have always found it to work very well. Usually just do a general search on a widget and then look at the functions and go from there. The help on the internet works well for me also. If I type in "gtk reference toggle button" it will bring up the toggle button reference page at the top of the search results. Then I can scan through the functions and find what I am looking for quickly.

For something like toggling a button there are many ways you can go about it. CSS works fine and if you want you can make your own toggle button with an event box, drawing area or even an OpenGL drawing area. The capability is there if you want a drawing or animation that CSS might not include.

If you really get stuck on something, just put up a post. You might not get the exact answer you are looking for but at least you might get some ideas on how to solve a problem.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group