Writing the HTML

We now need to create the website to control the LED from. We aren’t going to go all out and fancy with this, it will just be a single label and a checkbox that determines whether the LED is on or off. If you want to go about making it cooler looking then there are plenty of css tutorials(4) out there you can go to, as well some more specific tutorials on how to make the checkbox look cooler(5).

In your IoT_project folder, create two files, index.html and main.js, then open them both in geany.

In the below code, we create a simple HTML webpage. The basic HTML below creates a webpage titled “Control an LED”, displays the text “Toggle your LED”, and below that creates a checkbox that we can access in code with the id “toggleLED”. It then includes the script main.js so that we program all of the control functionality.

Now that we have the HTML taken care of, we need the JavaScript to talk to our web socket and send it messages. First, we create this event Listener that checks whether the webpage has fully loaded.

Next, inside of the curly brackets, create a new WebSocket object. This handles all of the sending and receiving of web socket messages.

Then, right below where you just defined the websocket, add a new eventListener that will check whether the web socket opened properly and setup our toggleLED if it does.

This line calls the setupToggleLED function, which is a custom function that we still need to define. We do this by making the function, and inside of it creating another eventListener that checks for when the toggleLED checkbox has been clicked on.

Then, inside of that event listener, we can create a JSON object and send it to the Pi. JSON is a common format for storing and sending data, and it can hold multiple different fields with different values. Our data has two fields, “type” and “value”, which allow us to interpret data much more clearly on the python side of things.

Altogether, this is enough to send messages to our Pi server. The main.js file should look like this when you are done.

To test this website, open a terminal, navigate to the IoT_project folder and run the below command to create a small python http server for the webpage.

$ python -m http.server

Then, open your browser and open the URL http://0.0.0.0:8000/ to see your website. Try toggling the checkbox there, and itf you still have app.py running then you should be able to see JSON being printed out in the terminal.

For debugging purposes, you may want to keep the developer tools open, which can be accessed via Ctrl+Shift+I and can display all sorts of helpful info via the console tab. If your connection to the web socket ever fails for one reason or another, you will get an error message that looks something like this. In your terminal, you may be seeing an error that is mentioning a file called favicon. Do not worry about this, you don’t need it and it will not interfere with your website.