Tutorial 0 - Programming GTK GUIs using gtkIOStream


30 posts   Page 1 of 2   1, 2
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.
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
Posts: 297
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
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
Posts: 297
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
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
Posts: 297
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
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
Posts: 297
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
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
Posts: 297
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: 3399
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
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
Posts: 297
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
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
Posts: 297
Joined: Thu May 26, 2016 10:36 pm
by 1dot0 » Fri May 12, 2017 2:13 pm
hello,
The first test program (see below) runs fine from console with
Code: Select all
    cd gtkiostream-1.5.0
    g++ test/LabelsTest.C -o test/LabelsTest `pkg-config gtk+-2.0 --cflags --libs` -Iinclude



But I have a problem to run this gtkiostream with Geany.


I added
Code: Select all
`pkg-config gtk+-2.0 --cflags --libs` -I/gtkiostream-1.5.0/include

to my current compile/build parameters.

My entire compile / build parameter string is now then:
Code: Select all
g++ -Wall -pthread -I/opt/vc/include -I/opt/vc/include/interface/vmcs_host/linux -I/opt/vc/include/interface/vcos/pthreads -o "%e" "%f" -lshapes -L/opt/vc/lib -lOpenVG -lEGL -lwiringPi -lArduiPi_OLED `pkg-config gtk+-2.0 --cflags --libs` -I/gtkiostream-1.5.0/include


Nevertheless, with the test program labelstest.c loaded in Geany I get the compile error
gtkInterface.H: file or directory not found.


also if I exchange
Code: Select all
`pkg-config gtk+-2.0 --cflags --libs`

by
Code: Select all
$(pkg-config gtk+-2.0 --cflags --libs)


it's about the same error, or actually a fatal error.



Code: Select all

#include "gtkInterface.H"
#include "Buttons.H"
#include "Labels.H"

static void quit(void *wid, gpointer data){
  gtk_main_quit();
}

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

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

  GtkInterface topWindow; // Create the top box

  Buttons buttons; // create a quit button
  buttons<<BUTTONLABELSTRUCT("Quit", quit, NULL);

  Labels labs; // create a labels list
  labs<<" this is 1"<<" this is 2"; // Load some labels

  HBox hBox; // create an HBox
  hBox << buttons << labs; // load the button and label into the HBox
  hBox.show(); // show the HBox
  topWindow << hBox; // Load the HBox into the top window

  gtk_main(); // run GTK+
}




what is wrong, what am I missing?
Posts: 295
Joined: Mon Nov 28, 2016 12:31 pm
by 1dot0 » Fri May 12, 2017 8:07 pm
no idea or proposal anyone? :roll:
Posts: 295
Joined: Mon Nov 28, 2016 12:31 pm
by PeterO » Fri May 12, 2017 8:09 pm
1dot0 wrote:no idea or proposal anyone? :roll:


Use a properly maintained library like http://www.gtkmm.org/en/

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: 3399
Joined: Sun Jul 22, 2012 4:14 pm
by 1dot0 » Fri May 12, 2017 8:14 pm
do you want to express that I will not be able to make this gtkIOStream lib work with Geany? :(
Posts: 295
Joined: Mon Nov 28, 2016 12:31 pm
by 1dot0 » Fri May 12, 2017 8:16 pm
OTOH, I would really like to give that a try, if I only knew how the g++ parametrs will have to look like, once and for all for all other examples
Posts: 295
Joined: Mon Nov 28, 2016 12:31 pm
by PeterO » Fri May 12, 2017 8:33 pm
1dot0 wrote:do you want to express that I will not be able to make this gtkIOStream lib work with Geany? :(


I'm saying that there are more widely used alternatives where there is more than one person that can help you.

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: 3399
Joined: Sun Jul 22, 2012 4:14 pm
by 1dot0 » Fri May 12, 2017 8:41 pm
well, tbh, many other libs are not easy to understand, but gtkIOStream seems to promise a quick learning curve.
So before I fail right at the start I would first try to make it work with Geany, and who finally knows, if different libs are supposed to work with Geany out of the box.
So is that really so hard to tell how the build parameters of gtkIOStream have to look like for Geany, and what is faulty with my attempt?
Posts: 295
Joined: Mon Nov 28, 2016 12:31 pm
by 1dot0 » Fri May 12, 2017 9:59 pm
so has anyone an idea how the g++ gtkIOStream build parameters will have to look like for Geany and what's wrong with mine?
Posts: 295
Joined: Mon Nov 28, 2016 12:31 pm
by 1dot0 » Sat May 13, 2017 7:28 am
again, in other words:
what is wrong or missing for Geany to be added for compile and build preferences, e.g. by

Code: Select all
`pkg-config gtk+-2.0 --cflags --libs` -I/gtkiostream-1.5.0/include

or
Code: Select all
$(pkg-config gtk+-2.0 --cflags --libs) -I/gtkiostream-1.5.0/include
Posts: 295
Joined: Mon Nov 28, 2016 12:31 pm
by 1dot0 » Sat May 13, 2017 2:00 pm
can that be true?
no one can give me the answer how to get the parameter flags correct for Geany?
Posts: 295
Joined: Mon Nov 28, 2016 12:31 pm