Skip to main content

Example

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

Install webserial

npm install @danidoble/webserial

Import to your file

src/webserial/jofemar.js

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

const machine = new Jofemar();

machine.on('machine:status', event => {

});

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

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

machine.on('dispensing:withdrawal', event => {
    const seconds = event.detail.seconds;
    if (seconds > 0) {
        document.getElementById('withdrawal').style.display = 'block';
        document.getElementById('seconds_to_continue').innerText = seconds;
    } else {
        document.getElementById('withdrawal').style.display = 'none';
    }
});

machine.on('jofemar:error', event => {
    // switch (event.detail.type) {
    //     case 'jam':break;
    //     case 'malfunction':break;
    //     case 'photo-transistors':break;
    //     case 'without-channels':break;
    //     case 'fault-keyboard':break;
    //     case 'eeprom-writing-error':break;
    //     case 'channels-power-consumption-detector-faulty':break;
    //     case 'elevator-not-find-delivery-position':break;
    //     case 'interior-elevator-blocked':break;
    //     case 'error-tester-product-detector':break;
    // }
    document.getElementById('error').style.display = 'block';
});

machine.on('reset:errors', event => {
    let timerInterval;
    Swal.fire({
        title: "Resetting errors",
        html: "This close in <b></b> seconds.",
        timer: event.detail.duration,
        timerProgressBar: true,
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: () => {
            Swal.showLoading();
            const timer = Swal.getPopup().querySelector("b");
            timerInterval = setInterval(() => {
                timer.textContent = `${Swal.getTimerLeft() / 1_000}`;
            }, 1_000);
        },
        willClose: () => {
            clearInterval(timerInterval);
        }
    });
});

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

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

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

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

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

machine.on('temperature:current', event => {
    document.getElementById('temperature').innerText = event.detail.formatted;
});

function tryConnect(){
    machine.connect().then(() => {
    }).catch(console.error);
}

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

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

index.html
<!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="error">
    Some error occurred. Please, check the machine.
</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>