STICKY: Tutorial 4 - Programming GTK GUIs using gtkIOStream

[flatmax]

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.

[flatmax]

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.

[flatmax]

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:

Tutorial 4 : gtkIOStream

BoxesInBoxesPacking.png (9.42 KiB) Viewed 10530 times

Hope that you are enjoying learning how to program GTK GUIs with gtkiostream.
Matt

[1dot0]

hello,

my window looks different:

screenshot.jpeg (8.5 KiB) Viewed 9081 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]

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

[Paeryn]

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.

[1dot0]

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

[Paeryn]

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.

[1dot0]

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:


now, updated:

gtk_L4n.jpg (8.53 KiB) Viewed 8975 times

[Paeryn]

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.

[1dot0]

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?

[Paeryn]

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

[1dot0]

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

[Paeryn]

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;

[1dot0]

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)

[flatmax]

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

[1dot0]

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?

[Paeryn]

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.

[1dot0]

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

[Paeryn]

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.

[1dot0]

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?

[Paeryn]

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.

[1dot0]

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?

[Paeryn]

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).

[1dot0]

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