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

STICKY: Tutorial 3 - Programming GTK GUIs using gtkIOStream

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.
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 3 - Programming GTK GUIs using gtkIOStream

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.
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 3 - Programming GTK GUIs using gtkIOStream

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 4117 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

1dot0
Posts: 379
Joined: Mon Nov 28, 2016 12:31 pm

Re: Tutorial 3 - Programming GTK GUIs using gtkIOStream

Mon May 15, 2017 3:18 pm

hi,
in that case my 3 labels are aligned differently, all 3 very close to each other, at the bottom, and in the wrong order -
why is that so?
gtk_L3.jpg
gtk_L3.jpg (4.64 KiB) Viewed 2626 times

Code: Select all

// gtk1VBox_L3.c

#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+                                                       
}


1dot0
Posts: 379
Joined: Mon Nov 28, 2016 12:31 pm

Re: Tutorial 3 - Programming GTK GUIs using gtkIOStream

Tue May 16, 2017 6:11 am

update:
after Paeryn's changes in
viewtopic.php?f=67&t=173446&p=1163189#p1163076

now the 3 labels are in the correct order,
but all 3 lines at the very left top, completely close beyond other, no blank lines or spaces in between the labels, and then much empty space beyon the last one.


So still an output different from Matt's picture here: download/file.php?id=17704

1dot0
Posts: 379
Joined: Mon Nov 28, 2016 12:31 pm

Re: Tutorial 3 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 9:35 am

@Matt:

do you think it would be possible to have simple lines for the borders (the frame) of each label, to separate several labels more clearly from each other?

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

Re: Tutorial 3 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 1:35 pm

Yep - you can use a Frame for that (Frame.H file).
For example :

Code: Select all

Frame frame("title for this frame");
Will create the object and it is a Container so you can load widgets into that as you normally would using the "<<" operator and unload using the ">>" operator.

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

1dot0
Posts: 379
Joined: Mon Nov 28, 2016 12:31 pm

Re: Tutorial 3 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 4:59 pm

sorry, I don't understand how you mean that -
could you please post the entire code from above, but always feat. a frame for all of the lables?

1dot0
Posts: 379
Joined: Mon Nov 28, 2016 12:31 pm

Re: Tutorial 3 - Programming GTK GUIs using gtkIOStream

Sun May 21, 2017 3:02 pm

Is there really no further support about this frame thing?

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

Re: Tutorial 3 - Programming GTK GUIs using gtkIOStream

Wed Jun 07, 2017 10:12 am

Sure, for the frame thing...

Code: Select all

#include <gtkInterface.H>
#include <Labels.H>
#include <Box.H>
#include <Frame.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                                                  

	Frame boxFrame("Computer says");
	boxFrame<<vBox;
	topWindow<<boxFrame.show();

	gtk_main(); // run GTK+                                                       
}
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 3 - Programming GTK GUIs using gtkIOStream

Wed Jun 07, 2017 10:13 am

Here is the resulting GUI :
FrameExample.png
FrameExample GUI
FrameExample.png (9.51 KiB) Viewed 2149 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

1dot0
Posts: 379
Joined: Mon Nov 28, 2016 12:31 pm

Re: Tutorial 3 - Programming GTK GUIs using gtkIOStream

Thu Jun 08, 2017 12:18 pm

thank you, now that part is more clear!

Return to “Graphics programming”

Who is online

Users browsing this forum: No registered users and 4 guests