MOD-IO demonstration

by speakman

HTML

<div id="content">
    <h1>Simple toggle:</h1>
    <div>
        <button id="r0">Relay 1</button>
        <button id="r1">Relay 2</button>
    </div>
    <h1>Toggle one second:</h1>
    <div>
        <button id="t0">Relay 1</button>
        <button id="t1">Relay 2</button>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700);

* { font-family: 'Ubuntu', sans-serif; }

body { 
    padding: 40px; 
    background-color: #00acee;    
    -webkit-user-select: none;
}

#content { text-align: center; color: red; font-size: 14pt; }

h1 { color: white !important; }

*:focus {
    outline: 0;
}

button {
    min-width: 200px;
    font-size: 14pt;
    font-weight: 700;
    color: white;
    margin: 20px;
    padding: 20px;
    border: 4px solid white;
    border-radius: 15px;
    background-color: #3061A3;
}

button.checked {
    background-color: #EE4F3D;
}

JavaScript

/*
    MOD-IO control for TimeSpot Web Terminal
    ----------------------------------------
    
    The API is reached through the window.io module and consists of
    mainly four methods:
    
    io.outputsAvailable()                 --  Returns the number of ports available.

    io.setDigitalOut(port[, timeout])     --  Set state (true or false) on port, which is a number 
                                              between 0 and io.outputsAvailable() - 1. The timeout parameter
                                              is optional, but when set the port will automatically return to 
                                              previous state after 'timeout' amount of milliseconds.

    io.digitalOut(port)                   --  Read current state of port.

    io.outputChanged.connect(func)        --  Register callback 'func' which takes one parameter which contains
                                              the port on which the change has taken place. 'func' is called
                                              whenever an output has changed state, either manually by
                                              io.setDigitalOut() or automatically by the 'timeout' parameter.

*/

var r0 = document.getElementById('r0'),
    r1 = document.getElementById('r1'),
    t0 = document.getElementById('t0'),
    t1 = document.getElementById('t1');

/* Check if we have IO support in the visiting browser */
if (window.io === undefined) {
    var content = document.getElementById('content');
    content.innerHTML = "No IO module found. View this page from a terminal.";
}

/* Handle relay state changes */
window.io.outputChanged.connect(function (port) {
    var newState = window.io.digitalOut(port),
        className = (newState === true ? "checked" : "");

    if (port === 0) {
        r0.className = className;
    } else if (port === 1) {
        r1.className = className;
    }
});

function toggleRelay(port, timeout) {
    /* Read current relay status,...