WLED-Ledmap.json-Generator/index.html at main · Intrinsically-Sublime/WLED-Ledmap.json-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
104
105
106
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WLED-Ledmap.json-Generator</title>
    <link rel="stylesheet" type="text/css" href="XYmapper.css">

    <script src="XYmapper.js"></script>

  </head>
  <body>
    <button class="darkToggle" id="lightToggle" onclick="lightMode()">Light</button>
    <h2>WLED-Ledmap.json-Generator</h2>
    <label><b>Other versions!</b></label>
<!--      <a href="https://intrinsically-sublime.github.io/WLED-Ledmap.json-Generator/">WLED Ledmap</a>, -->
      <a href="https://intrinsically-sublime.github.io/WLED-2D-gaps.json-Generator/">WLED 2d-gaps</a>,
      <a href="https://intrinsically-sublime.github.io/FastLED-XY-Map-Generator/">FastLED config</a>,
      <a href="https://intrinsically-sublime.github.io/WLED-Arbitrary-Path-Ledmap.json-Generator/">WLED Arbitrary paths</a>
    <hr>

    <label style="font-size: 1.1em;"><b>How to use  </b></label> <button id="showGuide" onclick="showGuide()">Video guide</button>
    <ol>
      <li>Configure the array by setting the maximum x and y dimensions and click Rebuild.<br>
      <li>Click the LEDs to edit the shape of the array by enabling, discarding or hiding pixels.<br>
      <li>Download the resulting "ledmap.json" file and upload it to your device via http://yourdeviceip/edit (does not work in AP mode)<br>
    </ol>
    <b> *</b> For freestyle mode you must start with all pixels unchecked and then select them in the order you want them. There are NO arrows in freestyle and the only indicator of the order is the numbering.<br>
    <hr>
    <div class="controls">
      <div class="optionBox">
        <label><b>Array</b></label>
            <div class="inputBox">
              <input id="xdim" type="number" name="xdim" min="1" value="16"/>
              <label class="inputText">Width</label>
            </div>
            <div class="inputBox">
              <input id="ydim" type="number" name="ydim" min="1" value="5"/>
              <label class="inputText">Height</label>
            </div>
      </div>
      <div class="optionBox">
        <br>
          <div class="buildBox">
            <input type="checkbox" id="clearAllCHK" onchange="clearAllPixels(this)">
            <label for="clearAllCHK">Start empty</label>
          </div>
          <div class="buildBox">
            <button id="rebuildArray" onclick="buildGrid()">Rebuild</button>
          </div>
      </div>
      <div class="optionBox">
        <label><b>Options</b></label>
          <div class="buildBox">
            <input type="radio" checked id="wLedCHK" name="outputMode" onchange="wLedOutput(this)">
            <label for="wLedCHK">Normal</label><br>
            <input type="radio" id="freeCHK" name="outputMode" onchange="freeOutput(this)">
            <label for="freeCHK">Freestyle <b>*</b></label><br>
          </div><br>
      </div>
      <div class="optionBox">
        <div class="buildBox">
          <input type="checkbox" checked id="discardCHK" onchange="discardPixels(this)">
          <label for="discardCHK">Discard unchecked pixels</label><br>
          <input type="checkbox" id="serpentineCHK" onchange="serpentineLayout(this)">
          <label for="discardCHK">Serpentine</label><br>
          <input type="checkbox" id="verticalCHK" onchange="verticalLayout(this)">
          <label for="discardCHK">Vertical</label><br>
          <input type="checkbox" id="vflipCHK" onchange="vflipLayout(this)">
          <label for="discardCHK">V-Flip</label>
          <input type="checkbox" id="hflipCHK" onchange="hflipLayout(this)">
          <label for="discardCHK">H-Flip</label>
        </div>
      </div>
      <div class="optionBox">
          <label for="discardCHK"><b>Matrix name</b></label>
        <div class="buildBox">
          <input class="nameBox" id="matrixName" type="text" name="matrixName" value="my_matrix"/><br>
          <button class="button" id="downloadFile" onclick="download()">Download</button><br>
          <button class="button" id="copyResults" onclick="copyOutput()">Copy</button>
        </div>
      </div>
    </div>

    <div class="ledGrid" id="ledgrid"></div>
    <div id="infoOut"></div>
    <br>
    <div id="result"></div>

    <ul><br>
      <label><b>ISSUES:</b></label> <a href="https://github.com/Intrinsically-Sublime/WLED-Ledmap.json-Generator/issues">Github</a>
        <hr style="width:35%;text-align:left;margin-left:0">
      <label><b>CREDIT:</b></label>
        <ul>
          <p><a href="https://github.com/Intrinsically-Sublime/WLED-Ledmap.json-Generator">WLED Ledmap.json Generator Code </a>by Intrinsically-Sublime<br>
          Based on FastLED <a href="https://github.com/macetech/FastLED-XY-Map-Generator"> XY-Map-Generator</a> by Garrett Mace</p>
        </ul>
        <hr style="width:35%;text-align:left;margin-left:0">
    </ul>

    <div id="popupGuide" class="modal">
        <div class="closeButton" onclick="hideGuide()"> &times; </div>
        <img class="popupContents" src="https://raw.githubusercontent.com/dosipod/WLED-Ledmap-Generator/master/assets/images/content/how_to_use_map_genrator.gif" alt="Animated instructions">
    </div>

  </body>
</html>