In our last blog, we finished building out a functional GUI calculator app using Ruby with the Tk library. In today’s blog, we will conclude our Tk series by creating a photo album app.

The Tk library by itself only supports the gif and ppm image files, thankfully, when we installed it on our Mac machine, it also comes with an extension library named tkextlib/tkimg that provides support for many other popular image types, such as jpeg, which we will be using.

Let’s create our ruby file and load in the libraries:

In the same directory as the album.rb file, we can create an images folder and put in a few jpeg files. You can place the image files anywhere you want, when we create an instance of the TkPhotoImage object, you will need to specify the path where you store the image.

Similar to all other widgets we created so far, we can create an image widget and assign it to a variable called image1 like so:

image1 = TkPhotoImage.new(file: 'images/aaron.jpeg')

images/aaron.jpeg is the path and name of my image file in this case, yours may be different depending on where you put the image.

If you run the program now, you won’t see any image. Even if you pack it, it still won’t show up. The reason is we need to put the image onto another widget (container) such as a label, button, or a frame. As a matter of fact, image is a standard property that’s common to all the widgets.

Let’s create a text widget, which is frequently used to input or output text, and see some of the methods associated with image1.

Creating a text widget follows the same process for all other widgets: create an instance of the TkText class, assign some properties to it, either pack it or use grid for placement onto the interface.

We can see some of the common methods with image1, like cget, configure, height, and width.

Now let’s create a label widget, give it some padding horizontally vertically, and have it act as a container for our image.

So far so good. If you notice why I use grid to place the label widget instead of just packing it in, I also want to create a back button, a message outputting the current position for the image, forward button underneath the container.

With that, let’s put in a few more images, and the skeleton code for the buttons and the message box:

Here I’ve created a few more images, our container is hardcoded to show image1, which we will fix shortly. Now we can put the row and columns for each widgets we just built.

This is what we have so far if we run our program. The contain spans three columns on top, and on row 1, from the left, we have a back button, a message box, and a forward button.

Next let’s store our images into an array, when a user clicks on a navigation button, we can move the index position backward or forward.

Great job, we are almost done! Let’s make sure of the back and forward buttons’ command properties to either increase or decrease the variable current_index and update the image property for the container, as well as the label that’s displaying “Image 1 of 5”:

Line 34 is very straightforward. Every time is back button is clicked, we move the image (and index position) 1 back. Line 35 might require a bit of explanation. The index position for the images and what we want to display are such that:

0 1 2 3 4  #Index positions
1 2 3 4 5 #Values to be displayed on the label

Whichever index position (current_index) we are on, it’s always 1 less than what we want to display, therefore, we will need to do current_index + 1 to display the value correctly.

We will also need to do validation to see if the current_index is 0, so a user won’t be able to click on the back button at that point:

The forward button is almost the same. We will check if current_index is at the last element, if not, we will increment current_index and update the label:

Time to test out the app!

This concludes our blog series on Tk. Hopefully you get a chance to build out some amazing apps with this incredible library!

--

--