Controlling the Pi from a web-based app
Les Pounder shows us how to create a web app using pure Python to control the Raspberry Pi GPIO.
We’re going to create a web interface using Anvil that uses just Python. This interface will enable us to control real components: a red and blue LED along with a buzzer, connected to a Raspberry Pi.
The hardware build for this project is just two LEDs, one connected to GPIO17 and the other to GPIO27. We used a 330 Ohm resistor to connect each LED to the GND pins of a Raspberry Pi 4. The buzzer is connected to GPIO22 and GND, and requires no resistor. Please see the diagram in the download for this project for detailed information.
WRITING THE CODE
On a PC visit https://anvil.works and create a free account by clicking Start Building. Follow the sign-up instructions, then click Create App,appear then select the theme Material Design. In Anvil the layout is as follows. On the left is an App
Browser used for configuration. In the centre is where our app – called a form in Anvil – is designed using elements from the top right of the screen, called the Toolbox. You will see ‘Material Design’ as the name of the app in the top left of the screen; change this to ‘GPIO Control’ by clicking the text.
Next we need to add three buttons to the form. The Button tool can be found in the toolbox, just hover the mouse over the icons to identify them. Drag each button over to the form and place them next to each other. For each button change the ‘text’ field in the properties menu (bottom right of screen) to the following values: RED BLINK, RED TOGGLE, MUSIC. The next step is to place a Label from the toolbox under the buttons, and then change the label text to “Blue Brightness”. To go with this label we need a TextBox; drag it so that it’s horizontal next to the label and change the placeholder text to “Please
enter a value between 0 and 1, eg 0.4”. Now add another button, this time placed underneath the previous components. Change the text to “SET BRIGHTNESS”.
To enable this app to communicate with our Raspberry Pi we need an API key. In the top left of the screen is a cog settings menu. Click it and select Uplink. There will be a button to get your server API key. Click the button and copy/save/write down this key.
With that complete we can now write some code for the Anvil web app. Double-click the RED BLINK button. This will automatically take us to the appropriate section of code, which is a function. Replace pass with the following code, make sure that it is indented to match how pass was formatted.
anvil.server.call(“red_ blink”)
Make a note of red_blink as we shall be reusing that on the Pi. To go back to the form, click Design. Now change the code for the two other buttons in the same manner as before. RED TOGGLE:
anvil.server.call(“red_ toggle”)
MUSIC:
anvil.server. call(“music”)
The final button is SET BRIGHTNESS and for this we need to add a different line of code. Doubleclick the button to edit.
anvil.server.call(“blue_ brightness”, float(self.text_
box_1.text))
This will call a function on our Raspberry Pi called
blue_brightness and it will pass a value stored in the TextBox that will control the LED on our Pi. That’s all of the code for Anvil, but before we move on to the Raspberry Pi, press RUN on Anvil to start the app. Nothing will happen until we write the code for the Pi.
Power up the Pi and boot to the desktop. Before we can write any code for the Pi we need to open a terminal and install the anvil-uplink Python library.
$ sudo pip3 install anviluplink
To write the Python code open your favourite Python editor and create a new file called blink.py. We start by importing the libraries for our code.
from gpiozero import LED, PWMLED, TonalBuzzer
from gpiozero.tones import Tone from signal import pause from time import sleep import anvil.server
We import the LED, PWMLED and TonalBuzzer classes from GPIO Zero, enabling us to control LEDs and the buzzer. Then we import Tone to control the pitch of the buzzer. pause stops our code from exiting, and
sleep is used to control the pace of the code. Lastly we import the Anvil uplink server. To connect this Pi to the Anvil app, you will need your API key:
anvil.server.connect(“YOUR API KEY”)
In order for the LEDs and buzzer to be used we need to tell Python to which GPIO pins they are connected to. red = LED(17) blue = PWMLED(27) b = TonalBuzzer(22)
The buttons in our Anvil app make calls to functions that we will write in the code, but in order for that to work we need to use a decorator to instruct anvil-uplink. The first function is to toggle the red LED on and off via the RED TOGGLE button in Anvil. @anvil.server.callable def red_toggle():
red.toggle()
Another function to flash the LED every half a second when the RED BLINK button is pressed: @anvil.server.callable def red_blink():
red.blink(0.5,0.5)
The next function takes the float value (between 0 and 1.0) stored in the text box and uses it to control the brightness of the blue LED. @anvil.server.callable def blue_ brightness(brightness):
blue.value = brightness The last function will play music via the buzzer – the first few notes of Twinkle, Twinkle, Little Star. We use the Tone() function in GPIO Zero to play specific notes, with pauses between each note to control the tempo. Also note that there has to be a stop at the end, or the note will never stop playing! @anvil.server.callable def music(): b.play(Tone(“C4”)) sleep(0.2) b.play(Tone(“C4”)) sleep(0.2) b.play(Tone(“G4”)) sleep(0.2) b.play(Tone(“G4”)) sleep(0.8) b.play(Tone(“A4”)) sleep(0.2) b.play(Tone(“A4”)) sleep(0.2) b.play(Tone(“G4”)) sleep(0.2) b.stop()
The last two lines of code ensure that the project keeps running and waiting even when a button has not been pressed. pause() anvil.server.wait_forever() With the code completed on the Pi, save and run. You will see the code connect to the Anvil service and this is where we need to switch back to our computer running the Anvil app. Press the buttons to toggle the LED on/off, or to make it flash. To use the blue LED, first type in a value between 0 and 1.0 and then press SET BRIGHTNESS to turn it on. Lastly there is the MUSIC button, which will play Twinkle, Twinkle, Little Star using the buzzer.