GTK+ Forums

Discussion forum for GTK+ and Programming. Ask questions, troubleshoot problems, view and post example code, or express your opinions.
It is currently Fri Nov 28, 2014 6:04 pm

All times are UTC




Post new topic Reply to topic  [ 38 posts ]  Go to page Previous  1, 2, 3  Next
Author Message
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Fri Jan 27, 2012 4:13 pm 
Offline

Joined: Fri Jan 27, 2012 3:49 pm
Posts: 2
Hello !

I would like to know :

- Is it possible to make a GTK3 theme that uses multiple theme engines like GTK2 and how (ex: Adwaita engine for some widgets and Solidity engine for the others)?
- Is there any application like firebug Mozilla extention but for GTK3 theming? It will be cool to be able to hover the mouse over a widget and so get its label or its identifiant to use it in CSS code (ex : on mouse over the reduced window in the gnome-panel -> the app show : tasklist-button).

Thank you for you answer!


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Mon Jan 30, 2012 10:59 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Quote:
Is it possible to make a GTK3 theme that uses multiple theme engines like GTK2 and how

If your talking about themes in general then this is the wrong forum to ask that question. Try:
http://worldofgnome.org/making-gtk3-themes-part-1-basics/
http://deviantart.com

If your trying to do a custom theme for your own gtk3 application, then you would make the gtk3 app and a theme then instruct the O.S. to use your theme for the app with: GtkThemingEngine http://developer.gnome.org/gtk3/3.4/GtkThemingEngine.html
Quote:
It will be cool to be able to hover the mouse over a widget and so get its label or its identifiant to use it in CSS code

No there's nothing that automated that I'm aware of, either for your own apps or a whole theme. Perhaps that could be a feature in future versions of Glade or a whole integrated CSS styler: http://glade.gnome.org/
But it's fairly simply to figure out most CSS selectors. I do wish the developers would publish a complete list. There are some major differences in the CSS selectors and properties for styling your own apps and the one's used for styling a whole theme.

UPDATE:
You may be interested in: gedit-cossa, "A GTK+ theme previewer for gedit"
http://blogs.gnome.org/carlosg/2011/05/28/introducing-cossa-a-gtk-theme-previewer-for-gedit/
Also look at this link posted by Benjamin Otte in the comments: http://people.freedesktop.org/~company/stuff/css-fun.webm


Last edited by zerohour on Tue Jun 26, 2012 12:22 am, edited 2 times in total.

Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Tue Jan 31, 2012 8:42 am 
Offline

Joined: Fri Jan 27, 2012 3:49 pm
Posts: 2
OK, thank you anyway! :-)


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Fri Jun 08, 2012 6:21 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Styling a GtkTextView with Gtk3 and Css:
Attachment:
GtkTextView.png
GtkTextView.png [ 26.88 KiB | Viewed 18535 times ]

Here's and example of styling a GtkTextView using using CSS in GTK3. This changes the font, font size, font color, cursor color and background color. I've shown three images above. The one to the left is with added spacing using the following functions.
gtk_text_view_set_border_window_size (GTK_TEXT_VIEW(tview), GTK_TEXT_WINDOW_TOP, 15);
gtk_text_view_set_border_window_size (GTK_TEXT_VIEW(tview), GTK_TEXT_WINDOW_BOTTOM, 15);
gtk_text_view_set_border_window_size (GTK_TEXT_VIEW(tview), GTK_TEXT_WINDOW_LEFT, 15);
gtk_text_view_set_border_window_size (GTK_TEXT_VIEW(tview), GTK_TEXT_WINDOW_RIGHT, 15);


The middle image is with the above functions and some of the text selected just to show how I've changed the selection colors as well. The image to the left is without all the gtk_text_view_set_border_window_size() to show the difference it makes.

Code:
/*  Compile With:
*   gcc -Wall -o cursor1 `pkg-config --cflags --libs gtk+-3.0` cursor1.c
*/
#include <gtk/gtk.h>

int main (int argc, char* argv[])
{
GtkWidget *window, *tview;
GtkTextBuffer *tbuf;

gtk_init (&argc, &argv);

/*-------- CSS ------------------------------------------------------------------------------------------------------------------------------------------*/
GtkCssProvider *provider = gtk_css_provider_new ();

gtk_css_provider_load_from_data (provider,
                                 "GtkTextView {\n"
                                 "color: blue;\n"
                                 "font: Serif 38;\n"
                                 "background-color: yellow;\n"
                                 "-GtkWidget-cursor-color: red;\n"
                                 "}\n"
                                 "GtkTextView:selected {\n"
                                 "background-color: black;\n"
                                 "color: green;\n"
                                 "}\n", -1, NULL);

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);

g_object_unref (provider);
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/

window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

gtk_window_set_default_size (GTK_WINDOW(window),
                             500, 250);

g_signal_connect_swapped(G_OBJECT(window),
                         "destroy",
                         G_CALLBACK(gtk_main_quit),
                         NULL);

tbuf = gtk_text_buffer_new (NULL);

tview = gtk_text_view_new_with_buffer (tbuf);

gtk_container_add (GTK_CONTAINER(window),
                   tview);

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


Last edited by zerohour on Tue Jul 10, 2012 2:29 am, edited 7 times in total.

Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Fri Jun 08, 2012 6:59 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
GTK3 with CSS: Background images

The image was from here: http://www.myfreewallpapers.net/abstrac ... e-02.shtml and saved in the same directory as the program.

COMPATIBILITY NOTE:
If your using Unico, the default GTK3 Theme Engine in Ubuntu 12.04 (Precise Pangolin) or Ubuntu 12.10 (Quantal Quetzal) you can use either background or background-image.
Code:
/*  Compile with:   gcc -Wall -o backimage `pkg-config --cflags --libs gtk+-3.0` backimage.c */

#include <gtk/gtk.h>

int main(int argc, char *argv[])
{
  GtkWidget *window;

/*----- CSS ----------- */
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*-----------------------*/

  gtk_init (&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
/*
    gtk_window_set_default_size (GTK_WINDOW(window),
                                 500, 300);
*/

  g_signal_connect (GTK_WIDGET(window),
                    "destroy",
                    G_CALLBACK (gtk_main_quit),
                    NULL);

/*------------- CSS  --------------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);

  gtk_style_context_add_provider_for_screen (screen,
                                             GTK_STYLE_PROVIDER(provider),
                                             GTK_STYLE_PROVIDER_PRIORITY_USER);

  gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider),
                                     " GtkWindow {\n"                         
                                     "   background-image: url('abstract-blue-02.jpg');\n"   
                                     "}\n", -1, NULL);
  g_object_unref (provider);
/*----------------------------------------------------------------------------------------------------------------------*/

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


Last edited by zerohour on Thu Jun 21, 2012 11:53 pm, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Mon Jun 11, 2012 6:52 am 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Drawing with Cairo in GTK3

Drawing with Cairo using GTK3 is significantly different than with GTK2.x. The GDK drawing API has been removed. So most of the tutorials on the net will not work with GTK3.

There is an example for using GTK3x with Cairo in the official information, however the example allows you to draw on the screen with the mouse and has quite a bit more code than is necessary to demonstrate the basics. The following is a tutorial showing basic drawing without the extra code and a bit more explanation.

Colors
Cairo colors are in RGB or RGBA percentages. For obtaining color values in percentages there are free web sites such as this one: http://www.december.com/html/spec/colorcodes.html
But I recommend using the drawing program Inkscape. It works on Linux, Mac, Windows and it's free. I'll give some very quick directions for using Inkscape to create a color swatch.
1. Download and install: http://inkscape.org/download/ (available from synaptic package manager in Ubuntu Linux)
2. View->Zoom In OR "plus and minus key" OR Ctrl + mouse wheel
3. The left side of the screen contains the toolbox, click the rectangle tool OR press F4 (If the tool box isn't visible go to View->Show/Hide and check "Toolbox")
4. Click and hold the mouse button then drag out a rectangle. Release the mouse when done.
5. Object->Fill and Stroke OR Shift+Ctrl+F
6. Click the "Wheel" tab and select a color.
7. Click the "RGB" tab to see the RGB and RGBA values. (The RGBA values in hexadecimal are also shown in the lower right)
Attachment:
Inkscape1.png
Inkscape1.png [ 88.82 KiB | Viewed 18736 times ]

To convert RGB integers to percent use: p = RGB/255, where RGB value you're trying to convert. Or you can copy and paste the RGBA value given in Inkscape to this online converter: http://maettig.com/?page=PHP/CSS_Color_Converter

Stroke and Paths
A path is an infinitely narrow region. It's just for the program to keep track of the area that's going to have color added to it. That area is called the stroke. This is the same in graphics drawing programs such as Adobe Illustrator, Inkscape ect.
The stroke is the area along the path where you will actually see color (unless you've using a completely translucent "see-through color"). The stroke is centered on the path. So a 6 pixel wide stroke will have 3 pixels on one side of the path and 3 pixels on the other side of the path.

Code Notes
Say you want a rectangle that's 100 pixels tall by 100 pixels wide to be placed in the upper left of a window without any gap between the edges of the rectangle and the window. To do this need to account for the width of the stroke used for the rectangle. That's why in the line: cairo_set_line_width(cr,6); The 6 is the stroke width and in the line: cairo_rectangle (cr, 3, 3, 100, 100); The 3,3 is the stroke width divided by 2. This is to get the rectangle to begin at the coordinates 0,0 and not have any part of the rectangle be off the screen. A couple of shapes are also shown in the example: A rectangle, circle and a line. All in different colors.
Attachment:
cairo1.png
cairo1.png [ 6.1 KiB | Viewed 18743 times ]

Code:
/* COMPILE USING:  gcc -Wextra -o cairo1 `pkg-config --cflags --libs gtk+-3.0` cairo1.c */
#include <gtk/gtk.h>

#define WINDOW_WIDTH  300
#define WINDOW_HEIGHT 300

static gboolean draw_cb(GtkWidget *widget, cairo_t *cr, gpointer data)
{   
   /* Set color for background */
   cairo_set_source_rgb(cr, 1, 1, 1);
   /* fill in the background color*/
   cairo_paint(cr);
     
   /* set color for rectangle */
   cairo_set_source_rgb(cr, 0.42, 0.65, 0.80);
   /* set the line width */
   cairo_set_line_width(cr,6);
   /* draw the rectangle's path beginning at 3,3 */
   cairo_rectangle (cr, 3, 3, 100, 100);
   /* stroke the rectangle's path with the chosen color so it's actually visible */
   cairo_stroke(cr);

   /* draw circle */
   cairo_set_source_rgb(cr, 0.17, 0.63, 0.12);
   cairo_set_line_width(cr,2);
   cairo_arc(cr, 150, 210, 20, 0, 2*G_PI);
   cairo_stroke(cr);

   /* draw horizontal line */
   cairo_set_source_rgb(cr, 0.77, 0.16, 0.13);
   cairo_set_line_width(cr, 6);
   cairo_move_to(cr, 80,160);
   cairo_line_to(cr, 200, 160);
   cairo_stroke(cr);

   return FALSE;
}

int main (int argc, char *argv[])
{
   GtkWidget *window;
   GtkWidget *da;

   gtk_init (&argc, &argv);

   window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
   g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);

   da = gtk_drawing_area_new();
   gtk_widget_set_size_request (da, WINDOW_WIDTH, WINDOW_HEIGHT);
   g_signal_connect (da, "draw", G_CALLBACK(draw_cb),  NULL);

   gtk_container_add (GTK_CONTAINER (window), da);
   gtk_widget_show(da);
   gtk_widget_show (window);

   gtk_main ();

   return 0;
}

References
http://www.cairographics.org/manual/index-all.html
http://developer.gnome.org/gtk3/3.4/gtk-migrating-2-to-3.html#id1527441
http://developer.gnome.org/gtk3/3.4/gtk-getting-started.html see the section "DRAWING"


Last edited by zerohour on Sun Jul 01, 2012 9:00 pm, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Sun Jun 24, 2012 1:06 am 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Gtk3 with CSS: GtkScale

Here's an example of styling a GtkScale using Gtk3 with CSS. There are some properties not listed in the official documentation that can be used to style this widget.
Attachment:
Scale.gif
Scale.gif [ 7.45 KiB | Viewed 19293 times ]

Code:
/* COMPILE WITH:
gcc -Wall -o scale1 `pkg-config --cflags --libs gtk+-3.0` scale1.c
*/

#include <gtk/gtk.h>
#include <string.h>  /* for css */

int main (int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *hscale;
  GtkWidget *hscale_align;
/*---- CSS ------------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*---------------------------*/

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_widget_set_size_request(window, 350, 100);
  gtk_window_set_title(GTK_WINDOW(window), "CSS Scale");
  g_signal_connect(G_OBJECT (window), "destroy", G_CALLBACK(gtk_main_quit), NULL);

  hscale = gtk_scale_new_with_range (GTK_ORIENTATION_HORIZONTAL, 0, 100, 1);
  hscale_align = gtk_alignment_new(0.50, 0.50, 1.00, 1.00);
  gtk_alignment_set_padding (GTK_ALIGNMENT(hscale_align),0,10,20,0);

  gtk_container_add (GTK_CONTAINER(window), hscale_align);
  gtk_container_add (GTK_CONTAINER(hscale_align), hscale);

/* ----------------- CSS ----------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);
  gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gsize bytes_written, bytes_read;

  const gchar* home = "/home/zerohour/scale1.css";

  GError *error = 0;
 
  gtk_css_provider_load_from_path (provider,
                                  g_filename_to_utf8(home, strlen(home), &bytes_read, &bytes_written, &error),
                                  NULL);
  g_object_unref (provider);
/* --------------------------------------------------------------------------------------------------------------------*/

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

The CSS File: scale1.css
Some properties have been included for your experimentation but intentionally commented out in order to show this unique look I created.
Code:
GtkWindow {
   background-color: rgba (0,0,0,1);
}

GtkScale {
   -GtkWidget-focus-line-width: 0;
   -GtkScale-slider-length: 40;
   -GtkRange-slider-width: 30;
   -GtkRange-trough-border: 4;
   -GtkScale-value-spacing: 10;
/*  background-color: white;  */
   color: green;
   font-size: 18;
/* border-color: red; */
    border-style: none;
/* border-width: 0; */
    border-radius: 8;
padding: 5;
}

GtkScale.slider {
background-image: -gtk-gradient(linear,
left top,
left bottom,
color-stop(0.0,rgba(50,89,134,1)),
color-stop(.50,rgba(70,135,188,1)),
color-stop(.51,rgba(59,121,175,1)),
color-stop(1.0,rgba(143,184,215,1)));
}

GtkScale.slider:hover {
background-image: -gtk-gradient(linear,
left top,
left bottom,
color-stop(0.0,rgba(31,127,237,1)),
color-stop(0.50,rgba(82,170,242,1)),
color-stop(0.51,rgba(63,159,243,1)),
color-stop(1.0,rgba(150,205,248,1)));
}

GtkScale.trough {
   background-color: burlywood;
}


References:
http://developer.gnome.org/gtk3/3.4/GtkCssProvider.html (See: Supported Properities)
http://developer.gnome.org/gtk3/3.4/GtkScale.html


Last edited by zerohour on Sat Jun 30, 2012 6:39 am, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Tue Jun 26, 2012 3:22 am 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Gtk3 with CSS: GtkCalendar

Here's an example of styling a calendar using gtk3 with CSS. A GtkCalendar is made up of several regions. In order to style them you need to know their names and locations. Below I've shown two pictures. The left image is the application while running. To the right are the various regions followed by the CSS property used on those regions and finally the corresponding color.

Note: The container widget I've used to pack the GtkCalendar into is a GtkGrid. I've used a GtkGrid because GtkHBox and GtkVbox have been phased out since version 3.2 and GtkBox will also eventually be going away. The phasing out of GtkBox isn't mentioned in the documentation for Gtkbox. It's only mentioned in the documentation for GtkHBox and GtkVbox for GTK versions 3.2 and above.
http://developer.gnome.org/gtk3/3.2/GtkHBox.html#gtk-hbox-new
http://developer.gnome.org/gtk3/3.2/GtkVBox.html#gtk-vbox-new

This page talks about how to change over from other containers such as GtkBox and GtkTable to GtkGrid.
http://developer.gnome.org/gtk3/3.4/gtk-migrating-GtkGrid.html

Attachment:
css_color_key.png
css_color_key.png [ 39.18 KiB | Viewed 19266 times ]

Code:
/*  Compile with:
*  gcc -Wall -o cal1 `pkg-config --cflags --libs gtk+-3.0` cal1.c
*/
#include <gtk/gtk.h>
#include <string.h>  /* for CSS */

int main( int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *calendar;
  GtkWidget *grid;

/*-- CSS ------------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*---------------------------*/

  gtk_init(&argc, &argv);

/*---------------- CSS ----------------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);
  gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gsize bytes_written, bytes_read;

  const gchar* home = "YourPathHere";  // your path, for instance: /home/zerohour/Documents/programming/cal1.css

  GError *error = 0;

  gtk_css_provider_load_from_path (provider,
                                   g_filename_to_utf8(home, strlen(home), &bytes_read, &bytes_written, &error),
                                   NULL);
  g_object_unref (provider);
/*-------------------------------------------------------------------------------------------------------------------------*/

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "Center");
  gtk_window_set_default_size(GTK_WINDOW(window), 230, 150);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
                           G_CALLBACK(gtk_main_quit), NULL);

  grid = gtk_grid_new ();

  calendar = gtk_calendar_new ();
  gtk_grid_attach (GTK_GRID(grid),
                   GTK_WIDGET(calendar),
                   0,
                   0,
                   1,
                   1);

  gtk_container_add (GTK_CONTAINER(window),grid);
  gtk_widget_show_all(window);
  gtk_main();
  return 0;
}


The CSS File: cal1.css
Code:
GtkWindow {
   background-color: black;
}

GtkCalendar {
   -GtkWidget-focus-line-width: 0;
   -GtkCalendar-vertical-separation: 2;   /* Separation between day of week header and main area, also affects height of month/year header */
   color: cornflowerblue; 
}

GtkCalendar.header {
    border-radius: 10;
    background-color: red;
    border-width: 0;
    color:  #4b0082;  /* x11 color "Indigo" (a dark purple)*/
}

GtkCalendar.view {
    border-style: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 15;
    border-bottom-left-radius: 15;
/*  border-width: 2; */
/*  padding: 10; */
    background-color: Burlywood; 
}

GtkCalendar.button {
    background-color: white;
    color: blue;
    border-radius: 10;
}

GtkCalendar.button:hover{
background-color: green;
}

GtkCalendar.highlight {
    background-color: DarkOrange; 
    color: DarkSlateGray;            
    border-radius: 5;
/*  padding: 0;  */
/*  border-width: 0;  */ 
}

GtkCalendar:selected {
    background-color: LightCyan; 
    color:    green; 
}


Last edited by zerohour on Mon Jul 09, 2012 3:30 am, edited 8 times in total.

Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Tue Jun 26, 2012 3:30 am 
Offline
Never Seen the Sunlight

Joined: Wed Sep 21, 2005 12:07 am
Posts: 563
Location: Portland, OR USA
zerohour, all these examples are awesome. Thanks for taking the time to post them.

_________________
Micah Carrick - Forum Administrator
http://www.micahcarrick.com


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Tue Jun 26, 2012 3:28 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Thank you very much. I appreciate it.


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Tue Jul 03, 2012 11:07 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Drawing with Cairo in GTK3 and CSS (Part 2)
Attachment:
cairo2.gif
cairo2.gif [ 10.33 KiB | Viewed 18004 times ]

This is an extension of the first Cairo drawing example. Here I've made the drawing area scrollable; added two buttons and made the scrollbar wider. Wider scroll bars can be useful for users with vision disabilities or when creating a user interface for a computer with a small touchscreen such as a PhoenixA20, OLinuXino or IGEP. (See references at bottom) I've used internal CSS for this example to keep it easier to follow and colored the different areas brightly so you can tell what CSS goes with what area. I've also listed all the pointers to the widgets individually in a hierarchy to help you better understand the packing arrangement.

CODE NOTES:

Everything in the window gets packed into a GtkGrid which is one column wide by 2 rows tall. You should avoid using GtkTable. It's been phased out since version 3.4 and shouldn't used in newly-written code.
http://developer.gnome.org/gtk3/stable/GtkTable.html

There's official GTK documentation to help you make the switch from other container widgets to GtkGrid.
http://developer.gnome.org/gtk3/stable/gtk-migrating-GtkGrid.html

The upper row in the grid contains the GtkDrawingArea which is packed into a GtkViewPort. The GtkViewPort is packed into a GtkScrolledWindow. Then the GtkScrolledWindow is packed into the upper row (row 0) of the GtkGrid.
The bottom row of the grid contains the two buttons. The buttons are first packed into a GtkButtonBox using gtk_button_box_new with it's orientation set to GTK_ORIENTATION_HORIZONTAL.
gtk_hbutton_box_new along with gtk_vbutton_box_new have been phased out since gtk version 3.2 and should not be used in newly-written code.
http://developer.gnome.org/gtk3/stable/GtkHButtonBox.html
The GtkButtonBox is packed into the bottom row (row 1) of the GtkGrid. Added space above and below the GtkButtonBox is provided by the following functions:
gtk_widget_set_margin_bottom()
gtk_widget_set_margin_top()

Quote:
GtkGrid doesn't have any custom child properties to specify per-child padding; instead you can use the "margin" property. You can also set different padding on each side with the "margin-left", "margin-right", "margin-top" and "margin-bottom" properties.
http://developer.gnome.org/gtk3/stable/ch28s03.html

Finally the GtkGrid with all of the other widgets inside it, is packed into the GtkWindow.
Code:
/* COMPILE USING:  gcc -Wextra -o cairo2 `pkg-config --cflags --libs gtk+-3.0` cairo2.c
*/

#include <gtk/gtk.h>

#define WINDOW_WIDTH  800
#define WINDOW_HEIGHT 480

static gboolean
draw_cb (GtkWidget *widget, cairo_t *cr, gpointer data)
{   
   cairo_set_source_rgb (cr, 1, 1, 1);
   cairo_paint (cr);
   
   /* draw rectangle */   
   cairo_set_source_rgb (cr, 0.42, 0.65, 0.80);
   cairo_set_line_width (cr,6);
   cairo_rectangle (cr, 3, 3, 100, 100);
   cairo_stroke (cr);

   /* draw circle */
   cairo_set_source_rgb (cr, 0.17, 0.63, 0.12);
   cairo_set_line_width (cr,2);
   cairo_arc (cr, 150, 210, 20, 0, 2*G_PI);
   cairo_stroke (cr);

   /* draw horizontal line */
   cairo_set_source_rgb (cr, 0.77, 0.16, 0.13);
   cairo_set_line_width (cr, 6);
   cairo_move_to (cr, 80,160);
   cairo_line_to (cr, 200, 160);
   cairo_stroke (cr);

   return TRUE;
}

int main (int argc, char *argv[])
{
   gtk_init (&argc, &argv);

   GtkWidget *window;
      GtkWidget *grid;
         GtkWidget *scrollwin;
               GtkWidget *da;
         GtkWidget *hbtnbox;
            GtkWidget *btn_back;
            GtkWidget *btn_home;

/*-- CSS ------------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*---------------------------*/

   window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
   gtk_window_set_title (GTK_WINDOW(window),"cairo2");

   g_signal_connect (window, "destroy",
                     G_CALLBACK (gtk_main_quit),
                     NULL);

   gtk_widget_set_size_request (window,
                                WINDOW_WIDTH,
                                WINDOW_HEIGHT);

   gtk_window_set_has_resize_grip (GTK_WINDOW(window), FALSE);

   da = gtk_drawing_area_new();
   gtk_widget_set_size_request (da, 1000, 400);

   g_signal_connect (da, "draw", G_CALLBACK(draw_cb), NULL);

   scrollwin = gtk_scrolled_window_new (NULL, NULL);
   gtk_widget_set_hexpand (GTK_WIDGET(scrollwin), TRUE);
   gtk_widget_set_vexpand (GTK_WIDGET(scrollwin), TRUE);

   gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW(scrollwin),
                                   GTK_POLICY_ALWAYS,
                                   GTK_POLICY_NEVER);

   hbtnbox = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL);
   gtk_button_box_set_layout ( GTK_BUTTON_BOX(hbtnbox), GTK_BUTTONBOX_CENTER );
   gtk_box_set_spacing (GTK_BOX(hbtnbox),60);
   gtk_widget_set_margin_bottom (GTK_WIDGET(hbtnbox), 20);
   gtk_widget_set_margin_top (GTK_WIDGET(hbtnbox), 20);

   btn_back = gtk_button_new_with_label ("Back");
   btn_home = gtk_button_new_with_label ("Home");

   gtk_widget_set_size_request (GTK_WIDGET(btn_back), 100, 45);
   gtk_widget_set_size_request (GTK_WIDGET(btn_home), 100, 45);

   gtk_box_pack_start (GTK_BOX(hbtnbox), btn_back, FALSE, FALSE, 0);
   gtk_box_pack_start (GTK_BOX(hbtnbox), btn_home, FALSE, FALSE, 0);

   gtk_scrolled_window_add_with_viewport (GTK_SCROLLED_WINDOW(scrollwin), da);

   grid = gtk_grid_new ();

   gtk_grid_attach (GTK_GRID(grid),
                    GTK_WIDGET(scrollwin),
                    0, 0, 1, 1);

   gtk_grid_attach (GTK_GRID(grid),
                    GTK_WIDGET(hbtnbox),
                    0, 1, 1, 1);

   gtk_container_add (GTK_CONTAINER (window), grid);

/*------------- CSS  --------------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);

  gtk_style_context_add_provider_for_screen (screen,
                                             GTK_STYLE_PROVIDER (provider),
                                             GTK_STYLE_PROVIDER_PRIORITY_USER);

  gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider),
                                    " GtkWindow {\n"                         
                                    "   background-color: black;\n"
                                    "}\n"
                                    " GtkRange {\n"                         
                                    "   -GtkRange-arrow-displacement-x: 8;\n"
                                    "   -GtkRange-arrow-displacement-y: 2;\n"
                                    "   -GtkRange-arrow-scaling: 1.0;\n"
                                    "   -GtkRange-slider-width: 40;\n"
                                    "   -GtkRange-stepper-size: 40;\n"
                                    "   -GtkRange-stepper-spacing: 0;\n"
                                    "   -GtkRange-trough-border: 1;\n"
                                    "   -GtkRange-trough-under-steppers: 0;\n"
                                    "}\n"
                                    " GtkRange.slider {\n"                         
                                    "   background-color: blue;\n"
                                    "}\n"
                                    " GtkRange.button {\n"
                                    "   background-color: green;\n"
                                    "   color: red;\n"
                                    "}\n"
                                    " GtkRange.trough {\n"
                                    "   background-color: burlywood;\n"
                                    "}\n"
                                    " GtkButton {\n"
                                    "   -GtkWidget-focus-line-width: 0;\n"
                                    "   color: black;\n"
                                    "   border-radius: 10px;\n"
                                    "   border-width: 1px;\n"
                                    "   background-color: dodgerblue;\n"
                                    "   font-size: 18px;\n"
                                    "}\n", -1, NULL);

  g_object_unref (provider);
/*----------------------------------------------------------------------------------------------------------------------*/

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

References:
--------------------------------------------------------------------------------------------------------------
PhoenixA20 microcontroller board
ARM Cortex-A7 dual-core (Allwinner A20)
Operating temperature (-20 ... 70℃ Deg) (-4 to 158F)
Price: approx. $65
http://www.anichips.com/news/phoenixa20-first-pico-itx-board-using-allwinner-soc-only-59
http://embeddedcomputer.nl/phoenixa20/phoenixa20-embedded-pico-itx-board.html
http://www.seeedstudio.com/depot/PhoenixA20-First-ARM-A7-PicoITX-board-p-1695.html

OLinuXino microcontroller boards
Price: 30 to 65 euros (approx. $42 to $92)
A10: (Cortex-A8 CPU 1GHz): https://www.olimex.com/Products/OLinuXino/A10/A10-OLinuXino-LIME/open-source-hardware
A13: (Cortex A8 processor at 1GHz): https://www.olimex.com/Products/OLinuXino/A13/A13-OLinuXino-WIFI/open-source-hardware
A20: (Cortex-A7 dual-core ARM): https://www.olimex.com/Products/OLinuXino/A20/A20-OLinuXino-MICRO/open-source-hardware
7'' & 10" resistive touchscreens available at the links above.
USA sellers:
http://www.mouser.com/ProductDetail/Olimex-Ltd/A13-OLINUXINO-WIFI/?qs=sGAEpiMZZMtfUM4gNaCsXt/8G7WT37Q7
http://www.digikey.com/product-detail/en/A13-OLINUXINO-WIFI/1188-1090-ND/3601083
http://microcontrollershop.com/product_info.php?cPath=154_170_556&products_id=5314
--------------------------------------------------------------------------------------------------------------

IGEP COM ELECTRON microcontroller board:
ARM CORTEX A8, 800Mhz or 1 Ghz
Price: 149 euros (approx. $206)
Features:
Operating temperature (-40 ... +85C Deg)
Size: 18 x 68,5 mm
http://shop.isee.biz/buy-online/processor-boards/igeptm-com-electron.html

IGEP NEW YORK expansion module:
Price: 29.00 euros (approx. $42)
Features:
Operating temperature (-40 ... +85C Deg)
Size: 68 x 26 mm
Power your module from +5Vdc source
3 Axis Accelerometer
Up to 44 GPIO signals
1 x SPI
2 x UART
1 x I2C
4 PWM
DSS Video interface
Fully Software supported in the processor BSP
https://www.isee.biz/products/igep-expansion-boards/igep-new-york

Touch screens: 7-inch resistive or 10-inch capacitive
http://www.chalk-elec.com/?page_id=1280#!/~/category/id=3094860&inview=product13727569&offset=0&sort=priceAsc


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Thu Jul 12, 2012 9:58 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
GTK3 with CSS: GtkNoteBook (Part2)
Attachment:
imagenote4.png
imagenote4.png [ 226.39 KiB | Viewed 17905 times ]

Here's an example of placing an image on each page of a GtkNoteBook using CSS. This is an extension to the first GtkNoteBook tutorial which is also in the tutorials section:
http://www.gtkforums.com/viewtopic.php?f=3&t=988&p=72092=Styling+a+Notebook+with+gtk3+and+css#p72092

Code:
/*  Compile with:
*  gcc -Wall -o imagenote2 `pkg-config --cflags --libs gtk+-3.0` imagenote2.c
*/

#include <gtk/gtk.h>

static gboolean
draw_cb_background (GtkWidget *widget, cairo_t *cr, gpointer data)
{
  GtkStyleContext *context;
  context = gtk_widget_get_style_context (widget);

  gtk_style_context_save (context);

  int width = gtk_widget_get_allocated_width( GTK_WIDGET(widget) );
  int height = gtk_widget_get_allocated_height( GTK_WIDGET(widget) );

  gtk_style_context_set_junction_sides (context, GTK_JUNCTION_CORNER_TOPLEFT);
  gtk_render_background (context, cr, 0, 0, (double)width, (double)height );

  gtk_style_context_restore (context);

  return TRUE;
}

int main (int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *grid;
  GtkWidget *mynotebook;
  GtkWidget *darea;
  GtkWidget *darea2;
  GtkWidget *darea3;
/*-- CSS --------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
/*----------------------*/
  gtk_init (&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_default_size(GTK_WINDOW(window), 512, 512);
  g_signal_connect (GTK_WIDGET (window), "destroy",
                    G_CALLBACK (gtk_main_quit), NULL);

  darea = gtk_drawing_area_new ();
  gtk_widget_set_hexpand (GTK_WIDGET(darea), TRUE);
  gtk_widget_set_vexpand (GTK_WIDGET(darea), TRUE);
  gtk_widget_set_name (darea, "notecover1");

  darea2 = gtk_drawing_area_new ();
  gtk_widget_set_hexpand (GTK_WIDGET(darea2), TRUE);
  gtk_widget_set_vexpand (GTK_WIDGET(darea2), TRUE);
  gtk_widget_set_name (darea2, "notecover2");

  darea3 = gtk_drawing_area_new ();
  gtk_widget_set_hexpand (GTK_WIDGET(darea3), TRUE);
  gtk_widget_set_vexpand (GTK_WIDGET(darea3), TRUE);
  gtk_widget_set_name (darea3, "notecover3");

  mynotebook = gtk_notebook_new ();
  gtk_widget_set_name (GTK_WIDGET(mynotebook), "notebook");
  gtk_notebook_set_tab_pos (GTK_NOTEBOOK (mynotebook), GTK_POS_TOP);

  gtk_notebook_set_show_border(GTK_NOTEBOOK (mynotebook),FALSE);

  grid = gtk_grid_new();
  gtk_grid_attach (GTK_GRID(grid), GTK_WIDGET(darea), 0,0,1,1);
  GtkWidget *report_label = gtk_label_new ("FirstTab");
  gtk_widget_set_name (GTK_WIDGET(report_label), "first_tab_label");
  gtk_notebook_insert_page ( GTK_NOTEBOOK(mynotebook),  GTK_WIDGET(grid), GTK_WIDGET(report_label), -1 );

/*----------- PAGE 2 -------------------------------------------------------------------------------------------------*/
  GtkWidget *grid2 = gtk_grid_new ();
  gtk_grid_attach (GTK_GRID(grid2), GTK_WIDGET(darea2), 0,0,1,1);
  GtkWidget *custom_report_label = gtk_label_new ("SecondTab");
  gtk_widget_set_name (GTK_WIDGET(custom_report_label), "second_tab_label");
  gtk_notebook_insert_page ( GTK_NOTEBOOK(mynotebook),  GTK_WIDGET(grid2), GTK_WIDGET(custom_report_label), -1 );
/*--------------------------------------------------------------------------------------------------------------------*/

/*----------- PAGE 3 -------------------------------------------------------------------------------------------------*/
  GtkWidget *grid3 = gtk_grid_new ();
  gtk_grid_attach (GTK_GRID(grid3), GTK_WIDGET(darea3), 0,0,1,1);
  GtkWidget *main_win_settings_label = gtk_label_new ("ThirdTab");
  gtk_widget_set_name (GTK_WIDGET(main_win_settings_label), "third_tab_label");
  gtk_notebook_insert_page ( GTK_NOTEBOOK(mynotebook),  GTK_WIDGET(grid3), GTK_WIDGET(main_win_settings_label), -1 );
/*--------------------------------------------------------------------------------------------------------------------*/

  g_signal_connect (darea, "draw", G_CALLBACK (draw_cb_background), NULL);
  g_signal_connect (darea2, "draw", G_CALLBACK (draw_cb_background), NULL);
  g_signal_connect (darea3, "draw", G_CALLBACK (draw_cb_background), NULL);

/*----- CSS ----------------------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);
  gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_USER);

  gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider),
                                               " GtkWindow {\n" /* or use .background */                       
                                               "   background-color: black;\n"
                                               "}\n"
                                                " GtkNotebook {\n"   /* or use .notebook */                 
                                                "   -GtkWidget-focus-line-width: 0;\n"
                                                "   padding: 0 0 0 0;\n"   
                                                "   -GtkNotebook-tab-overlap: 0;\n" 
                                                "   border-width: 0;\n"               
                                                "}\n"
                                                "GtkGrid {\n" 
                                                "   padding: 0 0 0 0;\n"
                                                "   border-radius: 0;\n"                     
                                                "}\n"                                                   
                                                "GtkNotebook tab:nth-child(first) {\n" 
                                                "   background-color: blue;\n"
                                                "   padding: 10 20 10 20;\n"
                                                "   color: red;\n"                         
                                                "   font: Sans 12;\n"
                                                "   border-radius: 15;\n"                     
                                                "}\n"
                                                "GtkNotebook tab:nth-child(even) {\n" 
                                                "   background-color: orange;\n"
                                                "   padding: 10 20 10 20;\n"         
                                                "   color: white;\n"                     
                                                "   font: Serif 18;\n"
                                                "   border-radius: 15;\n"               
                                                "}\n"
                                                "GtkNotebook tab:nth-child(last) {\n" 
                                                "   background-color: red;\n"
                                                "   padding: 10 20 10 20;\n"
                                                "   font: Serif italic 10;\n"
                                                "   border-radius: 15;\n"
                                                "}\n"
                                                ".grip {\n"
                                                 "   background-color: white;\n"
                                                "}\n"
                                                " #notecover1 {\n"                              
                                                  "      background-image: url('Ubuntu_Logo.png');\n" 
                                                "}\n"
                                                " #notecover2 {\n"                              
                                                  "      background-image: url('glassubuntulogo.jpg');\n" 
                                                "}\n"
                                                  " #notecover3 {\n" 
                                                  "      background-image: url('gtkcube.png');\n"
                                                  "}\n", -1, NULL);
  g_object_unref (provider);
/*---------------------------------------------------------------------------------------------------------------------*/

  gtk_container_add(GTK_CONTAINER(window),mynotebook);
  gtk_widget_show_all (window);
  gtk_main ();
  return 0;
}


References:
Gtk cube image in .svg format which is scalable to any size. Right click or File -> save page as. Then import it into a graphics program such as Inkscape. Scale it to the desired size and save it as a .png.
http://www.clker.com/cliparts/b/0/0/b/11949995711012521407gtk.svg


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Tue Jul 17, 2012 6:34 am 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Status Icons with GTK+3 and CSS: part 1

GtkStatusIcon is a type of icon that's displayed in the area of the desktop called the "system tray" in Windows or "Panel" in Linux.

Before starting this tutorial it's very helpful if you already know how to create a menu. I would start with the tutorial at Zetcode listed in the references section at the bottom of this tutorial. There are also examples in the gtk source code, menus.c in the "gtk-demo" folder and testmenubars.c in the "tests" folder.

The "system tray" is normally used for transient icons (A software object with a short and limited lifetime which is not saved for later reuse.) It indicates some special state. For example, a system tray icon might appear to tell the user that they have new mail, or have an incoming instant message. Desktop video recording applications such as Gtk-RecordMyDesktop and RecordItNow for Ubuntu use a status icon. The basic idea is that creating an icon in the notification area is less annoying than popping up a dialog.

The icon can have a tooltip. A tooltip is when a user hovers the mouse pointer over an item, without clicking it, and small box with information about that item being hovered over appears. The user can interact with it by activating it or popping up a context menu. Sometimes clicking on a status icon will show a pop-up menu and other times you might get a larger window attached to it like the calendar in Ubuntu. Other times it might launch a seperate detached window with more options.

Critical information should not solely be displayed in a GtkStatusIcon, since it may not be visible (e.g. when the user doesn't have a notification area on their panel). This can be checked with gtk_status_icon_is_embedded(). http://developer.gnome.org/gtk3/stable/GtkStatusIcon.html#GtkStatusIcon.description

A GtkStatusIcon is not a GtkWidget, it sits above GtkWidget in the object hierarchy. It's just a GObject. It's object hierarchy is:

GObject
+----GtkStatusIcon

Because of it's hierarchy, creating a GtkStatusIcon is a bit different than working with other widgets. It doesn't get packed into a container widget or even a main window. Unlike a menu, there's no menu bar.

Here we'll create a GtkStatusIcon that creates a pop-up menu then later use the CSS feature in gtk3 to style it.
Example 1 is a minimum working example. It shows the icon in the "system tray". When you left click on it, it closes. No menu is displayed in this example.

Code:
/* COMPILE WITH:  gcc -Wall -o icon1 `pkg-config --cflags --libs gtk+-3.0` icon1.c
*/

#include <gtk/gtk.h>

int main(int argc, char *argv[])
{
   GtkStatusIcon *icon;

   gtk_init (&argc, &argv);

   icon = gtk_status_icon_new_from_stock (GTK_STOCK_MEDIA_PLAY);

   g_signal_connect(G_OBJECT(icon),
                    "activate",
                    G_CALLBACK(gtk_main_quit),
                    NULL);
   
   gtk_main();
   return 0;
}

References:
http://developer.gnome.org/gtk3/stable/GtkStatusIcon.html
http://zetcode.com/tutorials/gtktutorial/menusandtoolbars/
http://git.gnome.org/browse/gtk+/tree/demos/gtk-demo/menus.c
http://git.gnome.org/browse/gtk+/tree/tests/testmenubars.c
http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.html (The built-in icons available to use)


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Tue Jul 17, 2012 5:38 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Status Icon: Part 2

In example 2 we'll add a callback function. This callback function will create a popup menu with two menu items when the user right clicks on the status icon. Add the following code between #include <gtk/gtk.h> and int main(int argc, char *argv[]) and save the file as: icon2.c

Code:
static void cb_right_click(GtkStatusIcon *icon, int button, int time, gpointer data)
{
   GtkWidget *menu = NULL;

   if (menu == NULL)
   {
      menu = gtk_menu_new ();
      gtk_widget_set_name (GTK_WIDGET(menu),"mymenu");

      GtkWidget *item1 = gtk_menu_item_new_with_label ("About");
      GtkWidget *item2 = gtk_menu_item_new_with_label ("Quit");

      gtk_menu_shell_append (GTK_MENU_SHELL(menu),
                             GTK_WIDGET(item1));

      gtk_menu_shell_append (GTK_MENU_SHELL(menu),
                             GTK_WIDGET(item2));

      gtk_widget_show_all (menu);

      gtk_menu_popup (GTK_MENU(menu),
                     NULL,
                     NULL,
                     gtk_status_icon_position_menu,
                     icon,
                     button,
                     time);

      g_signal_connect (G_OBJECT(item2),
                       "activate",
                       G_CALLBACK(gtk_main_quit),
                       NULL);
   }
}

Like other examples we create a pointer to the widget we want to create but here we set it to NULL. (this is explained in the next step)
GtkWidget *menu = NULL;

Test weather the menu has already been created or not using the "if" statement.
if (menu == NULL)

A result of true, will allow the code to execute what's in the body of the "if" statement. The body first creates the menu.
menu = gtk_menu_new ();

Create the two menu items, "About", and "Quit"
GtkWidget *item1 = gtk_menu_item_new_with_label("About");
GtkWidget *item2 = gtk_menu_item_new_with_label("Quit");


Add the two menu items to the menu:
gtk_menu_shell_append(GTK_MENU_SHELL(menu), item1);
gtk_menu_shell_append(GTK_MENU_SHELL(menu), item2);


Show the menu:
gtk_widget_show_all(menu);

Normally a pop-up menu would be displayed where ever your mouse pointer is. gtk_menu_popup() will will make the pop-up menu be displayed right below the status icon. The second and third parameters are if you have a parent menu and parent menu item. Here we don't have either so we set them both to "NULL". The third parameter is used to tell the menu how to position itself compaired to the icon. The fifth parameter, button tells which mouse button was pressed. The last parameter, time is a timestamp. It tells what time the mouse button press event happened. All events have a timestamp that are used to keep track of the time that the event happened.

gtk_menu_popup(GTK_MENU(menu),
NULL,
NULL,
gtk_status_icon_position_menu,
icon,
button,
time);


Connect the "activate" signal of the menu item "Quit" to the gtk_main_quit() function so the application will close when the user selects the "Quit" menu item.
g_signal_connect(G_OBJECT(item2), "activate", G_CALLBACK(gtk_main_quit), NULL);


Top
 Profile  
 
 Post subject: Re: Gtk+ Tutorials & Resources
PostPosted: Tue Jul 17, 2012 6:25 pm 
Offline
GTK+ Guru

Joined: Fri Mar 25, 2011 5:16 pm
Posts: 177
Location: USA
Status Icon Part 3
Attachment:
icon3.png
icon3.png [ 11.98 KiB | Viewed 17754 times ]

In example 3 we will style the menu using CSS. Add the following to the code just above the line: gtk_main(); and save the file as icon3.c

Code:
/*---------------- CSS ----------------------------------------------------------------------------------------------------*/
  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);

  gtk_style_context_add_provider_for_screen (screen,
                                             GTK_STYLE_PROVIDER (provider),
                                             GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gsize bytes_written, bytes_read;

  const gchar* home = "YourPathHere"; /* for instance /home/zerohour/gtk/programming/GtkStatusIcon/icon3.css   

  GError *error = 0;

  gtk_css_provider_load_from_path (provider,
                                   g_filename_to_utf8 (home, strlen(home),
                                   &bytes_read,
                                   &bytes_written,
                                   &error),
                                   NULL);

  g_object_unref (provider);
/*-------------------------------------------------------------------------------------------------------------------------*/

Style Sheet: Using CSS Selectors

Now we'll create the CSS file also called the style sheet. Create a new file, add the following code and save it as icon3.css

Code:
#mymenu {   
   color: red;   
   background-color: white; 
   font-weight:bold;
}

Since we named the menu using, gtk_widget_set_name (GTK_WIDGET(menu),"mymenu"); we can refer to it in the CSS using that name preceded by # which is called the ID selector.
http://www.w3.org/TR/css3-selectors/#id-selectors

Now we need to style the hover states for the labels in the menu items:
To only match a widget when it occurs inside some other widget, write the two selectors after each other, separated by whitespace. Example:
GtkToolBar GtkButton
This matches all GtkButton widgets that occur inside any GtkToolBar.

If we just did the following:
GtkMenu GtkLabel:hover{
color: yellow;
}


This would match any GtkLabel that was inside any GtkMenu. But if we later added another GtkMenu somewhere in our application that would be affected as well. So what we need here is to add the name of this particular menu. Fortunately we named it mymenu in the C code, so we use:
#mymenu GtkLabel:hover{
color: yellow;
}


Now we need to style the background color of the menu item itself using:
#mymenu GtkMenuItem:hover{
background-color: red;;
}


An equivalent way of doing this would be:
#mymenu > GtkMenuItem:hover {
background-color: red;
}


The > is the called the child selector. A child selector matches when an element is the child of some element.
http://www.w3.org/TR/CSS2/selector.html#child-selectors


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 38 posts ]  Go to page Previous  1, 2, 3  Next

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