Tutorial 3 - Programming GTK GUIs using gtkIOStream


3 posts
by flatmax » Thu Feb 02, 2017 9:41 am
Hi again,

gtkIOStream is a set of C++ headers which enable you to make GTK GUI programs in a very trivial manner.

This tutorial 3 will begin to explain "packing" a term which is used to layout your widgets in a desired manner in your 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 2 : Shows you how to load your first GUI widget into a GtkInterface dialog.
Tutorial contents can be found here.

Lets begin by making sure that we are in the correct path location before we start, for these tutorials, we assume gtkiostream-1.5.0 is in your home directory. You can either use the command "cd ~" or simply "cd" to get to your home directory.

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 learn the first lessons about packing widgets into other widgets. Packing is the way we layout dialogs and by packing widgets in a programmatic way (rather then using a GUI tool to help us design GUIs) we can create GUIs which are functionally very powerful in their ability to change dynamically. It also becomes far easier to programmatically layout GUIs, as you can do it by writing a few lines of code effectively and efficiently.

We will use a vertical packing box in this tutorial to demonstrate the initial principles of packing.

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:34 am, edited 3 times in total.
Sound card for the Raspberry Pi with inbuilt microphone : http://www.audioinjector.net
Audio Inector Octo multitrack recording and Surround GPIO sound card : http://www.audioinjector.net
User avatar
Posts: 247
Joined: Thu May 26, 2016 10:36 pm
by flatmax » Thu Feb 02, 2017 9:59 am
As for the previous tutorials, we will need to include the header file which defines the vertical packing class we require. We will then use a few lines of code to instantiate the class and output widgets into other widgets using the "<<" operator.

Lets start again by opening our favourite text editor and writing the following code to the file VBoxPacking.C
Code: Select all
#include <gtkInterface.H>
#include <Labels.H>
#include <Box.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 and load three labels
  labs<<"Hello world !"
         <<"You are programming me"
         <<"thank you";

  VBox vBox; // Instantiate the vertical packing box class                     
  vBox<<labs; // Load the labels into the box                                   
  vBox.show(); // Show the box                                                 

  topWindow<<vBox;

  gtk_main(); // run GTK+                                                       
}


Lets look at the new lines of code we have added to the code we used in Tutorial 2.

You will notice in the middle of the file that we now load 3 string labels into our Labels class :
Code: Select all
  labs<<"Hello world !"
         <<"You are programming me"
         <<"thank you";
This can equivalently be written more compactly like so :
Code: Select all
  labs<<"Hello world !"<<"You are programming me"<<"thank you";
These are going to be the three label widgets which we will vertically pack.

In order for the g++ to be able to access the Box class definitions from their header file we include it :
Code: Select all
#include <Box.H>


We then instantiate the variable vBox, of type VBox :
Code: Select all
  VBox vBox;
Note that my preference is to use camel case and use upper case first letters to delineate a class type (the 'V' in the type VBox). I then use a lower case first letter to delineate a variable (the 'v' in the variable vBox). You will also notice that this is a vertical packing box as opposed to a horizontal packing box. We know this because the first letter of the type VBox is 'V' for vertical.

We want to vertically pack the 3 labels into our vertical packing box. This is trivially done by outputting the labels class into the vertical packing box like so :
Code: Select all
  vBox<<labs;
This seemingly simple output "<<" operation does the heavy lifting for you and all of your labels will be packed into the vertical packing box.

We also want the vertical packing box to be visible on startup :
Code: Select all
 vBox.show();
By calling the Box's show() method, it shows the Box. If you want to hide it you can call the method hide() !

Finally we pack the vertical packing box into the GtkInterface top window like so :
Code: Select all
  topWindow<<vBox;


This will display, as you expect, the three labels vertically in the top window.
Sound card for the Raspberry Pi with inbuilt microphone : http://www.audioinjector.net
Audio Inector Octo multitrack recording and Surround GPIO sound card : http://www.audioinjector.net
User avatar
Posts: 247
Joined: Thu May 26, 2016 10:36 pm
by flatmax » Thu Feb 02, 2017 10:03 am
To compile, we change the input and output file names of the same compile command we have been using in the previous tutorials. It now becomes;
Code: Select all
g++ VBoxPacking.C -o VBoxPacking `pkg-config gtk+-2.0 --cflags --libs` -Igtkiostream-1.5.0/include


Which we execute using the command : ./VBoxPacking

You should see the following dialog open up:
VBoxPacking.png
Tutorial 3 : gtkIOStream
VBoxPacking.png (8.48 KiB) Viewed 841 times
Sound card for the Raspberry Pi with inbuilt microphone : http://www.audioinjector.net
Audio Inector Octo multitrack recording and Surround GPIO sound card : http://www.audioinjector.net
User avatar
Posts: 247
Joined: Thu May 26, 2016 10:36 pm