dotmatrixtool/index.html at usbserial · FrameworkComputer/dotmatrixtool · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="A web tool for controlling the Framework Laptop 16 LED Matrix Input Module">
    <link rel="icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+Mono:400,500" rel="stylesheet" type="text/css">

    <title>Framework Laptop 16 LED Matrix Input Module Control</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="prettify/prettify.css" type="text/css" rel="stylesheet">

    <link rel="manifest" href="manifest.json">

    <!-- Custom styles for this template -->
    <link href="cover.css" rel="stylesheet">
  </head>

  <body>
    <!-- Body Contents -->
    <div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="cover-container">

          <div id="instructions" class="item">
            <div>
              <img class="fw-logo" alt="cog icon next to 'framework'" width="160" height="21" src="framework-logo.svg">

              <h1>LED Matrix Input Module Control</h1>

              <h2>Instructions</h2>
              <!-- instructions -->
              <p>
                Left mouse button to draw.<br>
                Right mouse button (or Ctrl+Left) to erase.
              </p>
              <p>
                Steps:
              </p>

              <ol>
                <li>Install the LED Matrix module in your Framework Laptop 16</li>
                <li>Click Connect Left or Connect Right</li>
                <li>Allow connection and select port<br>(something like ACM0 or COM3)</li>
                <li>Start drawing</li>
              </ol>
            </div>

            <div id="controls">
              <div>
                <h2>Device Information</h2>
                <p><strong>Left:</strong> <span id="fw-version-left">Disconnected</span></p>
                <p><strong>Right:</strong> <span id="fw-version-right">Disconnected</span></p>
              </div>

              <div class="btn-group">
                <button type="button" class="btn btn-default" id="connectLeftBtn">Connect Left</button>
                <button type="button" class="btn btn-default" id="connectRightBtn">Connect Right</button>
                <button type="button" class="btn btn-default" id="swapBtn">Swap</button>
              </div>

              <div class="btn-group">
                <button type="button" class="btn btn-default" id="wakeBtn">Wake</button>
                <button type="button" class="btn btn-default" id="sleepBtn">Sleep</button>
                <button type="button" class="btn btn-default" id="bootloaderBtn">Bootloader</button>
              </div>

              <p class="slider-wrapper">
                <label for="brightnessRange">Brightness:</label>
                <input type="range" id="brightnessRange" min="0" max="255">
              </p>

              <div class="btn-group">
                <button type="button" class="btn btn-default" id="clearLeftBtn">Clear Left</button>
                <button type="button" class="btn btn-default" id="clearRightBtn">Clear Right</button>
              </div>
              <!--<button type="button" class="btn btn-default" id="sendButton">Send</button>-->
            </div>

            <div>
              <h2>Learn More</h2>

              <ul>
                <li>
                  <a href="https://github.com/FrameworkComputer/dotmatrixtool/archive/refs/heads/usbserial.zip">Download offline version</a>
                </li>
                <li>
                  <a href="https://github.com/FrameworkComputer/dotmatrixtool">View the source</a>
                </li>
                <li>
                  <a href="https://frame.work">Find more Framework products</a>
                </li>
                <li>
                  Thanks to <a href="https://github.com/stefangordon/dotmatrixtool">stefangordon for their dotmatrixtool</a>, which this project is a fork of.
                </li>
              </ul>
            </div>
          </div>

          <div id="matrix" class="cover item">
            <!-- Grid bits -->
            <div>
              <select id="select-left"></select>
              <div class="led-grid" id="led-grid_left" oncontextmenu="return false;"></div>
            </div>
            <div>
              <select id="select-right"></select>
              <div class="led-grid" id="led-grid_right" oncontextmenu="return false;"></div>
            </div>
          </div>

        </div>

      </div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="prettify/prettify.js"></script>
    <script src="app.js"></script>
  </body>
</html>