Search the Community

Hey there, future Bluetooth Jedi! 🌟 Welcome to an electrifying project where we combine the magic of Web Bluetooth, the flashy brilliance of NeoPixels, and the awesome power of the Seeed Studio Xiao nRF52840 Sense. By the end of this journey, you'll be able to control a strip of NeoPixels right from your web browser. Yep, no more complicated apps or cables—just pure wireless awesomeness. 🎮✨ So, grab your soldering iron, a cup of coffee (or tea ☕), and let’s light things up! 🛠️ What You’ll Need: Before we dive into code and soldering, let's check if you have all the necessary gadgets to make this magic happen! 1. Seeed Studio Xiao nRF52840 Sense ⚡ Why this? It’s like a pocket-sized superhero! 💪 It's BLE-capable, has a built-in IMU, microphone, and is powered by the ARM Cortex-M4 processor. Small but mighty! 2. NeoPixel LED Strip 🌈 These RGB LEDs are the stars of our show. They can display millions of colors and are individually addressable. We’ll be using them to dazzle our friends (or just our cat 🐱). 3. Web Browser with Bluetooth Support 🌐 For this project, we need a web browser that supports Web Bluetooth API. Chrome, Edge, or Chromium-based browsers are perfect. Sorry, Firefox lovers... you'll have to switch sides for this one! 😅 4. Jumper Wires, Soldering Kit, and USB-C Cable 🔌 Standard build-essentials. These will help you hook up everything without blowing things up (which we totally don’t want). Get PCBs for Your Projects Manufactured You must check out PCBWAY for ordering PCBs online for cheap! You get 10 good-quality PCBs manufactured and shipped to your doorstep for cheap. You will also get a discount on shipping on your first order. Upload your Gerber files onto PCBWAY to get them manufactured with good quality and quick turnaround time. PCBWay now could provide a complete product solution, from design to enclosure production. Check out their online Gerber viewer function. With reward points, you can get free stuff from their gift shop. Also, check out this useful blog on PCBWay Plugin for KiCad from here. Using this plugin, you can directly order PCBs in just one click after completing your design in KiCad. Step 1: Setting Up Your Xiao nRF52840 Sense 📦 First, we need to make sure your Xiao is ready for action. Time to upload some code! Install the Development Environment: Install Arduino IDE from the official website if you already have it. Next, install the Seeed nRF52 boards in Arduino: Go to File > Preferences. Add this URL to Additional Boards Manager URLs: https://files.seeedstudio.com/arduino/package_seeeduino_boards_index.json Now head to Tools > Board > Boards Manager, search for Seeed nRF52 and install the package. Install Libraries: You’ll need to grab a couple of libraries to work with NeoPixels and BLE: Adafruit NeoPixel Library (to handle our shiny lights 💡) ArduinoBLE Library (for Bluetooth communication) Head to Tools > Manage Libraries and search for these to install them. Step 2: Wiring it Up 🧑‍🔧🔌 Alright, it's time to connect the Xiao to the NeoPixel strip. Don’t worry, this part is easier than figuring out which wire your headphones use! 🎧 Connect the NeoPixels to Xiao: Power (VCC): Connect this to the 3.3V pin on the Xiao. Ground (GND): GND to GND (these two are like peanut butter and jelly 🥪—inseparable). Data In (DIN): Hook this up to Pin D0 on the Xiao. Everything wired up? Awesome! Now the fun begins. 🧙‍♂️✨ Step 3: Code Time! ⌨️💻 Let's dive into the code that will make your Xiao and NeoPixels dance to your commands (remotely via Bluetooth!). 🕺💃 Here's the plan: The Xiao will advertise itself as a Bluetooth device. Your browser (with Web Bluetooth) will connect to it and control the NeoPixel strip by sending color commands Here's the Arduino Sketch: #include <ArduinoBLE.h> #include <Adafruit_NeoPixel.h> #define NEOPIXEL_PIN 0 #define NUM_PIXELS 64 Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_PIXELS, NEOPIXEL_PIN, NEO_GRB + NEO_KHZ800); BLEService ledService("19b10000-e8f2-537e-4f6c-d104768a1214"); BLEByteCharacteristic ledCharacteristic("19b10001-e8f2-537e-4f6c-d104768a1214", BLEWrite | BLERead); void setup() { Serial.begin(115200); if (!BLE.begin()) { Serial.println("starting BLE failed!"); while (1); } BLE.setLocalName("XIAO-LED"); BLE.setAdvertisedService(ledService); ledService.addCharacteristic(ledCharacteristic); BLE.addService(ledService); ledCharacteristic.writeValue(0); strip.begin(); strip.show(); BLE.advertise(); Serial.println("Bluetooth device active, waiting for connections..."); } void loop() { BLEDevice central = BLE.central(); if (central) { Serial.print("Connected to central: "); Serial.println(central.address()); while (central.connected()) { if (ledCharacteristic.written()) { uint8_t ledState = ledCharacteristic.value(); if (ledState == 1) { digitalWrite(LED_BUILTIN, HIGH); // Turn LED on for (int i = 0; i < NUM_PIXELS; i++) { strip.setPixelColor(i, strip.Color(255, 255, 255)); strip.show(); } } else { digitalWrite(LED_BUILTIN, LOW); // Turn LED off for (int i = 0; i < NUM_PIXELS; i++) { strip.setPixelColor(i, strip.Color(0, 0, 0)); strip.show(); } } } } Serial.print("Disconnected from central: "); Serial.println(central. Address()); } } What Does This Code Do? 🧐 BLE Advertising: Your Xiao advertises itself as "NeoPixelController" via Bluetooth. BLE Service: We create a custom Bluetooth service that listens for commands (color changes) from a web browser. NeoPixel Control: Based on the color data sent by the browser, the NeoPixel LEDs change colors accordingly. Step 4: Build the Web Bluetooth Interface 🌐 Now we move to the browser side, creating a simple webpage that will scan for your Xiao and send color commands via Bluetooth. Here’s a basic HTML + JavaScript setup: <!DOCTYPE html> <html> <head> <title>Web Bluetooth LED Control</title> </head> <body> <button id="connect">Connect</button> <button id="on">Turn On</button> <button id="off">Turn Off</button> <script> let ledCharacteristic; document.getElementById('connect').addEventListener('click', async () => { try { const device = await navigator.bluetooth.requestDevice({ filters: [{ name: 'XIAO-LED' }], optionalServices: ['19b10000-e8f2-537e-4f6c-d104768a1214'] }); const server = await device.gatt.connect(); const service = await server.getPrimaryService('19b10000-e8f2-537e-4f6c-d104768a1214'); ledCharacteristic = await service.getCharacteristic('19b10001-e8f2-537e-4f6c-d104768a1214'); console.log('Connected to device'); } catch (error) { console.error('Error:', error); } }); document.getElementById('on').addEventListener('click', async () => { if (ledCharacteristic) { try { await ledCharacteristic.writeValue(Uint8Array.of(1)); console.log('LED turned on'); } catch (error) { console.error('Error turning on LED:', error); } } }); document.getElementById('off').addEventListener('click', async () => { if (ledCharacteristic) { try { await ledCharacteristic.writeValue(Uint8Array.of(0)); console.log('LED turned off'); } catch (error) { console.error('Error turning off LED:', error); } } }); </script> </body> </html> How This Works: The page contains a button to connect to the Xiao via Bluetooth. Once connected, you can use the on and off buttons to control the LED. Step 5: Time to Shine! ✨💡 Now for the moment of truth: test your project! 🚀 Upload the Arduino code to your Xiao nRF52840 Sense. Open the HTML file in a supported browser (like Chrome). Click the "Connect to Xiao" button, and select the device from the Bluetooth device list. Slide the color picker, and watch the magic happen! 🪄✨ Your NeoPixels should change colors as you adjust the slider. Wireless LED control, baby! Step 6: Add Your Own Magic ✨ Congrats, you've just controlled a strip of NeoPixels via Web Bluetooth! 🎉 But why stop there? Here are some ways to level up: Add color animations: How about some rainbow patterns or breathing effects? 🌈 IMU Integration: Use the onboard IMU to control the lights based on motion. You can dance and let the LEDs react to your moves! 🕺 Build a Web Dashboard: Make the webpage more interactive by adding buttons for pre-defined light patterns (disco mode, anyone?). Conclusion: The Wireless Wonderland 🎆 With Web Bluetooth and the Xiao nRF52840, you’ve unlocked the secret to controlling LEDs without touching a wire! 🎮 Whether you're jazzing up your living room, building smart home gadgets, or just flexing at your next tech meetup, you're officially in control of the light show! 👨‍💻👩‍💻 So go on, experiment, and make your project shine brighter than a disco ball at a retro party! 💃✨ Happy hacking, and keep shining! 🌟

Hello tech adventurers! 🧑‍🔧👩‍💻 If you're here, you're probably itching to light up the world, or at least your room, with some rainbow colors! And how? By combining a motion sensor (IMU), a tiny powerhouse microcontroller, and some shiny NeoPixels. 🌈 Buckle up—it's going to be fun and flashy (literally)! What You'll Need 🛠️ Let's kick off by grabbing all the cool gear for this project. Make sure your toolbox is stocked with: 1. Seeed Studio Xiao nRF52840 Sense ⚡ This tiny microcontroller is a superstar! It’s Bluetooth-capable, runs on a Cortex-M4 processor, and is small enough to get lost in your pocket! Not that you'd want that... 🙄 Why this one? It's packed with an onboard microphone, IMU (Inertial Measurement Unit), and Bluetooth LE, which means we’re going wireless, baby! 🎤🏃‍♂️ 2. NeoPixel LED Panel 💡 These are individually addressable RGB LEDs that can light up in any color your heart desires. We’ll be using these bad boys to visualize our IMU's data. They’re essentially the party piece of this project! 🎉 3. IMU (Inertial Measurement Unit) 📐 Already built into the Xiao nRF52840 Sense! This sensor detects motion, so you can do cool stuff like control your NeoPixels based on tilts and shakes. Think of it like a magic wand for LEDs. 4. Jumper Wires, Soldering Kit, and USB-C Cable 🧰 You know the drill. We need these to hook up everything without too much of a spaghetti mess on your desk. Get PCBs for Your Projects Manufactured You must check out PCBWAY for ordering PCBs online for cheap! You get 10 good-quality PCBs manufactured and shipped to your doorstep for cheap. You will also get a discount on shipping on your first order. Upload your Gerber files onto PCBWAY to get them manufactured with good quality and quick turnaround time. PCBWay now could provide a complete product solution, from design to enclosure production. Check out their online Gerber viewer function. With reward points, you can get free stuff from their gift shop. Also, check out this useful blog on PCBWay Plugin for KiCad from here. Using this plugin, you can directly order PCBs in just one click after completing your design in KiCad. Step 1: Flashing the Xiao nRF52840 Sense 🚀 Getting it Talking! Start by setting up your development environment. You’ll want to upload the code to your Xiao, but first, you need to flash the microcontroller with the right firmware. Install the necessary tools: Head to Seeed Studio and grab their official setup guide for the Xiao nRF52840 Sense. You’ll need Arduino IDE and Xiao's board libraries. Piece of cake, right? 🍰 Pro Tip: When uploading code, if your microcontroller throws a tantrum and doesn’t show up on your PC, double-tap the reset button to enter bootloader mode. It’s like giving it a calming tea break. 🫖 Step 2: Wiring it up 🧑‍🔧 Time to bring these components together like a superhero team-up! 🦸‍♂️ Connect the NeoPixel to the Xiao: Power: Connect the VCC pin of the NeoPixel to the 3.3V pin of the Xiao. Ground: GND to GND (it’s like their secret handshake 🤝). Data: Hook the DIN (data in) pin from the NeoPixel to Pin D6 on the Xiao. Voilà, you’ve wired up your light show! Now, don’t plug it in just yet. Patience, young padawan. 🧘‍♂️ Step 3: Code Time! ⌨️👾 We’re diving into the fun part—the code! This is where the Xiao's IMU will tell the NeoPixels how to light up depending on the motion. Setting Up Libraries: Make sure you have these libraries installed in your Arduino IDE: Adafruit NeoPixel (to control those flashy lights) 🌈 Wire.h (for I2C communication) Seeed nRF52 board libraries (to work with Xiao) Adafruit Sensor for handling IMU data. #include <Adafruit_NeoPixel.h> #include <LSM6DS3.h> #include <Wire.h> #define PIN 0 #define NUMPIXELS 64 Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800); LSM6DS3 myIMU(I2C_MODE, 0x6A); // I2C device address 0x6A float aX, aY, aZ, gX, gY, gZ; const float accelerationThreshold = 2.5; // threshold of significant in G's const int numSamples = 119; int samplesRead = numSamples; void setup() { Serial.begin(9600); while (!Serial); pixels.begin(); pixels.show(); // Initialize all pixels to 'off' // Call .begin() to configure the IMU if (myIMU.begin() != 0) { Serial.println("Device error"); } else { Serial.println("aX,aY,aZ,gX,gY,gZ"); } } void loop() { // wait for significant motion while (samplesRead == numSamples) { // read the acceleration data aX = myIMU.readFloatAccelX(); aY = myIMU.readFloatAccelY(); aZ = myIMU.readFloatAccelZ(); // sum up the absolutes float aSum = fabs(aX) + fabs(aY) + fabs(aZ); // check if it's above the threshold if (aSum >= accelerationThreshold) { // reset the sample read count samplesRead = 0; break; } } // check if all the required samples have been read since // the last time the significant motion was detected while (samplesRead < numSamples) { // read the acceleration and gyroscope data aX = myIMU.readFloatAccelX(); aY = myIMU.readFloatAccelY(); aZ = myIMU.readFloatAccelZ(); gX = myIMU.readFloatGyroX(); gY = myIMU.readFloatGyroY(); gZ = myIMU.readFloatGyroZ(); samplesRead++; // print the data in CSV format Serial.print(aX, 3); Serial.print(','); Serial.print(aY, 3); Serial.print(','); Serial.print(aZ, 3); Serial.print(','); Serial.print(gX, 3); Serial.print(','); Serial.print(gY, 3); Serial.print(','); Serial.print(gZ, 3); Serial.println(); // Visualize the IMU data on the NeoPixel matrix visualizeIMU(aX, aY, aZ, gX, gY, gZ); if (samplesRead == numSamples) { // add an empty line if it's the last sample Serial.println(); } } } void visualizeIMU(float aX, float aY, float aZ, float gX, float gY, float gZ) { // Map the acceleration and gyroscope data to colors uint8_t red = map(fabs(aX) * 100, 0, 250, 0, 255); uint8_t green = map(fabs(aY) * 100, 0, 250, 0, 255); uint8_t blue = map(fabs(aZ) * 100, 0, 250, 0, 255); // Set all pixels to the mapped color for (int i = 0; i < NUMPIXELS; i++) { pixels.setPixelColor(i, pixels.Color(red, green, blue)); } pixels. Show(); } What's Happening in the Code? 🤔 The IMU is your sensor. We’re reading acceleration data on all three axes: X, Y, and Z. The NeoPixels are the output. We map the motion detected by the IMU into a color value (RGB). Mapping Motion to Color: We sum up the absolute values of the accelerations to determine how hard you shake or tilt the Xiao. More movement = crazier colors! 🎨 Step 4: Test, Shake, and Dance! 🕺 Once your code is uploaded, unplug the USB and plug it back in (just to give your Xiao a little reset!). Now the magic begins. 🤹‍♂️ Testing the Tilt: Pick up your Xiao nRF52840 and gently tilt it. You’ll see the NeoPixels lighting up in different colors. Shake it a bit more—see the color change? Now you’re in charge of the show! If everything worked out, congrats, you’re now officially a NeoPixel DJ! 🎧🎶 Want to sync it with music and start a rave? Go ahead! The only limit is your creativity (and the brightness tolerance of your neighbors... 😅). Step 5: Going Wireless with Bluetooth! 📡 Now let’s take it one step further. What if you could control this with your phone? Here’s where the Bluetooth capability of the Xiao nRF52840 Sense comes into play. Using Bluetooth Low Energy (BLE), you can send motion data directly from your Xiao to an app on your phone—or even control the colors remotely! The Xiao makes it super easy to set up BLE communication, and you can find libraries in Arduino to help with this. Conclusion: Welcome to the Sparkle Party! 🎆🎉 Now that you've brought your NeoPixels to life with motion-sensing IMU data, it's time to celebrate! This project opens up a world of possibilities—from creating interactive lighting for your room, and costumes, or even building motion-reactive wearables. The only thing left is to challenge yourself—can you use this setup to control music lights at a party? Sync with game controllers? Make a dancing robot? The world’s your oyster, and the lights are your magic wand! 🧙‍♂️✨ Happy making, and may your LEDs forever shine bright!

Things used in this project Hardware components Raspberry Pi 4 Model B × 1 Adafruit NeoPixel Ring: WS2812 5050 RGB LED × 1 Software apps and online services Node-RED How to Control NeoPixel LEDs with Node-RED and Raspberry Pi NeoPixel LEDs are a popular type of addressable RGB LEDs that can create amazing effects and animations. They are easy to control with a microcontroller like Arduino, but what if you want to use them with a Raspberry Pi? In this article, we’ll show you how to use Node-RED, a graphical programming tool, to control NeoPixel LEDs with a Raspberry Pi. Get PCBs For Your Projects Manufactured You must check out PCBWAY for ordering PCBs online for cheap! You get 10 good-quality PCBs manufactured and shipped to your doorstep for cheap. You will also get a discount on shipping on your first order. Upload your Gerber files onto PCBWAY to get them manufactured with good quality and quick turnaround time. PCBWay now could provide a complete product solution, from design to enclosure production. Check out their online Gerber viewer function. With reward points, you can get free stuff from their gift shop. What You’ll Need To follow this tutorial, you’ll need the following components: A Raspberry Pi board with Raspbian OS installed A WS2812B NeoPixel LED strip Some jumper wires You’ll also need to install Node-RED and the node-red-node-pi-neopixel node on your Raspberry Pi. We’ll explain how to do that later. Wiring the NeoPixel LED Strip The NeoPixel LED strip has three wires: 5V, GND, and DATA. The 5V and GND wires provide power to the LEDs, while the DATA wire carries the signal that controls the color and brightness of each LED. The Raspberry Pi can provide 5V and GND from its GPIO pins and connect the DATA pin to GPIO 18. The reason we use GPIO 18 is because it supports PWM (pulse-width modulation), which is needed by the node-red-node-pi-neopixel node. You can use other PWM-enabled GPIO pins, but you’ll need to change the settings accordingly. Installing Node-RED and node-red-node-pi-neopixel Node-RED is a graphical programming tool that lets you create applications by connecting nodes that perform different functions. You can install Node-RED on your Raspberry Pi by following this guide. To control the NeoPixel LEDs with Node-RED, you need to install a special node called node-red-node-pi-neopixel. This node can drive a strip of NeoPixel or WS2812 LEDs from a Raspberry Pi. You can install it by running the following command. npm install node-red-node-pi-neopixel You also need to install the Neopixel python driver, which is used by the node-red-node-pi-neopixel node. The easiest way to do that is to use the Unicorn HAT drivers install script, which you can run with this command: After installing node-red-node-pi-neopixel, you need to restart Node-RED for the changes to take effect. Creating a Node-RED Flow Now that everything is set up, you can create a Node-RED flow to control the NeoPixel LEDs. A flow is a collection of nodes that are connected by wires. Each node has an input and an output and can perform some action or function. To create a flow, you need to open the Node-RED editor in your web browser. By default, it runs on port 1880 of your Raspberry Pi’s IP address. For example, if your Raspberry Pi’s IP address is 192.168.1.3, you can access the Node-RED editor at http://192.168.1.3:1880. In the editor, you’ll see a palette of nodes on the left side, a workspace in the middle, and an info panel on the right side. You can drag nodes from the palette to the workspace and connect them by dragging wires from one node’s output to another node’s input. Here’s an example of a neo-pixel flow that controls the LEDs based on our user inputs. To create this flow, you need to do the following steps: Drag Copy and import the below JSON node-red flow. Change the LED count JSON Files: [ { "id": "60627e22237dc214", "type": "tab", "label": "Flow 2", "disabled": false, "info": "", "env": [] }, { "id": "f0395033145e84d7", "type": "ui_colour_picker", "z": "60627e22237dc214", "name": "Color Picker", "label": "COLOR PICKER", "group": "cd687a95.00e108", "format": "rgb", "outformat": "string", "showSwatch": true, "showPicker": true, "showValue": true, "showHue": false, "showAlpha": false, "showLightness": true, "square": "false", "order": 1, "width": 0, "height": 0, "passthru": true, "topic": "", "topicType": "str", "x": 490, "y": 380, "wires": [ [ "f6f366218f267026" ] ] }, { "id": "f6f366218f267026", "type": "function", "z": "60627e22237dc214", "name": "Set Color", "func": "var count = global.get('count')||0;\nmsg.payload = msg.payload.replace(/[rgb()\\s]/g,\"\");\nif(count===0){\n msg.payload = msg.payload;\n}\nelse{\n msg.payload = (count-1) + \",\" + msg.payload;\n}\n\nreturn msg;", "outputs": 1, "noerr": 0, "x": 680, "y": 380, "wires": [ [ "b4a4a424433ab3a2" ] ] }, { "id": "cc6b4172d7245dfd", "type": "function", "z": "60627e22237dc214", "name": "Rainbow Effect", "func": "var numberOfLEDs = 8;\nvar i;\nvar j;\n\nif (msg.payload==1)\n{\n for (i = 0; i < 255; i++) {\n\n for (j = 0; j < numberOfLEDs; j++) {\n\n var pos = 0;\n pos = Math.round(((j * 255 / numberOfLEDs) + i)) & 255;\n\n if (pos < 85) {\n var red = pos * 3;\n var green = 255 - pos * 3;\n var blue = 0;\n }\n else if (pos < 170) {\n pos -= 85;\n var red = 255 - pos * 3;\n var green = 0;\n var blue = pos * 3;\n }\n else {\n pos -= 170;\n var red = 0;\n var green = pos * 3;\n var blue = 255 - pos * 3;\n }\n var setColor = j + ',' + red + ',' + green + ',' + blue;\n node.send({ payload: setColor });\n }\n }\n}\nelse { \n msg.payload = \"0,0,0\"\n}\n\nreturn msg;\n\n\n", "outputs": 1, "timeout": "", "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 700, "y": 440, "wires": [ [ "b4a4a424433ab3a2" ] ] }, { "id": "b4a4a424433ab3a2", "type": "rpi-neopixels", "z": "60627e22237dc214", "name": "Neo Pixel", "gpio": "18", "pixels": "8", "bgnd": "", "fgnd": "", "wipe": "60", "mode": "pixels", "rgb": "rgb", "brightness": "100", "gamma": true, "x": 900, "y": 420, "wires": [] }, { "id": "125d1e66ad34b180", "type": "ui_switch", "z": "60627e22237dc214", "name": "", "label": "Rainbow switch", "tooltip": "", "group": "cd687a95.00e108", "order": 3, "width": 0, "height": 0, "passthru": true, "decouple": "false", "topic": "topic", "topicType": "msg", "style": "", "onvalue": "true", "onvalueType": "bool", "onicon": "", "oncolor": "", "offvalue": "false", "offvalueType": "bool", "officon": "", "offcolor": "", "animate": false, "x": 500, "y": 440, "wires": [ [ "cc6b4172d7245dfd" ] ] }, { "id": "cd687a95.00e108", "type": "ui_group", "name": "Neo Pixel Controller", "tab": "aa146f4d.b53ca", "order": 1, "disp": true, "width": "6", "collapse": false }, { "id": "aa146f4d.b53ca", "type": "ui_tab", "name": "Demo Lab", "icon": "dashboard", "order": 1, "disabled": false, "hidden": false } ] Neo Pixel Node Setup: Select the PIN and change the LED count as per your neo-pixel configuration. Deployment Setup: Next hit the deployment button and navigate to the UI page of the Node-red with /ui in the node-red page URL. You can select the LED color via the neo-pixel circle. Also, if you toggle the rainbow switch it will apply the rainbow effect to the ring. Conclusion In this article, I have shown you how to control NeoPixel LEDs with Node-RED and Raspberry Pi.