forked from derkyjadex/M8WebDisplay
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (97 loc) · 5.44 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
<!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 or Linux.
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>
</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>