You can find the full source code for all of today's examples here.
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.
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)
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: