35 |
36 | Sorry, Web Serial is not supported on this device, make sure you're
37 | running Chrome 78 or later and have enabled the
38 | #enable-experimental-web-platform-features flag in
39 | chrome://flags
40 |
41 |
42 | Sorry, WebGL is not supported on this device.
43 |
44 |
45 |
46 | Connect
47 |
49 |
50 | Quaternions
51 | Euler Angles
52 |
53 |
54 |
56 |
57 |
59 |
63 |
64 | Clear
67 |
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | // let the editor know that `Chart` is defined by some code
2 | // included in another file (in this case, `index.html`)
3 | // Note: the code will still work without this line, but without it you
4 | // will see an error in the editor
5 | /* global THREE */
6 | /* global TransformStream */
7 | /* global TextEncoderStream */
8 | /* global TextDecoderStream */
9 | 'use strict';
10 |
11 | import * as THREE from 'three';
12 | import {OBJLoader} from 'objloader';
13 |
14 | let port;
15 | let reader;
16 | let inputDone;
17 | let outputDone;
18 | let inputStream;
19 | let outputStream;
20 | let showCalibration = false;
21 |
22 | let orientation = [0, 0, 0];
23 | let quaternion = [1, 0, 0, 0];
24 | let calibration = [0, 0, 0, 0];
25 |
26 | const maxLogLength = 100;
27 | const baudRates = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 74880, 115200, 230400, 250000, 500000, 1000000, 2000000];
28 | const log = document.getElementById('log');
29 | const butConnect = document.getElementById('butConnect');
30 | const butClear = document.getElementById('butClear');
31 | const baudRate = document.getElementById('baudRate');
32 | const autoscroll = document.getElementById('autoscroll');
33 | const showTimestamp = document.getElementById('showTimestamp');
34 | const angleType = document.getElementById('angle_type');
35 | const lightSS = document.getElementById('light');
36 | const darkSS = document.getElementById('dark');
37 | const darkMode = document.getElementById('darkmode');
38 | const canvas = document.querySelector('#canvas');
39 | const calContainer = document.getElementById('calibration');
40 | const logContainer = document.getElementById("log-container");
41 |
42 | fitToContainer(canvas);
43 |
44 | function fitToContainer(canvas){
45 | // Make it visually fill the positioned parent
46 | canvas.style.width ='100%';
47 | canvas.style.height='100%';
48 | // ...then set the internal size to match
49 | canvas.width = canvas.offsetWidth;
50 | canvas.height = canvas.offsetHeight;
51 | }
52 |
53 | document.addEventListener('DOMContentLoaded', async () => {
54 | butConnect.addEventListener('click', clickConnect);
55 | butClear.addEventListener('click', clickClear);
56 | autoscroll.addEventListener('click', clickAutoscroll);
57 | showTimestamp.addEventListener('click', clickTimestamp);
58 | baudRate.addEventListener('change', changeBaudRate);
59 | angleType.addEventListener('change', changeAngleType);
60 | darkMode.addEventListener('click', clickDarkMode);
61 |
62 | if ('serial' in navigator) {
63 | const notSupported = document.getElementById('notSupported');
64 | notSupported.classList.add('hidden');
65 | }
66 |
67 | if (isWebGLAvailable()) {
68 | const webGLnotSupported = document.getElementById('webGLnotSupported');
69 | webGLnotSupported.classList.add('hidden');
70 | }
71 |
72 | initBaudRate();
73 | loadAllSettings();
74 | updateTheme();
75 | await finishDrawing();
76 | await render();
77 | });
78 |
79 | /**
80 | * @name connect
81 | * Opens a Web Serial connection to a micro:bit and sets up the input and
82 | * output stream.
83 | */
84 | async function connect() {
85 | // - Request a port and open a connection.
86 | port = await navigator.serial.requestPort();
87 | // - Wait for the port to open.toggleUIConnected
88 | await port.open({ baudRate: baudRate.value });
89 |
90 | let decoder = new TextDecoderStream();
91 | inputDone = port.readable.pipeTo(decoder.writable);
92 | inputStream = decoder.readable
93 | .pipeThrough(new TransformStream(new LineBreakTransformer()));
94 |
95 | reader = inputStream.getReader();
96 | readLoop().catch(async function(error) {
97 | toggleUIConnected(false);
98 | await disconnect();
99 | });
100 | }
101 |
102 | /**
103 | * @name disconnect
104 | * Closes the Web Serial connection.
105 | */
106 | async function disconnect() {
107 | if (reader) {
108 | await reader.cancel();
109 | await inputDone.catch(() => {});
110 | reader = null;
111 | inputDone = null;
112 | }
113 |
114 | if (outputStream) {
115 | await outputStream.getWriter().close();
116 | await outputDone;
117 | outputStream = null;
118 | outputDone = null;
119 | }
120 |
121 | await port.close();
122 | port = null;
123 | showCalibration = false;
124 | }
125 |
126 | /**
127 | * @name readLoop
128 | * Reads data from the input stream and displays it on screen.
129 | */
130 | async function readLoop() {
131 | while (true) {
132 | const {value, done} = await reader.read();
133 | if (value) {
134 | let plotdata;
135 | if (value.substr(0, 12) == "Orientation:") {
136 | orientation = value.substr(12).trim().split(",").map(x=>+x);
137 | }
138 | if (value.substr(0, 11) == "Quaternion:") {
139 | quaternion = value.substr(11).trim().split(",").map(x=>+x);
140 | }
141 | if (value.substr(0, 12) == "Calibration:") {
142 | calibration = value.substr(12).trim().split(",").map(x=>+x);
143 | if (!showCalibration) {
144 | showCalibration = true;
145 | updateTheme();
146 | }
147 | }
148 | }
149 | if (done) {
150 | console.log('[readLoop] DONE', done);
151 | reader.releaseLock();
152 | break;
153 | }
154 | }
155 | }
156 |
157 | function logData(line) {
158 | // Update the Log
159 | if (showTimestamp.checked) {
160 | let d = new Date();
161 | let timestamp = d.getHours() + ":" + `${d.getMinutes()}`.padStart(2, 0) + ":" +
162 | `${d.getSeconds()}`.padStart(2, 0) + "." + `${d.getMilliseconds()}`.padStart(3, 0);
163 | log.innerHTML += '