User avatar
flatmax
Posts: 318
Joined: Thu May 26, 2016 10:36 pm

STICKY: Tutorial 2 - Programming GTK GUIs using gtkIOStream

Wed Feb 01, 2017 8:48 am

gtkIOStream is a set of C++ headers which enable you to make GTK GUI programs in a very trivial manner. As they are headers they are inlined and resolve down to standard GTK C code by the preprocessor.

This tutorial 2 shows you how to load your first GUI widget into a GtkInterface dialog.
Tutorial 0 : Sets up prerequisites and introduces/tests that your compile system works.
Tutorial 1 : Explains the main program and shows you how to get an empty dialog up on the screen.
Tutorial Contents can be found here.

Lets begin by making sure that we are in the correct path location before we start :

Code: Select all

pi@raspberrypi:~ $ ls -d ~/gtkiostream-1.5.0
/home/pi/gtkiostream-1.5.0
pi@raspberrypi:~ $ pwd
/home/pi
The location of gtkiostream is in the home directory of the user pi (cd ~ if you aren't there and want to get there). Our current directory (pwd) is /home/pi. Great gtkiostream-1.5.0 is in our current directory and we are ready to start.

In this tutorial we are going to create a label widget which will contain a text string. We are then going to load the label into our GtkInterface top window. Remember that we load widgets in a similar way to using iostreams (with the << operator).

Matt
p.s. Please reply to this thread with any bug fixes, questions or help requests.
Last edited by flatmax on Wed Feb 08, 2017 9:31 am, edited 4 times in total.
Zero sound card for the Pi - live now on kickstarter : http://kck.st/2rwkQMH
Sound card for the Raspberry Pi with inbuilt microphone : http://www.audioinjector.net
Audio Inector Octo multitrack GPIO sound card : http://www.audioinjector.net

User avatar
flatmax
Posts: 318
Joined: Thu May 26, 2016 10:36 pm

Re: Tutorial 2 - Programming GTK GUIs using gtkIOStream

Wed Feb 01, 2017 9:01 am

The basic way to create a GUI widget, whether it is a slider, button, label (or whatever!) is to first instantiate it. For the label class we do that like so;

Code: Select all

Labels labs;
This creates a variable labs which is of type Labels. The Labels class holds all of the labels for you and is easy to add labels to with the << operator.

For example, lets do "Hello world !" by creating it as a label and adding it to the GtkInterface top window.

Code: Select all

labs<<"Hello world !";
There you go, as easy as that ! By outputting a string through the labs variable, it creates a GtkLabel (if you look in the header file Labels.H you will see it calls the GTK C function gtk_label_new to create the label).

Finally we add the label present in the labs variable to the top window, again with the << operator.

Lets write the complete main program now. In your favourite text editor (some people like gedit) create a new file and call it OneLabelWidget.C and add the following code to it.

Code: Select all

#include <gtkInterface.H>
#include <Labels.H>

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

  gtk_init( &argc, &argv ); // init GTK                                         

  GtkInterface topWindow; // Create the top box                                 

  Labels labs; // Instantiate the Labels class                                  
  labs<<"Hello world !"; // Add the string as a label.                          

  topWindow<<labs.getWidget();

  gtk_main(); // run GTK+                                                       
}
Most of the code in this example was described line by line in Tutorial 1. There are 4 new lines of code in this file, lets go through them one by one.

Firstly to have access to a class we need to include the C++ code which defines it with the include statement.

Code: Select all

#include <Labels.H>
We include the Labels.H file which defines the Labels class.

As previously mentioned, instantiate the labs variable of type Labels.

Code: Select all

  Labels labs;
We then add the string "Hello World !" to the labels class and it creates the GtkLabel widget for us.

Code: Select all

  labs<<"Hello world !";
Our widget now exists and can be added to the top window.

To load or add or "pack" classes or widgets to other widgets, normally you can simply use the << operator. In this case, we need to actually specify the widget we want to show and to do that we use the getWidget() method. This getWidget method is available with almost all of the gtkiostream classes as it is required some times - this is one of those times !

Code: Select all

  topWindow<<labs.getWidget();
There we are, we packed the GtkLabel widget into the GtkInterface top window.

When the last function is called (gtk_main) the top window is shown and we can see our label.

Now we need to compile our main program and execute it.
Last edited by flatmax on Thu Feb 02, 2017 10:05 am, edited 2 times in total.
Zero sound card for the Pi - live now on kickstarter : http://kck.st/2rwkQMH
Sound card for the Raspberry Pi with inbuilt microphone : http://www.audioinjector.net
Audio Inector Octo multitrack GPIO sound card : http://www.audioinjector.net

User avatar
flatmax
Posts: 318
Joined: Thu May 26, 2016 10:36 pm

Re: Tutorial 2 - Programming GTK GUIs using gtkIOStream

Wed Feb 01, 2017 9:05 am

To compile, we change the input and output file names of the same compile command we have used in Tutorial 1. It now becomes;

Code: Select all

g++ OneLabelWidget.C -o OneLabelWidget `pkg-config gtk+-2.0 --cflags --libs` -Igtkiostream-1.5.0/include
Which we execute using the command : ./OneLabelWidget

You should see the following dialog open up:
OneLabelWidget.png
Tutorial 2 : gtkIOStream
OneLabelWidget.png (5.44 KiB) Viewed 3350 times
Zero sound card for the Pi - live now on kickstarter : http://kck.st/2rwkQMH
Sound card for the Raspberry Pi with inbuilt microphone : http://www.audioinjector.net
Audio Inector Octo multitrack GPIO sound card : http://www.audioinjector.net

Return to “Graphics programming”

Who is online

Users browsing this forum: No registered users and 3 guests