[[http://jquerymobile.com/|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. [[http://themeroller.jquerymobile.com/|ThemeRoller]] est un créateur de thème pour jQuery mobile qui permet de personnaliser les couleurs de son application. [[https://01.org/rapid-interface-builder|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 Open Radiation

Open Radiation

    Scan

    Open Radiation

    Retour
    0
    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 = '' + device.name + '
    ' + 'RSSI: ' + device.rssi + ' | ' + 'Advertising: ' + device.advertising + '
    ' + 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 : {{:wiki:projets:smartphone-geiger:img_0012.png?300|}} {{:wiki:projets:smartphone-geiger:img_0013.png?300|}} {{:wiki:projets:smartphone-geiger:img_0014.png?300|}} * [[wiki:projets:smartphone-geiger:comptage-leds|Article suivant : Incorporation des leds au programme]] * [[wiki:projets:smartphone-geiger:accueil|Retour à l'accueil]] * [[wiki:projets:smartphone-geiger:chronologie|Retour à la chronologie du projet]] * [[wiki:projets:smartphone-geiger:comptage|Article précédent : Comptage d'impulsions - réception tubes de GSTubes]]