Neopixel-Effect-Generator/index.html at master · jmmzzei/Neopixel-Effect-Generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
  <head>
    <title>LED Strip Effects generator</title>
    <meta name="description" content="Create Arduino sketches on the fly with all the effects.">
    <meta name="keywords" content="ws2812, effects generator, online, led strip, arduino, teensy">
    <meta charset="UTF-8">
    <meta name="author" content="Adriano Petrucci">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/form.css?v=1" />
    <link rel="stylesheet" href="css/leds.css" />

    <script src="scripts/form_slider.js" ></script>
    <script src="scripts/form.js" ></script>
    <script src="scripts/effects.js" ></script>
    <script src="scripts/loops.js" ></script>
    <script src="scripts/strip.js" ></script>
    <script src="scripts/arduino.js" ></script>
    <script src="scripts/tools.js" ></script>

    <link rel="stylesheet" href="css/arduino-light.css">
    <script src="scripts/highlight.pack.js"></script>

    <script>
      var interval = null;

      function addLedStrip(ledStrip)
      {
        if(!ledStrip || typeof ledStrip === 'undefined') ledStrip = LedStrips.AddLedStrip();

        document.getElementById("ledstripsdiv").appendChild(ledStrip.GetDiv());
        document.getElementById("ledeffectsdiv").style.paddingTop = parseInt(document.getElementById("ledeffectsdiv").style.paddingTop) + 30 + "px";
        document.getElementById("ledeffectsdiv").style.display = "block";
      }

      var start = window.performance.now();

      function loop()
      {
        LedStrips.Loop();
      }

      interval = window.setInterval(function(){loop();}, 0);
    </script>
    <style>
      div
      {
        margin:0 auto;
      }
      table
      {
        margin:0 auto;
      }
    </style>
  </head>
  <body style='background-color:#151515;color:#ffffff;margin:0px;text-align:center;'>
    <div id="ledeffectsdiv" style="position:relative;padding-top:200px;">
      <h2>Effects:</h2>
      <div>
        This generator will create a code for the neopixel led strip. Just create your animation and press "generate Arduino code" to get your
        animation as code.<br>
        The source code and documentation are hosted on GitHub:<br>
        <a href="https://github.com/Adrianotiger/Neopixel-Effect-Generator">https://github.com/Adrianotiger/Neopixel-Effect-Generator</a><br><br>
        Want to discuss about this led strip project? Post your question on the Ardiuno forum:<br>
        <a href="https://forum.arduino.cc/index.php?topic=534060.0">https://forum.arduino.cc/index.php?topic=534060.0</a><br><br>
        Version 2.2 <br> &copy; 2018-2019 - Adriano
      </div>
    </div>

    <div id="ledstripsdiv" style="position:fixed;width:100vw;top:0px;">
      <div style="float:left;width:230px;height:120px;background-color:#6f6f6f;border-width:2px;border-color:#484848;border-style:ridge;border-radius:10px;">
        <table style="height:100%;">
          <tr><td>
            <input type="button" value="Import" onclick="Tools.ImportCode()" />
            <input type="button" value="Export" onclick="Tools.ExportCode()" />
          </td></tr>
          <tr><td style="vertical-align: bottom;">
            <input type="button" value="generate Arduino code" onclick="Arduino.GenerateCode()" />
          </td></tr>
        </table>
      </div>
      <div style="float:right;width:230px;height:120px;background-color:#6f6f6f;border-width:2px;border-color:#484848;border-style:ridge;border-radius:10px;">
        <table style="height:100%;">
          <tr><td>
            <i title="If the browser is too slow, the animation on the led strip is much faster. This factor shows how much faster the led strip will be.">
              Speed factor: <em id='info_speedfactor'>1x</em><br>
              Current: <em id='info_current'>0A (max: 0A)</em><br>
              RAM: <em id='info_ram'>0 bytes</em><br>
              Flash: <em id='info_ram'>4.4 kb</em><br>
            </i>
          </td></tr>
          <tr><td style="vertical-align: bottom;">

          </td></tr>
        </table>
      </div>
      <h1>LED Strip Effects Generator</h1>
      <h2>Led Strips:</h2>
      <input type="button" onclick="addLedStrip();" value="Add Led Strip" />
    </div>
  </body>
</html>