NeoPixel custom length strings in Wokwi

[xfpd]

This sketch will create diagram.json text for custom-length NeoPixel strings cascading DOUT to DIN, VSS to VSS, and VDD to VDD. You need only connect (1) Arduino DOUT pin to the first NeoPixel DIN, (2) VSS and (3) VDD. Further instructions in the sketch.

pixelString - Wokwi ESP32, STM32, Arduino Simulator

// Create a string of NeoPixels with DIN/DOUT/VSS/VDD connected
// See INSTRUCTIONS at BOTTOM of sketch.
// https://wokwi.com/projects/370606975258496001

int number = 10; // number of NeoPixels in string
int spacing = 20; // space between NeoPixels (20 is best)
int mcu = 100; // places mcu at DIN end of NeoPixel string. (number * spacing) is "far" end

void setup() {
  Serial.begin(115200);
  neopixels();
  connections();
}

void loop() {}

void neopixels() {
  Serial.print("  \"parts\": [ { \"type\": \"wokwi-arduino-nano\", \"id\": \"nano\", \"top\": -100, \"left\": ");
  Serial.print(mcu); // this puts the mcu at the DIN end of the NeoPixel string
  Serial.println(", \"rotate\": 0, \"attrs\": {} },"); // orient VSS and VDD for clean connection

  for (int i = 1; i < number + 1; i++ ) {
    Serial.print("    { \"type\": \"wokwi-neopixel\", \"id\": \"rgb");
    Serial.print(i);
    Serial.print("\", \"top\": 0, \"left\": ");
    Serial.print(i * spacing + 100);
    Serial.print(", \"rotate\": 270, \"attrs\": {} }"); // remove final comma

    if (i < number)
      Serial.print(","); // add final comma
    Serial.println();
  }
  Serial.println("  ],");
}

void connections() {
  Serial.println("  \"connections\": [");
  for (int i = 1; i < number ; i++ ) { // one less connection than number of neopixels
    Serial.print("   [ \"rgb");
    Serial.print(i);
    Serial.print(":DOUT\", \"rgb");
    Serial.print(i + 1);
    Serial.println(":DIN\", \"green\", [ \"h5\", \"v-20\" ] ],");

   Serial.print("  [ \"rgb");
    Serial.print(i);
    Serial.print(":VSS\", \"rgb");
    Serial.print(i+1);
    Serial.println(":VSS\", \"black\", [ \"h0\" ] ],");

    Serial.print("  [ \"rgb");
    Serial.print(i);
    Serial.print(":VDD\", \"rgb");
    Serial.print(i+1);
    Serial.print(":VDD\", \"red\", [ \"v0\" ] ]");

    if (i < number - 1) // one less connection than number of neopixels
      Serial.print(","); // add final comma when not final line
    Serial.println();
  }
  Serial.println("  ],");
}

/*
  Original diagram.json NOTE: without added NeoPixels and connections:
{
  "version": 1,
  "author": "Anonymous maker",
  "editor": "wokwi",
  "parts": [ { "type": "wokwi-arduino-nano", "id": "nano", "top": -100, "left": 100, "attrs": {} } ],
  "connections": [],
  "dependencies": {}
}

  1. RUN the sketch
  2. COPY the serial monitor output to clipboard
  3. SELECT the diagram.json tab
  4. SELECT the two empty lines: "parts" and "connections" in the diagram.json tab
  5. PASTE from clipboard
  6. CONNECT DIN, VSS or VDD from Arduino to remove extra LineFeed from serial monitor
*/

[kolaha]

{
  "version": 1,
  "author": "kolaha",
  "editor": "wokwi",
  "parts": [
    { "type": "wokwi-arduino-uno", "id": "uno", "top": 550, "left": 25, "attrs": {} },
    {
      "type": "wokwi-neopixel-canvas",
      "id": "neopixels3",
      "top": 176.41,
      "left": 304.14,
      "rotate": 90,
      "attrs": { "rows": "15", "cols": "1", "pixelate": "circle", "matrixBrightness": "3.5" }
    }
  ],
  "connections": [
    [ "uno:8", "neopixels3:DIN", "green", [ "v-34", "h-100", "*", "v0" ] ],
    [ "uno:GND.2", "neopixels3:VSS", "black", [ "v30", "h-190", "*", "v0" ] ],
    [ "uno:5V", "neopixels3:VDD", "red", [ "v24", "h-170", "*", "v0" ] ]
  ],
  "dependencies": {}
}

change "cols": "1" if you want matrix

[xfpd]

Nice!

I was struggling with the double-quotes in an array, so I did it the (wr)long way.

Does diagram.json allow for code inside the .json tab?

[edit] I see the "canvas" device - it is not an option for me when the "+" is clicked. Same with "rotary dial" and a few more.

[edit edit]So, why show this if it is not available?

[kolaha]

did you test it?
your code generate some text that not seems to be working, so i ask me what is the purpose? and if it is an atempt to create neopixel strip of custom length then there is easy way and i show it.

"attrs": { "rows": "32", "cols": "32", "matrixBrightness": "10", "pixelate": "" }

you can change the "pixelate" attribute of the "wokwi-neopixel-canvas" component ( try "", "circle", "square" to see how the simulation changes visually).

[xfpd]

My .json code only generates the two sections for "parts" and "connections... you are right, I should have made it generate the rest of the .json, as well as a sample sketch.

I could not figure out how to use your canvas example. I could only copy/paste it into wokwi, but had no sketch to make it do things.

[kolaha]

example sketch or google. vss and vcc not strictly necessary

[xfpd]

The way to get example sketches in Wokwi is clicking the device offline and clicking its question mark... but the canvas does not do that for me (many devices do not - I stumble upon them through other user projects).

The canvas looks nice, and (as you show) very easy to create your size, shape, resolution, (more?), but it is (1) hidden and (2) not a real-life device. I like it, but when using Wokwi, I use only what is available without using google or stumbling upon another project.

I tried my .json code again... it really needs to be a complete .json file, and not just the two sections it creates. Other than that, it works with any NeoPixel simulation I can find.

I made it for a future project... which (hopefullly) will involve making the straight line curve, angle and fork at known pixel numbers... essentially a pixel drawing tool... imagine a scoreboard, traintrack, welcome sign, project border... et c.