The interaction between Javascript and Python
Posted: Mon Mar 03, 2014 7:58 pm
This Project
https://code.google.com/p/webiopi/wiki/Tutorial_Basis
If not already done, install WebIOPi on your Raspberry Pi.
1)Create a folder somewhere on your Pi, for instance /home/pi/myproject. This is the main folder.
2)Create another python folder in the folder previously created. We will store Python script file here.
3)Create another html folder next to python. We will store HTML and other ressources here.
You should have something like this :
home
- pi
- myproject
- python
- html
Create a script.py file in your python folder, eg. /home/pi/myproject/python/script.py. This file will be loaded and executed by the WebIOPi server.
In index.html,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | Light Control</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
// Create a "Light" labeled button for GPIO 17
var button = webiopi().createGPIOButton(17, "Light");
// Append button to HTML element with ID="controls" using jQuery
$("#controls").append(button);
// Refresh GPIO buttons
// pass true to refresh repeatedly of false to refresh once
webiopi().refreshGPIO(true);
});
</script>
In webiopi.js
WebIOPi.prototype.init = function() {
$.getJSON(w().context + "map", function(data) {
var count = w().PINS.length;
for (i = 0; i<count-1; i++) {
var type = w().TYPE.GPIO;
var label = data;
if (label == "DNC") {
type = w().TYPE.DNC;
}
else if (label == "GND") {
type = w().TYPE.GND;
}
else if (label == "V33") {
type = w().TYPE.V33;
}
else if (label == "V50") {
type = w().TYPE.V50;
}
if (type.value != w().TYPE.GPIO.value) {
label = type.label;
}
w().map(i+1, type, label);
}
if (w().readyCallback != null) {
w().readyCallback();
}
w().checkVersion();
});
}
WebIOPi.prototype.initMobile = function() {
webiopi().init();
}
WebIOPi.prototype.ready = function (cb) {
w().readyCallback = cb;
}
WebIOPi.prototype.map = function (pin, type, value) {
w().PINS[pin] = Object();
w().PINS[pin].type = type
w().PINS[pin].value = value;
if (type.value == w().TYPE.GPIO.value) {
w().GPIO[value].mapped = true;
}
}
WebIOPi.prototype.addALT = function (alt, gpio, name) {
var o = Object();
o.gpio = gpio;
o.name = name;
alt.gpios.push(o);
}
Configuration
Edit /etc/webiopi/config :
Locate [SCRIPTS] section, add following line to load your Python script
...
[SCRIPTS]
myproject = /home/pi/myproject/python/script.py
...
Locate [HTTP] section, add following line to tell WebIOPi where to find your HTML resources
...
[HTTP]
doc-root = /home/pi/myproject/html
...
The two steps above are enough to run our app, but we want to limit remote control to the Light only. By default, we can remotely change function and value of all GPIO.
Locate [REST] section, add following lines
...
[REST]
gpio-export = 17
gpio-post-value = true
gpio-post-function = false
...
=======================================================================
My Questions,
1)in webiopi.js the WebIOPi object, how does it correspond to webiopi object of the webiopi.py. the webiopi.py has interface with low level C driver codes. So I expect any web object from webiopi.js must refer to some corresponding object in python.
2)Does /etc/webiopi/config which loads the script.py enable the webiopi object of the python code exposed and the webiopi.js then can use it?
3)The webiopi.py has import webiopi which loads the webiopi python library. But in webiopi.js the object name is Uppercase WebIOPi, it's not the same name as the one exposed the script.py which is lower case webiopi.
I guess I am not getting or understanding the Object from the Python to the Object in Javascript.
https://code.google.com/p/webiopi/wiki/Tutorial_Basis
If not already done, install WebIOPi on your Raspberry Pi.
1)Create a folder somewhere on your Pi, for instance /home/pi/myproject. This is the main folder.
2)Create another python folder in the folder previously created. We will store Python script file here.
3)Create another html folder next to python. We will store HTML and other ressources here.
You should have something like this :
home
- pi
- myproject
- python
- html
Create a script.py file in your python folder, eg. /home/pi/myproject/python/script.py. This file will be loaded and executed by the WebIOPi server.
In index.html,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | Light Control</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
// Create a "Light" labeled button for GPIO 17
var button = webiopi().createGPIOButton(17, "Light");
// Append button to HTML element with ID="controls" using jQuery
$("#controls").append(button);
// Refresh GPIO buttons
// pass true to refresh repeatedly of false to refresh once
webiopi().refreshGPIO(true);
});
</script>
In webiopi.js
WebIOPi.prototype.init = function() {
$.getJSON(w().context + "map", function(data) {
var count = w().PINS.length;
for (i = 0; i<count-1; i++) {
var type = w().TYPE.GPIO;
var label = data;
if (label == "DNC") {
type = w().TYPE.DNC;
}
else if (label == "GND") {
type = w().TYPE.GND;
}
else if (label == "V33") {
type = w().TYPE.V33;
}
else if (label == "V50") {
type = w().TYPE.V50;
}
if (type.value != w().TYPE.GPIO.value) {
label = type.label;
}
w().map(i+1, type, label);
}
if (w().readyCallback != null) {
w().readyCallback();
}
w().checkVersion();
});
}
WebIOPi.prototype.initMobile = function() {
webiopi().init();
}
WebIOPi.prototype.ready = function (cb) {
w().readyCallback = cb;
}
WebIOPi.prototype.map = function (pin, type, value) {
w().PINS[pin] = Object();
w().PINS[pin].type = type
w().PINS[pin].value = value;
if (type.value == w().TYPE.GPIO.value) {
w().GPIO[value].mapped = true;
}
}
WebIOPi.prototype.addALT = function (alt, gpio, name) {
var o = Object();
o.gpio = gpio;
o.name = name;
alt.gpios.push(o);
}
Configuration
Edit /etc/webiopi/config :
Locate [SCRIPTS] section, add following line to load your Python script
...
[SCRIPTS]
myproject = /home/pi/myproject/python/script.py
...
Locate [HTTP] section, add following line to tell WebIOPi where to find your HTML resources
...
[HTTP]
doc-root = /home/pi/myproject/html
...
The two steps above are enough to run our app, but we want to limit remote control to the Light only. By default, we can remotely change function and value of all GPIO.
Locate [REST] section, add following lines
...
[REST]
gpio-export = 17
gpio-post-value = true
gpio-post-function = false
...
=======================================================================
My Questions,
1)in webiopi.js the WebIOPi object, how does it correspond to webiopi object of the webiopi.py. the webiopi.py has interface with low level C driver codes. So I expect any web object from webiopi.js must refer to some corresponding object in python.
2)Does /etc/webiopi/config which loads the script.py enable the webiopi object of the python code exposed and the webiopi.js then can use it?
3)The webiopi.py has import webiopi which loads the webiopi python library. But in webiopi.js the object name is Uppercase WebIOPi, it's not the same name as the one exposed the script.py which is lower case webiopi.
I guess I am not getting or understanding the Object from the Python to the Object in Javascript.