TP IOT : CRÉER UNE INTERFACE WEB AVEC SVG

(1)

Objectifs : Etre capable de créer une interface web graphique en utilisant le format SVG.

1. Introduction...1

2. Préréquis :...2

3. Matériels/logiciels nécessaires :...2

4. Création de visuel...2

4.1. Créer un visuel...2

4.2. Fichier SVG du visuel...3

4.3. Création d'un page html contenant le visuelle...6

4.4. Remarques sur la base de donnée...9

5. Contrôle des lampes...9

5.1. Le visuel...9

5.2. Extrait de code du svg : (ok testé)...10

5.3. Code complet de l'exemple (ok testé)...11

5.4. Résultat après appui sur le visuel :...13

6. Compléments...13

6.1. Modifier un attribut d'un objet de graphique SVG...13

6.2. Exemple de code (ok testé)...13

7. Action d'un bouton vers un module électronique...16

7.1. Code javascript à placer dans la page client...16

7.2. Programme en C à mettre dans un PIC (carte PICV2) :...18

1 https://www.w3.org/TR/SVG/Overview.html

(2)

1. INTRODUCTION

Nous souhaitons fournir une interface web visuel permettant d'afficher les données stockées dans une base de donnée. Nous souhaitons aussi contrôler grâce à cette interface les éléments de notre système.

Le système exemple mesure des températures (visuel : temp) et active des lampes (visuel : lum)

Dans un premier temps nous étudierons le logiciel de création de visuel, puis le lien possible avec les données de la base et enfin nous contrôlerons les lampes à l'aide de l'interface visuel.

Voici un exemple de l'interface visuelle terminée :

2. PRÉRÉQUIS :

Savoir créer une base de données contenant les données à afficher : myPhpAdmin

Savoir remplir, traiter et extraire les données de la base avec php.

Connaître le HTML et le javascript

(3)

3. MATÉRIELS/LOGICIELS NÉCESSAIRES :

Wamp (ou Lamp) installé et configuré correctement (accès depuis le localhost et autre pc dans le même réseau.

Inkscape : (logiciel gratuit de création de graphique vectoriel) Notepad++ : éditeur de texte à coloration syntaxique

4. CRÉATION DE VISUEL

4.1. Créer un visuel

Utiliser Inkscape pour créer un visuel comme dans l'exemple suivant.

Pour l'arc de cercle donner l'ID = arc_temp Pour le texte -20 donner l'ID = txt_temp

Le fait de donner un ID aux éléments du dessin permet de les utiliser en javascript et php ultérieurement.

Sauvegarder le dessin au format SVG avec Inkscape.

(4)

Ouvrir le fichier .svg avec Notepad++.

Décrypter les données texte décrivant le graphique en vous aidant des spécifications du format SVG (Recherche sur le web)

4.2. Fichier SVG du visuel

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

width="210mm"

height="297mm"

viewBox="0 0 744.09448819 1052.3622047"

id="svg8176"

version="1.1"

inkscape:version="0.91 r13725"

sodipodi:docname="visuel_arc_et_texte.svg">

<defs

id="defs8178" />

<sodipodi:namedview id="base"

pagecolor="#ffffff"

bordercolor="#666666"

borderopacity="1.0"

inkscape:pageopacity="0.0"

inkscape:pageshadow="2"

inkscape:zoom="0.98994949"

inkscape:cx="197.35754"

inkscape:cy="1024.0895"

inkscape:document-units="px"

inkscape:current-layer="layer1"

showgrid="false"

inkscape:window-width="1280"

inkscape:window-height="670"

inkscape:window-x="-8"

inkscape:window-y="-8"

inkscape:window-maximized="1" />

<metadata

id="metadata8181">

<rdf:RDF>

<cc:Work rdf:about="">

<dc:format>image/svg+xml</dc:format>

<dc:type

rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

<dc:title></dc:title>

</cc:Work>

</rdf:RDF>

</metadata>

<g

inkscape:label="Calque 1"

(5)

inkscape:groupmode="layer"

id="layer1">

<g

id="g_cpt_temp01-8"

transform="translate(-209.16446,11.956644)"

inkscape:label="#g5858"

onload="affiche_lum01()"

onmouseover="modif_couleur()">

<g

id="g8043">

<text

xml:space="preserve"

style="font-style:normal;font-weight:normal;font-size:17.79112625px;line-height:125%;font-family:sans- serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke- linecap:butt;stroke-linejoin:miter;stroke-opacity:1"

x="283.35733"

y="54.276764"

id="text4170-0"

sodipodi:linespacing="125%"

transform="scale(0.95363213,1.0486224)"><tspan sodipodi:role="line"

id="tspan4172-54"

x="283.35733"

y="54.276764"

style="font-size:7.7836175px;fill:#000000;fill-opacity:1;stroke:none;stroke- opacity:1">LUM01</tspan></text>

<path

style="opacity:0.98000004;fill:none;fill-opacity:1;stroke:#ffef00;stroke-width:8.30784893;stroke- linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke- opacity:1"

id="arc_temp01-5"

sodipodi:type="arc"

sodipodi:cx="283.45236"

sodipodi:cy="66.108086"

sodipodi:rx="26.962261"

sodipodi:ry="28.239836"

sodipodi:start="0"

sodipodi:end="5.7079184"

sodipodi:open="true"

d="M 310.41462,66.108086 A 26.962261,28.239836 0 0 1 287.31663,94.056379 26.962261,28.239836 0 0 1 257.59777,74.119267 26.962261,28.239836 0 0 1 272.17705,40.456141 26.962261,28.239836 0 0 1 306.07497,50.743956"

inkscape:label="#path4237" />

<text

x="274.60721"

y="69.480202"

id="txt_temp01-8"

inkscape:label="#text4239"

id="tspan4241-2"

x="274.60721"

y="69.480202">0000</tspan></text>

<text

(6)

x="290.70581"

y="83.317551"

id="text4243-9"

id="tspan4245-0"

x="290.70581"

y="83.317551"

style="font-size:10.00750828px">lm</tspan></text>

</g>

</svg>

Dans ce fichier on retrouve les ID de nos objets graphiques.

4.3. Création d'une page html contenant le visuel

Afin d'utiliser les données de la base dans le visuel il faut que le visuel soit hébergé par le serveur. Pour cela il faut créer un fichier PHP contenant le visuel SVG .

Il suffit de créer la structure de base du php, puis d'insérer dans le body le fichier SVG.

//********************************************************************************************

//Code php du fichier affiche.php placé dans le dossier wamp/www/db_jardibox/ ok testé

<?php>

<head>

</script>

</head>

<body>

<?php

//affichage des données lues dans une base sur un objet svg : //connexion à la base

//lecture de la premiere ligne et sauvegarde dans une variable //affichage dans le svg

//consultation:

$db = mysqli_connect("localhost","root","","db_jardibox") or die("Erreur : ouverture de la base " . mysqli_error($link));//connect a la base

//requete selectionnant toutes les colonnes

$query = "SELECT * FROM table_temphum" or die("Erreur : consultation 2" . mysqli_error($db));//definit la requete

//execute la requete

(7)

$result = $db->query($query);

$nbRecord = mysqli_num_rows($result);

while($row=mysqli_fetch_array($result))//parcours la base et conserve le dernier tuple {

$temp=$row["temp"];

};

echo "<h3>temperature = ".$temp." </h3>";

//$row = mysqli_fetch_array($result);//place le resultat de la requete dans un tableau

// echo "<h4>N= ".$row["id"]. " Date = ".$row["dateheure"]." Temp = " .$row["temp"] . " Humidite air = ".

$row["humair"]. " Humidite terre = ".$row["humterre"] . " Numero capteur = ".

$row["idcapteur"]."<br></h4>";//affichage

// $temp = $row["temp"]; //sauve les mesures dans une variable temp // $humair = $row["humair"]; //sauve les mesures dans une variable // echo "<h3>temperature = ".$result["temp"]." </h3>";

mysqli_close($db);//ferme la base

?>

<svg

width="1000px"

height="1000px"

viewBox="0 0 744.09448819 1052.3622047"

id="svg8176"

version="1.1"

sodipodi:docname="visuel_arc_et_texte.svg">

<defs

id="defs8178" />

<g

id="layer1">

<g

id="g_cpt_temp01-8"

onload="affiche_lum01()"

onmouseover="modif_couleur()">

<g

id="g8043">

<text

x="283.35733"

y="54.276764"

id="text4170-0"

id="tspan4172-54"

x="283.35733"

y="54.276764"

(8)

style="font-size:7.7836175px;fill:#000000;fill-opacity:1;stroke:none;stroke- opacity:1">TEMP01</tspan></text>

<path

style="opacity:0.98000004;fill:none;fill-opacity:1;stroke:#ffef00;stroke-width:8.30784893;stroke- linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke- opacity:1"

id="arc_temp01"

d="M 310.41462,66.108086 A 26.962261,28.239836 0 0 1 287.31663,94.056379 26.962261,28.239836 0 0 1 257.59777,74.119267 26.962261,28.239836 0 0 1 272.17705,40.456141 26.962261,28.239836 0 0 1 306.07497,50.743956"

inkscape:label="#path4237" />

<text

x="274.60721"

y="69.480202"

id="txt_temp01"

inkscape:label="#text4239"

id="tspan4241-2"

x="274.60721"

y="69.480202"> <?php echo $temp ?> </tspan></text>

<text

x="290.70581"

y="83.317551"

id="text4243-9"

id="tspan4245-0"

x="290.70581"

y="83.317551"

style="font-size:10.00750828px">°C</tspan></text>

</g>

</svg>

</body>

<?>

//****************************************************

Un appel grace à un navigateur (compatible HTML5 et SVG) permet de

visualiser le résultat :

(9)

Le code précédent contient les modifications à apporter pour lier le php et le svg :

4.4. Remarques sur la base de donnée

La base de donnée doit bien sur être créée et remplie avec des valeurs.

Nom de la base : db_jardibox Nom de la table : table_temphum

Structure de la table : id,dateheure,temp,humair,humterre,idcapteur Dans notre exemple seul 'temp' nous intéresse.

5. CONTRÔLE DES LAMPES

5.1. Le visuel

Créer un visuel (exemple suivant : une lampe)

Réglage des interactions

(10)

Il est possible d'anticiper les futurs scripts javascript en renseignant les champs ''interactivités'' :

Exemple onclick = allume_lm01()

On retrouve l'appel à la fonction dans le fichier .SVG : allume_lm01()

5.2. Extrait de code du svg : (ok testé)

<g

id="g_lm01"

onclick="allume_lm01()">

<path

d="m 105.14059,184.12435 a 29.301912,27.176624 0 0 1 -19.299536,33.70239 29.301912,27.176624 0 0 1 -36.60727,-17.4214 29.301912,27.176624 0 0 1 18.26432,-34.19506 29.301912,27.176624 0 0 1

37.123766,16.4544"

sodipodi:start="5.9930831"

sodipodi:type="arc"

id="path8068"

style="opacity:0.98000004;fill:#ffff00;fill-opacity:1;stroke:#ffd500;stroke-width:5;stroke-

linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke- opacity:1" />

(11)

<text

Il faut ensuite inclure le code dans un fichier php.

Un script est ajouté afin de traiter l'appel à la fonction lors d'un appui ''onclick''.

5.3. Code complet de l'exemple (ok testé)

<?php>

<head>

function allume_lm01(){

alert("appui sur LM01");

}

</script>

</head>

<body>

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

width="100"

height="100"

viewBox="0 0 100 100"

id="svg8598"

version="1.1"

sodipodi:docname="visuel_bouton.svg">

<defs

id="defs8600" />

pagecolor="#ffffff"

borderopacity="1.0"

showgrid="false"

units="px"

<metadata

(12)

id="metadata8603">

<rdf:RDF>

<cc:Work rdf:about="">

<dc:format>image/svg+xml</dc:format>

<dc:type

rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

<dc:title></dc:title>

</cc:Work>

</rdf:RDF>

</metadata>

<g

id="layer1"

transform="translate(0,-952.36216)">

<g

id="g_lm01"

<path

d="m 105.14059,184.12435 a 29.301912,27.176624 0 0 1 -19.299536,33.70239 29.301912,27.176624 0 0 1 -36.60727,-17.4214 29.301912,27.176624 0 0 1 18.26432,-34.19506 29.301912,27.176624 0 0 1

37.123766,16.4544"

sodipodi:type="arc"

id="path8068"

<text

id="text8070"

y="196.68146"

x="58.461582"

style="font-style:normal;font-weight:normal;font-size:15px;line-height:125%;font-family:sans-serif;letter- spacing:0px;word-spacing:0px;fill:#ff5555;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke- linejoin:miter;stroke-opacity:1"

xml:space="preserve"><tspan y="196.68146"

x="58.461582"

id="tspan8072"

sodipodi:role="line">LM01</tspan></text>

</g>

</svg>

</body>

<?>

(13)

5.4. Résultat après appui sur le visuel :

6. COMPLÉMENTS

6.1. Modifier un attribut d'un objet de graphique SVG.

Il est possible de modifier le visuel lors d'un passage au dessus (onmouseover) afin de rendre l'interactivité plus sympa.

Il suffit d'accéder à l'attribut de l'objet et de la modifier.

On utilise pour cela le DOM qui correspond à l'arborescence de la page. Ici evt

= objet svg

evt.target.ownerDocument.getElementById(''nomid'').setAttribut(attribut,valeur attribut) permet d'accéder à l'objet svg nomid et de modifier une valeur de ses attributs.

6.2. Exemple de code (ok testé)

<?php>

<head>

function allume_lm01(){

alert("appui sur LM01");

}

function couleurChange(evt){//change l'opacité

//document.carte.getSVGDocument().getElementById('France').getStyle().setProperty('fill', '#FF0000') var svgdoc = evt.target.ownerDocument;

(14)

var obj = svgdoc.getElementById("arc_lm01");

obj.setAttribute("style","opacity:0.5");

//alert(obj);

}

function couleurNormal(evt){//remet l'opacité var svgdoc = evt.target.ownerDocument;

var obj = svgdoc.getElementById("arc_lm01");

obj.setAttribute("style","opacity:1");

}

</script>

</head>

<body>

<svg

width="100"

height="100"

viewBox="0 0 100 100"

id="svg8598"

version="1.1"

sodipodi:docname="visuel_bouton.svg">

<defs

id="defs8600" />

pagecolor="#ffffff"

borderopacity="1.0"

showgrid="false"

units="px"

<g

id="layer1"

transform="translate(0,-952.36216)">

<g

id="g_lm01"

(15)

<path

d="m 105.14059,184.12435 a 29.301912,27.176624 0 0 1 -19.299536,33.70239 29.301912,27.176624 0 0 1 -36.60727,-17.4214 29.301912,27.176624 0 0 1 18.26432,-34.19506 29.301912,27.176624 0 0 1

37.123766,16.4544"

sodipodi:type="arc"

id="arc_lm01"

onmouseout="couleurNormal(evt)";

onmouseover="couleurChange(evt)"

<text

id="text8070"

y="196.68146"

x="58.461582"

style="font-style:normal;font-weight:normal;font-size:15px;line-height:125%;font-family:sans-serif;letter- spacing:0px;word-spacing:0px;fill:#ff5555;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke- linejoin:miter;stroke-opacity:1"

xml:space="preserve"><tspan y="196.68146"

x="58.461582"

id="tspan8072"

sodipodi:role="line">LM01</tspan></text>

</g>

</svg>

</body>

<?>

(16)

7. ACTION D'UN BOUTON VERS UN MODULE ÉLECTRONIQUE

Ok testé avec la page jardibox et l'appui sur un visuel LM01

On souhaite que l'appui sur un visuel de la page web envoi une requête POST vers le module électronique afin que celui ci commande une action.

Exemple : allumage d'une lampe par interface web.

Solution proposée : envoi d'une requête HTTP GET vers le module électronique wifi (ESP8266)

7.1. Code javascript à placer dans la page client

On utilise la fonction XMLHTTPRESQUEST() utilisé avec AJAX. Elle permet d'envoyer une requête à partir d'un événement en javascript.

Le code testé est le suivant :

7.2. Code du visuel (extrait) :

<g

id="g_lm01"

onclick="EnvoiHttpRequestGET(evt) >

(17)

7.3. Code de la fonction envoyant la requête

function EnvoiHttpRequestGET(evt){

var xhr_object = null;

var datahttp = null;

xhr_object = new XMLHttpRequest();

addrHttp = "http://192.168.1.103";//envoi vers une carte ESP8266

xhr_object.open("GET",addrHttp+"/?ETAT=LEDON");//ouvre une requete POST vers URL xhr_object.send(null);//les données :

//alert("GET vers "+addrHttp+" parti : ");

}

7.4. Résultat

Le résultat obtenu par envoie vers un module ESP8266 est :

On retrouve la donnée envoyée par GET : ETAT=LEDON

Il suffit de détécter ce texte grâce à un programme de microcontroleur et d'agir sur les lampes.

7.5. Programme en C à mettre dans un PIC (carte PICV2) : Extrait :

Le test est ok

La requête de cette exemple est GET /192.168.1.103/?LED0 pour éteindre la LEROUGE et LED1 pour allumer la LEDROUGE

/

*****************************************************************************/

void main() {

int8 i=0;

int8 channel=0;

(18)

char strbuffer[20];

int8 lchar;

int8 valCAN;

setup_adc_ports(AN0_AN1_AN3);

setup_adc(ADC_CLOCK_INTERNAL);

setup_timer_0(RTCC_INTERNAL|RTCC_DIV_1);

setup_timer_1(T1_DISABLED);

setup_timer_2(T2_DISABLED,0,1);

set_tris_a(0b00111111);

set_tris_b(0b11111111);

set_tris_c(0b10010000);

initCAN();//initialise le CAN

Init_Ecran();//initialise l'écran LCD Efface_Ecran();

allume_LEDVERTE;

printf(Affiche_caractere,"WIFI SERVEUR\n\r");

delay_ms(2000);

//envoi command AT vers Wifi

fputs("AT+RST"); //testOK() ; //reset le module ESP8266 fprintf(DEBUG,"DEBUG ATRST\r\n"); delay_ms(1000);

//lecture de l'adresse IP du module ESP8266 fputs("AT+CIFSR");

for(i=0;i<20;i++) {

DataBuffer[i]=getc(); //detecte l'arrivee d'un K de OK pour finir l'enregistrement des données if (DataBuffer[i] == 'K') break;

}//for

Efface_Ecran();printf(Affiche_caractere,"%s ",DataBuffer);

do{

delay_ms(1000);

fputs("AT+CIPMUX=1"); testOK(); delay_ms(1000); //configure en multi connexion Efface_Ecran();printf(Affiche_caractere,"CIPMUX=OK"); delay_ms(1000);

fputs("AT+CIPSERVER=1,80"); testOK(); delay_ms(1000);//active (1) le module en mode server sur port 80 Efface_Ecran();printf(Affiche_caractere,"Attente reqHTTP");

//attente du GET /?LED1 ou /?LED0 en provenance d'un client while(getc()!='L') {};

while(getc()!='E') {};

while(getc()!='D') {};

if(getc()=='1') //ok testé {

output_high(LEDROUGE);

LEDROUGEON=true;

}//if

else //sinon RDIOLR=0 alors eteindre ledrouge et memoriser l'info {

output_low(LEDROUGE);

LEDROUGEON=false;

(19)

}//else

Efface_Ecran();printf(Affiche_caractere,"GET RECU"); delay_ms(10000);

puts("AT+CIPCLOSE=0"); // delay_ms(1000); //fermeture de la connection

}while(1);

}//main

Remarque : le bouclage est un peu capricieux et bloque sur CIPMUX=OK !... Cela provient du programme de communication avec l'ESP et le PIC que je n'ai pas optimisé...à vous de jouer…