So I’ve been thinking for a while, “wifi control of these lamps is all well and good, but I’d really rather push data over a serial connection so that I can avoid having to set up wifi networks. Also, serial just makes more sense for high throughput usecases, eg sending a continuous stream of updates”
“…Too bad WLED doesn’t have a serial API”
You know what they say about when you assume things? I don’t know why I never really looked it up, but I just figured that WLED didn’t have serial support. Turns out it actually supports multiple protocols, and as of 0.13.0 it can receive the same JSON commands via serial as it does via wifi.
So here’s a little video of a proof of concept I put together, to learn a couple of things. It’s my first time playing around with web serial – I lifted heavily from this Codelab to get things working.
Follow these steps to set up WLED colour changes as channel point rewards using Kruiz Control. These instructions are written specifically for my Squid Lamps but can be modified for use with any WLED project.
Click the above link to generate a token. You’ll be prompted to authorize permissions as a Twitch account.
Do not share this token with anyone else! It has permissions to manage your channel redemptions, to send messages in chat as the Twitch account that you choose and to see the email associated with the account. (I dunno why email address is needed but Comfy.js won’t work without that permission)
Open settings/chat/oauth.txt and replace the “token” part of the file with the generated token. Remove any spaces.
Channel Name
In settings/twitch/user.txt set the name of the channel that you want to watch for channel point redemptions. (Usually, your channel)
Chat User (Optional – not currently used)
Set settings/chat/user.txt to a Twitch channel. Setting this would allow Kruiz Control to send messages on your behalf to that channel.
Replace the contents of triggers.txt with the following. Note that the OnChannelPoint triggers need to match the names of the rewards from the step above.
Replace the IP address on line 2 (http://192.168.0.113) with the IP of the lamp.
Your lamp needs to be connected to the same network as your streaming PC.
OnInit
API Url SquidBeakon "http://192.168.0.113/json/state"
API Method SquidBeakon POST
API Header SquidBeakon "Content-Type" "application/json"
OnChannelPoint "Rainbow Lamp"
API RawData SquidBeakon "{\"seg\": [{\"of\": 4, \"fx\": 110, \"sx\": 128, \"ix\": 128, \"pal\": 11}]}"
API Send SquidBeakon
OnChannelPoint "Blue Lamp"
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[0, 0, 255]]}]}"
API Send SquidBeakon
OnChannelPoint "Cyan Lamp"
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[0, 255, 200]]}]}"
API Send SquidBeakon
OnChannelPoint "Green Lamp"
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[8, 255, 0]]}]}"
API Send SquidBeakon
OnChannelPoint "Yellow Lamp"
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[255, 200, 0]]}]}"
API Send SquidBeakon
OnChannelPoint "Orange Lamp"
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[255, 160, 0]]}]}"
API Send SquidBeakon
OnChannelPoint "Red Lamp"
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[255, 0, 0]]}]}"
API Send SquidBeakon
OnChannelPoint "Magenta Lamp"
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[255, 0, 255]]}]}"
API Send SquidBeakon
Once this is implemented, we can update the trigger code to refund channel points if the lamp failed to update, and clear items out of the queue if it’s successful.
Alternatively, we could write our own code using Comfy.js!
Add a new browser source. Select “Local File” and pick the index.html file from the Kruiz Control directory that you extracted in step 1. Keeping this browser source active will listen for Channel Point redemptions.
Select a reward in Twitch and if everything has been set up correctly, the lamp colours will change!
If you make any changes to the files inside the Kruiz Control directory, including the settings or triggers.txt files, you must refresh your browser source in OBS for the changes to take effect.
Appendix: A single reward with user-provided colour
If you don’t want to crowd your rewards with the lamp options, you can create one reward and allow it to control the lamp colours with the redemption message from your viewers.
Using a single reward also allows for the Twitch cooldowns to be used. This means that a viewer can’t override the colours set by another viewer until the cooldown ends.
Replace triggers.txt with the text from the code block below. Create a single reward named “Set Lamp Color” and turn on the “Require Viewer to Enter Text” checkbox.
This trigger will search the text of the message that was attached to the points redemption and if one of the color keywords is found then the lamp colour will change. It’s worth suggesting to the user what to enter in their message in the reward description, eg:
Set my squid lamp to rainbow, blue, cyan, green, yellow, orange, red or magenta by including one of these words in your message!
OnInit
API Url SquidBeakon "http://192.168.0.113/json/state"
API Method SquidBeakon POST
API Header SquidBeakon "Content-Type" "application/json"
OnChannelPoint "Set Lamp Color"
Param Lower message
Param Keyword message "rainbow"
If 3 {matched} == true
API RawData SquidBeakon "{\"seg\": [{\"of\": 4, \"fx\": 110, \"sx\": 128, \"ix\": 128, \"pal\": 11}]}"
API Send SquidBeakon
Exit
Param Keyword message "blue"
If 3 {matched} == true
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[0, 0, 255]]}]}"
API Send SquidBeakon
Exit
Param Keyword message "cyan"
If 3 {matched} == true
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[0, 255, 200]]}]}"
API Send SquidBeakon
Exit
Param Keyword message "green"
If 3 {matched} == true
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[8, 255, 0]]}]}"
API Send SquidBeakon
Exit
Param Keyword message "yellow"
If 3 {matched} == true
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[255, 200, 0]]}]}"
API Send SquidBeakon
Exit
Param Keyword message "orange"
If 3 {matched} == true
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[255, 160, 0]]}]}"
API Send SquidBeakon
Exit
Param Keyword message "red"
If 3 {matched} == true
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[255, 0, 0]]}]}"
API Send SquidBeakon
Exit
Param Keyword message "magenta"
If 3 {matched} == true
API RawData SquidBeakon "{\"seg\": [{\"fx\": 0, \"col\": [[255, 0, 255]]}]}"
API Send SquidBeakon
Exit
Appendix: Customising Eye colours
Add the following trigger commands to triggers.txt. Make sure to create the corresponding rewards in the Twitch dashboard!
OnChannelPoint "Red Eyes"
API RawData SquidBeakon "{\"seg\": [{},{\"col\": [[255, 0, 0]]}]}"
API Send SquidBeakon
OnChannelPoint "Lime Eyes"
API RawData SquidBeakon "{\"seg\": [{},{\"col\": [[255, 255, 0]]}]}"
API Send SquidBeakon
OnChannelPoint "White Eyes"
API RawData SquidBeakon "{\"seg\": [{},{\"col\": [[255, 255, 255]]}]}"
API Send SquidBeakon
Appendix: Multiple Lamps
This sample sets up SquidBeakon1 and SquidBeakon2 with their own URLs so that they can be driven by separate rewards. Full support for multiple channel point settings is left as an exercise for the reader.
OnInit
API Url SquidBeakon1 "http://192.168.0.113/json/state"
API Method SquidBeakon1 POST
API Header SquidBeakon1 "Content-Type" "application/json"
API Url SquidBeakon2 "http://192.168.0.114/json/state"
API Method SquidBeakon2 POST
API Header SquidBeakon2 "Content-Type" "application/json"
OnChannelPoint "Rainbow Lamp 1"
API RawData SquidBeakon1 "{\"seg\": [{\"of\": 4, \"fx\": 110, \"sx\": 128, \"ix\": 128, \"pal\": 11}]}"
API Send SquidBeakon1
OnChannelPoint "Rainbow Lamp 2"
API RawData SquidBeakon2 "{\"seg\": [{\"of\": 4, \"fx\": 110, \"sx\": 128, \"ix\": 128, \"pal\": 11}]}"
API Send SquidBeakon2
Appendix: Tips for displaying your lamps on stream
The lamps are emitting light, which can be difficult to capture on camera. Some tips to improve the appearance of the lights:
Reflected surfaces
Nearby white or other reflective surfaces will convey the colours of the light
Ambient lighting
The lights will be washed out by bright ambient lighting. The frequencies of sunlight can be especially effective at washing out the lamp colours. Indoor lighting or a dimmed room are best!
Diffusion
A piece of printer paper or baking paper in front of the lights can be used to diffuse the colours. This file contains templates for paper cutouts that can be placed in or on the lamp.
WLED JSON API
The commands in this document send JSON data via the WLED JSON API.
You’ll notice that these instructions are very sparse on images. At this time I have only completed the text of the guide. Even though the images will be necessary to make sense of these instructions I am providing them now as an incentive for me to return to finish this guide at a later date.
This is a guide to making a USB powered squid lamp, similar to but not exactly like the one pictured below.
If you would like to commission a fully assembled lamp, please email me at ale@chenonetta.com. Current pricing is $150AUD per lamp before shipping.
Components
I have included some basic price guides including shipping fees, but you can likely source some parts for cheaper! Prices are in AUD. Some of the links are affiliate links – using these to order your parts helps support me!
Used to illuminate the eyes. 1 metre will supply almost 4 lamps.
You could cut individual LEDs from the 100IP30 strip and space them out instead of buying this separate strip type. Filling the entire eye space with a 100IP30 segment is overkill so I use this more sparse strip as a convenience.
Heatshrink to fit over the LED strips (approx 10-12mm diameter)
Glue that can bond plastic to plastic.
I usually use SciGrip Weld-On 3, a water-consistency solvent that bonds very quickly, and SciGrip Weld-On 16 which is more viscous. Super glues will probably work fine.
Equipment
You will need access to the following specialised equipment. If you don’t own these yourself look out for your local Makerspace or tool library!
Laser engraving machine
Oven and/or heat gun
You could use your home oven but I prefer to use a dedicated crafting oven.
Soldering Iron
Assembly Instructions
Step 1: Cut the acrylic
Peel the protective paper from the back sides of the black and frosted acrylic. Leave the paper on the side that faces upwards while in your laser cutter. The paper will provide protection for the parts while we work on assembly.
Frosted parts file: DXF / SVG (Dimensions: 434×219.9mm)
Black parts file: DXF / SVG (Dimensions: 367.58×201.26 mm)
In these files red lines should be cut, blue and green should be vector engraved (ie, cut but with less power).
Blue lines should be a kiss cut allowing for the front protective paper to be peeled off. The green line should be a slightly deeper cut to assist bending of the tentacles.
Step 2: Glue the face plates
Peel the areas of the frosted pieces that correspond to black parts.
You should now be able to align the black pieces with the exposed frosted sections and glue them in place.
I apply the Weld-On 3 by dipping an old paintbrush into the glue. I then touch the wet paintbrush to where the two pieces of acrylic meet and the glue is drawn into place via capillary action. This creates a strong bond within a minute.
⚠️ Wear appropriate PPE when working with solvent glues. Nitrile gloves, safety goggles and a respirator are recommended.
Step 3: Bend the side walls
Preheat your oven to 160°C
Peel the protective paper off the rectangular pieces of frosted acrylic. If left on, these pieces would leave sticky residue on the parts as we bend them.
I recommend working on one piece at a time. Place each piece in the oven and let it sit for about 5 minutes. It should be floppy when you pull it out. If the piece forms bubbles it has sat in the oven for too long.
Form the pieces into shape using the black outline of the face plate as a guide. You’ll be using the long piece to form the top head of the squid, the two identical pieces to make the left and right tentacles and the shorter piece with the groove in the middle of it to form the middle tentacles.
If you cannot fit the full length of the piece into the oven at once you can first bend it by heating it with a heat gun or by placing the piece in the oven with the door open so that half of the sheet can be bent.
If you don’t have an oven that you feel comfortable placing your acrylic into you can heat your pieces using a heat gun. You’ll need to work slowly, bending in sections rather than forming the full shape in one go.
⚠️ Wear heat proof gloves when handling the hot acrylic!
It can be difficult to bend the sheets correctly. I have included some files for jigs that can be cut from 3mm MDF.
To use the two-part jigs, rest the hot piece of acrylic against the bottom piece, then press the top piece into it to create the indentations.
The large jig is designed for the long piece of acrylic to be wrapped around it. Hold the ends in place so that they cool without expanding outwards again.
To speed up cooling of the piece, you can wave the pieces in the air so that cool air passes over them quickly, or blow cool air across them.
Step 4: Cut the socket hole
This guide assumes that you’ll wind the USB cable through a hole in the side of the lamp.
There are alternatives (my current lamp design provides a micro USB socket on the outside) but they’re complicated enough that I won’t go into them in this document.
Options:
Drill/cut a large hole in the side big enough for the whole micro USB cable to fit through
Cut an approx 5mm diameter hole then bisect the piece through the hole
The option you pick will depend on which aesthetic tradeoff you prefer. For 1, the large hole will cause the insides of the lamp to be seen from some angles. 2 will have a visible line across the wall where the piece was split into separate parts.
Step 5: Glue the sides
One of the face plates has a slot in its tentacle. Place it face down (with the black acrylic on the bottom, and the frosted on top).
Glue the walls of the lamp to the edges of this piece.
If you cut the side tentacle in half in the previous step, then remember to feed the USB cable through the hole before gluing the walls in place!
Step 6: Make the eye sheath
The eye sheath holds the two plates of the lamp together without any glue! It also holds the LED strips, allowing for beautiful illumination of the edges of the lamp.
Cut a length of 1mm boxboard to 38x265mm. I recommend cutting the long side against the grain – you want to be able to easily bend the long loop. This video explains how to find the grain of your sheet.
Mark two parallel lines 14mm away from the long edge. This marks a 10mm gap in the middle to align your LED strips to. Flip over the piece and mark lines on the opposite side, too.
Line both long edges of the piece with masking tape. The tape protects the edge of the cardboard and provides friction when inserted into the squid’s face plates.
Bend the cardboard in half, then slowly curl the cardboard in the opposite direction of this bend. You are aiming to make the shape of the eye mask of the squid.
It can help to slot the piece into one of the face plates as you work. There should be about a 3mm gap between the ends of the cardboard.
Join the loop with a piece of masking tape on the top and bottom, leaving a gap to allow the LED strip to pass through.
Step 7: Make the LED strip
When working with addressable LEDs, take note of the arrows denoting the direction of the data line.
Start of strip ➡️➡️➡️➡️ End of strip
Cut a length of 100IP30 strip to 26 LEDs long (26cm) – this piece will be called Segment A from now on
Cut a length of 30IP30 strip to 8 LEDs long (approx 26.6cm) – this piece will be called Segment B
Cut a piece of heatshrink, 1-2cm long
Slide the heatshrink over the start of Segment B, and push it clear of the solder pads. Align Segment A and Segment B, making sure to double check the direction of the data line and that the correct terminals are in contact.
The 5V, data and G pads of each segment should meet their corresponding pads on the other segment.
The arrows should face in the same direction, with Segment A leading INTO Segment B.
After joining the strips, pull the heatshrink over the join and shrink it there, providing protection for the connection you just made.
Solder power, data and ground wires to the start of Segment A. These should be about 7cm long.
Once happy with your wire joins, you can shrink a 1cm piece of heatshrink over them for protection.
Step 8: Attach the LED strip to the eye sheath
Crease Segment A after the 13th LED by facing the LEDs towards another and pinching the cut line.
Peel the backing off of Segment A and nestle the crease that you just made in the halfway fold of the eye sheath, lining up the strip with the guide lines you drew on earlier. Now stick down the sides of this segment, taking care to stay between the lines as you wrap the strip around the cardboard.
Feed the end of Segment B into the gap in the eye sheath and bend the heatshrink-covered area back over itself. You can now remove the adhesive from the back of Segment B and affix the strip to the inner face of the eye sheath.
Step 9: Prepare the controller
Connect the Wemos D1 mini into your computer using a micro USB cable. Install WLED to the controller at http://install.wled.me/
Desolder the LED on the board – otherwise the blue light may interfere with the appearance of your coloured LEDs.
Desolder the Reset button (optional – depending on how you orient the controller it may be more likely to bump the reset button accidentally).
Solder your wires from the LED strip to the adjacent 5V, G and D4 terminals. Take care to connect the correct leads to the right terminals! The LED strip has the 5V and G lines on opposite sides, while the Wemos has 5V and G next to one another.
If everything has been done correctly – plugging the D1 into power will light up 30 of the LEDs on the strip in an orange colour.
Step 10: WLED settings
Connect to the WLED Access point. Default SSID WLED-AP, password wled1234
If you have a favourite preset, you can specify it as the startup pattern on the http://4.3.2.1/settings/leds page.
If you’ve connected WLED to your home network, replace the 4.3.2.1 with the IP of the lamp. You can find the IP address by checking the list of devices on your router, or by installing the iOS or Android WLED apps and searching for devices.
Step 11: Enclose the lamp
Slide the Wemos controller into the slot in the frosted acrylic. This slot provides a snug home for it to stay in the lamp and hides a lot of the shadow that would be cast by the controller.
Check that the cardboard eye sheath is smoothly bent and slot it into the body of the squid (the face plate that you’ve attached the walls to).
The other face plate can now be fitted over the eye sheath. You may need to jiggle it somewhat for it to fit snugly. Be patient and feel for how the cardboard fits into its slot. Once it’s in place the black border of the face plate will be flush with the walls.
Optional: Before attaching the face plate, line the walls of the squid with double-sided sticky tape. This provides some additional adhesion to hold your lamp together while still providing the option to reopen the lamp in the future if you need to do maintenance.
Now that lamp is fully assembled you can remove all of the protective paper! It’s done!
Closing Notes
There are a few differences between the lamp in this guide and the lamps I am currently making. Incorporating the below changes are left as an exercise for the reader
The power port. My v4 lamp includes a micro USB socket on the side, instead of threading the cable through the side of the lamp. I also take the 5V power from this socket instead of from the 5V pin on the Wemos D1 Mini, allowing me to set a higher current limit in the WLED settings.
This guide advises permanent solder connections instead of temporary connectors. I’ve used connectors like the JST XH2.54 (Dupont connectors would also work) to allow me to swap various parts in and out – this can be good for making and testing many lamps at once or for replacing a single module of the lamp if it is damaged.
