How to Control a Raspberry Pi from a Maple Systems Web HMI

Load into our Raspberry Pi

First off, we’ll go into our Raspberry Pi’s desktop. I’m using Raspberry Pi’s default desktop OS, but we can achieve much of the same results on various other server-based OSes as well.

Install Python and Flask

Now we’ll open a terminal on the Raspberry Pi, and make sure Python3 and Flask are installed on our device. This will make programming and exposing our GPIO very simple.

Transfer the Web Server Files to the Pi

Once you have your web server and web page programmed, or if you’d rather just expand upon our [sample project], you can transfer those to your Raspberry Pi.

I transferred the files via USB drive, since it’s nice and simple, but you’re welcome to use any method you prefer

Python Initialization

First up, is app.py. At the top we import all the functions we’ll need from both flask and gpiozero (which comes pre-installed on the raspberry pi), and we define an array of LED pins, and an array of physical switches.

After defining variables for the LEDs and Switches, we create some helper functions to update/report the states of each of them

Initial Flask Route

From here, we create a route for the “homepage” of the web server (also known as “/”), where we render the “index.html” template, and pipe in our LED and Switch arrays

Getting LED Updates

The next route we create is one to respond to LED changes from the front-end. The front end will send Flask a message of which LED it’s going to change, and this route changes the status of that LED

Sending Status Updates to the Front End

Now we’ll create a route where we can send the updates of all the LEDs and Switches back to the front-end when something changes.

Running our Flask Host

Finally, we set our Flask server to run at 127.0.0.1, and port 5000.

Now, we’ll go over our front-end template.

Initializing our HTML

After establishing our webpage styles, we create some simple HTML that will render the status of our variables from the Flask server variables.

Getting References to our HTML

Now we move on to the JavaScript, we’ll start by gathering references to all of our display elements.

Updating our LEDs

Now we’ll create some JavaScript functions that will respond to when the user presses any of the buttons associated with our LEDs, and send those changes back to our Flask server.

Getting Data Updates for the Switches

Finally, we’ll create a function to poll the backend for updates, and set it to fire every second.

Refer to the Raspberry Pi GPIO chart

To start, we’ll make sure our GPIO pins are correct in our code. For this tutorial, I’m referring to the pins being used in the [sample project] code.

Prepare The Circuit

Now we’ll prepare the hardware that we’ll hook up to the GPIO, I’ll be using a breadboard for this example like so.

Add Powered Circuit

The first thing I’m wiring to the circuit is the static powered 3.3VDC positive and negative ends on either end of the breadboard. These will be tied to pins 1 and 6 respectively.

Add LED power wires

Now we’ll add four wires from pins 16, 15, 13, and 11 to the positive end of our LEDs

Add Wires for Physical Buttons

Finally, we’ll add wires from pins 18, 22, and 21 to the physical button circuits to finish out the sample project wiring.

Configure our Network

To start, we’ll want to make sure to configure the Raspberry Pi and our Maple Systems HMI to not only be on the same network, but to have IP addresses within the same network subnet.

Connect the Web HMI to the Raspberry Pi

Now we’ll open the address bar of our web HMI and navigate to the Raspberry Pi’s IP address, at the port we specified in our Flask code (port 5000 in my example)