Gtk+ Tutorials & Resources

DDZ · **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!

zerohour · **Posted:** Mon Jan 30, 2012 10:59 pm

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

DDZ · **Joined:** Fri Jan 27, 2012 3:49 pm **Posts:** 2

OK, thank you anyway! :-)

zerohour · **Posted:** Fri Jun 08, 2012 6:21 pm

Styling a GtkTextView with Gtk3 and Css:

Attachment:

GtkTextView.png [ 26.88 KiB | Viewed 6524 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);
}

zerohour · **Posted:** Fri Jun 08, 2012 6:59 pm

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

zerohour · **Posted:** Mon Jun 11, 2012 6:52 am

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 [ 88.82 KiB | Viewed 6725 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 [ 6.1 KiB | Viewed 6732 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)
{   
   /* Connect the GtkDrawingArea to the current cairo context */
   cr = gdk_cairo_create( gtk_widget_get_window (widget));

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

   /* free cr and all associated resources */
   cairo_destroy(cr);

   return FALSE;
}

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

    GtkWidget *window;
   GtkWidget *da;

   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"

zerohour · **Posted:** Sun Jun 24, 2012 1:06 am

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 [ 7.45 KiB | Viewed 6785 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

zerohour · **Posted:** Tue Jun 26, 2012 3:22 am

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.1 and above.
http://developer.gnome.org/gtk3/3.4/GtkHBox.html#gtk-hbox-new
http://developer.gnome.org/gtk3/3.4/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 [ 39.18 KiB | Viewed 6758 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;  
}

Micah Carrick · **Posted:** Tue Jun 26, 2012 3:30 am

zerohour, all these examples are awesome. Thanks for taking the time to post them.

zerohour · **Posted:** Tue Jun 26, 2012 3:28 pm

Thank you very much. I appreciate it.

zerohour · **Posted:** Tue Jul 03, 2012 11:07 pm

Drawing with Cairo in GTK3 and CSS (Part 2)

Attachment:

cairo2.gif [ 10.33 KiB | Viewed 5496 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 A13-OLinuXino or IGEP. (See references at bottom) I've used internal CSS for this example to keep it easier to follow. I've coloured 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)
{   
   cr = gdk_cairo_create ( gtk_widget_get_window (widget));
   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);

   cairo_destroy (cr);
   return TRUE;
}

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

   GtkWidget *window;
      GtkWidget *grid;
         GtkWidget *scrollwin;
            GtkWidget *view;
               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);

   view = gtk_viewport_new (NULL,NULL);

   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: 10;\n"
                                    "   border-width: 1;\n"
                                    "   background-color: dodgerblue;\n"
                                    "   font-size: 18;\n"
                                    "}\n", -1, NULL);

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

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

References:

ARM CORTEX-A8, 1GHZ microcontroller board:
https://www.olimex.com/Products/OLinuXino/A13/
A13-OLinuXino: 512 MB RAM, 45 euros and 55 euros for WIFI model. "$58 and $72"
A13-OLinuXino-MICRO: 256 MB RAM, 35 euros "$46"
7'' (480x800) resistive touchscreen with backlight, (Innolux AT070TN9X) 55 euros available at the link 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, 720Mhz or 1 Ghz
79.00 euros
Features:
Industrial grade (-40 ... +85C Deg)
Size: 18 x 68,5 mm
Integrated antenna and connector for external antenna
1 x USB 2.0 OTG (USB 2.0)
MicroSD card reader
Expansion: USB, DDS, Camera signals, I/O, uart, SPI, McBSP, I2C, keypad ...
Expansion: GPMC lines.
2 x 70 pin Expansion Connectors
2 x 27 pin Expansion Connectors
USB Powered, standalone mode
http://shop.isee.biz/buy-online/processor-boards/igeptm-com-electron.html

IGEP NEW YORK expansion module:
29.00 euros
Features:
Industrial grade (-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
http://shop.isee.biz/igeptm-new-york.html

7 inch touch screen for IGEP COM ELECTRON (110 euros)
http://shop.isee.biz/buy-online/accesories/tft-24-bits-seiko-7.html

10-inch, 1024 x 600, capacitive
http://www.chalk-elec.com/?page_id=1280#ecwid:category=0&mode=product&product=7703686

zerohour · **Posted:** Thu Jul 12, 2012 9:58 pm

GTK3 with CSS: GtkNoteBook (Part2)

Attachment:

imagenote4.png [ 226.39 KiB | Viewed 5397 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

zerohour · **Posted:** Tue Jul 17, 2012 6:34 am

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)

zerohour · **Posted:** Tue Jul 17, 2012 5:38 pm

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

zerohour · **Posted:** Tue Jul 17, 2012 6:25 pm

Status Icon Part 3

Attachment:

icon3.png [ 11.98 KiB | Viewed 5246 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 the 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

GTK+ Forums

Gtk+ Tutorials & Resources

Who is online