Ou comment piloter un système technique avec un...
13
Ou comment piloter un système technique avec un navigateur web ? © 2013 MLK-ECST Sources : http://www.matrixmultimedia.com
Transcript of Ou comment piloter un système technique avec un...
Ou comment piloter un système technique avec un navigateur web ?
© 2013 MLK-ECST Sources : http://www.matrixmultimedia.com
On reprend la configuration de base (PIC16F877A) à laquelle on ajoute l’E-BLOCK EB069. L’EB069 peut-être utilisé comme serveur WLAN (Wireless Local Area Network), ce qui permet de s’affranchir des contraintes d’un réseau local ou de faire fonctionner un système en absence de réseau.
© 2013 MLK-ECST
Comment appel-t-on ce genre de connexion réseau WLAN ? o Échange en mode Infrastructure o Échange en mode Ad hoc Quelle est la différence entre ces deux modes ?
La carte EB069 doit-être connectée sur le port C car elle utilise l’interface série RS232 du PIC. Ses jumpers doivent être en position B pour le 16F877A. Ne pas oublier de relier les différentes alimentations +V et +14V
Ouvrir le fichier 09a-TP-N1.fcf et observer le panneau Flowcode. Compléter le tableau suivant :
© 2013 MLK-ECST
Composant Nom Connexion
Justifier la connexion du module Wifi :
Éditer les propriétés étendues du module WiFi :
© 2013 MLK-ECST
Adresse IP du module WiFi
Nom SSID du réseau WiFi (à personnaliser) qui sera visible si
Broadcast SSID est cochée
DHCP On : Les IP seront attribuées automatiquement
aux machines qui se connectent au serveur
Access point = Mode serveur End device = Mode Client
Nom du port pour la connexion aux pages HTML
Voir la diapositive : influence du canal sur la qualité du
réseau WiFi
La page HTML incluse dans le fichier 09a-TP-N1.fcf réalise l’écriture d’une variable contenue dans le PIC vers une page Web.
© 2013 MLK-ECST
Dans cet exemple, la page Web est réduite à sa plus simple expression : <html>Page de test N°1<br> Variable contenue dans le PIC : %0</html>
La valeur affichée sur la page Web sera celle contenue à l’index 0 du swap de la carte WiFi. Pour indiquer l’index du swap dans la page Web, on utilise le caractère %. Pour l’index 0 on utilise donc la syntaxe %0. Le swap est mis à jour par la macro Flowcode :
Write_Swap_Variable( 0 , Nombre )
Où 0 représente l’index du swap et Nombre la variable Flowcode lue précédemment sur le portB dans l’ordinogramme donné en exemple. Par défaut, le swap peut contenir 8 variables pour le passage entre le PIC et la page Web (index 0 à 7).
PIC -> HTML
Compiler et transférer votre programme sur la carte cible. Attendre l’initialisation du WiFi qui sera indiquée sur l’afficheur LCD.
© 2013 MLK-ECST
Connecter votre périphérique de navigation WiFi (Smartphone, PC équipé de carte Wifi, tablette…) à votre serveur WLAN et lancer un navigateur à l’URL suivante :
http://192.168.1.2:5000 192.168.1.2 est l’adresse du serveur et 5000 est son port de communication. Ces paramètres ont
été renseignés précédemment dans les propriétés étendues du module WiFi.
Tenter de connecter plusieurs périphériques de navigation simultanément sur votre serveur et lancer un IPSCAN32 ou équivalent (ex : Fing sur iPhone). Commenter les résultats obtenus :
Commenter les résultats obtenus :
Nous allons améliorer le fonctionnement en rajoutant un Javascript qui va provoquer le rafraichissement automatique de la page.
© 2013 MLK-ECST
De plus, la couleur du texte changera en fonction de la valeur affichée. Pour cela, un test conditionnel dans le Javascript sera ajouté et associé à un
style CSS. Le fichier Flowcode à ouvrir s’appelle 09a-TP-N2.fcf
<html> <head> <title>Page Web Flowcode</title> <script type="text/javascript"> function reFresh() { location.reload(true) } window.setInterval("reFresh()",5000); function SetColour() { var temp = %0; if(temp > 50) { document.write('<span class=\\"style1\\">' + temp +' </span>'); } else { document.write('<span class=\\"style2\\">' + temp +' </span>'); } } </script> <style type="text/css"> .style1 {color: #00FF00} .style2 {color: #FF0000} </style> </head> <body> Page de test N°2<br> Variable contenue dans le PIC : <script> SetColour() </script> </body> </html>
Rafraichissement automatique de la page toutes les 5000ms
Lit le contenu de l’index 0 du swap et applique la couleur du style approprié avant d’afficher la variable
Définition des styles de textes
Contenu de la page html
Tester le fonctionnement de cette page. Commenter les résultats obtenus :
© 2013 MLK-ECST
<style type="text/css"> .style1 {color: #00FF00} .style2 {color: #FF0000} </style>
Dans l’une de ces deux lignes tester la valeur #0000FF. Commenter :
En déduire le rôle de ces trois octets :
Vous pouvez tester différentes valeurs pour obtenir le mélange de couleurs désiré.
Combien de couleurs peut prendre chaque composante ? À combien de couleurs cela correspond-il au total ?
Remarque : Pour obtenir la valeur d’une couleur déjà existante sur une image, il est possible d’utiliser l’outil pipette des logiciels de retouches photos.
Le fichier 09a-TP-N3.fcf reprend comme précédemment l’écriture d’une variable contenue dans le PIC vers une page Web mais il permet également de lire de la page Web vers le PIC. En outre, il permet de naviguer entre plusieurs pages html.
© 2013 MLK-ECST
<html><br>
<a href="index.htm">Retour à l'Accueil</a><br><br>
<a href="page2.htm?0=1">Allumer la LED D0</a><br><br>
<a href="page2.htm?0=2">Éteindre la LED D0</a><br><br>
<a href="page2.htm?0=3">Allumer la LED D1</a><br><br>
<a href="page2.htm?0=4">Éteindre la LED D1</a><br><br>
<a href="page2.htm?0=5">Allumer toutes les LED du PORTD</a><br><br>
<a href="page2.htm?0=6">Éteindre toutes les LED du PORTD</a>
</html>
HTML
PIC
->
Tester le fonctionnement de ces pages. Commenter les résultats obtenus :
© 2013 MLK-ECST
…
<a href="page2.htm?0=3">Allumer la LED D1</a>
<a href="page2.htm?0=4">Éteindre la LED D1</a>
…
Dans la page2.htm à quoi correspond, d’après vous, le chiffre 0 et sa valeur attribuée ?
LED=Read_Swap_Variable(0)
Expliquer la macro Flowcode.
<a href="page2.htm">Contrôler les LED</a>
Dans la page index.htm à quoi correspond d’après vous la ligne suivante ?
Rappel : le swap peut contenir 8 variables pour le passage entre le PIC et la page Web (index 0 à 7).
Dans le standard 802.11b/g, le WiFi utilise une bande de fréquence étroite (de 2,3995 à 2,4845 GHz, soit 85 MHz). Cette bande de fréquence a été découpée en 13 canaux de 22 MHz répartis tous les 5 MHz. Il est donc recommandé de ne pas utiliser le même canal que celui utilisé par son voisin pour générer un minimum d'interférences. À l’origine du WiFi, les équipements avaient tendance à émettre avec des canaux trop larges, les configurations suivantes étaient donc recommandées : 1,6, 11 ou 2,7,12 etc. ce qui avait pour conséquence de provoquer un gaspillage du quart de la bande de fréquences disponibles.
© 2013 MLK-ECST
Avec les équipements actuels, il est possible d’utiliser les fréquences séparées de 4 canaux sans qu’ils s’interfèrent les unes aux autres. Quelle sera la meilleur configuration possible dans le choix des canaux ? Combien de bornes WiFi pourront cohabiter dans un voisinage proche sans s’interférer mutuellement ?
Remarque : Les fours à micro-ondes utilisent la fréquence 2,450GHz pour faire vibrer les molécules d’eau et peuvent ainsi perturber les canaux 8,9 et 10. Si d'aventure un four à micro-ondes en vient à brouiller l'un de vos réseaux sans fil, c'est que ce four est devenu dangereux du fait de sa puissance rayonnée (la puissance de fuite ne devrait pas dépasser 5 mW).
Le logiciel libre inSSIDer de MetaGeek s’avère être un précieux outil pour résoudre les problèmes de connexions ou de débits insuffisants dans les zones urbaines ou la présence de borne WiFi est très dense.
© 2013 MLK-ECST
Dans l’exemple ci-dessus, quels sont les canaux utilisés ? Quel est celui de l’E-BLOCK ? Que peut-on dire de la largeur des canaux utiliser par les Freebox ?
Lors des essais, penser à se partager les canaux correctement et vérifier la répartition avec inSSIDer.
Comment s’appellent les deux modes de connexion WiFi ?
© 2013 MLK-ECST
Quel est le rôle du DHCP ?
Combien y a-t-il de canaux WiFi ? Combien sont réellement exploitables pour des bornes placées à proximité les unes des autres ?
Quelle macro Flowcode est utilisée pour passer une variable du PIC au HTML ?
Quelle est la syntaxe HTML associée ?
Quelle syntaxe HTML est utilisée pour passer une variable du HTML au PIC ?
Quelle est le macro Flowcode associée ?
Combien de variables est-il possible de passer entre le PIC et le HTML en utilisant le swap ?
Quelle langage est utilisé pour rafraichir auto-matiquement la page Web ?
Par quel procédé la couleur est–elle associée au texte ?
