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

STICKY: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Fri Feb 03, 2017 10:53 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 4 demonstrate how to layout widgets using a combination of horizontal and vertical packing boxes.
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 3 : Began to explain "packing" which is the way to layout your widgets in a desired manner in your 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 how to pack both horizontally and vertically. Once you understand how to combine horizontal and vertical packing boxes, you can layout almost any GUI you can think of !

We will use a horizontal packing box in this tutorial to demonstrate how to layout two vertical boxes horizontally.

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 1 time in total.
Zero PCB quick connect clip - Live now on kickstarter : http://kck.st/2hKrOIs
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: 333
Joined: Thu May 26, 2016 10:36 pm

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Fri Feb 03, 2017 11:07 am

Lets start again by opening our favourite text editor and writing the following code to the file BoxesInBoxesPacking.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, labs2; // Instantiate the Labels class                           
  labs<<"Hello world !"<<"You are programming me"<<"thank you";
  labs2<<"I feel"<<"alive!";

  VBox vBox, vBox2; // Instantiate the two vertical packing box variables       
  vBox<<labs; // Load the labels into the box                                   
  vBox2<<labs2; // Load the labels into the second box                          

  HBox hBox; // Instantiate the vertical packing box class                      
  hBox<<vBox.show()<<vBox2.show(); // Load the labels into the box              

  topWindow<<hBox.show(); // Show the box and load the box into the GtkInterface                                                                               

  gtk_main(); // run GTK+                                                       
}
The first thing to focus on is that there are now two Labels variables {labs, labs2} and the new labs2 variable contains two new string labels :

Code: Select all

  Labels labs, labs2;
  labs<<"Hello world !"<<"You are programming me"<<"thank you";
  labs2<<"I feel"<<"alive!";
There are also now two vertical packing boxes {vBox, vBox2} and the new vBox2 variable is loaded with the new labels widgets (contained in labs2):

Code: Select all

  VBox vBox, vBox2;
  vBox<<labs;
  vBox2<<labs2;
In other words, we now have two vertical packing boxes both packed with labels.

To pack and layout the vertical boxes side by side we use a horizontal packing box of type HBox :

Code: Select all

  HBox hBox;
Now all we have to do is load the two VBox variables into the horizontal packing box variable hBox, and as you would expect this looks something like this : hBox<<vBox<<vBox2;

We are also using a neat trick to reduce the number of lines used without confusion. This trick calls the Box method show() before executing the "<<" operator. What will happen is that the program will show the packing boxes and then load these variables into the target widget using the "<<" operator :

Code: Select all

  HBox hBox;
  hBox<<vBox.show()<<vBox2.show();
Finally we show and load this new hBox into our GtkInterface top window :

Code: Select all

  topWindow<<hBox.show();
This now completes the packing GUI and we are ready to compile it.
Zero PCB quick connect clip - Live now on kickstarter : http://kck.st/2hKrOIs
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: 333
Joined: Thu May 26, 2016 10:36 pm

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Fri Feb 03, 2017 11:10 am

To compile, we run our compile command with the correct file targets :

Code: Select all

g++ BoxesInBoxesPacking.C -o BoxesInBoxesPacking `pkg-config gtk+-2.0 --cflags --libs` -Igtkiostream-1.5.0/include
Which we execute using the command : ./BoxesInBoxesPacking

You should see the following dialog open up:
BoxesInBoxesPacking.png
Tutorial 4 : gtkIOStream
BoxesInBoxesPacking.png (9.42 KiB) Viewed 5201 times
Hope that you are enjoying learning how to program GTK GUIs with gtkiostream.
Matt
Zero PCB quick connect clip - Live now on kickstarter : http://kck.st/2hKrOIs
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: 390
Joined: Mon Nov 28, 2016 12:31 pm

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Mon May 15, 2017 8:53 am

hello,

my window looks different:
screenshot.jpeg
screenshot.jpeg (8.5 KiB) Viewed 3752 times
(c+p the program above, saved as gtkVBoxHBox.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, labs2; // Instantiate the Labels class                           
  labs<<"Hello world !"<<"You are programming me"<<"thank you";
  labs2<<"I feel"<<"alive!";

  VBox vBox, vBox2; // Instantiate the two vertical packing box variables       
  vBox<<labs; // Load the labels into the box                                   
  vBox2<<labs2; // Load the labels into the second box                         

  HBox hBox; // Instantiate the vertical packing box class                     
  hBox<<vBox.show()<<vBox2.show(); // Load the labels into the box             

  topWindow<<hBox.show(); // Show the box and load the box into the GtkInterface                                                                               

  gtk_main(); // run GTK+                                                       
}

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Mon May 15, 2017 12:44 pm

can someone please check and confirm that issue?
Have I perhaps done something wrong?

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Mon May 15, 2017 5:37 pm

After some searching, it looks like those headers have some problems...

In Box.H the class BoxIS has variables expand, fill and start that defines how elements are added. The problem is the constructor doesn't set them to any value (it sets similar variables that hold a default state but not those) so when the pack() function is called it acts according to whatever random values happen to be there unless you explicitly set them (calling reset() works to set them to the defaults).

Code: Select all

  VBox vBox, vBox2; // Instantiate the two vertical packing box variables
  vBox.reset();
  vBox2.reset();
  vBox<<labs; // Load the labels into the box
  vBox2<<labs2; // Load the labels into the second box

  HBox hBox; // Instantiate the vertical packing box class
  hBox.reset();
  hBox<<vBox.show()<<vBox2.show(); // Load the labels into the box
Whilst I'm here, there's an error in DragNDrop.H as well, right at the end there is this function

Code: Select all

    DragNDrop &operator<<(Widget &w){
        setUserData(&w);
    }
It doesn't return a value but should. There should be a return *this; at the end.
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Mon May 15, 2017 7:09 pm

hello,
as I don't program in C++ by myself (just ANSI C, I just use C++ objects and methods as stated in the tutorials and examples) I actually do not understand much about constructors, widges, and instances and so on.
Nevertheless, it sounds as if there are some bugs in the gtkiostream Library, perhaps Matt is able to fix them then at some time... ;)

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Mon May 15, 2017 8:10 pm

Until flatmax fixes it you can edit gtkiostream-1.5.0/include/Box.H and change the default constructor so that it sets the three variables to the default values. The function is from line 59, currently it says

Code: Select all

    BoxIS(void) {
        setDefaults(); // load up the default values
    }
Change it to

Code: Select all

    BoxIS(void) {
        setDefaults(); // load up the default values
        expand = expandDefault;
        fill = fillDefault;
        start = startDefault;
    }
That should now set the variables to the same as the default variables which is start=true, expand=false, fill=false. I assume the other constructor (just below it) which explicitly sets expand and fill should really also set start = startDefault after calling setDefaults() otherwise start will have a random value (the comment for the function says it sets it to true which technically this does since startDefault=true). Maybe setDefaults() is supposed to set both the default values and the current values...

It won't show the example code exactly as was shown since the example image shows what it looks like with expand=true, fill=true, start=true but that is the most likely case for all three (since those three values were random and any non-zero value is true). However the default variables are set to expandDefault=false, fillDefault=false, startDefault=true.
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Tue May 16, 2017 6:03 am

hi,
thank you very much!

I made the changes as you suggested, and it looks much better, the labels are now in the correct order.

Nonetheless still the labels are very close to each other, all at the top, so the look is still quite different from here:
Image

now, updated:
gtk_L4n.jpg
gtk_L4n.jpg (8.53 KiB) Viewed 3646 times

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Tue May 16, 2017 10:52 am

1dot0 wrote:hi,
thank you very much!

I made the changes as you suggested, and it looks much better, the labels are now in the correct order.

Nonetheless still the labels are very close to each other, all at the top, so the look is still quite different from here:
As I said, it won't be exactly how it was shown as those example images are with the values in a random state (which makes me wonder how it wasn't noticed by flatmax as they clearly aren't how the default state suggests). On my PC in the random state it has the 3 liner on the left all together but the 2 liner spread out. It would also change depending on what optimisation level you compile with.
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Tue May 16, 2017 12:16 pm

Paeryn wrote: As I said, it won't be exactly how it was shown as those example images are with the values in a random state (which makes me wonder how it wasn't noticed by flatmax as they clearly aren't how the default state suggests). On my PC in the random state it has the 3 liner on the left all together but the 2 liner spread out. It would also change depending on what optimisation level you compile with.
thanks again,
and just like about the button size issue -
so that would mean now also that flatmax will have to fix that issue to make it work like in his own screenshot, and also not randomly of course?

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Tue May 16, 2017 9:09 pm

To get the output as per the example image either pass Box::EXPAND and Box::FILL to vBox, vBox2 & hBox or call setDefaultExpand(true) and setDefaultFill(true) methods on those three variables. E.g. for the vBox variables I've used the output stream method and for the hBox I've use the setDefault*() functions. They are different, setDefault sets the value as both the current and default states whereas using the output stream only sets the current value :-

Code: Select all

  VBox vBox, vBox2; // Instantiate the two vertical packing box variables
  // Pass Box::EXPAND and Box::FILL to set the current fill and expand states to true
  vBox << Box::EXPAND << Box::FILL << labs; // Load the labels into the box
  vBox2 << Box::EXPAND << Box::FILL << labs2; // Load the labels into the second box

  HBox hBox; // Instantiate the vertical packing box class
  hBox.setDefaultExpand(true); // Set default and current expand to true
  hBox.setDefaultFill(true); // Set default and current fill to true
  hBox << vBox.show()<<vBox2.show(); // Load the labels into the box
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Tue May 16, 2017 9:12 pm

aah, thanks again!

all those

Code: Select all

Box::
things was what a was missing!
My Pi is now shut down, I'll test tomorrow ASAP!


BTW, interesting that it's not

Code: Select all

Box.
instead, but I won't worry about that detail ;)

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Tue May 16, 2017 11:15 pm

1dot0 wrote:aah, thanks again!

all those

Code: Select all

Box::
things was what a was missing!
My Pi is now shut down, I'll test tomorrow ASAP!


BTW, interesting that it's not

Code: Select all

Box.
instead, but I won't worry about that detail ;)
Yes, it didn't need them in the other one (Tut 6) as EXPAND and FILL were used inside the class and so already in scope. In this case they are outside the class so you have to provide the scope. Just had a thought... Yes, you can or the two values together when using output streams, to all intents and purposes they do the same (one function call instead of two, but with optimisations on it will produce the same code and eliminate both function calls).

Code: Select all

// These two are equivalent
vBox << Box::EXPAND << Box::FILL << label;
vBox << (Box::EXPAND|Box::FILL) << label;
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 7:03 am

awsesome, thanks, indeed now the box looks exactly like matt's
download/file.php?id=17725

1 more question about the Expand and Fill:
why don't they have to applied also for the horizontal box, and if one does (I tried it): why doesn't have that an effect?
I actually expected then both boxes to become the same horizontal width...

Instead, How can one achieve to have all boxes by identical horizontal (and vertical) sizes, either if expanded or not?
And, alternatively, how may one design each label or box size individually by static size (pt or pixel size) numbers?

@Matt:
could you please provide some more tuturials about how to design individual windows layouts by arbitrary main_window, HBox, VBox, Label, and Button sizes and positions?


e.g.,
a 600x480 main window, resizeable, with scroll bars,
top:
left 300x300 text label, right: 300x300 graphic canvas
bottom:
left 4 rows of 4 buttons each, either button by size 100x40, right: a text label expanded to the rest of the remainding free space (probably up to 200x180, CMIIW)

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 1:32 pm

Hey there,

Nice work ! You have found the BoxIS - nice. I have modified my codebase to include your change as well :

Code: Select all

    void setDefaults(void){
        expandDefault=fillDefault=false; //defaultVal; // setup the default beh\
aviour                                                                          
        startDefault=true;//!defaultVal;                                        

        expand = expandDefault;
        fill = fillDefault;
        start = startDefault;
    }
See any problems with that ?

Matt
Zero PCB quick connect clip - Live now on kickstarter : http://kck.st/2hKrOIs
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: 390
Joined: Mon Nov 28, 2016 12:31 pm

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 4:01 pm

hi,
are there now any further changes to what Paeryn already changed in the Box .h or .c file, or is this now an additional change, and/or do I have to update / download any .h file addtionally?

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 4:17 pm

1dot0 wrote:hi,
are there now any further changes to what Paeryn already changed in the Box .h or .c file, or is this now an additional change, and/or do I have to update / download any .h file addtionally?
Make flatmax's change and undo mine. Basically move those three lines from where I put them (in BoxIS(void)) and put them in setDefaults(void). I wasn't sure if setDefaults() was meant to set them or if it was only meant to set the default values.
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 5:00 pm

where exactly do I find the code snippet where I have to make the changes?

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 6:05 pm

1dot0 wrote:where exactly do I find the code snippet where I have to make the changes?
In the file you had to alter previously (gtkiostream-1.5.0/include/Box.H) the function you need to put the lines in is a few lines above where you put them originally.

Flatmax gave you the full new definition for the setDefaults() function. Make it look like that.
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 6:34 pm

it was Box.H, correct?
in class BoxIS?

but I can't find the lines any more, it'as all accidentally overwritten unfortunately -
can I please get the whole code, not just the snippet?

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 7:14 pm

1dot0 wrote:it was Box.H, correct?
in class BoxIS?

but I can't find the lines any more, it'as all accidentally overwritten unfortunately -
can I please get the whole code, not just the snippet?
Yes, part of class BoxIS in Box.H
How do you mean overwritten? If you need the original file just re-download it.
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 8:10 pm

I have only internet on my windows PC, the internet on my pi is a torture.
I can only reload it by apt-get install or git clone or the whole installation procedure on my Pi - is it that what you mean, complete re-install?

User avatar
Paeryn
Posts: 1681
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Wed May 17, 2017 8:49 pm

1dot0 wrote:I have only internet on my windows PC, the internet on my pi is a torture.
I can only reload it by apt-get install or git clone or the whole installation procedure on my Pi - is it that what you mean, complete re-install?
The files aren't in the repositories or git, they are in an archive file you download from sourceforge. You must have downloaded it previously. You can easily transfer the file to the rpi with a USB stick / memory card. At a push you could use the rpi's sd card (there should be enough room on the boot partition to temporarily copy it to). There are programs for Windows that can open the archive if you want to get at just one file (I'm sure 7zip can handle it).
She who travels light — forgot something.

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

Re: Tutorial 4 - Programming GTK GUIs using gtkIOStream

Thu May 18, 2017 10:51 am

update:
found the 3 deleted lines and could fix it again!

Return to “Graphics programming”

Who is online

Users browsing this forum: Google [Bot] and 2 guests