week#15. Interface and application programming.

A little about my 15-th week assignment

What do we need to do

Our assignment for this week was to " write an application that interfaces with an input &/or output device". I decided to write a python application (using python Tkinter) that would work like arduino therminal with some visualisation features. Processing looks quite attractive too, but trying it isn't my highest priority for now.

Python experiments

Basic language reference

I found basic information on python here . I am not a big fan of read-all-the-books-possible-befor-to-start approach, so let's just keep this link in mind in case we need some reference. The best way to understand the programming language (in case it's now your first programming experience) is just to dive into coding.

The application structure

First we need to ubderstand what functional parts our application consist of (to implement them):

  • It has to communicate with serial port;
  • It has to show us some data visualisation;
  • It has to show the data itself.
    •

    Now we need to find a way to implement all those features!

    Serial port communication

    To communicate with the serial port I used the Pyserial (the simple program example can be found here. It gives us an opportunity to get the data from the serial port and print it into the console (just like serial-port monitor in arduino IDE!):

    basic script

    That's nice for the first step! We have the information incoming, we can have the text output. It's time to have our GUI!

    Data visualisation. What to use?

    It appears that there is a lot of ways to make the GUI on python, but I decided to start from Tkinter. There were some reasons for this:

  • It's quite simple!
  • Easy-to-start description can be found here.
  • All the example GUI-applications from the FabAcademy input devices were made with use of Tkinter. That gives a lot of code to study from!

    • Let's make the GUI!

    1. The basic example

    Let's try to run the basic example (I'll type a lot of code here so I will make all the code italic):

    The script for this example is:

    #!/usr/bin/python
    import Tkinter
    top = Tkinter.Tk()
    # Code to add widgets will go here...
    top.mainloop()

    		 basic script

    It works! In general... Now let's try to add some features!

    Learning from example!

    Let's try to learn something from Neils example for interacting the hello-temperature board! Here's the source code.

    First, let's add some elements to the basic window (borrowing them from Neil's example). Lets try to...

    what's in a name?..

    Add the name for our app by adding top.title('hello-app')

    Appearance

    initialise the variable to contain the window size be adding win_size = 600 (Oh python... SO COOL in data-typing!)

    and right after that we can try to work with graphical primitives by adding

    1. canvas = Tkinter.Canvas(top, width=win_size, height=.25*win_size, background='white')

    NB! The way I made this object differs from Neil's example because the import differs too. As far as I understand, his way of importing gives an opportunity not to mention from where the method used is taken. Still, I am just a beginner in python yet and I am little too short of time to investigate the case in details right now.


    it sets the Tkinter object canvas that would allow us to add text or some graphical primitives (like rectangles)

    2. "canvas.create_text(.1*win_size,.125*win_size,text="Wohooo!",font=("Helvetica", 24),tags="text",fill="#0000b0")"
    it creates the text field with (x_cen, y_cen, text itself, font settings, just a tag, colour of text-fill) parameters,
    where
  • x_cen and y_cen are x,y of this text-field center (when I set them to 0 that's what I've got:)
    zero_text
  • text is a string containing text itself
  • then font settings
  • tag is... just a tag? I guess it helps us to tell one object from another (kind'a comment?)
  • colour of filling
    •  It's easy to find out what is what and who is who by cahnging some parameters and launching the script after that.

    3. canvas.create_rectangle(.2*win_size,.05*win_size,.3*win_size,.2*win_size, tags='rect1', fill='#b00000')
    it creates the filled rectangle with (x_left_up, y_left_up, x_right_down, y_right_down, just a tag, colour of filling) parameters,
    where
  • x_left_up, y_left_up, x_right_down, y_right_down set the left upper and righ downer corners of our rectangle
  • tag... again :)
  • colour of the filling
    •
    4. canvas.create_rectangle(.3*win_size,.05*win_size,.9*win_size,.2*win_size, tags='rect2', fill='#0000b0')
    Creates the other rectangle. If you look closely, you will see that
  • x_right_down for first rectangle is the same as x_left_up for the second
  • y parameters are equal

    • Why so? To draw a fill-bar!

    5. canvas.pack()
    this one is just grouping the canvas we created!

    You may find this script example here

    What do we have?

    At this point we have two scripts (one that allows us to get the strings from serial port and the other that gives us the power to visualise the data. What's left to do is to combine them!

    Let's add the refresher (borrow it from wxample and change the names to fit our script):
    top.after(100,idle,top,canvas)
    There's one more thing we need to add to ousr script. We need o add the idle function where all the changes are calculated between the refreshments (see the result here). I borrowed some parts from Neil's example, but I did understand what were they used for. I cahnged some parameters and here how it woorks with my hello-temperature board:

    Back to my assignments-list

    Back to my main page