FablabSU

JQueryMobile est une api html/javascript qui permet de créer des interfaces utilisateurs jolies très simplement. Etant couramment utilisée, on trouve beaucoup de documentation sur le web et quelques outils qui facilitent le développement.

ThemeRoller est un créateur de thème pour jQuery mobile qui permet de personnaliser les couleurs de son application.

Rapid interface builder (RIB) est un éditeur WYSIWYG (What you see is what you get) qui permet de générer le html pour notre application.

Une fois exporté et décompressé dans notre workspace Cloud9, le squelette de l'application a besoin d'un peu de code pour fonctionner. Avec quelques méthodes javascript, on arrive a communiquer avec le RFduino, mais cette fois avec une belle interface :

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Open Radiation</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="lib/jquery-1.6.4.js"></script>
        <script src="lib/jquery.mobile-1.1.0.js"></script>
        <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
        <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
    </head>
 
    <body>
        <div data-role="page" id="ScanDevice">
            <div data-role="header">
                <h1>Open Radiation</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview" id="deviceList" data-inset="true"></ul>
                <a data-role="button" id="refreshButton">Scan</a>
            </div>
        </div>
        <div data-role="page" id="Measure">
            <div data-role="header">
                <h1>Open Radiation</h1>
                <a data-role="button" id="closeButton">Retour</a>
            </div>
            <div data-role="content">
                <span id="valueDisplay">0</span>
                <div data-role="fieldcontain" id="pwmSlider">
                    <label for="pwmSliderRange">PWM</label>
                    <input type="range" id="pwmSliderRange" value="50" min="0" max="100" data-highlight="true">
                </div>
            </div>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

index.js :

 var arrayBufferToInt = function (ab) {
    var a = new Int16Array(ab);
    return a[0];
};
 
var app = {
    initialize: function() {
        this.bindEvents();
    },
 
    bindEvents: function() {
        document.addEventListener('deviceready', app.onDeviceReady, false);
        $("#refreshButton").touchend(app.refreshDevices);
        $("#closeButton").touchend(app.disconnect);
        $("#deviceList").touchend(app.connect);
        $("#pwmSlider").change(app.onSendPWM);
    },
 
    refreshDevices: function() {
        $("#deviceList").html('');
        rfduino.discover(5, app.onDiscoverDevice, app.onError);
    },
 
    onDiscoverDevice: function(device) {
        var listItem = document.createElement('li');
        var html =  '<b>' + device.name + '</b><br/>' +
                    'RSSI: ' + device.rssi + '&nbsp;|&nbsp;' +
                    'Advertising: ' + device.advertising + '<br/>' +
                    device.uuid;
 
        listItem.setAttribute('uuid', device.uuid);
        listItem.innerHTML = html;
        deviceList.appendChild(listItem);
    },
 
    onSendPWM: function(event) {
        rfduino.write(""+$("#pwmSliderRange").val(), app.onSuccess, app.onError);
    },
 
    connect: function(e) {
        var uuid = e.target.getAttribute('uuid');
        var onConnect = function() {
            rfduino.onData(app.onData, app.onError);
            app.showMeasurePage();
        };
 
        rfduino.connect(uuid, onConnect, app.onError);
    },
 
    onData: function(data) {
        $("#valueDisplay").html(arrayBufferToInt(data));
    },
 
    disconnect: function() {
        rfduino.disconnect(app.showScanPage, app.onError);
    },
 
    showScanPage: function() {
        $.mobile.changePage("#ScanDevice", {
            transition: "slide",
            reverse: true
        }, false, true);
        app.refreshDevices();
    },
 
    showMeasurePage: function() {
        $.mobile.changePage("#Measure", {
            transition: "slide",
            reverse: false
        }, true, true);
    },
 
    onDeviceReady: function() {
        app.refreshDevices();
    },
 
    onSuccess: function(reason) {
        console.log(reason);
    },
 
    onError: function(error) {
        if (error.toUpperCase() === "DISCONNECTED") {
            alert("La connexion au compteur est perdue.");
            app.disconnect();
        } else {
            alert(error.toUpperCase());
        }
    }
};

Résultat :

FablabSU

Outils pour utilisateurs

Outils du site

Outils de la page