Hardware components | ||||||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
Software apps and online services | ||||||
| ||||||
In this tutorial, we will build a web-controlled NeoPixel LED ring using an Arduino Nano ESP32 and a WS2812B NeoPixel LED ring. You can set the color and brightness directly from your browser by typing the ESP32 IP address (or http://NeoPixel if name resolution works).
If your setup has more than 16 LEDs, use an external 5V power supply and make sure it shares a common ground with the Arduino/ESP32. The project uses a simple web server in Visuino, so there’s no traditional coding — just drag, drop, and connect components.
You will learn how to set up a web page to control your hardware, a skill that can be reused for future projects with sensors, modules, or other IoT devices. This makes it perfect for Wi-Fi LED controllers, ambient lighting, mood lighting, or interactive electronics projects.
A Troubleshooting step is included at the bottom of the tutorial to help you resolve common issues, like accessing the ESP32 via its hostname or powering multiple LEDs safely.
In this tutorial, you will learn how to:
- Set up an ESP32/ESP8266 as a Wi-Fi web server
- Create a web page to control NeoPixel color and brightness
- Connect and configure a NeoPixel LED ring or strip in Visuino
- Access your ESP32 server using its IP address (and understand why NeoPixel./ may not always work)
- Safely power more than 16 LEDs using an external 5V supply with a common ground
- Design a simple web interface for controlling other sensors, modules, or IoT devices in the future
📥 Download the Visuino project file at the bottom
🎥 Watch the Video!
Also check out this tutorial for more Ideas: ESP8266 and Visuino: DHT11 Temperature and Humidity Web Server
Step 1: What You Will Need- Arduino Nano ESP32 (or any other ESP32 or ESP8266 board)
- Neopixel LED ringWS2812B or LED strip
- Jumper wires
- Visuino program: Download Visuino
- Connect LED Ring pin [VCC] to Arduino pin [+5V]
- Connect LED Ring pin [GND] to Arduino pin [GND]
- Connect LED Ring pin [IN] or (DI) to Arduino digital pin [2]
Note: If you use a LED strip with more then 20 LEDs use external power supply and a common ground with the Arduino board
Step 3: Start Visuino, and Select the Arduino Nano ESP32 Board TypeStart Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "Arduino Nano ESP32" or any other board, as shown on Picture 2
Step 4: In Visuino Set WiFi- Select Arduino Nano ESP32 board and in the properties window expand "Modules>WiFi>Connect To Access Points
- Click on the Connect To Access Points 3 Dots
- In the AccessPoints window drag "WiFi Access Point" to the left side
- In the properties window set SSID (name of your WiFi hotspot or router)
- In the properties window set Password (password of your WiFi hotspot or router)
- Close AccessPoints window
- In the Object Inspector set the value of the "HostName" property to "NeoPixel"
Next we need to add an TCP/IP Server socket for the communication.
- In the Object Inspector, click on the "..." button next to the value of the "Sockets" sub property of the WiFi (Picture 1)
- In the Sockets editor select “TCP/IP Server”, and then click on the "+" button (Picture 2) to add one (Picture 3)
- Close the "Sockets" dialog
- Add "NeoPixels" component
- Add 2X "Delay" component
- Add "Text Value" component
- Add "Char To Text" component
- Add "Split JSON Object" component
- Add 4X "Map Range Analog" component
- Add "Analog To Color" component
This page lets a user pick a color and brightness for a NeoPixel LED strip. It sends the data to an Arduino/Visuino server (/set) in JSON format and updates the page with server-corrected values. The slider and color picker are synchronized with the server response.
Select "TextValue1" and in the properties add this code to "Value":
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
font-size: 22px;
padding: 10px;
}
input[type=color], input[type=range] {
width: 90%;
max-width: 300px;
margin-top: 20px;
}
input[type=color] {
height: 80px;
border: none;
}
</style>
</head>
<body>
<h2>NeoPixel RGB Control</h2>
<input type="color" id="colorPicker" value="#ff0000">
<br>
<label for="brightness">Brightness: <span id="brightnessValue">100</span>%</label>
<input type="range" id="brightness" min="1" max="100" value="100">
<script>
const picker = document.getElementById("colorPicker");
const brightnessSlider = document.getElementById("brightness");
const brightnessValue = document.getElementById("brightnessValue");
let timeout;
function sendColor() {
const c = picker.value;
const r = parseInt(c.substr(1,2),16);
const g = parseInt(c.substr(3,2),16);
const b = parseInt(c.substr(5,2),16);
const br = parseInt(brightnessSlider.value);
clearTimeout(timeout);
timeout = setTimeout(() => {
fetch('/set', {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({r: r, g: g, b: b, br: br})
})
.then(response => response.json()) // parse JSON
.then(data => {
console.log('Feedback:', data); // {r,g,b,br}
// update UI with server-corrected values
picker.value = "#" + ((1 << 24) + (data.r << 16) + (data.g << 8) + data.b).toString(16).slice(1);
brightnessSlider.value = data.br;
brightnessValue.textContent = data.br;
});
}, 200);
}
// events
picker.addEventListener("input", sendColor);
brightnessSlider.addEventListener("input", () => {
brightnessValue.textContent = brightnessSlider.value;
sendColor();
});
</script>
</body>
</html>This is an example output:
{"r":0, "g":255, "b":128, "br":75}
It represents the RGB color values (Red: 0, Green: 255, Blue: 128) and the brightness level (75%) for controlling the NeoPixel LED.
Step 8: In Visuino Set Components- Select "Delay1" and in the properties window set "Interval" to 200000
- Select "CharToText1" and in the properties window set "End On New Line" to True, "Truncate" to True, "Update On Each Char" to True
- Select "NeoPixels1" and in the properties window select "Brightness" and click on the pin icon and select "Float SinkPin"
- Double click on the "NeoPixels1" and in the PixelGroups window drag "Single Color" to the left and in the properties window set "Count Pixels" to 16 <<<Number of LEDs on your LED Ring or LED Stripe
- Right mouse click on the "SplitJSON1" component and in the Pop menu click on the "Parse JSON Object" and in the JSON Object window paste: {"r":0, "g":255, "b":128, "br":75} and click Ok.
- Close the JSON Object window
- Select "MapRange1" and in the properties window set "Input">"Max" to 255
- Select "MapRange2" and in the properties window set "Input">"Max" to 255
- Select "MapRange3" and in the properties window set "Input">"Max" to 255
- Select "MapRange4" and in the properties window set "Input">"Max" to 100
- Connect "Arduino.Modules.WiFi.Sockets.TCP Server1 [80]" pin [Connected] to "Delay1" pin [Start]
- Connect "Arduino.Modules.WiFi.Sockets.TCP Server1 [80]" pin [Output] to "CharToText1" pin [Input]
- Connect "CharToText1" pin [Output] to "SplitJSON1" pin [Input]
- Connect "SplitJSON1" > Element [r] pin [Output] to "MapRange1" pin [Input]
- Connect "SplitJSON1" > Element [g] pin [Output] to "MapRange2" pin [Input]
- Connect "SplitJSON1" > Element [b] pin [Output] to "MapRange3" pin [Input]
- Connect "SplitJSON1" > Element [br] pin [Output] to "MapRange4" pin [Input]
- Connect "MapRange1" pin [Output] to "AnalogToColor1" pin [Red]
- Connect "MapRange2" pin [Output] to "AnalogToColor1" pin [Green]
- Connect "MapRange3" pin [Output] to "AnalogToColor1" pin [Blue]
- Connect "MapRange4" pin [Output] to "IgnoreValues1" pin [Input]
- Connect "IgnoreValues1" pin [Output] to "NeoPixels1" pin [Brightness]
- Connect "AnalogToColor1" pin [Output] to "NeoPixels1" > "PixelGroups" > "Color1" pin [Color]
- Connect "Delay1" pin [Output] to "TextValue1" pin [Clock]
- Connect "TextValue1" pin [Output] to "Delay2" pin [Start]
- Connect "TextValue1" pin [Output] to "Arduino.Modules.WiFi.Sockets.TCP Server1 [80]" pin [Input]
- Connect "Delay2" pin [Output] to "Arduino.Modules.WiFi.Sockets.TCP Server1 [80]" pin [Disconnect]
- Connect "NeoPixels1" pin [Output] to Arduino Digital pin [ 2 ]
- In Visuino, at the bottom click on the "Build" Tab, make sure the correct port is selected, then click on the "Compile/Build and Upload" button.
Make sure in the project on Step 4 you have entered the correct SSID and Password for your Wi-Fi hotspot!
If you open a web browser on your computer or mobile device, and type:
NeoPixel./
Make sure to add the Dot at the end of the name, otherwise Windows will not be able to resolve the domain name!
Congratulations! You have completed your LED project with Visuino.
Also attached is the Visuino project, that I created for this Tutorial. You can download and open it in Visuino: https://www.visuino.com
Step 12: TroubleshootingSometimes NeoPixel./ does not work because the network cannot resolve the device name to an IP address.
To reliably access the ESP32, use its IP address instead, which you can find in the Visuino Serial Monitor or in your hotspot/router under Connected Devices.
If you open a web browser on your computer or mobile device, and type IP and it should load the NeoPixel page.
Attached is also the File to get the IP in Visuino, just make sure to set your SSID and password first
For more advanced users, it is also possible to edit the Windows hosts file to manually map the ESP32 IP address to a name, allowing access via http://NeoPixel.
Example: adding 192.168.1.50 NeoPixel to the hosts file lets you open the device using http://NeoPixel on that PC only.
Comments