Tutorial 0 - Programming GTK GUIs using gtkIOStream


15 posts
by flatmax » Tue Jan 31, 2017 12:52 am
gtkIOStream is a set of C++ headers which enable you to make GTK GUI programs in a very trivial manner. The nice thing about gtkIOStream is that they are only header files, this makes distribution easier, as you don't need to link against foreign libraries.

Tutorial Contents

The basic concept is to make building guis similar to using the iostream operators ... for example in C++ to print a string to the console you type the following nice and simple piece of code :
Code: Select all
cout << "this is a message"<<endl;

What is nice about iostream is that it handles conversion of types as appropriate. For example the following prints "number 10" followed by a new line :
Code: Select all
int n=10; // create the number as an integer
cout <<"number "<<n<<endl;

In a similar manner, gtkiostream allows you to build GUIs as if they were iostreams !

For example, to show labels in a GUI dialog you would do the following :
Code: Select all
Labels labs; // create a labels list
labs<<" this is a label"; // Load a string in as a label

Window topWindow; // Create the top box
topWindow << labs;

There you have it, compile that and start the binary, you will see a dialog with the string label in it.

I would like to get you started in creating GTK GUIs using gtkiostream - like a pro :) Please continue reading to setup and test your gtk and gtkiostream installation.

Matt
p.s. If you have any questions or problems, please add them to this thread.
Last edited by flatmax on Wed Feb 08, 2017 9:29 am, edited 9 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 12:55 am
For this first step, we are going to install the necessary gtk development packages, then we are going to download gtkiostream and do a test compile to check our build system is working.

Prerequisites and setup

Firstly install the necessary headers and development libraries for gtk :
Code: Select all
sudo apt-get install libgtk2.0-dev


Now download the gtkiostream source code ... get the tar.xz file :
Code: Select all
wget https://sourceforge.net/projects/gtkiostream/files/Version%201.5.0/gtkiostream-1.5.0.tar.xz/download -O gtkiostream-1.5.0.tar.xz

Untar gtkiostream :
Code: Select all
tar Jxpvf gtkiostream-1.5.0.tar.xz

Do a test that you can compile like so :
First change to the directory of the source code you downloaded :
Code: Select all
cd gtkiostream-1.5.0
Next compile the source code - we will compile the pre-exisiting labels test code :
Code: Select all
g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-2.0 --cflags --libs` -Iinclude

Assuming everything went well, try to run the compiled test program :
Code: Select all
./test/LabelsTest

Press the quit button to exit.

If you get to this point and it works, you are ready to make your own program ...
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
by flatmax » Tue Jan 31, 2017 1:07 am
Before we continue, lets dissect the compile line :
Code: Select all
g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-2.0 --cflags --libs` -Iinclude


g++ calls the GNU c++ preprocessor and linker.

test/LabelsTest.C
is the file we want to compile.

-o LabelsTest tells g++ to output the binary to the file name LabelsTest

-Iinclude Tells g++ to include the path ./include which contains all the necessary gtkiostream header files.

`pkg-config gtk+-2.0 --cflags --libs` evaluates the command within the ` back quote. Be careful, this is a backquote, not a regular single quote. Anything encased in backquotes tells the shell to evaluate the encased command before continuing.

pkg-config gtk+-2.0 --cflags --libs Extracts for GTK (using package config - the developer package manager) the necessary include paths for header files and libraries, as well as the necessary libraries themselves. If you run this command on the command line you will see it prints the following :
Code: Select all
pi@raspberrypi:~/gtkiostream-1.5.0 $ pkg-config gtk+-2.0 --cflags
-pthread -I/usr/include/gtk-2.0 -I/usr/lib/i386-linux-gnu/gtk-2.0/include -I/usr/include/gio-unix-2.0/ -I/usr/include/cairo -I/usr/include/pango-1.0 -I/usr/include/atk-1.0 -I/usr/include/cairo -I/usr/include/pixman-1 -I/usr/include/libpng12 -I/usr/include/gdk-pixbuf-2.0 -I/usr/include/libpng12 -I/usr/include/pango-1.0 -I/usr/include/harfbuzz -I/usr/include/pango-1.0 -I/usr/include/glib-2.0 -I/usr/lib/i386-linux-gnu/glib-2.0/include -I/usr/include/freetype2
pi@raspberrypi:~/gtkiostream-1.5.0 $ pkg-config gtk+-2.0 --libs
-lgtk-x11-2.0 -lgdk-x11-2.0 -lpangocairo-1.0 -latk-1.0 -lcairo -lgdk_pixbuf-2.0 -lgio-2.0 -lpangoft2-1.0 -lpango-1.0 -lgobject-2.0 -lglib-2.0 -lfontconfig -lfreetype


Which is why our tiny command line to compile the C++ code bloats out immensly from this :
Code: Select all
g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-2.0 --cflags --libs` -Iinclude


To this :
Code: Select all
g++ test/LabelsTest.C -o test/LabelsTest -pthread -I/usr/include/gtk-2.0 -I/usr/lib/i386-linux-gnu/gtk-2.0/include -I/usr/include/gio-unix-2.0/ -I/usr/include/cairo -I/usr/include/pango-1.0 -I/usr/include/atk-1.0 -I/usr/include/cairo -I/usr/include/pixman-1 -I/usr/include/libpng12 -I/usr/include/gdk-pixbuf-2.0 -I/usr/include/libpng12 -I/usr/include/pango-1.0 -I/usr/include/harfbuzz -I/usr/include/pango-1.0 -I/usr/include/glib-2.0 -I/usr/lib/i386-linux-gnu/glib-2.0/include -I/usr/include/freetype2 -lgtk-x11-2.0 -lgdk-x11-2.0 -lpangocairo-1.0 -latk-1.0 -lcairo -lgdk_pixbuf-2.0 -lgio-2.0 -lpangoft2-1.0 -lpango-1.0 -lgobject-2.0 -lglib-2.0 -lfontconfig -lfreetype -Iinclude
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 MikeG58 » Fri Feb 03, 2017 5:53 am
Matt,

This is the main problem I've been having. Trying to get C++ to 'find' the gtk header definitions. Or, at least I think that is the issue. After running the compile test my results are:

pi@raspberrypi:~/gtkiostream-1.5.0 $ g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-2.0 --cflags --libs` -Iinclude
Package gtk+-2.0 was not found in the pkg-config search path.
Perhaps you should add the directory containing `gtk+-2.0.pc'
to the PKG_CONFIG_PATH environment variable
No package 'gtk+-2.0' found
In file included from test/LabelsTest.C:17:0:
include/gtkInterface.H:250:21: fatal error: gtk/gtk.h: No such file or directory
#include <gtk/gtk.h>
^
compilation terminated.


Then, perhaps, it's because I installed gtk+ 3.0. I'm gonna try to change that right now.

-Mike
Posts: 10
Joined: Thu Jan 05, 2017 7:09 am
by MikeG58 » Fri Feb 03, 2017 5:57 am
Matt,

No. I just don't get it.

pi@raspberrypi:~/gtkiostream-1.5.0 $ g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-3.0 --cflags --libs` -Iinclude3test/LabelsTest.C:17:26: fatal error: gtkInterface.H: No such file or directory
#include "gtkInterface.H"
^
compilation terminated.
-Mike
Posts: 10
Joined: Thu Jan 05, 2017 7:09 am
by MikeG58 » Fri Feb 03, 2017 6:05 am
OK, Matt,

I did get this:

pi@raspberrypi:~/gtkiostream-1.5.0 $ pkg-config gtk+-3.0 --cflags
-pthread -I/usr/include/gtk-3.0 -I/usr/include/at-spi2-atk/2.0 -I/usr/include/at-spi-2.0 -I/usr/include/dbus-1.0 -I/usr/lib/arm-linux-gnueabihf/dbus-1.0/include -I/usr/include/gtk-3.0 -I/usr/include/gio-unix-2.0/ -I/usr/include/cairo -I/usr/include/pango-1.0 -I/usr/include/harfbuzz -I/usr/include/pango-1.0 -I/usr/include/atk-1.0 -I/usr/include/cairo -I/usr/include/pixman-1 -I/usr/include/freetype2 -I/usr/include/libpng12 -I/usr/include/gdk-pixbuf-2.0 -I/usr/include/libpng12 -I/usr/include/glib-2.0 -I/usr/lib/arm-linux-gnueabihf/glib-2.0/include

So, I must be doing something right.

-Mike


-Mike
Posts: 10
Joined: Thu Jan 05, 2017 7:09 am
by MikeG58 » Fri Feb 03, 2017 6:39 am
Matt,

Using Geany, or some other IDE, where do you include the `pkg-config gtk+-3.0 --cflag` string, to make sure it points to gtk's header definitions?

-Mike
Posts: 10
Joined: Thu Jan 05, 2017 7:09 am
by flatmax » Fri Feb 03, 2017 6:56 am
MikeG58 wrote:Matt,

No. I just don't get it.

pi@raspberrypi:~/gtkiostream-1.5.0 $ g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-3.0 --cflags --libs` -Iinclude3test/LabelsTest.C:17:26: fatal error: gtkInterface.H: No such file or directory
#include "gtkInterface.H"
^
compilation terminated.
-Mike


Almost there Mike, keep going !
It can't find the gtkInterface.H file because it is missing the "-Ipath" and the end of the line.
Try this :
g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-3.0 --cflags --libs` -Iinclude

This will work if you are inside the gtkiostream-1.5.0 directory - as per the tutorial. You should be able to do :
Code: Select all
ls include/gtkInterface.H
and is should show you the file name without error.

I notice you are using gtk3, this should be fine, the majority of gtkiostream works with GTK3. Just remember that where you see 2.0 in the rest of the tutorials to replace that with 3.0.

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
by MikeG58 » Fri Feb 03, 2017 7:43 am
Matt,

I did include the 'Iinclude' at the end of the line. It just got wrapped around in my copy and paste. If you look on the second line, you'll see it.

I was using RealVTC to access my RPi. It was kind of handy to be able to copy and paste my screenshots after trying each of the commands in your tutorial, so that you could see what was going on. But, the screen for the VTC viewer caused the text, that should have been at the end of my command line, to wrap around to the next line.

I'll give it another shot tomorrow.

-Mike
Posts: 10
Joined: Thu Jan 05, 2017 7:09 am
by flatmax » Sat Feb 04, 2017 4:21 am
To be able to cut and paste text, you can use ssh (on windows putty). If you also want to be able to open the xwindows from the Pi on your microsoft box, you will need to follow something like this blog :
http://raspberrypiprogramming.blogspot. ... -from.html
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 MikeG58 » Sat Feb 04, 2017 5:37 am
Matt,

Code: Select all
pi@raspberrypi:~/gtkiostream-1.5.0 $ g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-3.0 --cflags --libs` Iinclude
g++: error: Iinclude: No such file or directory
pi@raspberrypi:~/gtkiostream-1.5.0 $ ls include
Alignment.H    CairoCircle.H       DragNDrop.H    gtkDialog.H     MessageDialog.H  Plot.H             Sox.H       WSOLAJack.H
AudioMask      ColourLineSpec.H    DrawingArea.H  gtkInterface.H  mffm             posixForMicrosoft  Surface.H   xpm
BlockBuffer.H  colourWheel.H       DSP            GtkUtils.H      NeuralNetwork.H  ProgressBar.H      Table.H
Box.H          ComboBoxText.H      EventBox.H     IIO             Octave.H         Scales.H           TextView.H
Buttons.H      commonTimeCodeX.H   Examples.H     JackClient.H    OptionParser.H   Scrolling.H        Thread.H
CairoArc.H     Container.H         fft            Labels.H        ORB.H            SelectionArea.H    Time.H
CairoArrow.H   Debug.H             FileGtk.H      Makefile.am     Pango.H          Selection.H        Widget.H
CairoBox.H     DirectoryScanner.H  Frame.H        Makefile.in     Pixmap.H         Separator.H        WSOLA.H


Sigh! There seems to be something very subtle, that I'm missing.

Also, Matt. Where is the LabelsTest.C program I'm trying to compile?

-Mike
Posts: 10
Joined: Thu Jan 05, 2017 7:09 am
by PeterO » Sat Feb 04, 2017 7:37 am
MikeG58 wrote:Sigh! There seems to be something very subtle, that I'm missing.

The "-" infront of "Iinclude" is missing ! :D It should be
Code: Select all
g++ test/LabelsTest.C -o test/LabelsTest $(pkg-config gtk+-3.0 --cflags --libs)  -Iinclude

PeterO
Discoverer of the PI2 XENON DEATH FLASH!
Interests: C,Python,PIC,Electronics,Ham Radio (G0DZB),Aeromodelling,1960s British Computers.
"The primary requirement (as we've always seen in your examples) is that the code is readable. " Dougie Lawson
User avatar
Posts: 3084
Joined: Sun Jul 22, 2012 4:14 pm
by flatmax » Sat Feb 04, 2017 10:55 am
Yep - PeterO got it !

The file paths go something like this. For tutorial 0 you are in the gtkiostream-1.5.0 directory.
The header files are in the include directory.
The LabelsTest.C file is in the test directory.

Lets dissect this line :
Code: Select all
g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-3.0 --cflags --libs` -Iinclude
Code: Select all
 test/LabelsTest.C
is the file we are compiling.
Code: Select all
-o test/LabelsTest
means, output the binary to the test directory using the file name LabelsTest
Code: Select all
-Iinclude
means, "-I" add the include path "include" which is the directory with the headers in it.

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
by MikeG58 » Mon Feb 06, 2017 8:35 pm
Matt,

OK. I got that straightened out and tried it just now. At this point, I'm not for sure what the system is supposed to do after entering that command. I have about two screens of information. There are arrows pointing to various places, usually, the closing parenthesis.

I think I need some more time with Linux to get this all sorted.

-Mike
Posts: 10
Joined: Thu Jan 05, 2017 7:09 am
by flatmax » Mon Feb 06, 2017 11:50 pm
OK - no worries!

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