basic-usage.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="Basic example demonstrating PASCO BLE sensor connection and data reading">
    <meta name="theme-color" content="#1976d2">
    <title>PASCO BLE Basic Usage</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>PASCO BLE Basic Usage</h1>
        </header>

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

        <pasco-connection-panel
            device-name="PASCO Device"
            show-quality>
        </pasco-connection-panel>

        <div class="content-grid">
            <pasco-measurements-list></pasco-measurements-list>
            <pasco-console-log></pasco-console-log>
        </div>

        <pasco-page-footer>
            <span slot="description">Demonstrates basic PASCO BLE device usage:</span>
            <ul slot="features">
                <li>Scanning for devices</li>
                <li>Connecting to a device</li>
                <li>Reading all available measurements</li>
                <li>Disconnecting</li>
            </ul>
            <ul slot="requirements">
                <li>Chrome or Edge browser (Web Bluetooth)</li>
                <li>Any PASCO BLE sensor 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 { PASCOBLEDevice } from 'pasco-ble';
        import {
            formatNumber,
            setupDisconnectOnUnload,
            createConnectionQualityIndicator,
            createKeyboardShortcuts,
            createShortcutsHelp
        } 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');
        const pageFooter = document.querySelector('pasco-page-footer');

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

        // Initialize quality indicator
        const qualityIndicator = createConnectionQualityIndicator(connectionPanel.qualityContainer);

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

        let device = null;
        let readingInterval = null;
        let readInFlight = false;

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

                device = new PASCOBLEDevice();
                const devices = await device.scan();

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

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

                log('Connected!');
                connectionPanel.setStatus('connected', `Connected: ${devices[0].name}`);

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

                measurementsList.show();
                connectionPanel.showQualityIndicator();
                qualityIndicator.start();
                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 (device) {
                    await device.disconnect();
                    device = null;
                }

                log('Disconnected');
                connectionPanel.setStatus('disconnected', 'Disconnected');
                measurementsList.hide();
                measurementsList.clear();
                qualityIndicator.stop();
                connectionPanel.hideQualityIndicator();

            } catch (error) {
                console.error('Disconnect error:', error);
                log(`Disconnect error: ${error.message}`);
                showError(`Disconnect error: ${error.message}`);
            }
        }

        function startReading() {
            readingInterval = setInterval(async () => {
                if (readInFlight) return;
                if (!device || !device.isConnected()) {
                    stopReading();
                    return;
                }

                readInFlight = true;
                try {
                    const measurements = device.getMeasurementList();
                    const data = await device.readDataList(measurements);

                    // Record successful sample for quality tracking
                    qualityIndicator.recordSample();

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

                    measurementsList.update(formattedMeasurements);

                } catch (error) {
                    console.error('Read error:', error);
                } finally {
                    readInFlight = false;
                }
            }, 100);
        }

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

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

        // Set up keyboard shortcuts
        const shortcuts = createKeyboardShortcuts();

        shortcuts.register(' ', () => {
            if (device?.isConnected()) {
                disconnect();
            } else if (!connectionPanel.connectBtn.disabled) {
                connect();
            }
        }, 'Connect / Disconnect');

        shortcuts.register('escape', () => {
            if (device?.isConnected()) {
                disconnect();
            }
        }, 'Disconnect');

        shortcuts.register('l', () => {
            consoleLog.clear();
            log('Log cleared');
        }, 'Clear log');

        // Render shortcuts help panel
        createShortcutsHelp(shortcuts, pageFooter.shortcutsContainer);

        log('Ready. Click "Connect" to scan for devices.');
    </script>
</body>
</html>