Tutorial 1 - Programming GTK GUIs using gtkIOStream


3 posts
by flatmax » Tue Jan 31, 2017 9:10 am
This tutorial follows on from Tutorial 0. If you haven't read/implemented that tutorial it is recommeded you start there.

Tutorial Contents can be found here.

gtkIOStream is a set of C++ headers which enable you to make GTK GUI programs in a very trivial manner. As headers are inlined by the preprocessor, gtkiostream generates standard GTK C code at compile time. It is not strictly a C++ implementation of GTK, more a set of 'wrappers' around standard GTK C code which trivialises the generation of GTK GUIs.

At this point in time, you have installed prerequisites and have gtkiostream downloaded and unarchived. For the purpose of this tutorial it resides in ~ (/home/pi).
Code: Select all
pi@raspberrypi:~ $ ls -d ~/gtkiostream-1.5.0
/home/pi/gtkiostream-1.5.0


Before we beign, we should mention how to comment your code. Code commenting is very important because it allows you to explain what you are doing to other authors - even you will require the comments when you return to code years later !
To make comments in C++ (and some C code allows you to do this too) you can do line or block comments.
Line comments are made using the "//" characters. You can insert them anywhere on the line and anything after them will be excluded by the c++ preprocessor. So for example :
Code: Select all
int count=10; // This variable starts at 10 and counts down
You can see that I have put a comment starting with the "//" the comment tells me that this variable will count down from 10 !

If we want to comment out a block of code, we can do that by using the "/*" as an opening comment bracked and "*/" as a closing comment bracket. Everything between those brackets will be ignored by the c++ preprocessor. So for example :
Code: Select all
int ten=10;
/* for (ten; ten>=0; ten--)
    ten;
*/
The for loop has been commented out here because it is inside the brackets /* ... */.

Now that you have been introduced to comments, we will be able to read all the code which follows. Back to the tutorial.

This tutorial will have you create a program which opens an empty top window dialog.
Matt
p.s. Ammend to this thread any questions or help requests.
Last edited by flatmax on Wed Feb 08, 2017 9:31 am, edited 2 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 » Tue Jan 31, 2017 9:41 am
Lets begin ...

We will work in the ~ directory (/home/pi), lets get there.
Code: Select all
cd ~


Writing our first simple bit of code

In your favourite text editor (mine is emacs :D ) lets edit the source code file.

Save the following in your home directory and call the file EmptyTopWindow.C
Code: Select all
#include <gtkInterface.H>

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

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

  GtkInterface topWindow; // Create the top box                                 

  gtk_main(); // run GTK+                                                       
}
 


Lets step through each line of the code to understand what is happening.
Code: Select all
#include <gtkInterface.H>
This line includes the gtkIOStream GtkInterface Class. This class defines the top window widget which holds all of your GUI widgets. Oh by the way, a "widget" is a GUI element. In this case the widget is a dialog window. In GTK the widget is of type GtkWidget and it is defined for you inside the GtkInterface class.

Code: Select all
int main(int argc, char *argv[]){
This line defines the beginning of your main program and is standard for both C and C++. The two variables argc and argv will contain any command line arguments you pass to your executable. For now we will not worry about them.

Code: Select all
  gtk_init( &argc, &argv );
This line initialises the GTK C library, it is defined by GTK. Now that GTK is initialised, we can start creating our GUIs.

Code: Select all
  GtkInterface topWindow;
This line sets up the empty GTK dialog, the top box which in future tutorials we will pack all sorts of GUI widgets like buttons, sliders and other things !

At this point in the program, nothing is showing and no dialogs exist. This is because we need to enter the GTK main loop which handles EVERYTHING GTK !

Code: Select all
  gtk_main();
This line runs the GTK main loop which handles rendering and interaction of widgets, as well as many other things.

Finally we close our main program with the "}".
Last edited by flatmax on Thu Feb 02, 2017 10:16 am, edited 2 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 10:15 am
Now it is time to compile the program

In a similar manner to Tutorial 0, we will call the compile command, but this time we will compile our file EmptyTopWindow.C to the executable EmptyTopWindow and it will land in our current directory.

Code: Select all
g++ EmptyTopWindow.C -o EmptyTopWindow `pkg-config gtk+-2.0 --cflags --libs` -Igtkiostream-1.5.0/include

Note we have changed the file names to reflect the input and output files correctly. We have also changed the path of the include directory for the gtkiostream headers to gtkiostream-1.5.0/include.

If everything went well, you should be able to run ./EmptyTopWindow.
Code: Select all
pi@raspberrypi:~ $ ./EmptyTopWindow

The attachment EmptyTopWindow.png is no longer available

An empty GUI dialog window should have poped up. If you saw this, you are on track. Press ctl-c in the command line to exit the dialogue.
EmptyTopWindow.png
Tutorial 1 : gtkIOStream
EmptyTopWindow.png (4.01 KiB) Viewed 1288 times

Matt
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