Friday, February 1, 2013

Tutorial 2: ELM Images, File Selector and Popups

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

Thursday, January 31, 2013

New E17 Stable Snapshot and the First of E18

You read that title right folks. The first showing of Enlightenment DR18 (or E18 for short) has become a reality. Sure, it is nowhere near what the final product is going to look like - but it is a start. If you would like to follow the life cycle of E18 as it develops there is a new release manager blog that can be found here.



For those who like to stay on the more "stable" side of things also new today is a bug fix snapshot for the E17 stable release - dubbed 0.17.1. If you are a Bodhi Linux user you will find the "enlightenment" package in the Bodhi testing repo is already at version 0.17.1. These packages should make their way into our stable repo some time in the next week.

You can find downloads for both of these snapshots here.

~Jeff Hoogland

Tuesday, January 29, 2013

Tutorial 1: Hello Elementary

This post is the first in a series I am going to be publishing about using elementary and python to develop applications. The source code for all of the examples I am providing can be found in a GitHub repository here. Looking to get help with development? - We have started a programming focused section of the Bodhi Linux forums here. Other great resources for getting help are the Enlightenment devel mailing list as well as #e on freenode IRC. I've also added the python elementary API documentation to the Bodhi website here.

Example 1:
Since most people (myself included) learn best through examples, let's dive right into the code. To start, we are going to be creating a simple window that displays some text to us. It will look something like this:


Including my comments explaining what each line of code does, it takes us less than 50 lines of code to get the above window on our screen. Let's take a look (you can also find the source code for this lesson here):

#Import the elementary library so we can use it
import elementary

#Import evas, used for resizing things
import evas

#A function that creates and shows an elementary window
def hello_elementary():
    #Creates a "Standard" elementary window. The first argument is the name of our window. The second argument is the title displayed on the window bar
    window = elementary.StandardWindow("hello world", "Hello Elementary")

    #callback_delete_request_add tells our window what to do when it's "close" button is pressed
    window.callback_delete_request_add(lambda o: elementary.exit())

    #Content for our window. Creates a "Label" object which display text in our window. Whenever we create an elementary object we must provide a parent window as input
    windytax = elementary.Label(window)

    #Tells our label object to change size based on the size of our window
    windytax.size_hint_weight_set(evas.EVAS_HINT_EXPAND, evas.EVAS_HINT_EXPAND)
    windytax.size_hint_align_set(evas.EVAS_HINT_FILL, evas.EVAS_HINT_FILL)

    #Define what text our window should display
    windytax.text = 'Hello Elementary!'

    #If we want to see our object we need to tell it to be shown
    windytax.show()

    #resize_object_add adds our Label object "windytax" to the window
    window.resize_object_add(windytax)

    #resize takes an ordered pair as input for the size for our window, the dimenions are pixel by pixel
    window.resize(300,300)

    #Finally lets tell our window object to show up just like we did with our label
    window.show()

#Runs when our script is run
if __name__ == "__main__":
    #Runs our function which creates our window
    hello_elementary()

    #Starts an elementary event loop which displays all elementary objects we've created. Our code stays at this point until elementary.exit() is called
    elementary.run()

    #Once elementary is done running lets shut everything off to finish the application
    elementary.shutdown()

In this example we create two elementary objects: A StandardWindow and a Label. The StandardWindow as you can guess is the window we are creating, while the Label is a child object that we add to our window to display.

Example 2:
We want our application to do much more than just display text (most of the time). So let's go ahead and add a couple more objects to our Hello Elementary application. Let's add a button that closes our application:


The full code for this application can be found here. I will now highlight what is different from our previous example.

def hello_elementary():
    ...

    #Create an elementary button object
    button = elementary.Button(window)

    #Set some text for our button
    button.text = "Goodbye Elementary"

    #callback_pressed_add tells our button a callback to run when our button is pressed, the first argument is the function run and the following arguments are things to pass to the callback
    button.callback_pressed_add(button_pressed, "argument1", "argument2")

    #Show our button
    button.show()

    #Since we now have multiple objects we want to display on our window, we can position these objects using an elementary box which is a container object that you can "pack" items into.

    #Create a box
    box = elementary.Box(window)

    #Tell our box to fill all open space in our window
    box.size_hint_weight_set(evas.EVAS_HINT_EXPAND, evas.EVAS_HINT_EXPAND)
    box.size_hint_align_set(evas.EVAS_HINT_FILL, evas.EVAS_HINT_FILL)
    
    #Show our box
    box.show()

    #Lets pack our label and then button into our box!
    box.pack_end(windytax)
    box.pack_end(button)

    #This time lets use our box  instead of just our label
    window.resize_object_add(box)

#Our callback when the button is pressed. The first argument for this function will be the elementary button object. The rest of the arguments are the custom things we passed above
def button_pressed(button, arg1, arg2):
    #Show the content of our arguments in terminal
    print arg1, arg2

    #Lets have our button close the application, so run:
    elementary.exit()

Example 2 adds two more elementary objects to our application - a Box and a Button. A Box is an elementary object that we use to hold other elementary objects to they are positioned how we want them inside our application window. You "pack" items into a box that is either vertical (default) or horizontal. A Button is an object that can have text and/or images displayed on it that can fire a callback when pressed.

Resources for this Lesson:
~Jeff Hoogland

Monday, January 28, 2013

Bodhi on MK802 and other ARM Updates

MK802:

Today I am happy to announce our first public Bodhi images for the MK802 Android stick:


This image comes with a 3.0 kernel and it has OpenGL support for MK802 GPU enabled out of the box. You can find a download link for the MK802 on the ARMHF page of the Bodhi website. The default user name is armhf and the password is bodhilinux. This default user has sudo enabled for installing software and ssh is on by default.

To use this release simply DD the provided .img file to a micro SD card, insert it into your MK802 and power it up. This image has a 1080p script.bin by default, meaning if you are trying to use this image on a screen that only supports 720p resolution you will need to replace the script.bin on the first partition of the image with the one found here.

Since this is our first image for this ARM chipset I have no doubt that it will contain some rough edges. For certain the MK802's built in wireless and OpenGL are functional on this image - I haven't had time to test the audio yet though. Alpha quality release of course.

Please, please, please do not make a comment on this post asking for support with an issue you encounter with installing/running Bodhi on your MK802! Comments asking for support will be removed from this post. Instead please open a support request thread in the A10 section of our user forums. It is much easier to manage/search/solve issues in a message board format than a comments section.

Other Updates:

This past weekend I've also published image updates for our Raspberry Pi and Genesi Smartbook images. Like this image they now both include EFL 1.7.5 and E17 stable by default.

Cheers,
~Jeff Hoogland

Tuesday, January 15, 2013

Some Yummy Elementary Applications

For those who aren't aware Elementary is the top level building block for the Enlightenment Foundation Libraries (EFL). The EFLs reached their first stable release almost a year ago, but aside from E17 there haven't been very many applications written using these libraries to date. Today I would like to highlight a few applications that are being developed using Python and Elementary that have reached a usable state.

Epour - Torrent Client:


Epour uses libtorrent as a back end and currently supports all the basic features you need for a functional torrent client. You can pause/resume torrents and it resumes a partially finished torrent just fine. Epour is currently being developed by Kai Huuhko.

eCcess - System Tool:


eCcess is intended to be a desktop neutral GUI for managing various system tasks. It is still very much a work in progress, but currently it allows you to:

  • Create users
  • Delete users
  • Change a user's password
  • Change the current time
  • Change the current timezone
There is a small screenshot gallery here. I am currently the driving force behind eCcess and I am very much open to ideas for what features it should include in the future.



Valosoitin is a audio player with a very simple playlist interface. Supports all audio formats supported by either Xine or GStreamer. Valosoitin is also being developed by Kai Huuhko.



I already mentioned eAndora a couple of weeks ago, but I figured as long as I was talking about Elementary applications I would bring it up again. Since my first post it has gained a few new features. It now remembers the last station you had playing when you close/relaunch the program and you can now "like" and "ban" songs from your stations. I also improved some back end things so the application is more stable and times out far less with extended play.

Getting these applications:

If you are currently a Bodhi Linux user all of the above applications are just an apt-get away. If you are using a different operating system just make sure you have the latest EFLs installed along with their Python Bindings and then check out the source code from the links I provided above. 

Working with these libraries myself has been a lot of fun. I hope in the future we will see more application development using Elementary as it is a very powerful/flexible library.

Cheers,
~Jeff Hoogland

Wednesday, January 9, 2013

Nexus 7 jams with Bodhi Linux

After a few weeks of working on other things I've gotten back around to doing some more work on our Bodhi for Nexus 7 image. I've just uploaded a new Bodhi rootfs.img (which can be gotten from our source forge page here). This image brings a few improvements, most notably:

  • Menu/Buttons have been made slightly larger to make things more "finger friendly"
  • Suspend now works and pressing the "power" button on the device now suspends Bodhi by default
  • Audio now works without any tweaking
  • Stable E17 packages
My TODO list for the device still includes determining why OpenGL seems to not want to work as well as creating a automated installer script for loading Bodhi on to your Nexus 7. For now this updated image can be installed following the method I laid out here. If you encounter any issues with this image please open a support request in the Nexus 7 section of our user forums.

I'm going to be busy jamming to eAndora on my Nexus for awhile:


Cheers,
~Jeff Hoogland

Thursday, January 3, 2013

Bodhi Linux 2.2.0 Released

The Bodhi Team and I are very happy to present to you our 2.2.0 release - the first Bodhi images to feature the stable E17 desktop. As with all minor Bodhi release existing users can simply upgrade their existing installs of Bodhi 2.x.y This release is exciting for a number of reasons. To start with, we are introducing a few new things with this update release.

With this release, we will now be maintaining two 32bit install discs: One that is PAE enabled by default and one that is not. The kernel without PAE will be an older stable kernel (in this case 3.2) while the PAE enabled kernel will be the latest kernel - for 2.2.0 this means 3.7 kernel. Our 64bit release also comes with the 3.7 kernel.

These discs are also our first released images that are hybrid ISO images. This means that you can write the image directly to a flash drive simply using the dd command and it will become a bootable media. You no longer need to use unetbootin (unless you want to) to create bootable Bodhi flash drives. Remember, we also sell branded Bodhi flash drives to help support the project (we are supported 100% by user donations).

Also included in these disc images are local copies of our newly updated Bodhi QuickStart and the Bodhi Guide to Enlightenment. Both of these documents have been updated to reflect all of the recent changes that have occurred with the stable E17 release.

Bodhi 2.2.0 also features some fresh updates to every one of our default profiles:

Bare:



Compositing:


Desktop:


Fancy:


Laptop:


Tablet:


Tiling:



In addition to the wonderful new E17 default theme featured in each of the profile screenshots above, Bodhi 2.2.0 ships with the following elegant themes by default:











If you are not happy with any of the default theme selections (or are just looking for some more variety) check out our complete theme page here.

You can find download links to our 2.2.0 discs on the downloads pages at BodhiLinux.com or you can find direct links to the ISO images on our sourceforge page here.

Finally - please do not comment on this post asking for help with an issue you have with Bodhi. Instead open a support request on our user forums.

Cheers,
~Jeff Hoogland