voidstar/index.html at master · codenameyau/voidstar · 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Voidstar Programmer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <div class="title-row">
      <h1><button type="button" id="logo">Voidstar Programmer</button></h1>
      <div class="header-actions">
        <a href="https://trippysquid.com/pages/led-flowstar" target="_blank" rel="noopener">Instructions</a>
        <button type="button" id="export-program">Export</button>
        <button type="button" id="import-program">Import</button>
        <input type="file" id="import-file" accept="application/json,.json" hidden>
      </div>
    </div>
    <p class="hint" id="import-error" hidden></p>
  </header>

  <main class="layout">
    <section class="card area-pick" aria-labelledby="choose-title">
      <div class="heading-row">
        <h2 id="choose-title"><span class="step-num">1</span> Choose your settings</h2>
        <div class="history-actions">
          <button type="button" id="undo" disabled>Undo</button>
          <button type="button" id="redo" disabled>Redo</button>
        </div>
      </div>
      <div class="slots" id="slots" role="group" aria-label="Palette slot to edit"></div>
      <div class="chart" id="chart" aria-label="Color chart"></div>

      <div>
        <div class="heading-row">
          <h3>Ideas</h3>
          <div class="idea-actions">
            <button type="button" id="random-program">Random</button>
            <button type="button" id="save-idea">Save idea</button>
          </div>
        </div>
        <div class="chips" id="presets"></div>
      </div>
      <div>
        <h3>Modes</h3>
        <div class="modes" id="modes" role="group" aria-label="Flash mode"></div>
      </div>
      <div class="light-pager">
        <div class="heading-row">
          <h3>Light</h3>
          <div class="segment" role="group" aria-label="Program lights">
            <label class="apply-all" id="apply-all-label" hidden>
              <input type="checkbox" id="apply-all">
              Apply all
            </label>
            <button type="button" id="program-individual" aria-pressed="false">Individual</button>
            <button type="button" id="program-all" aria-pressed="true">All</button>
          </div>
        </div>
        <div class="light-pages" id="lights" role="group" aria-label="Light"></div>
      </div>
    </section>

    <section class="card area-preview" aria-labelledby="preview-title">
      <h2 id="preview-title"><span class="step-num">2</span> Preview</h2>
      <div class="preview-wrap">
        <canvas id="preview" width="640" height="640" aria-label="Animated preview of the selected mode"></canvas>
        <div class="preview-controls">
          <button type="button" id="vary-speed" aria-pressed="false">Vary speed</button>
          <button type="button" id="leds" aria-pressed="true">LEDs</button>
          <button type="button" id="flip">Flip</button>
          <button type="button" id="pause" aria-pressed="false">Pause</button>
          <button type="button" id="fullscreen" aria-pressed="false">Full screen</button>
        </div>
      </div>
      <div class="stars" id="stars" role="group" aria-label="Preview star"></div>
    </section>

    <section class="card area-program" aria-labelledby="program-title">
      <h2 id="program-title"><span class="step-num">3</span> Program the light</h2>
      <p id="plan-summary" class="plan-summary"></p>
      <button type="button" class="primary" id="start-coach">Start guided programming</button>
    </section>

    <section class="card area-trouble" aria-labelledby="trouble-title">
      <h2 id="trouble-title"><span class="step-num">4</span> Troubleshooting</h2>
      <ul class="trouble">
        <li><strong>Light went green and won't turn on:</strong> you held too long and it's in Lock Mode. Press the button 3 times quickly.</li>
        <li><strong>Stuck in program mode:</strong> while on, press the Void case at the pin hole right of the button. The light turns off.</li>
        <li><strong>Want the factory colors back:</strong> while off, hold 5 seconds and release on red.</li>
        <li><strong>Brightness changed:</strong> holding past 1 second while saving cycles brightness. Release as soon as the save registers.</li>
      </ul>
    </section>

    <section class="card area-guide" aria-labelledby="guide-title">
      <h2 id="guide-title">Instructions</h2>
      <div class="guide">
        <figure>
          <img src="instructions/how-to-program.png" alt="How to turn the Void light on, off, and program its three colors">
        </figure>
        <figure>
          <img src="instructions/color-chart.png" alt="The 34 colors on the Void light, numbered 1 to 34">
        </figure>
        <figure>
          <img src="instructions/flash-patterns.png" alt="The nine LED flash patterns, from fast strobe to two color flash">
        </figure>
        <figure>
          <img src="instructions/additional-settings.png" alt="Lock mode, factory reset, and the pin-hole reset">
        </figure>
      </div>
    </section>
  </main>

  <dialog id="coach" aria-labelledby="coach-title">
    <form method="dialog" class="coach-close"><button aria-label="Close">✕</button></form>
    <div class="coach-progress">
      <span id="coach-step"></span>
      <div class="bar"><div id="coach-bar"></div></div>
    </div>
    <div class="coach-slots" id="coach-slots"></div>
    <h2 id="coach-title" aria-live="polite"></h2>
    <div class="coach-big" id="coach-big" aria-hidden="true"></div>
    <p class="coach-detail" id="coach-detail"></p>
    <div class="coach-expect" id="coach-expect"></div>

    <div class="coach-actions">
      <button type="button" id="coach-back">Back</button>
      <label class="coach-auto"><input type="checkbox" id="coach-auto"> Hands-free</label>
      <button type="button" id="coach-cue"></button>
      <button type="button" id="coach-next" class="primary">Next</button>
    </div>
    <div class="coach-lights" id="coach-lights" role="group" aria-label="Lights"></div>
  </dialog>

  <dialog id="idea-dialog" aria-labelledby="idea-title">
    <form method="dialog" class="coach-close"><button aria-label="Close">✕</button></form>
    <form id="idea-form" class="idea-form">
      <h2 id="idea-title">Save idea</h2>
      <label class="field">
        Name
        <input id="idea-name" type="text" maxlength="24" required pattern=".*\S.*" title="Give the idea a name." autocomplete="off" placeholder="My idea">
      </label>
      <div class="idea-colors" id="idea-colors"></div>
      <p class="idea-mode" id="idea-mode"></p>
      <div class="coach-actions">
        <button type="button" id="idea-cancel">Cancel</button>
        <button type="submit" class="primary">Save idea</button>
      </div>
    </form>
  </dialog>

  <script type="module" src="app.js"></script>
</body>
</html>