CherryPy Progress!

Good Day! i got stuck in testing the new Z-Wave firmware so here I am, back for more CherryPy!

Thanks to Mefarmer and ax25 who explained to me about what’s going on with the CherryPy and gave me clues on how to proceed! It is a nice of motivation.🙂

Let me restart my CherryPy journey and you can refer to my discussion with mefarmer in this forum thread. Do download the mobile_website.zip from there too as i could not upload the file here.

Before that, i forgot to mention about jQuery Mobile!! i think it is an awesome app. Check out the themeroller! Awesome awesome!! i’m so excited to make some web apps!!!! Wait. is web2py totally different from this? :O

The last time i edited the tutorial.conf file by changing the port number and tools.staticdir.root. But the web app wouldn’t show up when i type in the localhost:portnumber. Today, i changed the port number to 8020 which is not in used by any server. I think Web2py has taken up localhost:80 by default and :8080 seems to have some error… i did use it to display “Hello world” from the tutorial file included with the installation.

Anyway, moving on to remote_control.py.
Adding #!/usr/bin/python will allow user to run the script automatically by typing python myscript.py in the terminal. remote_control.py, when run, will return a html file (webpage) which shows a sleek nice black layout with 3 buttons in the first row and a slider in the second row.

The jQuery Mobile framework is using a block style class convention called ui-grid.
There are four preset configurations layouts that can be used in any situation that requires columns:

  • two-column (using the ui-grid-a class)
  • three-column (using the ui-grid-b class)
  • four-column (using the ui-grid-c class)
  • five-column (using the ui-grid-d class)

Within the grid container, child elements are assigned ui-block-a/b/c/d/e in a sequential manner which makes each “block” element float side-by-side, forming the grid. The ui-block-a class essentially clears the floats which will start a new line (see multiple row grids, below).

To display the 3 buttons, here is the code (for one of the buttons):

<div class ="ui-grid-b">// 3 columns
block
block (refer below)
</div>

<div>
<button type="button" id="new_1" data-role="button" data-transition="fade" >
new_1 //word on the button
</button>
</div>

Read more here.

As for the slider, the data-role will be “slider” and it has more things to set (e.g option) (refer remote_control.py)

Inside the html file shown in the example, we can add “scripts” in the form of “script src” (which direct to a script file) or “script type” which we can directly add in the script below it. in this case, a javascript was included. this will get the clicks and send them to the server using ajax:

$("#unique_id").click(function () {$.post('/request',{key_pressed:"unique_id"})});

$(“#slider_id”).change(function () {$.post(‘/request’, {key_pressed:”slider_id”+$(this).val()})});

Every button has an unique ID. Then the javascript sets up an event handler that looks for a “click” event with that unique ID. When there is a “click” event, it will do an ajax “post” to “http://localhost/request&#8221; which will send JSON data {key_pressed:”unique_id”}

Server will get the “post” and route it to the “request” function (in the remote_control.py itself). The JSON will be passed in as a dictionary. Inside the “request” function, we get the dictionary as “data” and look for the key “key_pressed”. The value we get from that, is the unique ID we passed in from the javascript ( {key_pressed:”unique_id”} ). in the example, we simply just send ID and use an if statement to look for matching values and print it out.
if key == “new_1”:
# you can do anything you want right here
print “new_1”

Now, to test my own application, this is what i do:
1. Login test
– import serial and time
– in the “request” function, i added

serialport = serial.Serial("/dev/ttyAMA0/", 9600, timeout=0.5)
serialport.write("\x03LI1234\x0D")
response = serialport.readlines(1)
print response
time.sleep(1)

– somehow i need to use a new port number. then i run the python script.
– it’s a success! i got the reply from the device connected to its serial port.

2. other buttons test
– here comes the challenge. serialport belongs to the if key ==”start” only. Does that mean i have to open the serial port everytime i press on any button? well that’s definitely not the best way. I can’t seem to find anywhere to insert that line (serialport =serial.Serial(….))
outside the function? global name “serialport” is not defined
inside the function, outside the “if”? local name “serialport” is not defined.

so in the end, i insert

serialport = serial.Serial("/dev/ttyAMA0/", 9600, timeout=0.5)

in every “if” and “elif” and it works~ whenever i slide the bar to “on”, the testlight turns on, and when i slide to “off”, the testlight turns off. Happy!😀 Arming and disarming works too!! lovely milestone today!🙂

IMPORTANT! while i edit the python file, i did not shutdown the server. After i saved my changes, the server will “re-spawn”? i take that as a restart. haha, CherryPy coming back to life huh?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s