Stap 8: De HTML App-walkthrough!
De app van de client wordt opgestart door het laden van de 4 beelden gebruikt voor het animeren van de WiFi-golven die afkomstig zijn van de robot (Marvin de paranoïde androïde uit Hitchhikers Guide to the Galaxy) wanneer de robot wordt geraakt. Kunt u gratis illustraties voor niet-commercieel gebruik hier:
http://findicons.com/icon/45522/hitchhikeguidetogalaxy1_lock
http://www.IconArchive.com/show/Hitchhikers-Guide-icons-by-iconshock/Marvin-icon.html
Ik in elkaar geflanst beelden van Marvin met een WiFi-pictogram. Ik snijd de WiFi-pictogram in drie delen te animeren de RF golven die afkomstig zijn van Marvin's hoofd. Wanneer het scherm is geraakt op het gebied van de afbeelding, wordt de JavaScript animatie begint. De animatie doorloopt de 4 beelden met een 250ms vertraging tussen afbeeldingen te simuleren het draadloos verzenden van een bericht naar de garagedeur. De cyclus herhaalt zich twee keer voornamelijk omdat dit ongeduldig familieleden vermijdt van prikken op het scherm wanneer er geen onmiddellijke reactie van de kant van de deur. Zoals eerder vermeld, kan latentie zo ongeveer 2 seconden soms de animatie laat gebruikers denk dat communicatie nog in volle gang.
Communiceren met de elektrische Imp wordt gedaan door het verzenden van een bericht naar de URL van de Agent Imp die specifiek zijn voor uw Imp.
Voor HTML-App, we maken een XMLHttpRequest object en boek vervolgens de knop-ID aan de Agent van de Imp voor uw garagedeur. Technisch kunnen we een aantal functies van de verschillende knoppen zodat de ID te sturen naar de firmware zou toestaan de firmware om beslissingen te nemen op basis van de knop die werd gestuurd. Echter, voor dit app alleen hebben we één knop dus de ID een beetje overbodig is, maar we moeten iets sturen! Één kwestie die ik tegenkwam was dat iOS6 zou cache de uitgaande berichten. De oplossing is om ervoor te zorgen dat de gegevens die u boekt elke keer veranderen. Dit werd gedaan door de tijdstempel toevoegen aan de tekenreeks die ervoor zorgden dat elke post uniek en dus niet in de cache door iOS was. Met uitgaande oproepen in de cache opgeslagen heeft geen zin voor mij maar het zinvol om iemand bij Apple. Er is een manier om expliciet aan dat de uitgaande oproep niet in de cache opgeslagen maar dat werkte niet voor deze interface... Zie de opmerkingen in de code.
XMLHTTP.Open ("POST", "https://api.electricimp.com/v1/Your_Imp_Specfic_ID_Here", true);
xmlhttp.setRequestHeader ("Content-type", "application/x-1-800-www-Dell-vorm-urlencoded");
Verzenden van een datum-en tijdstempel voorkomt iOS6 caching van de query. Als u de header ' cache-control '
voor deze aanvraag werkt het niet. Oneven aangezien het werkt voor de COSM-query
XMLHTTP.send ("waarde =" + button.id + Date());
Om de status van de deur sensoren, wordt een querybericht verzonden naar de Agent Imp. U kunt de status controleren door het indrukken van de knop of het scherm naar beneden trekken.
En dat zorgt voor de HTML App. De volgende stap zal bespreken de HTML App laden en waardoor het lijkt als een native iOS App.
