Aide Pour Faire Une Ihm Personalisée

**Kikoroto** · le 25 avril 2016

Bonjour à tous,

Y a t'il parmit vous des gens à qui ca interesse d'avoir une interface personalisée pour la visualisation de données et l'interaction avec la maison ? Si oui, je me propose de vous aider dans la confection de votre IHM.

Pour cela, il vous faudra :

Un serveur web :
- - RPI
- - Synology
- - etc ...

Des notions de dévellopement web :
- HTML5 / CSS3 pour la structure et des choses simple.
- Du PHP si on veut récuperer des informations de différents service.
- Et pour finir un peu de JavaScript et de jQuery pour embellir avec des trucs sympatoche.

Ensuite nous allons créer notre première page tout simplement, avec vue 3-D ou non et dessus on mettra les infos que notre HC2 peux nous filer. Température, Présence, Taux humidité, Batterie restante sur périphérique, Etat des scènes, On pourra aussi proposer des choix dans les scènes, Faire des Popup de Maj, etc ...

Donc si certains sont intéressés, faites signe.

Surtout pas de panique, tout est réalisable, et ce relativement simplement. Il faudrait dans l'idéal avoir quelques connaissance en développement web.

+++

Au fur et à mesure, et pour faciliter la compréhension. Ci dessous la ligne, je mettrai tout ce qui sera important de savoir au fur et à mesure de l'avancée du post. Il ne sera donc, pas nécessaire de tout lire mais uniquement ce message ;-)

-----------------------------------------------------------------------------------------------------------------------------------------------

Ci dessous, le code HTML et son style associé. Cette image sera la base de notre projet.

Chacun adaptera à son projet.

Résultat :

<!DOCTYPE html>
 
 
<head>
 
<meta charset="UTF-8" />
<title>Controle de l'Habitation</title> //c'est le titre qui sera sur ton onglet
<link rel="stylesheet" type="text/css" href="style.css" /> //ou se situe ta feuille de style
 
</head>
 
 
   <body>
 
	<img id ="plan_img" alt="" src="maison.jpg" /> //div de ton image
 
   </body>
 
</html>


body{
    background-color: black;
}

#plan_img{
    position:absolute;
    bottom:75px;
    right:75px;
    height: 250px;
    width: auto;
    z-index: 1;
}

Pour la suite, il est nécessaire de savoir de quoi on parle : le JSON. En gros et simplement, c'est plein de ligne qui sont renvoyés par un serveur avec tout un tas d'infos. C'est une explication trés vulgaire mais c'est voulu. Un peu comme le .csv d'Excel, il y aura des delimiteurs.

Pour mon exemple : On va afficher la météo garce au site http://www.prevision-meteo.ch/ En haut à droite, services, chapitres 3. Ici on a le services fourni par prevision-meteo qui va nous retourner un JSON.

Exemple d'un JSON, comme on peut le voir, c'est tout simplement imbuvable. Sauf si on à l'habitude de travailler dessus. Heureusement il existe des gens sympa qui nous font des trucs sympa : JSON Parser. Faites un copier de l'exemple d'un JSON.

C'est tout de suite mieux :-)

Illustrations :

Résultat :

<!DOCTYPE html>
 
 
<head>
 
<meta charset="UTF-8" />
<title>Controle de l'Habitation</title> //c'est le titre qui sera sur ton onglet
<link rel="stylesheet" type="text/css" href="style.css" /> //ou se situe ta feuille de style
 
</head>
 
 
   <body>
 
	<img id ="plan_img" alt="" src="maison.jpg" /> //div de ton image
	
	
			<div id= "meteo">
		
				<?php
				
		$json_source = file_get_contents('http://www.prevision-meteo.ch/services/json/lat=46.259lng=5.235');   //Si les données json sont dans un fichier distant:			
		$json_data = json_decode($json_source);                                                                //Décode le JSON
			$value= $json_data->current_condition->icon_big;      //la on recupere une icone
				
		echo '<a href=""> <img src="'.$value.'" width="300" height="auto" /> </a>';  //ne pas faire attention au <a></a>

				?>	

		</div>
	
			
					
		<div id= "meteo_temp_act">
			<?php	
		$json_source = file_get_contents('http://www.prevision-meteo.ch/services/json/lat=46.259lng=5.235');   //Si les données json sont dans un fichier distant:			
		$json_data = json_decode($json_source);                                                                //Décode le JSON
			$temperature= $json_data->current_condition->tmp;          // Je vous laisse chercher dans le JSON Parser, la ligne correspondante. Dans les conditions actuelle, on récupère la valeur de la température
			
					echo '<p> Température Actu. : '.$temperature.'°c</p>';
			
			?>		
		</div>
	
 
   </body>
 
</html>

body{
	background-color: black;
}
 
 
#plan_img{
	position:absolute;
	bottom:75px;
	right:75px;
	height: 250px;
	width: auto;
	z-index: 1; 
}
 
#meteo{
	position:absolute;
	bottom:75px;
	left:25px;
	height: 250px;
	width: auto;
	z-index: 1; 
}

#meteo_temp_act{
	position:absolute;
	bottom:150px;
	left:55px;
	height: 250px;
	width: auto;
	z-index: 1; 
	color: white;
	font-size:25px;
}

Viens ensuite l'affichage des températures, pour ceci il faudra utiliser :

 
<?php
 
 
		$json_source = file_get_contents('http://admin:admin@192.168.1.x/api/devices/xx');   //mettre ID d'un thermometre			
		$json_data = json_decode($json_source);                                                             
			$value= $json_data->properties->value;  // sur le fichier JSON, on vient récuperer ce qui nous interesse, et on l'affecte à  la var value
				echo '<p>'.$value.'°</p>';	// on affiche la valeur de $value. J'ai ajouté ° juste avant la balise fermante du <p>
 
 
?>

Pour finir, on se le mets dans un <div> et le tour est joué.

**keysersoze** · le 25 avril 2016

Salut, incroyable de tomber la dessus ! Je voulais justement chercher des infos sur le forum.

Je suis très intéressé, surtout sur la partie récupération d'info !

Je peux héberger le site sur Syno ou RPI également.

Merci d'avance

**Kikoroto** · le 25 avril 2016

Des que tu as 5 minutes pour te lancer, on y go.

Par contre il est possible que je ne réponde pas forcèment tout de suite, mais je passe dans le coin au moins 1 fois tout les 2-3 jours.

**keysersoze** · le 25 avril 2016

J'ai un peu de temps en ce moment. J'ai déjàune vue 3D faite avec Sweet Home 3D. J'attends un petit coup de main pour démarrer...

**pepite** · le 25 avril 2016

Excellente idee !! Je veux voir je veux voir !!

Avec la remontée des VDs ? bon tu tapes tout avec l'API, a voir si cela ne vas pas faire planter un petit peu de temps en temps ;-)

Tres bonne idée pour une tablette murale dédiee ou ecran ;-)

Mais tu n'utilises pas imperihome ?

**Kikoroto** · le 25 avril 2016

Tu as des notions en HTML5 / CSS3 - PHP - JavaScript / jQuery ?

Tout d'abord, dans ton syno, tu vas dans ton dossier web et tu crées 2 fichier.

1- accueil.php

2- style.css

1- ca va etre ta page de garde, la ou il y a ton 3-D. Je te mets un bout de code pour démarrer.

<!DOCTYPE html>


<head>

<meta charset="UTF-8" />
<title>Controle de l'Habitation</title> //c'est le titre qui sera sur ton onglet
<link rel="stylesheet" type="text/css" href="style.css" /> //ou se situe ta feuille de style

</head>


   <body>

	<img id ="plan_img" alt="" src="img/appartement.png" /> //div de ton image
	
   </body>

</html>

body{
	background-color: black;
}


#plan_img{
	position:absolute;
	bottom:75px;
	right:75px;
	height: 450px;
	width: auto;
	z-index: 1; 
}

Si tu ne comprend pas trop pour le moment, je te conseille de voir des mini tuto sur le net pour te familiariser avec le language dev web.

**Kikoroto** · le 25 avril 2016

Excellente idee !! Je veux voir je veux voir !!

Avec la remontée des VDs ? bon tu tapes tout avec l'API, a voir si cela ne vas pas faire planter un petit peu de temps en temps ;-)

Tres bonne idée pour une tablette murale dédiee ou ecran ;-)

Mais tu n'utilises pas imperihome ?

Oui, tout à l'API, pas de plantage jusque la pour moi.

Et non pas d'impérihome. :-)

**pepite** · le 25 avril 2016

@kikoroto,

Tant mieux si pas de plantage pour l'instant, mais avec certains firmware, ca bugguait, imperihome est dans ce cas touche ;-)

tu as une IHM en prod ?

Tu partages stp ?

**Kikoroto** · le 25 avril 2016

http://www.domotique-fibaro.fr/index.php/topic/8131-pr%C3%A9sentation-de-mon-installation-terrain-de-jeu/

le 25 avril 2016

Partant aussi pour découvrir...

Ça m'a toujours paru être un gros boulot de faire ça donc bravo pour l'initiative et merci pour la volonté de partager.

L'approche est de tout coder àla main ou de faire une petite couche qui présente les objets présents dans la hc2 ? Un peu comme le fait myVera pour la véra ? Ensuite on fait dans cette couche ce que l'on veut des objets mais ce n'est plus que la partie vue du modèle que l'on manipule ? Je vais suivre avec attention mais ne suis pas très doué en ihm...

**Kikoroto** · le 25 avril 2016

L'idée c'est de partir d'une feuille blanche.

D'y mettre une image sur un fond blanc ou noir. (par la suite, on donnera la possibilité de jongler entre blanc et noir en fonction de l'heure : histoire de pas se faire aveugler le soir ou la nuit d'éclairer toute l'entrée ou salon).

Sur cette image on va mettre les valeurs de température.

Mettre une horloge un peu design.

et aprés on verra :-)

**pepite** · le 25 avril 2016

ah ben oui, j'avais lu ce post, désolé je n'avais pas percuté que c'etait aussi toi.

TOP

**Kikoroto** · le 25 avril 2016

Ajout de la récupération d'un site de météo.

**Shad** · le 25 avril 2016

Un truc comme sa quoi

**Kikoroto** · le 25 avril 2016

Un truc comme sa quoi

Ca me pique les yeux ;-)

**Shad** · le 25 avril 2016

J'ai pas encore eu le temps de finir àcause des travaux chez moi ^^.

**keysersoze** · le 25 avril 2016

Site web en route et météo ok !

Je trépigne de pouvoir ajouter mes premiers actionneurs et surtout une récupération d'états !

Merci encore de ton temps et du partage !!!

**Shad** · le 25 avril 2016

Oui enfin vous avez pas de retour d'état là. Faut partir sur du javascript

**Kikoroto** · le 25 avril 2016

PHP ;-)

Je te mets un bout de code.

<?php
		
		
		$json_source = file_get_contents('http://admin:admin@192.168.1.x/api/devices/xx');   //mettre ID d'un thermometre			
		$json_data = json_decode($json_source);                                                             
			$value= $json_data->properties->value;
				echo '<p style="color:black;">'.$value.'°</p>';	

		
?>

**keysersoze** · le 25 avril 2016

Merci mais je pense que je dois louper quelque chose au niveau de mon syno.

J’obtiens ça sur ma page

properties->value; echo '
'.$value.'°
'; ?>

Je vais peut être commencer par me former un peu sur le développement web...

**Shad** · le 25 avril 2016

Alors dévelloppement tu as le html et le php.

Pour mettre du code php il faut mettre les balises <?php code .... ?>

**Kikoroto** · le 25 avril 2016

Oubli pas de renommer ton premier fichier en .php

**keysersoze** · le 26 avril 2016

impecc, c'était juste le renommage !!

**Kikoroto** · le 26 avril 2016

tu nous mets une petite capture d'écran ?

**keysersoze** · le 26 avril 2016

Voilàce que je voudrais faire en mieux

Aide Pour Faire Une Ihm Personalisée

Messages recommandés

Meilleurs contributeurs dans ce sujet

Jours populaires

Meilleurs contributeurs dans ce sujet

Jours populaires

Messages populaires

Bloug

Images postées

Invité chris6783