control-node.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Control PASCO Control.Node stepper motors, servos, and speaker via Web Bluetooth">
    <meta name="theme-color" content="#1976d2">
    <title>PASCO Control.Node Example</title>
    <link rel="preconnect" href="https://esm.sh">
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <main class="container" id="main-content">
        <header>
            <h1>Control.Node Controller</h1>
        </header>

        <pasco-browser-warning></pasco-browser-warning>

        <pasco-connection-panel device-name="Control.Node"></pasco-connection-panel>

        <article id="controlsCard" style="display: none;" aria-label="Device controls">
            <div class="content-grid">
                <section class="card" aria-label="Stepper motor controls">
                    <h2>Stepper Motors</h2>
                    <fieldset class="control-group">
                        <legend>Continuous Rotation</legend>
                        <div class="slider-group">
                            <label for="stepperASpeed">Speed A:</label>
                            <input type="range" id="stepperASpeed" min="-360" max="360" value="180">
                            <output class="slider-value" id="stepperASpeedVal">180 deg/s</output>
                        </div>
                        <div class="slider-group">
                            <label for="stepperBSpeed">Speed B:</label>
                            <input type="range" id="stepperBSpeed" min="-360" max="360" value="180">
                            <output class="slider-value" id="stepperBSpeedVal">180 deg/s</output>
                        </div>
                        <div class="button-row">
                            <button id="startSteppersBtn" class="btn-success">Start</button>
                            <button id="stopSteppersBtn" class="btn-danger">Stop</button>
                        </div>
                    </fieldset>
                    <fieldset class="control-group">
                        <legend>Rotate Through Angle</legend>
                        <div class="input-group">
                            <label for="stepperSelect" class="visually-hidden">Select stepper motor</label>
                            <select id="stepperSelect">
                                <option value="A">Stepper A</option>
                                <option value="B">Stepper B</option>
                            </select>
                            <label for="rotateAngle" class="visually-hidden">Rotation angle in degrees</label>
                            <input type="number" id="rotateAngle" value="360" placeholder="Degrees">
                            <button id="rotateBtn" class="btn-secondary">Rotate</button>
                        </div>
                    </fieldset>
                </section>

                <section class="card" aria-label="Servo motor controls">
                    <h2>Servo Motors</h2>
                    <fieldset class="control-group">
                        <legend>Servo 1 Position</legend>
                        <div class="slider-group">
                            <label for="servo1Pos" class="visually-hidden">Servo 1 position</label>
                            <input type="range" id="servo1Pos" min="-90" max="90" value="0">
                            <output class="slider-value" id="servo1PosVal">0 deg</output>
                        </div>
                        <button id="setServo1Btn" class="btn-secondary">Set Position</button>
                    </fieldset>
                    <fieldset class="control-group">
                        <legend>Servo 2 Position</legend>
                        <div class="slider-group">
                            <label for="servo2Pos" class="visually-hidden">Servo 2 position</label>
                            <input type="range" id="servo2Pos" min="-90" max="90" value="0">
                            <output class="slider-value" id="servo2PosVal">0 deg</output>
                        </div>
                        <button id="setServo2Btn" class="btn-secondary">Set Position</button>
                    </fieldset>
                </section>
            </div>

            <div class="content-grid">
                <section class="card" aria-label="Speaker controls">
                    <h2>Speaker</h2>
                    <fieldset class="control-group">
                        <legend>Frequency Control</legend>
                        <div class="slider-group">
                            <label for="speakerFreq">Frequency:</label>
                            <input type="range" id="speakerFreq" min="0" max="2000" value="440">
                            <output class="slider-value" id="speakerFreqVal">440 Hz</output>
                        </div>
                        <div class="button-row">
                            <button id="playFreqBtn" class="btn-success">Play</button>
                            <button id="stopFreqBtn" class="btn-danger">Stop</button>
                        </div>
                    </fieldset>
                </section>

                <pasco-measurements-list title="Sensor Readings"></pasco-measurements-list>
            </div>

            <section class="card" aria-label="Reset controls">
                <div class="button-row">
                    <button id="resetBtn" class="btn-danger">Reset All Outputs</button>
                </div>
            </section>
        </article>

        <pasco-console-log></pasco-console-log>

        <pasco-page-footer>
            <span slot="description">Demonstrates Control.Node features:</span>
            <ul slot="features">
                <li>Stepper motor control (continuous &amp; angle-based)</li>
                <li>Servo motor positioning</li>
                <li>Speaker frequency control</li>
                <li>Reading sensor data from plugin ports</li>
            </ul>
            <ul slot="requirements">
                <li>Chrome or Edge browser (Web Bluetooth)</li>
                <li>PASCO Control.Node device</li>
            </ul>
        </pasco-page-footer>

        <pasco-error-display></pasco-error-display>
    </main>

    <script type="importmap">
    {
        "imports": {
            "pasco-ble": "https://esm.sh/pasco-ble@0.3.70",
            "expr-eval": "https://esm.sh/expr-eval@2.0.2"
        }
    }
    </script>

    <script type="module">
        import { ControlNodeDevice } from 'pasco-ble';
        import { formatNumber, setupDisconnectOnUnload } from './common.js';
        import './components.js';

        // Get component references
        const browserWarning = document.querySelector('pasco-browser-warning');
        const connectionPanel = document.querySelector('pasco-connection-panel');
        const measurementsList = document.querySelector('pasco-measurements-list');
        const consoleLog = document.querySelector('pasco-console-log');
        const errorDisplay = document.querySelector('pasco-error-display');

        // Check browser support
        if (!browserWarning.check()) {
            connectionPanel.disableConnect();
        }

        // Create convenience functions
        const log = consoleLog.createLogger();
        const showError = errorDisplay.createShowError();

        // Get control elements
        const controlsCard = document.getElementById('controlsCard');
        const stepperASpeed = document.getElementById('stepperASpeed');
        const stepperBSpeed = document.getElementById('stepperBSpeed');
        const stepperASpeedVal = document.getElementById('stepperASpeedVal');
        const stepperBSpeedVal = document.getElementById('stepperBSpeedVal');
        const servo1Pos = document.getElementById('servo1Pos');
        const servo2Pos = document.getElementById('servo2Pos');
        const servo1PosVal = document.getElementById('servo1PosVal');
        const servo2PosVal = document.getElementById('servo2PosVal');
        const speakerFreq = document.getElementById('speakerFreq');
        const speakerFreqVal = document.getElementById('speakerFreqVal');

        let controlNode = null;
        let readingInterval = null;
        let readInFlight = false;

        async function connect() {
            try {
                log('Scanning for Control.Node devices...');
                connectionPanel.setStatus('connecting', 'Select your Control.Node...');
                errorDisplay.clear();

                controlNode = new ControlNodeDevice();
                const devices = await controlNode.scan('//control.Node');

                if (devices.length === 0) {
                    throw new Error('No device selected');
                }

                log(`Found: ${devices[0].name}`);
                connectionPanel.setStatus('connecting', 'Connecting...');
                await controlNode.connect(devices[0]);

                log('Connected!');
                connectionPanel.setStatus('connected', `Connected: ${devices[0].name}`);
                controlsCard.style.display = 'block';
                measurementsList.show();

                const measurements = controlNode.getMeasurementList();
                log(`Available measurements: ${measurements.join(', ')}`);

                startReading();

            } catch (error) {
                console.error('Connection error:', error);
                log(`Error: ${error.message}`);
                connectionPanel.setStatus('disconnected', 'Disconnected');

                if (error.message.includes('User cancelled')) {
                    showError('Connection cancelled by user');
                } else if (error.message.includes('No device selected')) {
                    showError('No device selected');
                } else {
                    showError(`Connection failed: ${error.message}`);
                }
            }
        }

        async function disconnect() {
            try {
                stopReading();
                log('Disconnecting...');
                if (controlNode) {
                    await controlNode.disconnect();
                    controlNode = null;
                }
                log('Disconnected');
                connectionPanel.setStatus('disconnected', 'Disconnected');
                controlsCard.style.display = 'none';
                measurementsList.hide();
            } catch (error) {
                log(`Disconnect error: ${error.message}`);
            }
        }

        function startReading() {
            readingInterval = setInterval(async () => {
                if (readInFlight) return;
                if (!controlNode || !controlNode.isConnected()) {
                    stopReading();
                    return;
                }
                readInFlight = true;
                try {
                    const measurements = controlNode.getMeasurementList();
                    const data = await controlNode.readDataList(measurements);

                    const formattedMeasurements = measurements.map(name => ({
                        name,
                        value: formatNumber(data[name]),
                        unit: controlNode.getMeasurementUnit(name) || ''
                    }));

                    measurementsList.update(formattedMeasurements);
                } catch (error) {
                    console.error('Read error:', error);
                } finally {
                    readInFlight = false;
                }
            }, 200);
        }

        function stopReading() {
            if (readingInterval) {
                clearInterval(readingInterval);
                readingInterval = null;
            }
        }

        // Stepper controls
        document.getElementById('startSteppersBtn').addEventListener('click', async () => {
            if (!controlNode || !controlNode.isConnected()) return;
            try {
                const speedA = parseInt(stepperASpeed.value);
                const speedB = parseInt(stepperBSpeed.value);
                log(`Starting steppers: A=${speedA} deg/s, B=${speedB} deg/s`);
                await controlNode.rotateSteppersContinuously(speedA, 360, speedB, 360);
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        document.getElementById('stopSteppersBtn').addEventListener('click', async () => {
            if (!controlNode || !controlNode.isConnected()) return;
            try {
                log('Stopping steppers...');
                await controlNode.stopSteppers(360, 360);
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        document.getElementById('rotateBtn').addEventListener('click', async () => {
            if (!controlNode || !controlNode.isConnected()) return;
            try {
                const motor = document.getElementById('stepperSelect').value;
                const angle = parseInt(document.getElementById('rotateAngle').value);
                log(`Rotating stepper ${motor} through ${angle} degrees...`);
                await controlNode.rotateStepperThrough(motor, 360, 360, angle, true);
                log('Rotation complete');
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        // Servo controls
        document.getElementById('setServo1Btn').addEventListener('click', async () => {
            if (!controlNode || !controlNode.isConnected()) return;
            try {
                const pos = parseInt(servo1Pos.value);
                log(`Setting servo 1 to ${pos} degrees...`);
                await controlNode.setServo(1, 'standard', pos);
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        document.getElementById('setServo2Btn').addEventListener('click', async () => {
            if (!controlNode || !controlNode.isConnected()) return;
            try {
                const pos = parseInt(servo2Pos.value);
                log(`Setting servo 2 to ${pos} degrees...`);
                await controlNode.setServo(2, 'standard', pos);
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        // Speaker controls
        document.getElementById('playFreqBtn').addEventListener('click', async () => {
            if (!controlNode || !controlNode.isConnected()) return;
            try {
                const freq = parseInt(speakerFreq.value);
                log(`Playing ${freq} Hz...`);
                await controlNode.setSoundFrequency(freq);
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        document.getElementById('stopFreqBtn').addEventListener('click', async () => {
            if (!controlNode || !controlNode.isConnected()) return;
            try {
                log('Stopping sound...');
                await controlNode.setSoundFrequency(0);
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        // Reset
        document.getElementById('resetBtn').addEventListener('click', async () => {
            if (!controlNode || !controlNode.isConnected()) return;
            try {
                log('Resetting all outputs...');
                await controlNode.reset();
                log('Reset complete');
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        // Slider value displays
        stepperASpeed.addEventListener('input', () => {
            stepperASpeedVal.textContent = `${stepperASpeed.value} deg/s`;
        });
        stepperBSpeed.addEventListener('input', () => {
            stepperBSpeedVal.textContent = `${stepperBSpeed.value} deg/s`;
        });
        servo1Pos.addEventListener('input', () => {
            servo1PosVal.textContent = `${servo1Pos.value} deg`;
        });
        servo2Pos.addEventListener('input', () => {
            servo2PosVal.textContent = `${servo2Pos.value} deg`;
        });
        speakerFreq.addEventListener('input', () => {
            speakerFreqVal.textContent = `${speakerFreq.value} Hz`;
        });

        // Event listeners for connection panel
        connectionPanel.addEventListener('connect', connect);
        connectionPanel.addEventListener('disconnect', disconnect);
        setupDisconnectOnUnload(() => controlNode);

        log('Ready. Click "Connect" to connect to a Control.Node.');
    </script>
</body>
</html>