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>

t-vk / ledstripsimulator Goto Github PK