TP 3 Informatique embarquée-Objets connectés.

Une IHM: Interface Homme machine désigne un ensemble de moyens et outils informatiques mis en place pour favoriser la communication entre un être humain et une machine. Plusieurs étapes sont nécessaires dans la communication.

Entrée des données dans une Interface.
Traitement des données par la Machine, selon les indications de l'Homme.
Résultat donné par la Machine (affichage, mise en marche d'un moteur en domotique,...)

Nous allons créer une petite IHM. Son utilisation suivra les étapes suivantes:

Saisir deux valeurs dans les champs prévus à cet effet.
Choisir l'opération à effectuer: somme, soustraction, multiplication, division
Récupérer le résultat

Cette IHM, nous allons la créer dans une page WEB. Il va donc nous falloir trois fichiers.

Un fichier HTML pour l'écriture.
Un fichier CSS pour la mise en forme.
Un fichier Javascript pour le traitement des données.

Beaucoup de choses à faire, nous allons y aller par étapes, en commençant par observer.

I Observations.

Pour découvrir tout ceci, nous allons utiliser le logiciel en ligne: jsfiddle que vous obtiendrez en cliquant sur l'image ci-dessous. Cela doit vous rappeler des souvenirs, nous l'avons déjà utilisé en début d'année.

Vous allez lancer le logiciel en cliquant sur l'image ci-dessus. Celui-ci va s'ouvrir dans une seconde fenêtre.

Etape 1: Vous allez copier-coller le code HTML ci-dessous dans la partie HTML, puis appuyer sur le bouton Run pour voir le résultat.

<div class="premier"><input type="text"  value="première valeur"/></div>
<div class="second"><input type="text" value="seconde valeur"/></div>
<div class="addition"><input type="button" value="somme" /></div>
<br>
<div class="zone_résultat" type="text">Résultat</div>

Comme vous pouvez le constater, un premier conténaire nommé 'div' ayant pour attribut 'class="premier"' contient une instruction 'input' qui permet de saisir du texte. En effet, si vous cliquez dans la zone 'première valeur', vous pouvez écrire du texte.

Un second conténaire permet de saisir une seconde valeur.

Un troisième conténaire contient un bouton qui pour le moment ne fait rien.

Enfin un quatrième conténaire affiche le mot 'Résultat'.

Etape 2: Vous allez copier-coller le code CSS ci-dessous dans la partie CSS, puis appuyer sur le bouton Run pour voir le résultat.

input
{
	background-color: #DCDCFA;
	color: blue;
	font-family: Calibri;
	font-size: 20px;
	padding-left: 20px;
}

.premier
{
	float:left;
}

.addition
{
	font-family: Calibri;
	font-size: 50px;
	padding-left: 50px;
}

.zone_résultat
{
	background-color: #DCDCFA;
	color: blue;
	font-family: Calibri;
	font-size: 2vw;
	padding-left: 1vw;
	width: 20%;
	height: 100%;
	margin-left: 150px;
}

input:hover
{
	background-color: orange;
	cursor: pointer;
}

Vous constatez que nous avons commencé à mettre en forme. Le designe pour une IHM est important.

Le 'font-size' permet de définir la taille des caractères.
Le 'padding-left' permet de décaler le texte.
Le 'float' permet de faire flotter le conténaire de 'class premier', pour permettre au second de s'aligner sur sa droite.
Le 'input:hover' permet au survole des conténaires 'input' par la souris de:

Modifier la couleur du conténaire: ici 'background-color : orange'
Modifier la flèche de la souris en 'pointeur', ici 'cursor: pointer'

Passer la souris au dessus des conténairs : première valeur, seconde valeur et somme pour le constater.

Désormais, nous souhaitons vider les conténaires de leurs textes, pour les remplacer par des nombres.

Etape 4: Vous allez copier-coller le code 'javascript' ci-dessous dans la partie 'javascript', puis appuyer sur le bouton Run pour voir le résultat.

function vider(texte)
{
    if(texte=="première valeur" || texte=="seconde valeur")
        return "";
    else
        return texte;
}

Vous constatez qu'il ne se passe rien. Pourtant si l'argument est "première valeur ou seconde valeur", la fonction renvoie vide "". Que manque-t-il? Tout simplement, il faut appeler la fonction dans la page 'html' pour que celle-ci serve. C'est ce que nous allons faire maintenant.

Etape 5: Vous allez observer le code 'html' suivant, puis vous aller modifier le code 'html' dans 'JSFiddle' en copiant collant les deux attributs manquants au bon endroit. Si vous avez peur de vous tromper, effacer le code 'html' dans 'JSFiddle' et remplacez le par celui situé ci-dessous. Puis appuyer sur le bouton Run pour voir le résultat.

<div class="premier"><input type="text"  value="première valeur" onClick="Javascript:this.value=vider(this.value);"/></div>
<div class="second"><input type="text" value="seconde valeur" onClick="Javascript:this.value=vider(this.value);"/></div>
<div class="addition"><input type="button" value="somme" /></div>
<br>
<div class="zone_résultat" type="text">Résultat</div>

Vous remarquez que l'on a ajouter 'onClick="Javascript:this.value=vider(this.value);"' pour chaque conténaire de saisie. Allez cliquer sur les cases valeurs. Vous devriez constater que le contenu s'efface. Vous pouvez entrer vos valeurs. En effet, l'instruction 'onClick' signifie, si l'on click. Donc si on click, on fait appel à du 'javascript' et l'on remplace cette valeur 'this.value' par le résultat de la fonction 'vider' qui prend comme argument la valeur du conténaire.

Si vous cliquez sur 'résultat', rien ne se passe. Il nous faut ajouter une fonction 'somme'. Qu'il faudra déclencher en cliquant sur le bouton 'somme'.

Etape 6: Vous allez copier-coller le code 'javascript' ci-dessous dans la partie 'javascript' à la suite de la première fonction, puis vous modifierez le code 'html' (modifier ou remplacer en entier), puis appuyer sur le bouton Run pour voir le résultat.

Code 'javasript'

function somme()
{
    var pvaleur; var svaleur; var somme;
    
    pvaleur = document.getElementById("zone_première_valeur").value;
    svaleur = document.getElementById("zone_seconde_valeur").value;
    somme = parseFloat(pvaleur)+parseFloat(svaleur);
    document.getElementById("resultat").innerText=somme;
}

Code 'html'

<div class="premier"><input type="text" id="zone_première_valeur" value="première valeur" onClick="Javascript:this.value=vider(this.value);"/></div>
<div class="second"><input type="text" id="zone_seconde_valeur" value="seconde valeur" onClick="Javascript:this.value=vider(this.value);"/></div>
<div class="addition"><input type="button" value="somme" onClick="somme()"/></div>
<br>
<div class="zone_résultat" type="text" id="resultat">Résultat</div>

Faites un essaie: Entrez deux valeurs puis appuyez sur le bouton somme.

Qu'avons-nous fait dans la page 'html'?

Nous avons donné un identifiant à la zone 'première valeur' pour pouvoir appeler la valeur dans le programme: 'id="zone_première_valeur"'
Nous avons donné un identifiant à la zone seconde valeur pour pouvoir appeler la valeur dans le programme: id="zone_seconde_valeur"
Nous avons appelé la fonction 'somme' par un 'click' sur le bouton: 'onClick="somme()'. Objectif, faire le calcul.
Nous avons donné un identifiant à la zone résultat: 'id="resultat' pour que le programme y inscrive le résultat.

Décrivons un peu la fonction 'somme';

Dans la variable 'pvaleur' nous rentrons '(get=obtenir)' la valeur qui se trouve dans le document qui appelle la fonction. Cette valeur se trouve à l''id="zone_première_valeur"'.
Dans la variable 'svaleur' nous rentrons '(get=obtenir)' la valeur qui se trouve dans le document qui appelle la fonction. Cette valeur se trouve à l''id="zone_seconde_valeur"'.
Les deux éléments obtenus, sont additionnées. 'parseFloat' change une chaine de caractères en nombre décimale.
Dans le document qui appelle le programme, à la place du texte lié à l'identifiant 'resultat' on met le contenu de la variable 'somme'.

Ajoutons une soustraction

Etape 7: Vous allez ajouter le code 'javascript' ci-dessous dans la partie 'javascript' à la suite, puis vous insérez le code 'html' entre les lignes addition et résultat, puis vous ajoutez le code CSS, puis appuyer sur le bouton Run pour voir le résultat.

Code 'javascripte' pour la soustraction, à ajouter à la fin.

function soustraction()
{
    var pvaleur; var svaleur; var soustraction;
    
    pvaleur = document.getElementById("zone_première_valeur").value;
    svaleur = document.getElementById("zone_seconde_valeur").value;
    soustraction = parseFloat(pvaleur)-parseFloat(svaleur);
    document.getElementById("resultat").innerText=soustraction;
}

Code 'html' de la soustraction à ajouter entre les lignes addition et résultat.

<div class="soustraction"><input type="button" value="soustraction" onClick="soustraction()"/></div>

Code CSS à ajouter dans ".addition".

float:left;

Code CSS à ajouter à la fin

.soustraction
{
	font-family: Calibri;
	font-size: 50px;
	padding-left: 50px;
}

Faites des additions et des soustractions.

Etape 8:Créons la vraie pageHTML, liée à la mise en forme CSS et au code Javascript.

Fermons jsfiddle.

Dans votre dossier de classe/eleve/6_Informatique_embarqué/TP3 se trouve trois fichiers:

Un fichier HTML : calculatrice.

Un fichier CSS : style

Un fichier JavaScript : app

Ouvrer avec google le fichier "calculatrice". Vous devez constatez qu'il n'y a ni mise en forme, ni intéractions. Pour cela, il faut dire au fichier HTML où aller chercher la mise en forme (CSS) et ou aller chercher le programme d'activation (JavaScript).

Vous allez donc ouvrir avec Notepad++ le fichier "calculatrice", puis vous allez copier et coller les deux lignes suivantes entre les balises head, puis enregistrer et enfin actualiser la page google. Vous devriez pouvoir faire des additions et soustractions.

<link href="style.css" rel="stylesheet" />
<script src="app.js" defer></script>

II A vous de jouer, ajouter la possibilité de faire une multiplication.