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” 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?
