-
Notifications
You must be signed in to change notification settings - Fork 43
/
index.html
109 lines (98 loc) · 5.5 KB
/
index.html
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
<!DOCTYPE html>
<!--
Copyright 2021 James Deery
Released under the MIT licence, https://opensource.org/licenses/MIT
-->
<html lang="en">
<head>
<title>M8 Display</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000" />
<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="icon.png">
<link rel="manifest" href="app.webmanifest">
<link rel="stylesheet" href="build/index.css">
</head>
<body>
<div id="display">
<canvas id="canvas" width="320" height="240"></canvas>
<div id="buttons" class="hidden">
<button id="connect">Connect</button>
</div>
<div id="mapping-buttons"></div>
<div id="mapping-help">
<p class="select-action">Click a key to add a new mapping</p>
<p class="enter-input">Press a keyboard key or gamepad button</p>
</div>
<div id="controls">
<div data-action="edit" style="top: 2.0833%; left: 76.5625%"></div>
<div data-action="option" style="top: 2.0833%; left: 53.125%"></div>
<div data-action="up" style="top: 6.25%; left: 25%"></div>
<div data-action="left" style="top: 37.5%; left: 1.5625%"></div>
<div data-action="down" style="top: 37.5%; left: 25%"></div>
<div data-action="right" style="top: 37.5%; left: 48.4375%"></div>
<div data-action="select" style="top: 70.8333%; left: 27.3438%"></div>
<div data-action="start" style="top: 70.8333%; left: 50.7813%"></div>
</div>
</div>
<div id="serial-fail" class="error hidden">
<p>Failed to connect over Serial.
Are you sure your Teensy is connected and the M8 Headless firmware is loaded?</p>
<p>Make sure that there are no other programs running which may have the serial port open.</p>
<p>On Linux you may also need make sure you have permission to open the serial port (eg. make yourself a member of the <code>dialout</code> group).</p>
<p>It is also possible there's a bug in this code.
There may be some messages in the developer console that will help with debugging.</a>
</div>
<div id="usb-fail" class="error hidden">
<p>Failed to connect with WebUSB.
Are you sure your Teensy is connected and the M8 Headless firmware is loaded?</p>
<p>Connecting with WebUSB is known not to work on Windows, Linux and some Samsung phones.
Please make sure you are using an up to date version of Chrome or Edge (89+).</p>
</div>
<div id="no-serial-usb" class="error hidden">
<p>Your browser doesn't appear to have Serial or WebUSB support.
These are only currently supported in Chrome and some Chrome-derived browsers.</p>
</div>
<div id="info">
<h1>M8 Display</h1>
<p>This is a display for the <a href="https://github.com/DirtyWave/M8HeadlessFirmware" target="_blank" rel="noopener">M8 Headless firmware</a> running on a Teensy 4.1, or a <a href="https://dirtywave.com/" target="_blank" rel="noopener">real M8 device</a>.
You can use keyboard and gamepad input or use on-screen controls.
Where possible, the audio output from the M8 is routed to your default audio output device.
Firmware can be installed and updated from the menu.</p>
<p>By default the arrow keys on your keyboard map to the arrow keys on the M8.
Shift is <kbd>Left Shift</kbd>, Play is <kbd>Space</kbd>, Option is <kbd>Z</kbd>, and Edit is <kbd>X</kbd>.
These control mappings and other settings can be configured from the menu.</p>
<p>A virtual keyboard from <kbd>A</kbd> to <kbd>'</kbd> lets you send MIDI notes.
Use <kbd>-</kbd>/<kbd>=</kbd> to change octaves and <kbd>[</kbd>/<kbd>]</kbd> to change velocity.</p>
<p>Now that this page has loaded it will work completely offline.
All settings are stored locally by your browser.</p>
<p>Source code and more details are available at <a href="https://github.com/derkyjadex/M8WebDisplay" target="_blank" rel="noopener">github.com/<wbr>derkyjadex/<wbr>M8WebDisplay</a>.</p>
<button>OK</button>
<p class="build">Build BUILDNUM</p>
</div>
<div id="settings" class="hidden">
<button id="menu-button">Menu</button>
</div>
<div id="reload" class="hidden">
<button>An update is available. Click to reload.</button>
</div>
<div id="capture-shield"></div>
<div id="firmware" class="hidden">
<p class="select-file-msg">Select a firmware file</p>
<input type="file" accept=".hex">
<p class="file-loading-msg">Loading file...</p>
<p class="file-error-msg">The selected file does not appear to be a valid Teensy 4.1 firmware file</p>
<p class="select-device-msg">Connect your Teensy board and press the little button on the board</p>
<button class="select-device">Select Teensy Device</button>
<p class="device-error-msg">The selected device does not appear to be a Teensy 4.1</p>
<p class="flash-msg">Ready to flash</p>
<button class="flash">Flash</button>
<p class="flashing-msg">Flashing...</p>
<progress class="flash"></progress>
<p class="flash-error-msg">There was an error flashing the device. You can try again.</p>
<p class="flash-success-msg">Flashing completed successfully</p>
<button class="close">Close</button>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>