feature: webserial

package.json

@@ -8,7 +8,7 @@
     "private": true,
     "scripts": {
         "docusaurus": "docusaurus",
-        "start": "concurrently --raw --kill-others 'docusaurus start' 'sleep 1s && ts-node updateSync/packageDocsSync/watch.ts --src packages --dest tdev-website/docs/packages'",
+        "start": "concurrently --raw --kill-others 'PACKAGE_SRC=packages PACKAGE_DEST=tdev-website/docs/packages docusaurus start' 'sleep 1s && ts-node updateSync/packageDocsSync/watch.ts --src packages --dest tdev-website/docs/packages'",
         "prebuild": "ts-node updateSync/packageDocsSync/preBuild.ts --src packages --dest tdev-website/docs/packages",
         "build": "docusaurus build",
         "swizzle": "docusaurus swizzle",

packages/tdev/webserial/components/BinaryDecoder/Bit/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@tdev-hooks/useStore';
+import Decoder from '../model/Decoder';
+
+interface Props {
+    decoder: Decoder;
+    bitPos: number;
+}
+
+const Bit = observer((props: Props) => {
+    const { decoder, bitPos } = props;
+    const value = decoder.buffer.length < bitPos ? undefined : decoder.buffer[bitPos] === '1' ? 1 : 0;
+    return <div className={clsx(styles.bit, value === 1 ? styles.active : styles.inactive)}></div>;
+});
+
+export default Bit;

packages/tdev/webserial/components/BinaryDecoder/Bit/styles.module.scss

@@ -0,0 +1,8 @@
+.bit {
+    width: 5px;
+    background: black;
+    height: 5px;
+    &.active {
+        height: 15px;
+    }
+}

packages/tdev/webserial/components/BinaryDecoder/Byte/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import Decoder from '../model/Decoder';
+import Bit from '../Bit';
+
+interface Props {
+    decoder: Decoder;
+    offset: number;
+}
+
+const BYTE_POS = [0, 1, 2, 3, 4, 5, 6, 7];
+
+const Byte = observer((props: Props) => {
+    const { decoder, offset } = props;
+    if (offset >= decoder.size) {
+        return null;
+    }
+    return (
+        <div className={clsx(styles.byte)}>
+            {BYTE_POS.map((pos) => (
+                <Bit key={pos} decoder={decoder} bitPos={offset * 8 + pos} />
+            ))}
+        </div>
+    );
+});
+
+export default Byte;

packages/tdev/webserial/components/BinaryDecoder/Byte/styles.module.scss

@@ -0,0 +1,4 @@
+.byte {
+    display: flex;
+    gap: 1px;
+}

packages/tdev/webserial/components/BinaryDecoder/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@tdev-hooks/useStore';
+import { useDeviceId } from '@tdev/webserial/hooks/useDeviceId';
+import Decoder from './model/Decoder';
+import Icon from '@mdi/react';
+import { mdiCircleSmall, mdiLoading } from '@mdi/js';
+import Byte from './Byte';
+
+interface Props {}
+
+const BinaryDecoder = observer((props: Props) => {
+    const subscriptionId = React.useId();
+    const viewStore = useStore('viewStore');
+    const webserialStore = viewStore.useStore('webserialStore');
+    const deviceId = useDeviceId();
+    const device = webserialStore.devices.get(deviceId);
+    const decoder = React.useMemo(() => {
+        if (device) {
+            return new Decoder(subscriptionId, device);
+        }
+    }, [device, subscriptionId]);
+    React.useEffect(() => {
+        return () => {
+            decoder?.cleanup();
+        };
+    }, [decoder, subscriptionId]);
+
+    if (!decoder) {
+        return null;
+    }
+
+    return (
+        <div className={clsx(styles.binaryDecoder)}>
+            <Icon
+                path={decoder.isProcessing ? mdiLoading : mdiCircleSmall}
+                size={0.75}
+                spin={decoder.isProcessing}
+                className={clsx(styles.indicator)}
+            />
+            <div className={clsx(styles.bytes)}>
+                {decoder.size} bytes
+                {[...Array(decoder.size)].map((_, i) => (
+                    <Byte key={i} decoder={decoder} offset={i} />
+                ))}
+            </div>
+            {decoder.lines.map((line, i) => (
+                <div key={i}>{line}</div>
+            ))}
+        </div>
+    );
+});
+
+export default BinaryDecoder;

packages/tdev/webserial/components/BinaryDecoder/model/Decoder.ts

@@ -0,0 +1,68 @@
+import SerialDevice, { iSubscriber } from '@tdev/webserial/models/SerialDevice';
+import { action, computed, observable } from 'mobx';
+
+class Decoder implements iSubscriber {
+    readonly id: string;
+    readonly device: SerialDevice;
+
+    private bufferOffset = 0;
+    buffer = observable.array<string>([], { deep: false });
+    characters = observable.array<string>([], { deep: false });
+
+    constructor(id: string, device: SerialDevice) {
+        this.id = id;
+        this.device = device;
+        this.device.subscribe(this);
+    }
+
+    @action
+    onNewLines(lines: string[]) {
+        const bits = lines.map((l) => l.trim()).filter((l) => l === '0' || l === '1');
+        this.buffer.push(...bits);
+        while (this.buffer.length - this.bufferOffset >= 8) {
+            const byte = this.buffer.slice(this.bufferOffset, this.bufferOffset + 8).join('');
+            const charCode = parseInt(byte, 2);
+            if (!isNaN(charCode)) {
+                this.characters.push(String.fromCharCode(charCode));
+            }
+            this.bufferOffset += 8;
+        }
+    }
+
+    @action
+    reset() {
+        this.buffer.clear();
+        this.characters.clear();
+        this.bufferOffset = 0;
+    }
+
+    @computed
+    get isProcessing(): boolean {
+        return this.buffer.length % 8 !== 0;
+    }
+
+    /**
+     * Returns the number of complete bytes in the buffer
+     */
+    @computed
+    get size(): number {
+        return Math.ceil(this.buffer.length / 8);
+    }
+
+    @computed
+    get text(): string {
+        return this.characters.join('');
+    }
+
+    @computed
+    get lines(): string[] {
+        return this.text.split('\n');
+    }
+
+    @action
+    cleanup() {
+        this.device.unsubscribe(this.id);
+    }
+}
+
+export default Decoder;

packages/tdev/webserial/components/BinaryDecoder/styles.module.scss

@@ -0,0 +1,13 @@
+.binaryDecoder {
+    position: relative;
+    .indicator {
+        position: absolute;
+        top: 0.5em;
+        right: 0.5em;
+    }
+    .bytes {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5em;
+    }
+}