Aller au contenu

Aide Pour Faire Une Ihm Personalisée

Kikoroto

Par Kikoroto
dans Le bistrot

 Partager

Messages recommandés

Kikoroto Newbie

Kikoroto

Posté(e)
Posté(e)

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 :

post-7469-0-86744200-1461589964_thumb.png

<!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.

 

post-7469-0-38233100-1461590678_thumb.png

 

 

 

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 :

 

post-7469-0-32756800-1461591034_thumb.pngpost-7469-0-74386100-1461591085_thumb.png

 

 

Résultat :

post-7469-0-01882300-1461592104_thumb.png

 

 

 

 

 

<!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é.

 

 

Lien vers le commentaire
Partager sur d’autres sites
  • Réponses 72
  • Créé
  • Dernière réponse

Meilleurs contributeurs dans ce sujet

Jours populaires

Meilleurs contributeurs dans ce sujet

Jours populaires

Messages populaires

Bloug
Bloug

nostalgie .... une petite pensée pour myvera de Sbdomotique ! 

Images postées

pepite Newbie

pepite

Posté(e)
Posté(e)

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 ?

Lien vers le commentaire
Partager sur d’autres sites
Kikoroto Newbie

Kikoroto

Posté(e)
  • Auteur
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
Kikoroto Newbie

Kikoroto

Posté(e)
  • Auteur
Posté(e)

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. :-)

Lien vers le commentaire
Partager sur d’autres sites
Invité chris6783

Invité chris6783

Posté(e)
Posté(e)

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...

Lien vers le commentaire
Partager sur d’autres sites
Kikoroto Newbie

Kikoroto

Posté(e)
  • Auteur
Posté(e)

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 :-)

Lien vers le commentaire
Partager sur d’autres sites
Kikoroto Newbie

Kikoroto

Posté(e)
  • Auteur
Posté(e)

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>';	

		
?>
Lien vers le commentaire
Partager sur d’autres sites
 Partager
Aller sur la liste des sujets
×
×
  • Créer...