Example

Here is an example of how to use the Webserial API to interact with a JSD vending machine.

Install webserial

npm install @danidoble/webserial

Import to your file

import {JSD} from '@danidoble/webserial';

const jsd = new JSD();

jsd.on('vision:machine-status', event => {
    // ...
});

jsd.on('vision:channels', event => {
    const active_channels = event.detail.filter(channel => channel.active);

    axios.post('https://api.example.com/v1/channels', {
        active: active_channels
    });
});

jsd.on('serial:disconnected', event => {
    document.getElementById('disconnected').style.display = 'block';
});

jsd.on('serial:connected', event => {
    document.getElementById('disconnected').style.display = 'none';
    document.getElementById('need-permission').style.display = 'none';

    jsd.vision.requestMachineStatus({machine: 1}); // from 1 to 4
    // jsd.vision.requestMachineStatus({machine: 2}); // from 1 to 4
    // jsd.vision.requestMachineStatus({machine: 3}); // from 1 to 4
    // jsd.vision.requestMachineStatus({machine: 4}); // from 1 to 4
});

jsd.on('serial:need-permission', event => {
    document.getElementById('need-permission').style.display = 'block';
});

jsd.on('serial:soft-reload', event => {
    // reset your variables
});

jsd.on('serial:unsupported', event => {
    document.getElementById('unsupported').style.display = 'block';
});

jsd.on('vision:current-temperature', event => {
    document.getElementById('temperature').innerText = event.detail.currentTemperatureInsideMachine;
});

async function tryConnect(){
    await jsd.connect().then(() => {
    }).catch(console.error);
}

document.addEventListener("DOMContentLoaded", () => {
    tryConnect();
    document.getElementById('connect').addEventListener('click', tryConnect);
    document.getElementById('continueNow').addEventListener('click', jsd.productRemovedContinueDispensing);
});

// i don't recommend expose machine object because it's a global object and has control over the machine
//window.machine = machine;

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>
    <script src="./src/webserial/jofemar.js" type="module"></script>
</head>
<body>
<button id="connect">Connect to serial</button>

<div id="need-permission" style="display: none">
    Woooah! It seems that you need to give permission to access the serial port.
    Please, click the button to try again.
</div>

<div id="withdrawal" style="display: none">
    Please remove the product(s) from the delivery area.
    We continue in <span id="seconds_to_continue">0</span> seconds.
    <br>
    Or
    <button id="continueNow">click here</button>
    to continue
</div>

<div id="disconnected">
    The machine is disconnected. Please, check the connection.
</div>

<div id="unsupported">
    This browser does not support the WebSerial API. Please, use a compatible browser.
</div>

<div style="position: absolute; top: 0;right: 0">
    The temperature is: <span id="temperature">0</span>
</div>


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

</body>
</html>