[
{
"path": ".gitignore",
"content": "node_modules/\nbuild/\ncert/\ndeploy\n\n"
},
{
"path": "LICENSE",
"content": "Copyright 2021-2022 James Deery\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n"
},
{
"path": "Makefile",
"content": "# Copyright 2021-2022 James Deery\n# Released under the MIT licence, https://opensource.org/licenses/MIT\n\nDEPLOY = \\\n\tbuild/index.html \\\n\tbuild/worker.js \\\n\tapp.webmanifest \\\n\tbuild/icon.png\n\nCACHE_FILES = \\\n\tbuild/index.html \\\n\tbuild/icon.png \\\n\tapp.webmanifest\n\nDEPLOY_DIR = deploy/\n\nNPM = node_modules/\n\nifeq ($(shell uname -s),Darwin)\n\tBASE64 = base64 -i\n\tMD5 = md5\nelse\n\tBASE64 = base64 -w0\n\tMD5 = md5sum\nendif\n\n\nindex.html: build/index.css js/main.js\n\njs/main.js: $(filter-out js/main.js,$(wildcard js/*.js)) build/shaders.js build/font1.js build/font2.js\n\t@touch $@\n\nbuild/shaders.js: $(wildcard shaders/*.vert) $(wildcard shaders/*.frag)\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@for i in $^; do \\\n\t printf \"export const $$(basename $${i} | tr . _) = \\`\"; \\\n\t sed 's/\\/\\/.*$$//g' $$i \\\n\t | perl -0pe 's/([\\n;,{}()\\[\\]=+\\-*\\/])[ \\t\\r\\n]+/$$1/g'; \\\n\t echo \"\\`;\"; \\\n\tdone > $@\n\nbuild/font1.js: font1.png\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@printf \"export const font1 = 'data:image/png;base64,$$($(BASE64) $^)';\" > $@\n\nbuild/font2.js: font2.png\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@printf \"export const font2 = 'data:image/png;base64,$$($(BASE64) $^)';\" > $@\n\nbuild/main.js: js/main.js $(NPM)\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@npx rollup $< \\\n\t | npx terser --mangle --toplevel --compress > $@\n\nbuild/worker.js: js/worker.js $(CACHE_FILES) $(NPM)\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@sed \"s/INDEXHASH/$$(cat $(CACHE_FILES) | $(MD5))/\" $< \\\n\t | npx terser --mangle --compress > $@\n\ncss/index.scss: $(filter-out css/index.scss,$(wildcard css/*.scss)) build/font1.scss build/font2.scss\n\t@touch $@\n\nbuild/font1.scss: m8stealth57.woff2\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@printf \"@font-face {\\n\\\n\t font-family: 'm8stealth57';\\n\\\n\t src: url('data:font/woff2;base64,$$($(BASE64) $^)') format('woff2');\\n\\\n\t}\" > $@\n\nbuild/font2.scss: m8stealth89.woff2\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@printf \"@font-face {\\n\\\n\t font-family: 'm8stealth89';\\n\\\n\t src: url('data:font/woff2;base64,$$($(BASE64) $^)') format('woff2');\\n\\\n\t}\" > $@\n\nbuild/index.css: css/index.scss $(NPM)\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@npx sass --style=compressed $< > $@\n\nbuild/index.html: index.html build/index.css build/main.js favicon.png $(NPM)\n\t@echo Building $@\n\t@mkdir -p $(@D)\n\t@sed \"s/BUILDNUM/$$(date -u +\"%Y-%m-%dT%H:%M:%S\") $$(git rev-parse --short HEAD)$$(test -z \"$$(git status --porcelain)\" || printf X)/\" $< \\\n\t | sed -e 's/\"build\\/index.css\"/\"index.css\"/' \\\n\t | sed -e 's/\"js\\/main.js\"/\"main.js\"/' \\\n\t | sed -e 's|\"favicon.png\"|\"data:image/png;base64,'$$($(BASE64) favicon.png)'\"|' \\\n\t | sed -e 's/^ *//' \\\n\t | perl -0pe 's/>[ \\t\\r\\n]+ $@.tmp\n\t@npx juice \\\n\t --apply-style-tags false \\\n\t --remove-style-tags false \\\n\t $@.tmp $@\n\t@rm $@.tmp\n\nbuild/icon.png: icon.png\n\t@echo Building $@\n\t@cp $< $@\n\ncert/cert.conf: $(NPM)\n\t@echo Building $@\n\t@mkdir -p cert\n\t@echo \"[req]\\n\\\n\tdistinguished_name=dn\\n\\\n\treq_extensions=ext\\n\\\n\tprompt=no\\n\\\n\t[dn]\\n\\\n\tCN=DevCert\\n\\\n\tOU=DEV\\n\\\n\t[ext]\\n\\\n\tkeyUsage=nonRepudiation,digitalSignature,keyEncipherment\\n\\\n\tbasicConstraints=critical,CA:TRUE,pathlen:0\\n\\\n\tsubjectAltName=DNS:localhost,$$(\\\n\t npx ws --list-network-interfaces \\\n\t | grep '^-' \\\n\t | sed -E 's/^- .+: ([0-9.]+)$$/IP:\\1/g' \\\n\t | sed -E 's/^- .+: (.+)$$/DNS:\\1/g' \\\n\t | paste -sd ',' -)\" > $@\n\ncert/private-key.pem:\n\t@echo Building $@\n\t@mkdir -p cert\n\t@openssl genrsa -out $@ 2048\n\ncert/server.csr: cert/private-key.pem cert/cert.conf\n\t@echo Building $@\n\t@openssl req \\-new \\\n\t -nodes \\\n\t -sha256 \\\n\t -key cert/private-key.pem \\\n\t -config cert/cert.conf \\\n\t -out $@\n\ncert/server.crt: cert/private-key.pem cert/cert.conf cert/server.csr\n\t@echo Building $@\n\t@openssl x509 \\\n\t -req \\\n\t -sha256 \\\n\t -days 90 \\\n\t -in cert/server.csr \\\n\t -signkey cert/private-key.pem \\\n\t -extfile cert/cert.conf \\\n\t -extensions ext \\\n\t -out $@\n\n$(NPM):\n\t@echo Installing node packages\n\t@npm ci\n\nall: $(DEPLOY)\n\nclean:\n\t@echo Cleaning\n\t@rm -r build/*\n\nifeq ($(HTTPS),true)\nrun: index.html cert/private-key.pem cert/server.crt $(NPM)\n\t@npx ws \\\n\t\t--log.format dev \\\n\t\t--rewrite '/worker.js -> /js/worker.js' \\\n\t\t--blacklist /cert/private-key.pem \\\n\t\t--key cert/private-key.pem \\\n\t\t--cert cert/server.crt\nelse\nrun: index.html $(NPM)\n\t@npx ws \\\n\t\t--log.format dev \\\n\t\t--rewrite '/worker.js -> /js/worker.js' \\\n\t\t--blacklist /cert/private-key.pem\nendif\n\ndeploy: $(DEPLOY)\n\t@echo Deploying\n\t@mkdir -p $(DEPLOY_DIR)\n\t@rm -rf $(DEPLOY_DIR)/*\n\t@cp $^ $(DEPLOY_DIR)\n\n.PHONY: all run deploy clean\n"
},
{
"path": "README.md",
"content": "# M8 Headless Web Display\n\nThis is alternative frontend for [M8 Headless](https://github.com/DirtyWave/M8HeadlessFirmware).\n\nIt runs entirely in the browser and only needs to be hosted on a server to satisfy browser security policies. No network communication is involved.\n\nTry it out at https://derkyjadex.github.io/M8WebDisplay/.\n\nFeatures:\n\n- Render the M8 display\n- Route M8's audio out to the default audio output\n- Keyboard and gamepad input\n- Custom key/button mapping\n- Touch-compatible on-screen keys\n- Firmware loader\n- Full offline support\n- Installable as a [PWA](https://en.wikipedia.org/wiki/Progressive_web_application)\n\n## Supported Platforms\n\nThe following should generally work, details are below.\n\n- Chrome 89+ on macOS, Windows and Linux1\n- Edge 89+ on macOS and Windows\n- Chrome on Android2, without audio3\n\nThe web display uses the Web Serial API to communicate with the M8. This API is currently only supported by desktop versions of Google Chrome and Microsoft Edge in versions 89 or later. For Chrome on Android the code can fallback to using the WebUSB API.\n\n1. On Ubuntu and Debian systems (and perhaps others) users do not have permission to access the M8's serial port by default. You will need to add yourself to the `dialout` group and restart your login session/reboot. After this you should be able to connect normally.\n2. Newer Samsung phones appear to handle USB serial in a way that prevents Chrome from being able to open the device. There is an [outstanding Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1099521#c21) to fix this.\n3. The way that that Android handles USB audio devices (such as the M8) prevents us from being able to redirect the audio to the phone's speakers or headphone output. When the M8 is attached, Android appears to completely disable the internal audio interface and uses the M8 for all audio input and output instead. So the page is able to receive the audio from the M8 but it does not have anywhere to redirect it to other than the M8 itself.\n\n## Developing\n\nTo build this project you need a standard unix-like environment and a recent-ish version of [Node.js](https://nodejs.org/) (15.6 works, earlier versions might not). You should be able to build on macOS, Linux and [WSL](https://docs.microsoft.com/en-us/windows/wsl/) on Windows.\n\nFrom a fresh clone, run this in your terminal:\n\n```\nmake run\n```\n\nThis will download the necessary node packages, build the files required to run a debug version of the display and launch a local web server. If this is successful you can open http://localhost:8000/ in Chrome to launch the display. Press `ctrl-c` to stop the server.\n\nYou can edit the `*.js` files and simply refresh the page to see the changes. If you edit the `*.scss` files or the shaders you will need to run `make` to regenerate the necessary files before refreshing. You can do this from another terminal window/tab, there is no need to restart the server.\n\nChrome requires that pages are served securely in order to enable features such as the Serial API. Normally this means using HTTPS but there is an exception when you use `localhost`. If you want to test your changes on another computer on your network you will need to run the local web server with HTTPS:\n\n```\nmake run HTTPS=true\n```\n\nThis will generate a certificate and the local web server will now work from `https://:8000` (the full list of addresses is shown in the command output). When you use this address you will need to either ignore the security warning or install the certificate at `cert/server.crt` as a trusted Certificate Authority on your device.\n\nTo build a release version of the display run:\n\n```\nmake deploy\n```\n\nThis will build and copy the release files to the `deploy/` directory. These files can be hosted on any static web server as long as has an HTTPS address.\n\n## TODO/Ideas\n\n- Avoid/automatically recover from bad frames\n- Auto-reboot for firmware loader/real M8 support\n- Selectable audio output device\n\n## Licence\n\nThis code is released under the MIT licence.\n\nSee LICENSE for more details.\n"
},
{
"path": "app.webmanifest",
"content": "{\n \"name\": \"M8 Display\",\n \"short_name\": \"M8 Display\",\n \"description\": \"Web display for M8 Headless\",\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"background_color\": \"#000\",\n \"theme_color\": \"#000\",\n \"icons\": [\n {\n \"src\": \"icon.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\",\n \"purpose\": \"any maskable\"\n }\n ]\n}\n"
},
{
"path": "css/common.scss",
"content": "// Copyright 2021 James Deery\n// Released under the MIT licence, https://opensource.org/licenses/MIT\n\n$m8: #00efff;\n$m8-font: 'm8stealth57';\n$m8-font-big: 'm8stealth89';\n$shield-z: 1000;\n\n"
},
{
"path": "css/display.scss",
"content": "// Copyright 2021-2022 James Deery\n// Released under the MIT licence, https://opensource.org/licenses/MIT\n\n@use 'common' as *;\n\n#display {\n position: relative;\n width: 100vw;\n height: calc(100vw * 3 / 4);\n max-width: calc(100vh * 4 / 3);\n max-height: 100vh;\n margin: 0 auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n user-select: none;\n\n canvas, svg {\n position: absolute;\n image-rendering: pixelated;\n width: 100%;\n height: 100%;\n }\n\n svg text {\n font-family: $m8-font;\n font-size: 16px;\n }\n\n svg.big text {\n font-family: $m8-font-big;\n font-size: 24px;\n }\n\n #buttons {\n position: absolute;\n top: 25px;\n width: 100%;\n text-align: center;\n\n body.mapping & {\n display: none;\n }\n }\n\n #mapping-buttons {\n display: none;\n position: absolute;\n top: 25px;\n width: 100%;\n text-align: center;\n\n body.mapping & {\n display: block;\n }\n\n button {\n margin: 0 5px 10px;\n }\n }\n\n &.with-controls, body.mapping & {\n height: calc(100vw * 6 / 4);\n max-width: calc(100vh * 4 / 6);\n\n canvas, svg {\n height: 50%;\n }\n\n #controls {\n display: block;\n }\n }\n\n #controls {\n display: none;\n position: relative;\n width: 100%;\n height: 50%;\n top: 50%;\n\n > div {\n position: absolute;\n width: 20.3125%;\n height: 27.0833%;\n border: 3px solid #aaa;\n border-radius: 10px;\n background-color: #333;\n box-sizing: border-box;\n padding: 5px;\n text-align: center;\n font-size: 80%;\n transition-property: border-color, background-color;\n transition-duration: 200ms;\n\n &.active {\n border-color: #0cf;\n background-color: #0cf;\n transition-duration: 0s;\n\n &[data-action=\"edit\"] {\n border-color: #d48;\n background-color: #d48;\n }\n\n &[data-action=\"option\"] {\n border-color: #66c;\n background-color: #66c;\n }\n\n &[data-action=\"select\"] {\n border-color: #d73;\n background-color: #d73;\n }\n\n &[data-action=\"start\"] {\n border-color: #5a3;\n background-color: #5a3;\n }\n }\n\n &.mapping {\n border-color: #e30;\n z-index: $shield-z + 1;\n }\n }\n }\n\n #mapping-help {\n display: none;\n position: absolute;\n bottom: 50%;\n width: 100%;\n font-family: $m8-font;\n text-align: center;\n\n body.mapping & {\n display: block;\n\n .select-action {\n display: block;\n }\n .enter-input {\n display: none;\n }\n }\n\n body.mapping.capturing & {\n .select-action {\n display: none;\n }\n .enter-input {\n display: block;\n position: relative;\n z-index: $shield-z + 1;\n }\n }\n }\n}\n\n#capture-shield {\n display: none;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: $shield-z;\n\n body.mapping.capturing & {\n display: block;\n }\n}\n"
},
{
"path": "css/firmware.scss",
"content": "// Copyright 2021 James Deery\n// Released under the MIT licence, https://opensource.org/licenses/MIT\n\n@use 'common' as *;\n\n#firmware {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 100px;\n background-color: rgba(0, 0, 0, 0.75);\n text-align: center;\n font-family: $m8-font;\n line-height: 1.5;\n\n &.hidden {\n display: none;\n }\n\n p.select-file-msg,\n input[type=file],\n p.file-loading-msg,\n p.file-error-msg,\n p.select-device-msg,\n button.select-device,\n p.device-error-msg,\n p.flash-msg,\n button.flash,\n p.flashing-msg,\n progress.flash,\n p.flash-error-msg,\n p.flash-success-msg {\n display: none;\n margin: 20px auto;\n }\n\n p.file-error-msg,\n p.device-error-msg,\n p.flash-error-msg {\n color: #e22;\n }\n\n &.file-select {\n p.select-file-msg,\n input[type=file] {\n display: block;\n }\n }\n\n &.file-loading {\n p.file-loading-msg {\n display: block;\n }\n\n button.close {\n display: none;\n }\n }\n\n &.file-error {\n p.select-file-msg,\n input[type=file],\n p.file-error-msg {\n display: block;\n }\n }\n\n &.file-loaded {\n p.select-device-msg,\n button.select-device {\n display: block;\n }\n }\n\n &.device-error {\n p.select-device-msg,\n button.select-device,\n p.device-error-msg {\n display: block;\n }\n }\n\n &.device-selected {\n p.flash-msg,\n button.flash {\n display: block;\n }\n }\n\n &.flashing {\n p.flashing-msg,\n progress.flash {\n display: block;\n }\n\n button.close {\n display: none;\n }\n }\n\n &.flash-error {\n p.select-device-msg,\n button.select-device,\n p.flash-error-msg {\n display: block;\n }\n }\n\n &.flash-success {\n p.flash-success-msg {\n display: block;\n }\n }\n\n button.close {\n display: block;\n position: absolute;\n right: 100px;\n bottom: 100px;\n }\n}\n"
},
{
"path": "css/form.scss",
"content": "// Copyright 2021 James Deery\n// Released under the MIT licence, https://opensource.org/licenses/MIT\n\n@use 'common' as *;\n\n$menu-time: 80ms;\n\nlabel, input, select, button {\n appearance: none;\n font-family: $m8-font;\n font-size: 14px;\n background-color: #000;\n color: #fff;\n\n &:hover {\n background-color: $m8;\n color: #000;\n }\n\n &:active {\n background-color: darken($m8, 10%);\n color: #fff;\n }\n\n &:focus, &:focus-within {\n outline: none;\n color: $m8;\n\n &:hover {\n color: #000;\n }\n\n &:active {\n color: #fff;\n }\n }\n}\n\nbutton {\n border: 3px solid #fff;\n padding: 20px;\n}\n\ninput[type=checkbox] {\n font-family: $m8-font;\n\n &::after {\n content: 'OFF';\n }\n\n &:checked::after {\n content: 'ON';\n }\n}\n\ninput[type=file] {\n border: 3px solid #fff;\n padding: 20px;\n}\n\nselect {\n padding: 5px 32px 5px 5px;\n background-color: transparent;\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-size: 16px;\n\n font-family: sans-serif;\n font-size: 12px;\n}\n\nprogress {\n border: 3px solid #fff;\n height: 40px;\n width: 100%;\n\n &::-webkit-progress-bar {\n background-color: #000;\n }\n\n &::-webkit-progress-value {\n background-color: $m8;\n }\n}\n"
},
{
"path": "css/index.scss",
"content": "// Copyright 2021 James Deery\n// Released under the MIT licence, https://opensource.org/licenses/MIT\n\n@use 'common' as *;\n@use '../build/font1';\n@use '../build/font2';\n\nbody {\n font-family: sans-serif;\n background-color: #000;\n color: #eee;\n margin: 0px;\n font-size: 16px;\n}\n\na, a:visited {\n color: $m8;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:focus {\n outline: 1px solid $m8;\n }\n}\n\nkbd {\n font-family: sans-serif;\n background-color: #444;\n color: $m8;\n font-size: 16px;\n margin: 0 2px;\n padding: 2px 5px;\n border-radius: 3px;\n}\n\n.hidden {\n display: none;\n}\n\n.build {\n color: #888;\n}\n\n@import 'form';\n@import 'display';\n@import 'settings';\n@import 'firmware';\n\n#info {\n position: absolute;\n top: 100px;\n left: 100px;\n right: 100px;\n padding: 20px;\n background-color: rgba(0, 0, 0, 0.75);\n text-align: center;\n line-height: 1.5;\n\n h1 {\n font-family: $m8-font;\n font-size: 32px;\n margin: 0 0 16px;\n }\n}\n\n.error {\n position: absolute;\n top: 100px;\n left: 100px;\n right: 100px;\n border: 3px solid #fff;\n padding: 20px;\n background-color: #a22;\n user-select: text;\n\n p {\n margin-top: 0;\n }\n\n p:last-child {\n margin-bottom: 0;\n }\n}\n\n#reload {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n text-align: center;\n\n button {\n border-bottom-width: 0;\n }\n}\n"
},
{
"path": "css/settings.scss",
"content": "// Copyright 2021 James Deery\n// Released under the MIT licence, https://opensource.org/licenses/MIT\n\n@use 'common' as *;\n\n#settings {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(0, 0, 0, 0.5);\n transition: background-color $menu-time linear 0s;\n user-select: none;\n\n &.hidden {\n display: block;\n width: 0;\n height: 0;\n background-color: rgba(0, 0, 0, 0);\n\n .setting {\n visibility: hidden;\n margin-left: -323px;\n transition: none;\n }\n\n #menu-button {\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='1.5' d='M2 4h12M2 8h12M2 12h12'/%3e%3c/svg%3e\");\n }\n }\n\n &.hidden.auto-hide {\n #menu-button {\n opacity: 0%;\n transition: opacity 0.8s linear 0.8s;\n\n &:hover, &:focus {\n opacity: 100%;\n transition: opacity 0s;\n }\n }\n }\n\n #menu-button {\n width: 32px;\n height: 32px;\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='1.5' d='M3 3l10 10M3 13l10-10'/%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n background-color: transparent;\n border-color: transparent;\n font-size: 0;\n margin-bottom: -3px;\n\n &:hover {\n background-color: $m8;\n }\n\n &:active {\n background-color: darken($m8, 10%);\n color: #fff;\n }\n\n &:focus {\n color: $m8;\n border-color: $m8;\n\n &:hover {\n color: #000;\n }\n\n &:active {\n color: #fff;\n }\n }\n }\n\n .setting {\n width: 320px;\n border: 3px solid #fff;\n border-width: 3px 3px 0 0;\n margin-left: 0;\n transition: margin-left $menu-time linear 0s;\n\n &:last-child {\n border-bottom-width: 3px;\n }\n\n label {\n display: block;\n position: relative;\n padding: 10px;\n\n input, select {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n margin: 0;\n border: 0;\n }\n\n input[type=checkbox] {\n padding: 10px;\n }\n\n select {\n width: 50%;\n }\n }\n\n button {\n display: block;\n width: 100%;\n margin: 0;\n border: 0;\n padding: 10px;\n }\n }\n}\n"
},
{
"path": "index.html",
"content": "\n\n\n\n M8 Display\n \n \n \n \n \n \n\n\n
\n \n\n
\n \n
\n\n \n\n
\n
Click a key to add a new mapping
\n
Press a keyboard key or gamepad button
\n
\n\n
\n \n \n \n \n \n \n \n \n
\n
\n\n
\n
Failed to connect over Serial.\n Are you sure your Teensy is connected and the M8 Headless firmware is loaded?
\n
Make sure that there are no other programs running which may have the serial port open.
\n
On Linux you may also need make sure you have permission to open the serial port (eg. make yourself a member of the dialout group).
\n
It is also possible there's a bug in this code.\n There may be some messages in the developer console that will help with debugging.\n
\n
\n
Failed to connect with WebUSB.\n Are you sure your Teensy is connected and the M8 Headless firmware is loaded?
\n
Connecting with WebUSB is known not to work on Windows, Linux and some Samsung phones.\n Please make sure you are using an up to date version of Chrome or Edge (89+).
\n
\n
\n
Your browser doesn't appear to have Serial or WebUSB support.\n These are only currently supported in Chrome and some Chrome-derived browsers.
\n
\n\n
\n
M8 Display
\n
This is a display for the M8 Headless firmware running on a Teensy 4.1, or a real M8 device.\n You can use keyboard and gamepad input or use on-screen controls.\n Where possible, the audio output from the M8 is routed to your default audio output device.\n Firmware can be installed and updated from the menu.
\n
By default the arrow keys on your keyboard map to the arrow keys on the M8.\n Shift is Left Shift, Play is Space, Option is Z, and Edit is X.\n These control mappings and other settings can be configured from the menu.
\n
A virtual keyboard from A to ' lets you send MIDI notes.\n Use -/= to change octaves and [/] to change velocity.
\n
Now that this page has loaded it will work completely offline.\n All settings are stored locally by your browser.