running raspberry pi LED example

wmsi commented 6 years ago

Hello,

Thanks for the great tool!

Two years ago, we used Pico to demonstrate a simple IOT example with a Raspberry Pi. We placed the following files in a folder (https://github.com/wmsi/mississippi_workshop/tree/master/remote_led). We ran the pico server using:

sudo python -m pico.server

When I tried this again this evening, I received an error -- "NameError: name 'app' is not defined.

I re-read your docs and have adapted the control_led.py based on your example.py. I can now get the LED to toggle with a URL. What I can not figure out is how to launch the pico server and serve an html file. The goal is to click a button on the website and turn on the LED connected to one of the Pi's GPIO pins.

For instance, the html file in my folder is:

`<!DOCTYPE html>

LED Switch ` Any help you can provide would be greatly appreciated! Best, WMSI

fergalwalsh commented 6 years ago

Hi @wmsi,

Nice demo! We should be able to get it working again quite easily. In version 2 I changed quite a few things to make Pico a bit more explicit and less 'magical'. Great to hear you got the python part updated.

The first important change with pico.server is that it expects the html/css/js files to be in a static/ directory inside your working directory. So your example would look like this:

remote_led/control_led.py
remote_led/static/led_page.html

Second, there are a few changes to how the javascript client is loaded and works:

load the pico client library in the <head> like this <script src="/pico.js"></script>**
load the js definition of your python module in <head> like this <script src="/control_led.js"></script>**
Assign the api to variable var control_led = pico.importModule('control_led');

** These two .js urls are handled by pico, there is no need for any corresponding files on your system.

The rest should work as you have it:

<head>
<script src="/pico.js"></script>
<script src="/control_led.js"></script>
<script type="text/javascript">
    var control_led = pico.importModule('control_led');

    function turnOnOff(){
        var state = document.getElementById("toggle").checked;
        control_led.setState(state);
    }
</script>
</head>

<body>
    <input id="toggle" type="checkbox" onclick="turnOnOff()"> LED Switch </input>
</body>

Start the dev server with python -m pico.server control_led. Go to localhost:4242/led_page.html

You can see a basic example with this structure here https://github.com/fergalwalsh/pico/tree/master/examples/simple.

I hope this helps. Please let me know if you need any more assistance.

wmsi commented 6 years ago

@fergalwalsh,

Many thanks! That did the trick! I can now see the changes I need to make for my other Pi and LEGO EV3 IOT examples.

Cheers! WMSI

fergalwalsh / pico

running raspberry pi LED example #18