Running Python CGI Scripts from Javascript and JQuery Mobile UI -

Running Python CGI Scripts from Javascript and JQuery Mobile UI -

the workflow i'm trying accomplish follows.

there jquery mobile ui bunch of range slider elements. each 1 controlling different function. when user moves , releases 1 of these sliders, jquery event should triggered makes ajax phone call (i don't care if uses json, xml, post, etc - fastest best) the ajax phone call contains info slider moved, , new value (ex: id=slider1, value=215) the ajax executes python script in cgi bin reads id , value , controls hardware connected raspberry pi via serial (the raspberry pi running webserver).

i have jquery ui bunch of sliders. each slider code looks this:

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <div class="rgbw_label"><label for="red_slider"> red: </label></div> <input type="range" id="red_slider" name="red_slider" value="0" min="0" max="255" data-highlight="true" /> </fieldset> </div>

there needs accompanying jquery this:

$(document).ready(function () { $.ajax({ type: "post", url: "cgi-bin/command.py", success: function (msg) { alert("data saved: " + msg); } }); });

obviously 2 major things have alter js. first, needs execute when slider released (not on page load), , sec needs pass value of slider python script how. set test. when load page, tester python script executed correctly, , hardware connected raspberry pi controlled properly. know should using slidestop event, can't work. i'm not sure of best way send variables python script.

my python script looks this, right now: #!/usr/bin/python

import cgi import serial ser = serial.serial('/dev/ttyusb0', 57600) ser.write("hello, command!\n") # write string ser.close()

so, it's not looking kind of incoming data, gets called , writes serial data. should able receive info ajax call, , adjust serial writing command based on info receives. need help getting info variables can work with. assume should pass kind of "i'm done" message javascript calling function.

i'm looking forwards insight folks might have on either high level issues, or ways solve more specific problems i've listed here.

thanks!

how following:

... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> ... <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <div class="rgbw_label"><label for="red_slider"> red: </label></div> <input type="range" id="red_slider" name="red_slider" class="posting-slider" data-slider-id="1" value="0" min="0" max="255" data-highlight="true" /> </fieldset> </div>

with next javascript:

$(document).ready(function() { $('.posting-slider').on('slidestop', function(e) { $.post('/server/script.py', { id: $(this).data('slider-id'), value: e.target.value }, function(data, textstatus, jqxhr) { console.log('posted: ' + textstatus); }); }); });

and finally, python:

import cgi form = cgi.fieldstorage() import json import serial ser = serial.serial('/dev/ttyusb0', 57600) ser.write("hello, command value %s slider id %s!\n" % (form["id"], form["value"])) # write string ser.close() print "content-type: application/json" print print(json.jsonencoder().encode({"status":"ok"}))

jquery python ajax cgi raspberry-pi