Étape 8: L’App HTML – procédure pas à pas
L’application cliente démarre en chargeant les 4 images utilisées pour animer les ondes WiFi émanant du robot (Marvin le paranoid android d’auto-stoppeurs Guide galactique) lorsque l'on appuie sur le robot. Vous pouvez obtenir oeuvre gratuitement pour usage non-commercial ici :
http://FindIcons.com/Icon/45522/hitchhikeguidetogalaxy1_lock
http://www.iconarchive.com/show/Hitchhikers-Guide-Icons-by-Iconshock/Marvin-Icon.html
J’ai bricolé des images de Marvin avec une icône de WiFi. J’ai coupé l’icône WiFi en trois parties pour animer les ondes de RF qui émanent de la tête de Marvin. Lorsque l’écran est touché dans la zone de l’image, l’animation JavaScript commence. L’animation permet de parcourir les 4 images avec un retard de 250 ms entre les images afin de simuler l’envoi sans fil d’un message à la porte de garage. Le cycle est répété deux fois, principalement parce que cela évite des membres de la famille impatients de piquer à l’écran lorsqu’il n’existe pas de réponse immédiate, la part de la porte. Comme mentionné précédemment, la latence peut être environ 2 secondes parfois donc l’animation permet aux utilisateurs de penser que la communication est toujours en cours.
Communiquer avec l’Imp électrique se fait en envoyant un message à l’Imp Agent URL spécifique à votre Imp.
L’application HTML, nous créons un objet XMLHttpRequest et puis après l’ID du bouton à l’Agent Imp pour votre porte de garage. Techniquement, nous pourrions avoir un certain nombre de fonctions des différents boutons pour envoyer l’ID au firmware permettrait le firmware pour prendre des décisions fondées sur le bouton qui a été envoyé. Toutefois, pour ce soft il suffit un bouton si l’ID est un peu redondant, mais nous devons envoyer quelque chose ! Je suis tombé sur l’une des questions était qu’iOS6 serait mettre en cache les messages sortants. La solution consiste à s’assurer que les données que vous envoyez des messages changent chaque fois. Cela a été fait en ajoutant l’horodatage à la chaîne qui a veillé à ce que chaque poste était unique et donc pas mis en cache par iOS. Après avoir mis en cache d’appels sortants n’a aucun sens pour moi, mais il fait sens pour quelqu'un chez Apple. Il y a une façon de demander spécifiquement que l’appel sortant ne pas être mis en cache, mais cela ne fonctionne pas pour cette interface... Voir les commentaires dans le code.
xmlhttp.open("POST", "https://api.electricimp.com/v1/Your_Imp_Specfic_ID_Here", true);
xmlhttp.setRequestHeader ("Content-type", "application/x-www-formulaires-urlencoded") ;
Envoyant un horodatage Date empêche iOS6 de mise en cache de la requête. Si vous définissez l’en-tête cache-control
pour cette demande, il ne fonctionne pas. Bizarre car cela fonctionne pour la requête COSM
XMLHTTP.Send ("valeur =" + button.id + Date()) ;
Pour obtenir l’état des capteurs porte, un message de requête est envoyé à l’Agent de l’Imp. Vous pouvez vérifier l’État en appuyant sur le bouton ou tirant l’écran vers le bas.
Et qui s’occupe de l’application HTML. L’étape suivante parlera l’App HTML de chargement et ce qui semble être un natif iOS App.
