Controlling a Raspberry PI I/O pins via web App - main

12 Oct 2017


      I rarely comment on here so I hope I have responded correctly?
I have a Pi but I have done very little with python.
However, as for a web app solution - although I use C#, PHP (and some
Scheme) I would probably be tempted to use web2py if encouraged to use
python. Failing that - use something rather popular like Django.
Please note that this below is an example. I have *not *tested it (or even
downloaded web2py) but I hope this serves as an example for what, I
believe, you are trying to accomplish. This code is based on general
experience and what the web2py tutorials cover.
The only area that needs additonal attention is ensuring the sliders are
loaded with the correct values, which I have not done. However, using
jquery, I have created an ajax post when the user 'mouse up' on the slider
- the values are passed over (which the data variable 'should' be storing
in the slider function.
again - expect a few hiccups. Hope this helps.
*Controller - controls.py*
def slider()
   data = request.post_vars
   # Do raspberry Pi stuff here
   # .. or, if not, send to 'some queue' to be processed elsewhere
*View - controls/slider.html*
<html>
  <head>
    <title>Brightness controls</title>
    <meta charset="utf-8"/>
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <form method="post" action="/controls/slider">
      <input id="brightnessR" type="range" min="0" max="100" step="5" />
      <input id="brightnessG" type="range" min="0" max="100" step="5" />
      <input id="brightnessB" type="range" min="0" max="100" step="5" />
    </form>
<script type="text/javascript">
     function update() {
         alert("updating");
         $.post('/controller/method', {
             red: $("#brightnessR").val(),
             green: $("#brightnessG").val(),
             blue: $("#brightnessB").val()
         });
     }
$(document).ready(function() {
         $("#brightnessR").mouseup(update);
         $("#brightnessG").mouseup(update);
         $("#brightnessB").mouseup(update);
     });
    </script>
  </body>
</html>