├── README.md
├── player
    └── player.ino
└── ledsy.html


/README.md:
--------------------------------------------------------------------------------
 1 | # LEDSY
 2 | # Neopixel Ring
 3 | # LED Sequences & Animations Maker
 4 | ### Create beautiful animation for your ring in just few clicks!
 5 | Neopixel Ring is a beautiful LED RGB ring but creating animations for it is not too easy.
 6 | With this GUI you can create awesome sequences and animations in just few clicks!
 7 | ![](http://i.imgur.com/6HFNBjr.gif)
 8 | ### [LET'S TRY IT!](http://makebit.github.io/Neopixel-Ring-LED-Sequences-and-Animations-Maker/ledsy.html) - Click on Tour for a short guide!
 9 | 
10 | ### Settings
11 | **Set this value before you'll start to create the animation.** You can choose the number of LEDs and how many frames to use in your animation.
12 | 
13 | ### Controller
14 | Here you can set the speed of your animation and play it. When you've finished it you can save and import it into your sketch.


--------------------------------------------------------------------------------
/player/player.ino:
--------------------------------------------------------------------------------
 1 | #include <Adafruit_NeoPixel.h>
 2 | #include <avr/pgmspace.h>
 3 | 
 4 | // Settings
 5 | #define PIN 12
 6 | #define BRIGHTNESS 255 // 0-255
 7 | // Set this parameters equal to those set into Ledsy
 8 | #define NUMBER_OF_PIXELS 24
 9 | #define SEQUENCE_LENGTH 46
10 | #define SLICE_DURATION 150
11 | 
12 | Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUMBER_OF_PIXELS, PIN, NEO_GRB + NEO_KHZ800);
13 | 
14 | const uint8_t ledSeq [SEQUENCE_LENGTH][NUMBER_OF_PIXELS][3] PROGMEM = 
15 | // Paste here the Output code
16 | {{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}},{{0,255,0},{255,153,0},{255,0,255},{153,0,255},{0,0,255},{0,0,0},{204,204,204},{204,0,0},{230,145,56},{241,194,50},{106,168,79},{69,129,142},{61,133,198},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0},{0,0,0}}}
17 | ;
18 | 
19 | void setup() {
20 | 
21 |   strip.begin();
22 |   strip.setBrightness(BRIGHTNESS);
23 |   strip.show();
24 | 
25 | }
26 | 
27 | void loop() {
28 | 
29 |   for (uint8_t i = 0; i < SEQUENCE_LENGTH; i++) {
30 |     for (uint8_t j = 0; j < NUMBER_OF_PIXELS; j++) {
31 |       strip.setPixelColor(j, pgm_read_byte(&(ledSeq[i][j][0])), pgm_read_byte(&(ledSeq[i][j][1])), pgm_read_byte(&(ledSeq[i][j][2])));
32 |     }
33 |     strip.show();
34 |     delay(SLICE_DURATION);
35 |   }
36 | 
37 | }
38 | 


--------------------------------------------------------------------------------
/ledsy.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <title>LEDSY - Neopixel Ring - LED Sequences &amp; Animations Maker</title>
  6 |     <link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" rel="stylesheet">
  7 |     <link rel="stylesheet" type="text/css"
  8 |           href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
  9 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
 10 |           integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 11 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
 12 |           integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
 13 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/intro.js/2.0.0/introjs.min.css">
 14 | 
 15 |     <style>
 16 |         html{min-height: 100%;}
 17 |         body {
 18 |             min-height: 100%;
 19 |             background: #ffffff; /* For browsers that do not support gradients */
 20 |             background: -webkit-linear-gradient(#ffffff, lightgrey); /* For Safari 5.1 to 6.0 */
 21 |             background: -o-linear-gradient(#ffffff, lightgrey); /* For Opera 11.1 to 12.0 */
 22 |             background: -moz-linear-gradient(#ffffff, lightgrey); /* For Firefox 3.6 to 15 */
 23 |             background: linear-gradient(#ffffff, lightgrey); /* Standard syntax */
 24 |         }
 25 | 
 26 |         .demoHeaders {
 27 |             margin-top: 2em;
 28 |         }
 29 | 
 30 |         #dialog-link {
 31 |             padding: .4em 1em .4em 20px;
 32 |             text-decoration: none;
 33 |             position: relative;
 34 |         }
 35 | 
 36 |         #dialog-link span.ui-icon {
 37 |             margin: 0 5px 0 0;
 38 |             position: absolute;
 39 |             left: .2em;
 40 |             top: 50%;
 41 |             margin-top: -8px;
 42 |         }
 43 | 
 44 |         #icons {
 45 |             margin: 0;
 46 |             padding: 0;
 47 |         }
 48 | 
 49 |         #icons li {
 50 |             margin: 2px;
 51 |             position: relative;
 52 |             padding: 4px 0;
 53 |             cursor: pointer;
 54 |             float: left;
 55 |             list-style: none;
 56 |         }
 57 | 
 58 |         #icons span.ui-icon {
 59 |             float: left;
 60 |             margin: 0 4px;
 61 |         }
 62 | 
 63 |         .fakewindowcontain .ui-widget-overlay {
 64 |             position: absolute;
 65 |         }
 66 | 
 67 |         select {
 68 |             width: 200px;
 69 |         }
 70 | 
 71 |         #leds-wrapper {
 72 |             margin: 10px;
 73 |             display: inline-block;
 74 |         }
 75 | 
 76 |         #controller-steps-wrapper {
 77 |             float: right;
 78 |         }
 79 | 
 80 |         .led {
 81 |             width: 20px;
 82 |             height: 20px;
 83 |             border: solid 1px white;
 84 |             position: fixed;
 85 |             background-color: black;
 86 |         }
 87 | 
 88 |         #code-output, #code-input {
 89 |             width: 100%;
 90 |             max-width: 100%;
 91 |         }
 92 | 
 93 |         #leds {
 94 |             width: 422px;
 95 |             height: 422px;
 96 |         }
 97 | 
 98 |         #leds .ui-selecting {
 99 |             border: dotted 3px gold;
100 |         }
101 | 
102 |         #leds .ui-selected {
103 |             border: dotted 3px red;
104 |             color: white;
105 |         }
106 | 
107 |         #box-color{
108 |             position: fixed;
109 |         }
110 | 
111 |         #steps, #position, #controller {
112 |         }
113 | 
114 |         #steps {
115 |             width: 600px;
116 |         }
117 | 
118 |         #slider-step {
119 |             width: 540px;
120 |         }
121 | 
122 |         #buttons {
123 |             margin-bottom: 10px;
124 |         }
125 | 
126 |         #steps .ui-selecting {
127 |             border: dotted 1px gold;
128 |         }
129 | 
130 |         #steps .ui-selected {
131 |             border: dotted 1px red;
132 |             color: white;
133 |         }
134 | 
135 |         .step {
136 |             width: 60px;
137 |             height: 20px;
138 |             border: solid 1px white;
139 |             background-color: black;
140 |             float: left;
141 |         }
142 | 
143 |         .slider {
144 |             border: 0;
145 |             color: #f6931f;
146 |             background-color: transparent;
147 |             font-weight: bold;
148 |         }
149 | 
150 |         .close {
151 |             font-size: 20px;
152 |             font-weight: bold;
153 |             line-height: 18px;
154 |             color: #000000;
155 |             text-shadow: 0 1px 0 #ffffff;
156 |             opacity: 0.2;
157 |             filter: alpha(opacity=20);
158 |             text-decoration: none;
159 |         }
160 | 
161 |         .close:hover {
162 |             color: #000000;
163 |             text-decoration: none;
164 |             opacity: 0.4;
165 |             filter: alpha(opacity=40);
166 |             cursor: pointer;
167 |         }
168 | 
169 |     </style>
170 | </head>
171 | <body>
172 | <nav class="navbar navbar-default">
173 |     <div class="container-fluid">
174 |         <div class="navbar-header">
175 |             <a class="navbar-brand" href="#">LEDSY - Neopixel Ring - LED Sequences &amp; Animations Maker</a>
176 |         </div>
177 |         <div style="float: right">
178 |             <button class="btn btn-primary navbar-btn" id="settings-button" type="button" data-toggle="collapse"
179 |                     data-target="#settings"
180 |                     aria-expanded="false" aria-controls="settings">
181 |                 Settings
182 |             </button>
183 |             <button class="btn btn-primary navbar-btn" id="controller-button" type="button" data-toggle="collapse"
184 |                     data-target="#controller"
185 |                     aria-expanded="false" aria-controls="controller">
186 |                 Controller
187 |             </button>
188 |             <button class="btn btn-primary navbar-btn" id="output-button" type="button" data-toggle="collapse"
189 |                     data-target="#output"
190 |                     aria-expanded="false" aria-controls="output">
191 |                 Output
192 |             </button>
193 |             <button class="btn btn-primary navbar-btn" id="input-button" type="button" data-toggle="collapse"
194 |                     data-target="#input"
195 |                     aria-expanded="false" aria-controls="input">
196 |                 Input
197 |             </button>
198 |             <button class="btn btn-danger navbar-btn" id="tour-button" type="button">
199 |                 Tour
200 |             </button>
201 |         </div>
202 |     </div>
203 | </nav>
204 | <div class="container">
205 |     <div class="col-md-5">
206 |         <div id="box-color"><input type='text' id="colorSelector"/></div>
207 | 
208 |         <div id="leds"></div>
209 |     </div>
210 | 
211 |     <div class="col-md-7">
212 |         <div class="collapse" id="settings" style="margin-top: 10px;">
213 |             <div class="well" id="box-settings">
214 |                 <div id="slider-lednumber"></div>
215 |                 <input type="text" id="lednumber" class="slider" readonly>
216 | 
217 |                 <div id="slider-sequence-length"></div>
218 |                 <input type="text" id="sequencelength" class="slider" readonly>
219 |             </div>
220 |         </div>
221 |         <div class="collapse" id="controller" style="margin-top: 10px;">
222 |             <div class="well" id="box-controller">
223 |                 <div id="slider-timeslice"></div>
224 |                 <input type="text" id="timeslice" class="slider" readonly>
225 | 
226 |                 <div id="buttons">
227 |                     <button id="play" class="btn btn-default">Play</button>
228 |                     <button id="stop" class="btn btn-default">Stop</button>
229 |                     <button id="save" class="btn btn-default">Save</button>
230 |                     <button id="load" class="btn btn-default">Load</button>
231 |                     <button id="clear" class="btn btn-default">Clear</button>
232 |                     <button id="select-diagonal" class="btn btn-default">Select Diagonal</button>
233 |                     <button id="select-antidiagonal" class="btn btn-default">Select Antidiagonal</button>
234 |                 </div>
235 | 
236 |             </div>
237 |         </div>
238 |         <div class="collapse" id="output" style="margin-top: 10px;">
239 |             <div class="well">
240 |                 <a class="close" data-toggle="collapse"
241 |                    data-target="#output" aria-expanded="false" aria-controls="output">&times;</a>
242 |                 Load this code into your Sketch!
243 |                 <textarea id="code-output"></textarea>
244 |             </div>
245 |         </div>
246 |         <div class="collapse" id="input" style="margin-top: 10px;">
247 |             <div class="well">
248 |                 <a class="close" data-toggle="collapse"
249 |                    data-target="#input" aria-expanded="false" aria-controls="input">&times;</a>
250 |                 Paste here your code!
251 |                 <textarea id="code-input"></textarea>
252 |             </div>
253 |         </div>
254 | 
255 |         <div style="margin-top: 10px;">
256 |             <input type="text" id="position" class="slider" readonly>
257 | 
258 |             <div id="slider-step"></div>
259 |         </div>
260 |         <div id="steps"></div>
261 |     </div>
262 | </div>
263 | 
264 | <script src="https://code.jquery.com/jquery-2.2.2.min.js"
265 |         integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI="
266 |         crossorigin="anonymous"></script>
267 | <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"
268 |         integrity="sha256-DI6NdAhhFRnO2k51mumYeDShet3I8AKCQf/tf7ARNhI="
269 |         crossorigin="anonymous"></script>
270 | <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
271 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
272 |         integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
273 |         crossorigin="anonymous"></script>
274 | <script src="https://cdn.jsdelivr.net/intro.js/2.0.0/intro.min.js"></script>
275 | <script type="text/javascript">
276 | 
277 |     var radius = 200;
278 |     var offset = 200;
279 |     var numberOfLeds = 24;
280 |     var timeslice = 500;
281 |     var playInterval;
282 |     var sequenceLength = 10;
283 |     var sequence;
284 |     initSequence();
285 | 
286 | 
287 |     $("#leds").selectable();
288 |     $("#steps").selectable();
289 | 
290 | 
291 |     // Led slider
292 |     $(function () {
293 |         var slider_lednumber = $("#slider-lednumber").slider({
294 |             value: 24,
295 |             min: 4,
296 |             max: 58,
297 |             step: 1,
298 |             slide: function (event, ui) {
299 |                 $("#lednumber").val("Leds number: " + ui.value);
300 |                 numberOfLeds = ui.value;
301 |                 initSequence();
302 |                 clearLeds();
303 |                 clearSteps();
304 |                 printLeds();
305 |                 printSteps();
306 |             }
307 |         });
308 |         $("#lednumber").val("Leds number: " + slider_lednumber.slider("value"));
309 |     });
310 | 
311 |     // Timeslice slider
312 |     $(function () {
313 |         var slider_timeslice = $("#slider-timeslice").slider({
314 |             value: 150,
315 |             min: 10,
316 |             max: 2000,
317 |             step: 10,
318 |             slide: function (event, ui) {
319 |                 $("#timeslice").val("Slice duration: " + ui.value);
320 |                 timeslice = ui.value;
321 |             }
322 |         });
323 |         $("#timeslice").val("Slice duration: " + slider_timeslice.slider("value"));
324 |     });
325 | 
326 |     // Sequence length slider
327 |     $(function () {
328 |         var slider_sequence_length = $("#slider-sequence-length").slider({
329 |             value: 10,
330 |             min: 5,
331 |             max: 50,
332 |             step: 1,
333 |             slide: function (event, ui) {
334 |                 $("#sequencelength").val("Sequence length: " + ui.value);
335 |                 sequenceLength = ui.value;
336 |                 initSequence();
337 |                 clearSteps();
338 |                 clearLeds();
339 |                 printSteps();
340 |                 printLeds();
341 |                 $("#slider-step").slider("option", "max", sequenceLength - 1).css("width", $("#steps").css("width").replace(/[^-\d\.]/g, '') - $(".step").css("width").replace(/[^-\d\.]/g, ''));
342 | 
343 |             }
344 |         });
345 |         $("#sequencelength").val("Sequence length: " + slider_sequence_length.slider("value"));
346 |     });
347 | 
348 |     // Step slider
349 |     $(function () {
350 |         $("#slider-step").slider({
351 |             value: 0,
352 |             min: 0,
353 |             max: sequenceLength - 1,
354 |             step: 1,
355 |             slide: function (event, ui) {
356 |                 $("#position").val("Step: " + ui.value);
357 |                 //refresh leds
358 |                 for (i = 0; i < numberOfLeds; i++) {
359 |                     $("#leds").children('[data-led="' + i + '"]').css("background-color", sequence[i][ui.value]);
360 |                 }
361 |             }
362 |         });
363 |         $("#position").val("Step: " + $("#slider-step").slider("value"));
364 |     });
365 | 
366 |     function printLeds() {
367 |         for (var i = 0; i < numberOfLeds; i++) {
368 |             var angle = i * (2 * Math.PI / numberOfLeds);
369 |             var newLedX = radius * Math.cos(angle) + offset;
370 |             var newLedY = radius * Math.sin(angle) + offset;
371 |             $("#leds").append("<div class='led color' data-led=" + i + " style='transform: translate(" + newLedX + "px," + newLedY + "px) rotate(" + angle + "rad); background-color: " + sequence[i][0] + ";'></div>");
372 |         }
373 |     }
374 | 
375 |     function clearLeds() {
376 |         $("#leds").empty();
377 |     }
378 | 
379 |     function initSequence() {
380 |         sequence = new Array(numberOfLeds);
381 |         for (var i = 0; i < numberOfLeds; i++) {
382 |             sequence[i] = new Array(sequenceLength);
383 |             for (var j = 0; j < sequenceLength; j++) {
384 |                 sequence[i][j] = "rgb(0,0,0)";
385 |             }
386 |         }
387 |     }
388 | 
389 |     function printSteps() {
390 |         for (var i = 0; i < numberOfLeds; i++) {
391 |             for (var j = 0; j < sequenceLength; j++) {
392 |                 $("#steps").append("<div class='step color' data-led=" + i + " data-step=" + j + " style='width: " + Math.round(600 / sequenceLength) + "px; background-color: " + sequence[i][j] + "'></div>");
393 |             }
394 |         }
395 |         $("#steps").css("width", Math.round(600 / sequenceLength) * sequenceLength);
396 |     }
397 |     function clearSteps() {
398 |         $("#steps").empty();
399 |     }
400 | 
401 |     $("#colorSelector").spectrum({
402 |         preferredFormat: "rgb",
403 |         hide: function (color) {
404 |             var selected = $(".ui-selected").css("background-color", color.toString());
405 |             selected.each(function () {
406 |                 var ledNumber = parseInt($(this).data("led"));
407 |                 var step = $("#slider-step").slider("value");
408 |                 var stepNumber = $(this).data("step");
409 |                 if (typeof stepNumber !== 'undefined') {
410 |                     $("#steps").children('[data-led="' + ledNumber + '"][data-step="' + stepNumber + '"]').css("background-color", color.toString());
411 |                     sequence[ledNumber][stepNumber] = color.toString();
412 |                 }
413 |                 else {
414 |                     $("#steps").children('[data-led="' + ledNumber + '"][data-step="' + step + '"]').css("background-color", color.toString());
415 |                     sequence[ledNumber][step] = color.toString();
416 |                 }
417 |                 //refresh leds
418 |                 for (i = 0; i < numberOfLeds; i++) {
419 |                     $("#leds").children('[data-led="' + i + '"]').css("background-color", sequence[i][$("#slider-step").slider("value")]);
420 |                 }
421 |             });
422 |         },
423 |         showPalette: true,
424 |         palette: [
425 |             ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
426 |             ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
427 |             ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
428 |             ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
429 |             ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
430 |             ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
431 |             ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
432 |             ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
433 |         ]
434 |     });
435 | 
436 |     //Buttons
437 |     $("#play").click(function () {
438 |         // Clear previous interval, if set
439 |         clearInterval(playInterval);
440 |         // Set new playInterval
441 |         playInterval = setInterval(function () {
442 |             j = ($("#slider-step").slider("value") + 1) % sequenceLength;
443 |             $("#slider-step").slider("value", j);
444 |             $("#position").val("Step: " + $("#slider-step").slider("value"));
445 |             //refresh leds
446 |             for (i = 0; i < numberOfLeds; i++) {
447 |                 $("#leds").children('[data-led="' + i + '"]').css("background-color", sequence[i][j]);
448 |             }
449 |         }, timeslice);
450 |     });
451 | 
452 |     $("#stop").click(function () {
453 |         clearInterval(playInterval);
454 |     });
455 | 
456 |     $("#save").click(function () {
457 |         var saveit = "";
458 |         saveit += "{";
459 |         for (var i = 0; i < sequenceLength; i++) {
460 |             saveit += "{";
461 |             for (var j = 0; j < numberOfLeds; j++) {
462 |                 var rgb = sequence[j][i].substring(4, sequence[j][i].length - 1).replace(/ /g, '').split(',');
463 |                 saveit += '{' + rgb.toString() + '}';
464 |                 if (j + 1 != numberOfLeds) saveit += ',';
465 |             }
466 |             saveit += "}";
467 |             if (i + 1 != sequenceLength) saveit += ',';
468 |         }
469 |         saveit += '}';
470 |         $("#code-output").empty().append(saveit);
471 | 
472 |         if(!($("#output").hasClass("in")))
473 |             $("#output-button").click();
474 |     });
475 | 
476 |     $("#load").click(function () {
477 |         var code = $("#code-input").val().replace(/ /g, '');
478 |         if (code.length <= 0) {
479 |             alert("No input code!");
480 |             $("#input-button").click();
481 |         }
482 |         else {
483 |             initSequence();
484 |             $("#slider-step").slider("value", 0);
485 |             $("#position").val("Step: " + $("#slider-step").slider("value"));
486 |             console.log(code);
487 |             code = code.substr(1);
488 |             for (var i = 0; i < sequenceLength; i++) {
489 |                 code = code.substr(1);
490 |                 for (var j = 0; j < numberOfLeds; j++) {
491 |                     code = code.substr(1);
492 |                     var rgb = 'rgb(' + code.substr(0, code.indexOf('}')) + ')';
493 |                     sequence[j][i] = rgb;
494 |                     code = code.substr(code.indexOf('}') + 2);
495 |                 }
496 |                 code = code.substr(1);
497 |             }
498 |             clearLeds();
499 |             clearSteps();
500 |             printLeds();
501 |             printSteps();
502 |         }
503 |     });
504 |     $("#clear").click(function () {
505 |         initSequence();
506 |         clearLeds();
507 |         clearSteps();
508 |         printLeds();
509 |         printSteps();
510 |         $("#code").empty();
511 |     });
512 | 
513 |     $("#select-diagonal").click(function () {
514 |         var startLed = $("#steps").children(".ui-selected").data("led");
515 |         var startStep = $("#steps").children(".ui-selected").data("step");
516 |         for (var i = 0; startLed < numberOfLeds && startStep < sequenceLength; i++) {
517 |             $("#steps").children('[data-led="' + (startLed++) + '"][data-step="' + (startStep++) + '"]').addClass("ui-selected");
518 |         }
519 |     });
520 | 
521 |     $("#select-antidiagonal").click(function () {
522 |         var startLed = $("#steps").children(".ui-selected").data("led");
523 |         var startStep = $("#steps").children(".ui-selected").data("step");
524 |         for (var i = numberOfLeds; startLed < numberOfLeds && startStep >= 0; i--) {
525 |             $("#steps").children('[data-led="' + (startLed++) + '"][data-step="' + (startStep--) + '"]').addClass("ui-selected");
526 |         }
527 |     });
528 | 
529 |     $("#tour-button").click(function () {
530 |         var intro = introJs();
531 |         intro.setOptions({
532 |             steps: [
533 |                 {
534 |                     intro: "To set the color of each led click on a black element or select many of them pressing the CTRL button and then..."
535 |                 },
536 |                 {
537 |                     element: "#box-color",
538 |                     intro: "... you can choose the color with the color picker!"
539 |                 },
540 |                 {
541 |                     element: '#settings-button',
542 |                     intro: "First of all, you should set the number of leds and the duration of the animation. Let's click on this button..."
543 |                 },
544 |                 {
545 |                     element: '#box-settings',
546 |                     intro: "Which kind of ring are you going to use? How long is the animation? Remember to set this value before you make the animation!"
547 |                 },
548 |                 {
549 |                     element: '#controller-button',
550 |                     intro: 'Here you can control the sequencer... Let\'s have a look at it by clicking on this button'
551 |                 },
552 |                 {
553 |                     element: '#box-controller',
554 |                     intro: "Here you can set the duration of each frame, and control the flow of the animation."
555 |                 },
556 |                 {
557 |                     element: '#save',
558 |                     intro: "When you've finished you can save the code and paste it into your sketch!"
559 |                 },
560 |                 {
561 |                     element: '#load',
562 |                     intro: "And then you can load it! Before loading the code remember to set the number of led and the duration of the animation as the same as when you saved it."
563 |                 },
564 |                 {
565 |                     element: '#select-diagonal',
566 |                     intro: "Click on a black box down here and then on this button to select the diagonal"
567 |                 },
568 |                 {
569 |                     intro: "Good work!"
570 |                 }
571 |             ]
572 |         });
573 |         intro.start();
574 |     });
575 | 
576 |     printLeds();
577 |     printSteps();
578 | </script>
579 | </body>
580 | </html>
581 | 


--------------------------------------------------------------------------------