This is the second post in my series on developing GUI applications in Elementary using Python. Today we are going to continue building on the Hello Elementary example I started in the
first tutorial. In today's post I will only be covering the code that is
different from our previous examples, so if you haven't looked that one over yet please take a moment to do so now.
You can find the full source code for all of today's examples
here.
Example 3:
We are going to start off by displaying a static, pre-defined image in our GUI:
It only takes us 8 lines of actual code to create and display the above image in our program:
#Creates an Image object that displays an image
ic = elementary.Image(window)
#Use the os module to get the current path to our .py file. Our image is relative to our .py We do this because it is best to use the absolute file path to images for the best results.
location = os.path.dirname(os.path.abspath(__file__))
#Tell our icon to auto-fill open space
ic.size_hint_weight_set(evas.EVAS_HINT_EXPAND, evas.EVAS_HINT_EXPAND)
ic.size_hint_align_set(evas.EVAS_HINT_FILL, evas.EVAS_HINT_FILL)
#Here we set the image we want our icon to display
ic.file_set("%s/images/logo.png"%location)
#Optional, lets add mouse over text to our image
ic.tooltip_text_set("Look a pretty picture!")
#Lets show our icon
ic.show()
box.pack_end(windytax)
#Pack our icon between our text and button
box.pack_end(ic)
box.pack_end(button)
In this example we utilize the elementary
Image object to display our selected .png file.
Example 4:
Very rarely do we want to simply display a single image for as long as our program is running. So lets give the user the ability to change the image we display in our program:
Elementary has a built in
FileselectorButton object that when clicked presents our user with a nice file selector GUI:
The new code to add this file selector button looks like:
#Creates a "FileselectorButton" object. This is a button (just like we have created before) except that when it is click it automatically opens a file selector window
fsb = elementary.FileselectorButton(window)
#We can set the text of our fsb just like a normal button text
fsb.text = "Change Image"
#Tooltip for mouse over
fsb.tooltip_text_set("Click Me!")
#This tells our file selector window what to do when our user selects a file. The first argument is the callback function we want run and our second argument is our image object we want to change the display of
fsb.callback_file_chosen_add(change_image, ic)
#Show our button
fsb.show()
box.pack_end(windytax)
box.pack_end(ic)
#Pack our file selector button between our image and button
box.pack_end(fsb)
box.pack_end(button)
window.resize_object_add(box)
window.resize(300,300)
window.show()
#Our fileselector callback. The file argument is the fileselectbutton object. The second argument is the full path to the file that was selected. The final argument is the image object we passed to this callback
def change_image(fsb, file_selected, image):
#Check to make sure a file of some sort was selected. If nothing was selected file_selected will equal None type
if file_selected:
#These are the extensions we will allow our program to display
validExtensions = [".png", ".jpg", ".gif"]
#Use the os module to easily get the extension of our file
fileName, fileExtension = os.path.splitext(file_selected)
#If the extension is in our validExtenions lets check the image we are displaying!
if fileExtension in validExtensions:
image.file_set(file_selected)
Example 5:
Lets add one finishing touch to our application. If our user selects a file to display that doesn't have a valid image extension lets send them a popup telling them why the image displayed wasn't changed:
Showing a popup of this nature is fairly easy using elementary's
Popup object. So the final edit to our code looks like this:
#This time we also pass the window object to our change image function. The reason for this is that our popup object needs a parent window object
def change_image(fsb, file_selected, image, window):
if file_selected:
validExtensions = [".png", ".jpg", ".gif"]
fileName, fileExtension = os.path.splitext(file_selected)
if fileExtension in validExtensions:
image.file_set(file_selected)
else:
#if we have an invalid extension lets give the user a popup message telling them why the image didn't change
#Create a popup message
popup = elementary.Popup(window)
#Set the title of our popup
popup.part_text_set("title,text", "Invalid File Extension")
#Set the text of our popup
popup.text = "File %s has an invalid file extension of %s"%(fileName, fileExtension)
#Create a button object
bt = elementary.Button(window)
#Set it's text
bt.text = "OK"
#Define a callback that is called when the button is clicked, lets pass our popup object to this call back so we can close the popup when the user presses OK
bt.callback_clicked_add(bnt_close, popup)
#Sets content for our popup. The first argument is an arbitrary name for the content piece and the second argument is the elementary object you would like displayed for the content
popup.part_content_set("button1", bt)
#Show the popup to our user
popup.show()
#The callback for our popup's OK button. The first agurment is the button object itself and the second object is the popup we passed to it
def bnt_close(bt, popup):
#Lets delete the popup so it goes away
popup.delete()
Hope everyone learned something today! Have any questions feel free to drop a comment below or start a discussion on our
user boards.
Resources for this Lesson:
~Jeff Hoogland
