Technology Is Not Dull: PIMORONI Plasma Stick 2040 W web site controlled colour

The PIMORONI Plasma Stick 2040 W or Wireless Plasma Kit is a Raspberry Pi PICO controlled LED controller for 5V WS2812/Neopixel/SK6812 LED strips.

The PICO W has built in wireless support which can be used to host a limited web site. A full web stack probably exceeds the capabilities of the microcontroller but by using a (semi) RESTFul web server it is possible to control the LED strips via a web interface.

AJAX

Asynchronous Javascript And XML (AJAX) uses a combination of web technologies to create asynchronous web applications client-side. It has a long history, and initially required a quite complicated set up. As browser (client-side) support has expanded, it has become much easier to set up responsive web applications that do not require the whole page to be updated.

Though XML is part of the name, the returned data can be anything – in this case the returned data will be JSON.

Client-Side UI

The user interface needs to be simple as it is provided by the PICO.

<!DOCTYPE html>
<html>
<head>
<title>AJAX-PICO test frame</title>
<script lang="JScript">
function sendData(slideAmount,field)
{
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Get response as JSON
var returnType = xhttp.getResponseHeader("Content-Type");
//alert(returnType);
if(returnType =="application/json"){
var returnText = xhttp.responseText;
const obj = JSON.parse(returnText);
// Get fieldname and corresponding HTML element
var fieldname = obj.field;
//alert(fieldname);
var field = document.getElementById(fieldname);
if(field != null){
field.innerHTML = obj.value;
}
else{
alert("Field not found - JSON - " + returnText);
}
}
}
// Send a request
xhttp.open("GET", "plasma2040/" + field +"/"+ slideAmount);
xhttp.send();
}
</script>
</head>
<body>
<div>
<div>
<input type="range" id="Red" min="0" max="255" step="1" value="%d" onchange="sendData(this.value, 'returnRed')">
</div>
<div>
<span id="returnRed">%d</span>
</div>
<div>
<input type="range" id="Green" min="0" max="255" step="1" value="%d" onchange="sendData(this.value, 'returnGreen')">
</div>
<div>
<span id="returnGreen">%d</span>
</div>
<div>
<input type="range" id="Blue" min="0" max="255" step="1" value="%d" onchange="sendData(this.value, 'returnBlue')">
</div>
<div>
<span id="returnBlue">%d</span>
</div>
</div>
</body>
</html>

Three Input Range controls and three Spans for the current values.

The three Range controls have an OnChange event defined, which makes a call to a JScript function with the field name and the value of the range control.
The JScript function creates an XMLHTTP object, adds a call back method and sends the request to the server including the field name and its value as a RESTFul URL.
The call back function expects a valid JSON string of the form:

{"field":"< field name>","value":"<value>"}

For example: {"field":"returnRed","value":"128"}
The string is converted into a Jscript object.
The field name is extracted from the object and is used to identify the Span object to receive the new value, also extarcted from the object.

Server Side

The server-side code is derived from the asynchronous web server example from Connecting to the Internet with Raspberry Pi Pico W.

The HTML string contains the returned web page, with six numeric placeholders (which are replaced with pairs of the three colours).

The built-in LED and the LED strip are set up and a function to set all the LEDs to the current red, green and blue settings created.

A function to connect to the network is created.

The web server function detects if the request is an AJAX request to set a colour or for the controlling web page.

If it is an AJAX request, the calling URL is obtained from the request string, and the sub-parts of the URL are extracted. Element one is the field name, element two is the field value.
The field names are then checked against Red, Green and Blue and the corresponding variables set to the new values.

A JSON string is constructed and returned to the calling browser.

If the request is not to handle an AJAX request, the HTML is returned with the current red, green and blue values set for the Range controls and the span.

Source Code

# The asynchronous web server code is derived from the Raspberry Pi document:
# "Connecting to the Internet with Raspberry Pi Pico W"
# Imports
import network
import socket
import time
from machine import Pin
import uasyncio as asyncio
import plasma
from plasma import plasma_stick
import secrets
# Default page settings
html = """<!DOCTYPE html>
<html>
<head>
<title>AJAX-PICO test frame</title>
<script lang="JScript">
function sendData(slideAmount,field)
{
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Get response as JSON
var returnType = xhttp.getResponseHeader("Content-Type");
//alert(returnType);
if(returnType =="application/json"){
var returnText = xhttp.responseText;
const obj = JSON.parse(returnText);
// Get fieldname and corresponding HTML element
var fieldname = obj.field;
//alert(fieldname);
var field = document.getElementById(fieldname);
if(field != null){
field.innerHTML = obj.value;
}
else{
alert("Field not found - JSON - " + returnText);
}
}
}
// Send a request
xhttp.open("GET", "plasma2040/" + field +"/"+ slideAmount);
xhttp.send();
}
</script>
</head>
<body>
<div>
<div>
<input type="range" id="Red" min="0" max="255" step="1" value="%d" onchange="sendData(this.value, 'returnRed')">
</div>
<div>
<span id="returnRed">%d</span>
</div>
<div>
<input type="range" id="Green" min="0" max="255" step="1" value="%d" onchange="sendData(this.value, 'returnGreen')">
</div>
<div>
<span id="returnGreen">%d</span>
</div>
<div>
<input type="range" id="Blue" min="0" max="255" step="1" value="%d" onchange="sendData(this.value, 'returnBlue')">
</div>
<div>
<span id="returnBlue">%d</span>
</div>
</div>
</body>
</html>
"""

# Set up built in LED
led = Pin(15, Pin.OUT)
onboard = Pin("LED", Pin.OUT, value=0)
# Set up LED strip
NUM_LEDS = 50
red = 128
blue = 128
green = 128
# WS2812 / NeoPixel™ LEDs
led_strip = plasma.WS2812(NUM_LEDS, 0, 0, plasma_stick.DAT, color_order=plasma.COLOR_ORDER_RGB)
# Start updating the LED strip
led_strip.start()
# Set all LEDs to current red, green and blue values
def set_all_leds():
global red
global green
global blue
for i in range(NUM_LEDS):
led_strip.set_rgb(i, red,green,blue)
# Set all the LEDs
set_all_leds()
# Connect to network
wlan = network.WLAN(network.STA_IF)
def connect_to_network():
wlan.active(True)
wlan.config(pm = 0xa11140) # Disable power-save mode
wlan.connect(secrets.SSID, secrets.PASSWORD)
max_wait = 10
while max_wait > 0:
if wlan.status() < 0 or wlan.status() >= 3:
break
max_wait -= 1
print('waiting for connection...')
time.sleep(1)
if wlan.status() != 3:
raise RuntimeError('network connection failed')
else:
print('connected')
status = wlan.ifconfig()
print('ip = ' + status[0])
async def serve_client(reader, writer):
global red
global green
global blue
print("Client connected")
request_line = await reader.readline()
print("Request:", request_line)
# We are not interested in HTTP request headers, skip them
while await reader.readline() != b"\r\n":
pass
request = str(request_line)
# If the request contains plasma2040 then it should also
# contain a colour change request - plasma2040/<colour field>/<colour value>
if request.find('plasma2040/')>0:
print("Plasma 2040 path")
# Slice the RESTFul path out of the request
start = request.find('plasma2040/')
end = request.find('HTTP')
path = request[start:end]
# Split the path
subpaths = path.split('/')
# If there are the required parts
if(len(subpaths)>2):
#Check for each colour in turn
if(subpaths[1].find("Red")>0):
red = int(subpaths[2])
if(subpaths[1].find("Green")>0):
green = int(subpaths[2])
if(subpaths[1].find("Blue")>0):
blue = int(subpaths[2])
# Update the LEDs
set_all_leds()
# Send back the JSON with the new colour settings
writer.write('HTTP/1.0 200 OK\r\nContent-type: application/json\r\n\r\n')
response = '{"field":"'+subpaths[1]+'","value":"'+subpaths[2]+'"}'
writer.write(response)
else:
# If not Plasma2040 send back the HTML
response = html % (red, red, green, green, blue, blue)
writer.write('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
writer.write(response)
await writer.drain()
await writer.wait_closed()
print("Client disconnected")
async def main():
print('Connecting to Network...')
connect_to_network()
print('Setting up webserver...')
asyncio.create_task(asyncio.start_server(serve_client, "0.0.0.0", 80))
while True:
onboard.on()
print("heartbeat")
await asyncio.sleep(0.25)
onboard.off()
await asyncio.sleep(5)

try:
asyncio.run(main())
finally:
asyncio.new_event_loop()