Étape 5: Code de HTML pour la tablette
Le code HTML/Javascript, que j’ai utilisé pour la tablette est attaché à cette étape. Il utilise jQuery Mobile pour créer une simple interface utilisateur de la 2 page. La première page indique l’état de la demande, tandis que la seconde page contient les paramètres.
Les paramètres sont utiles pour la capture de l’Imp Agent URL spécifique à votre Imp. Vous ne devez saisir la séquence de caractères après l’URL que le code Javascript ajoute automatiquement l’URL de base, comme indiqué ci-dessous
« https://agent.electricimp.com/ » + halloweenSettings.URLKey
La APIKey est un mécanisme de sécurité de base pour s’assurer que, si votre URL est compromise, vous pouvez toujours empêcher tout accès non autorisé à votre API. Le code de l’Agent en cours d’exécution dans le nuage Imp vérifie pour s’assurer que la clé correspond à toutes les demandes entrantes. La clé peut être toute chaîne alphanumérique aléatoire - il vous suffit de faire en sorte que la chaîne est identique dans le code de l’Agent et le code HTML. (Idée clé API de http://forums.electricimp.com/discussion/comment/...
Le code Javascript demander périodiquement l’état du capteur PIR de la PMI. Lorsque le PIR a détecté le mouvement, le code client génère un nombre aléatoire qui est un index dans un tableau d’effets sonores. Sur les appareils mobiles, les sons ne sont pas chargés pour conserver votre pan de données mobiles, donc un élément d’interface utilisateur est nécessaire pour démarrer leur chargement. Le bouton « Press to start » lance le chargement de tous les effets sonores et ensuite dissimulé. Il lance aussi le cycle d’interrogation pour les appels ajax à l’agent de l’imp de l’état du capteur PIR. Les sons que j’ai utilisé sont tous domaine public et ont été trouvées sur soundbible.com. Il existe de nombreux sites de domaine public là-bas et vous n’avez pas à vous limiter à 10 bruitages... utiliser autant de fois que vous avez besoin !
Le cycle d’interrogation met en forme une requête JSON pour l’Agent de l’Imp. L’URL contient un horodatage pour empêcher le navigateur de la mise en cache de la demande sortante.
La réponse de l’Agent de l’Imp est l’état du capteur PIR. Si l’état du capteur est « 1 » puis un nombre aléatoire est généré à l’index de la table sonore.
La fonction PlaySound joue le son et affiche le courant sonore sur l’écran. Ceci est utile pour le débogage et vous donne aussi quelque chose à regarder quand on s’ennuie pas !
Si vous avez un serveur web, vous pouvez simplement copier les fichiers fournis avec cette étape vers le serveur web, pointez votre tablette/PC/Smartphone sur l’URL et vous avez terminé. Si vous n’avez pas un serveur web et que vous utilisez un PC fixe ou portable, vous pouvez copier les fichiers directement dans un dossier et ouvrez le fichier i.html dans le dossier que vous avez utilisé.
Si vous n’utilisez pas un serveur web, vous pouvez copier les fichiers directement sur la tablette. C’est un peu délicat parce que le chemin du dossier sur la tablette n’est pas évident. À l’aide d’une tablette Android connectée à un port USB du PC, vous serez en mesure de voir la structure des dossiers de la tablette. Ajoutez un dossier nommé Halloween et copiez tous les fichiers dans ce dossier. À l’aide de Google Chrome sur la tablette, utilisez le protocole file:/// pour ouvrir le fichier i.html.
Pour trouver le chemin d’accès sur la tablette Android, téléchargez l’une de la File Explorer applications gratuites sur l’Android App Store et accédez à votre dossier d’Halloween. L’application de l’Explorateur de fichiers va révéler le chemin d’accès au dossier. Par exemple, file:///storage/emulated/0/halloween/i.html
