LedStripSimulator

Simulates an LED strip and allows very NeoPixel-like access

Generate Convert Improve

Install / Use

/learn @T-vK/LedStripSimulator

About this skill

Quality Score

0/100

README

LedStripSimulator

Simulates an LED strip and allows very NeoPixel-like access

Ready to use online simulator

Click here for a ready-to-use online simulator

Screenshot

Requirements

Your browser needs:

HTML: HTML5
CSS: CSS3
JavaScript: ECMAScript6 The newest version of Firefox/Chrome/Opera/Safari/Edge should work fine.

Usage

You'll wirte your code in JavaScript. But the syntax of original Adafruit_NeoPixel c++ class is simlulated as good as possible.
Your original C++ code could for example translate like this:
C++

#define PIN 10;
#define NUM_LEDS = 60;
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, PIN, NEO_GRB + NEO_KHZ800);

void setup() {
  strip.begin();
  strip.show();
  
  strip.setPixelColor(0, Color(255,0,0));
  strip.show();
}

JavaScript

var PIN = 10;
var NUM_LEDS = 60;
var strip = new Adafruit_NeoPixel(NUM_LEDS, PIN, NEO_GRB + NEO_KHZ800);

function setup() {
  strip.begin();
  strip.show();
  
  strip.setPixelColor(0, Color(255,0,0));
  strip.show();
}

Ported Arduino functions/callbacks

I implemented the functions millis(), micros(), delay() as well as the callback fucntions setup() and loop().
About delay(): Use it wisely. It will freeze it's thread while it is running. To prevent UI or whole browser freezing, run your code in a new thread (worker).

DIY

Basic setup without the editor and jquery/bootstrap dependency

Create a new folder
copy Adafruit_NeoPixel.js into the folder
copy Adafruit_NeoPixel.css into the folder
create a new .html file with the following contents:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="Adafruit_NeoPixel.css">
  <script src="Adafruit_NeoPixel.js"></script>
  <script>
    //Your code goes here
    //For example:
    //function setup() {
    //  
    //}
    //function loop() {
    //  
    //}
  </script>
</head>
<body>
  <!-- In this section you can create new led strips. Remember to define a different "data-pin" for every led strip and use the pin numbers in your code. -->
  <div class="ledStrip" data-pin="10"></div>
</body>
</html>

Full example

The BasicExample.html file contains an example.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="Adafruit_NeoPixel.css">
  <script src="Adafruit_NeoPixel.js"></script>
  <script>
    //USER
    const PIN = 10
    const NUM_LEDS = 60
    const BRIGHTNESS = 255

    //ws2812b, arduino pro mini
    var strip = new Adafruit_NeoPixel(NUM_LEDS, PIN, NEO_GRB + NEO_KHZ800)

    function setup() {
      strip.setBrightness(BRIGHTNESS)
      strip.begin()
      strip.show()
    }

    var red = strip.Color(255, 0, 0)
    var yellow = strip.Color(255, 255, 0)
    var blue = strip.Color(0, 0, 255)
    var colors = [red,yellow,blue]
    var currentColorIndex = 0
    
    function loop() {
      var animationDone = colorWipe(colors[currentColorIndex])
      if (animationDone)
          currentColorIndex = (currentColorIndex>=colors.length-1 ? 0 : currentColorIndex+1)
    }

    
    function colorWipe(color) { 
      var now = millis()
      if (now > colorWipe.lastUpdate+colorWipe.delay) {
        strip.setPixelColor(colorWipe.currentLed, color)
        strip.show()
        colorWipe.currentLed = colorWipe.currentLed>=strip.numPixels()-1 ? 0 : colorWipe.currentLed+1
        colorWipe.lastUpdate = now
        
        if (colorWipe.currentLed === 0)
            return true;
      }
      return false
    } //c++-like static variables for this fucntion:
    colorWipe.delay = 10
    colorWipe.lastUpdate = 0
    colorWipe.currentLed = 0
    </script>

</head>
<body>
  <div class="ledStrip" data-pin="10"></div>
</body>
</html>

Related Skills

node-connect

349.0k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

109.4k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

349.0k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

349.0k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。