Tuto HC2 et HCL Interface Html

[NetIPSO]

Bonjour,

 

je ne sais pas si cela existe mais plutôt que de passer par l'interface de figaro pour accéder a un module virtuelle, j'aimerais n'accéder qu'a un module bien précis par le biais d'un page html ou autre...

 

Comme je l'ai dit, ne sachant pas si cela existait je me suis amusé a faire un page PHP qui remplis presque son role, je tiens a partagé mes 1er tests si cela intéresse du monde

 

voici la page php en question, à  dépose sur votre serveur, renseigner les champs

-IP (Ip de la figaro) ,

-User (utilisateur pour la connexion) et le

-Pass , pass de connexion.

-id -> id de votre module virtuelle ou en argument de votre page php ->  "page.php?id=xxx"

 

Pour l'instant je n'affiche que les boutons du module virtuelle (le plus utile pour moi dans un 1er temps) et lance l'action associé (bon il faut rentrer le compte et mot de passe)

 

Cela trouve toute son utilité sur un petit écran tactile 

 

voila

 

 

Nouvelle mise a jour :  

 

- Ajout d'une gestion du slider et du code retour.

 

- Ne pas oublier de modifier votre php.ini avec cette option : 

1. allow_url_include = On
2. Pensez a renommer et modifier les fichier config-default.php en config.php

 

- Cette nouvelle version inclus un liens vers le CSS bootrap : http://getbootstrap.com qui nous fait de belle mise en forme pour nos tablettes  

 

Il me reste a mettre en forme ce maudit slider ....   ... mais bon.

 

 

Voila la version finale (enfin j'espère ) avec la gestion du slider cool.

Archive 3.zip

Modifié le 25 mars 2015 par NetIPSO

[Lazer]

C'est pas con, j'aime bien le principe

C'est effectivement utile pour les interfaces tactiles de nos téléphones, ou sur une tablette murale.

 

PS : pour ton code, tu peux utiliser les balises en cliquant sur le bouton <> présent dans la zone d'édition du message, car là  ce n'est pas hyper lisible...

[Nico]

Yes, bonne idée, j'avais fais un truc un peu dans le genre pour tester sur une tablette des contrôles, mais c'était tout en dur chez moi. A suivre de prêt en tout cas. Cela pourrait être une alternative a Imperihome s'ils ne se bougent pas...

[NetIPSO]

Ah deja ca n'existe pas , c'est une bonne nouvelle...

 

Ce qui me gene le plus pour l'instant, c'est le fait de rentrer de nouveau le compte et le mot de passe lors du click sur le bouton, après c'est vrai que l'on peut tout imaginer  avec une interface complètement personnalisable...

[Nico]

Mais pourquoi il faut le rentrer ? tu ne peux pas le mettre en dur ??

[Lazer]

Je n'ai pas testé.... mais il demande de resaisir les identifiants à  chaque fois qu'on clique sur le bouton ?

 

Lors du premier appel à  /api/devices, tu effectues la connexion avec le login/password.

En PHP, tu poux récupérer l'entête de la réponse, qui contient un cookie contenant l'identifiant de session. Il faut que tu réutlises ce cookie aux sessions suivantes, afin de ne pas devoir se ré-authentifier à  chaque appui sur un bouton.

 

 

EDIT : sinon comme dis Nico (qui a pris la mauvaise habitude de me griller...hihi) tu peux simplement remettre le login/password en dur à  chaque appui sur un bouton.

[NetIPSO]

C'est a cause sur javascript qu'il redemande le compte et le mot de passe...

 

il faut que je trouve une autre méthode pour ouvrir un liens (en tache de fond)  tout en restant sur la page actuelle .

[Lazer]

ah oui en effet.... dans ce cas, il faut que ton Javascript appelle une page PHP qui se chargera d'établir la session avec la HC2.

C'est pas simple l'Ajax.....

[NetIPSO]

j'avoue ...   mais on va y arriver

[Invité chris6783]

Bonne idée. Cela peut être très pratique pour ouvrir partiellement la domotique aux visiteurs/employés dans certaines plages horaire.

[forumAD]

Super comme principe;

J'ai voulu essayer et je me heurte au problème suivant:

Warning: file_get_contents(admin:admin@192.168.1.205/api/devices?id=50): failed to open stream: No such file or directory in /home/www/4bad10120e280396fd86a2f6af4509ee/web/netatmo/index.php on line 59

Warning: Invalid argument supplied for foreach() in /home/www/4bad10120e280396fd86a2f6af4509ee/web/netatmo/index.php on line 62

Une idée?

[NetIPSO]

a priori il n'arriver pas a avoir le detail de ton module virtuelle... est-ce que si tu met cette ligne dans ton navigateur internet cela fonctionne?,  

 

as tu  le détail de ton module ?

 "admin:admin@192.168.1.205/api/devices?id=50"

[NetIPSO]

bon j'ai avancé sur le probleme de mot de passe : voici une nouvelle version qui fonctionne pas mal sans javascript, par contre il faut modifié le php.ini pour autoriser le include des liens distants.

allow_url_include = On

<head>
<style>
.btn{
margin:0px auto;
text-align:left;
-webkit-border-radius: 11;
-moz-border-radius: 11;
border-radius: 11px;
-webkit-box-shadow: 1px 5px 3px #666666;
-moz-box-shadow: 1px 5px 3px #666666;
box-shadow: 1px 5px 3px #666666;
font-family: Arial;
text-color: #ffffff;
font-size: 20px;
padding: 20px 20px 20px 20px;
text-decoration: none;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.btn:hover{
background:#5cbf2a;
color:#ffffff;
}
a{
color:#ffffff;
}
.bg{
width: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#656565));
background: -webkit-linear-gradient(#cfcfcf, #656565);
background: -moz-linear-gradient(#cfcfcf, #656565);
background: -o-linear-gradient(#cfcfcf, #656565);
background: -ms-linear-gradient(#cfcfcf, #656565);
background: linear-gradient(#cfcfcf, #656565);
padding: 20px 0px 20px 0px;
-webkit-border-radius: 11;
-moz-border-radius: 11;
border-radius: 11px;
text-align:center;
}
table{
width: 100%;
}
td {
padding: 20px 0px 20px 0px;
font-size: 16px;
color: #ffffff;
text-align:center;
}
</style>
</head>
<html>
<div id="Vbutton" class="bg">
<table>
<?php
$id="1";
if(isset($_GET["id"])) $id=$_GET["id"];
$i=0;
$ip="";
$user="";
$pass="";
if(isset($_GET["deviceID"])){
$lien="http://".$user.":".$pass."@".$ip."/api/callAction?";
foreach ($_GET as $key => $value) {
$arg.=$key."=".$value."&";
}
$lien=$lien.$arg;
include ($lien); #ATTENTION modifier le php.ini pour authoriser les liens externes : allow_url_include = On
}
$path = $_SERVER['PHP_SELF']; // $path = /home/httpd/html/index.php
$file = basename ($path);
$get="http://".$user.":".$pass."@".$ip."/api/devices?id=".$id;
$json = file_get_contents($get);
$data = json_decode($json,true);
print "<img src=\"http://".$ip."/fibaro/n_vicons/User".$data['properties']['currentIcon'].".png\" style=\"width:50px;\" >";
foreach($data['properties']['rows'] as $item) {
        if ($item['type'] == "label"){
                foreach($item['elements'] as $elements){
                print "<p>".$elements['caption']." ".$data['properties']['ui.'.$elements['name'].'.value']."</p>";
                }
        }
        if ($item['type'] == "button"){
        print"<tr><td>";
                foreach($item['elements'] as $elements) {
                print "<a class='btn' href=\"".$file."/callAction?deviceID=".$id."&name=pressButton&arg1=".$elements['id']."&id=".$id."\"target=\"_self\">".$elements['caption']."</a> ";
                }
        print "</td></tr>";
        }
}
?>
</table>
</div>
</html>

[pepite]

bijour,

 

J'aime beaucoup. Suffira de rendre le serveur accessible de l'exterieure.ce qui nous eviterait de passer par home.fibaro..qui pourmoi sur mon tel ne fonctionne pas.

Avec une interface personnalisable : OUI OUI OUI

 

super idee !!

[forumAD]

 

a priori il n'arriver pas a avoir le detail de ton module virtuelle... est-ce que si tu met cette ligne dans ton navigateur internet cela fonctionne?,  

 

as tu  le détail de ton module ?

 "admin:admin@192.168.1.205/api/devices?id=50"

@NetIPSO,

j'ai essayé plusieurs modules virtuels et ça donne toujours le même résultat.

J'ai essayé de mettre la ligne dans firefox et chrome, mais il n'y a rien.

Je vais essayé ta nouvelle version pour voir.

Merci.

[NetIPSO]

si tu n'arrive pas a avoir le détail de ton module ça ne fonctionnera pas : peut etre un probleme de mot de passe ? :

 

voici ce que j'obtient : sous chrome par exemple ou autre ...

 

http://admi:xxxx@IPFIBARO/api/devices?id=47

{"id":47,"name":"Squeezebox","roomID":13,"type":"virtual_device","visible":true,"enabled":true,"properties":{"deviceIcon":18,"ip":"\"\"","port":8081,"currentIcon":"18","log":"","logTemp":"","mainLoop":"","ui.Label1.value":"RTL 2","ui.Slider1.value":100,"visible":"true","rows":[{"type":"label","elements":[{"id":1,"lua":false,"waitForResponse":false,"caption":"Ecoute :","name":"Label1","favourite":true,"main":true}]},{"type":"slider","elements":[{"id":2,"lua":true,"waitForResponse":false,"caption":"Volume","name":"Slider1","msg":"HC2 = Net.FHttp(\"192.168.1.59\")\nHC2:GET(\"/cgi-bin/radio.cgi?action=volume&vol=\".._sliderValue_)","buttonIcon":19,"value":80,"favourite":false,"main":false}]},{"type":"button","elements":[{"id":3,"lua":true,"waitForResponse":false,"caption":"ON","name":"Button11","empty":false,"msg":"HC2 = Net.FHttp(\"192.168.1.59\")\nHC2:GET(\"/cgi-bin/radio.cgi?radio=rtl2&action=play\")\n","buttonIcon":19,"favourite":false,"main":false},{"id":4,"lua":true,"waitForResponse":false,"caption":"OFF","name":"Button12","empty":false,"msg":"HC2 = Net.FHttp(\"192.168.1.59\")\nHC2:GET(\"/cgi-bin/radio.cgi?radio=rtl2&action=stop\")","buttonIcon":18,"favourite":false,"main":false}]},{"type":"button","elements":[{"id":5,"lua":true,"waitForResponse":false,"caption":"RTL2","name":"Button31","empty":false,"msg":"HC2 = Net.FHttp(\"192.168.1.59\")\nHC2:GET(\"/cgi-bin/radio.cgi?radio=rtl2&action=play\")\n","buttonIcon":0,"favourite":false,"main":true},{"id":6,"lua":true,"waitForResponse":false,"caption":"RTL","name":"Button32","empty":false,"msg":"HC2 = Net.FHttp(\"192.168.1.59\")\nHC2:GET(\"/cgi-bin/radio.cgi?radio=rtl&action=play\")\n","buttonIcon":0,"favourite":false,"main":false},{"id":7,"lua":true,"waitForResponse":false,"caption":"JAZZ","name":"Button33","empty":false,"msg":"HC2 = Net.FHttp(\"192.168.1.59\")\nHC2:GET(\"/cgi-bin/radio.cgi?radio=crooner&action=play\")","buttonIcon":0,"favourite":false,"main":false},{"id":8,"lua":true,"waitForResponse":false,"caption":"Alouet","name":"Button34","empty":false,"msg":"HC2 = Net.FHttp(\"192.168.1.59\")\nHC2:GET(\"/cgi-bin/radio.cgi?radio=alouette&action=play\")","buttonIcon":0,"favourite":false,"main":false}]},{"type":"button","elements":[{"id":9,"lua":true,"waitForResponse":false,"caption":"Status","name":"Button41","empty":false,"msg":"local poweronIcon = 19\nlocal poweroffIcon = 18\n\nHC2 = Net.FHttp(\"192.168.1.59\", 80);\nresult = HC2:GET(\"/cgi-bin/radio.cgi?action=status\");\nfibaro:debug(result);\nlocal decode = json.decode(result);\nlocal status = decode[\"STATUS\"];\nlocal ECOUTE = decode[\"ECOUTE\"];\nfibaro:debug(status);\nfibaro:debug(ECOUTE);\n\n\nif status == \"1\"  then\nfibaro:call(fibaro:getSelfId(), \"setProperty\", \"currentIcon\", poweronIcon)\nfibaro:call(fibaro:getSelfId(), \"setProperty\", \"ui.Label1.value\", ECOUTE);\nelse\nfibaro:call(fibaro:getSelfId(), \"setProperty\", \"currentIcon\", poweroffIcon)\nend","buttonIcon":0,"favourite":false,"main":false}]}]},"actions":{"pressButton":1,"setSlider":2},"created":1423758800,"modified":1423758800,"sortOrder":19} 

temps que tu n'arrivera pas a voir le code json le script php ne fonctionnera pas. :s

[NetIPSO]

nouvelle version correction des accents et gestion d'un pseudo slider...

 

si il y a des pro du css je suis preneur

<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8">
<style>
.btn{
margin:0px auto;
text-align:left;
-webkit-border-radius: 11;
-moz-border-radius: 11;
border-radius: 11px;
-webkit-box-shadow: 1px 5px 3px #666666;
-moz-box-shadow: 1px 5px 3px #666666;
box-shadow: 1px 5px 3px #666666;
font-family: Arial;
text-color: #ffffff;
font-size: 20px;
padding: 20px 20px 20px 20px;
text-decoration: none;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.btn:hover{
background:#5cbf2a;
color:#ffffff;
}
a{
color:#ffffff;
}
.bg{
width: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#656565));
background: -webkit-linear-gradient(#cfcfcf, #656565);
background: -moz-linear-gradient(#cfcfcf, #656565);
background: -o-linear-gradient(#cfcfcf, #656565);
background: -ms-linear-gradient(#cfcfcf, #656565);
background: linear-gradient(#cfcfcf, #656565);
padding: 20px 0px 20px 0px;
-webkit-border-radius: 11;
-moz-border-radius: 11;
border-radius: 11px;
text-align:center;
}
table{
width: 100%;
}
p{
font-size:26px;
color:#FFF000;
}
td {
padding: 20px 0px 20px 0px;
font-size: 16px;
color: #ffffff;
text-align:center;
}
</style>
</head>
<html>
<div id="Vbutton" class="bg">
<table>
<?php
$id="1";
if(isset($_GET["id"])) $id=$_GET["id"];
$i=0;
$ip="";
$user="";
$pass="";
if(isset($_GET["deviceID"])){
$lien="http://".$user.":".$pass."@".$ip."/api/callAction?";
foreach ($_GET as $key => $value) {
$arg.=$key."=".$value."&";
}
$lien=$lien.$arg;
include ($lien); #ATTENTION modifier le php.ini pour authoriser les liens externes : allow_url_include = On
}
$path = $_SERVER['PHP_SELF']; // $path = /home/httpd/html/index.php
$file = basename ($path);
$get="http://".$user.":".$pass."@".$ip."/api/devices?id=".$id;
$json = file_get_contents($get);
$data = json_decode($json,true);
print "<img src=\"http://".$ip."/fibaro/n_vicons/User".$data['properties']['currentIcon'].".png\" style=\"width:50px;\" >";
foreach($data['properties']['rows'] as $item) {
        if ($item['type'] == "label"){
                foreach($item['elements'] as $elements){
                print "<p>".$elements['caption']." ".$data['properties']['ui.'.$elements['name'].'.value']."</p>";
                }
        }
        if ($item['type'] == "button"){
        print"<tr><td>";
                foreach($item['elements'] as $elements) {
                print "<a class='btn' href=\"".$file."/callAction?deviceID=".$id."&name=pressButton&arg1=".$elements['id']."&id=".$id."\"target=\"_self\">".$elements['caption']."</a> ";
                }
        print "</td></tr>";
        }
        if ($item['type'] == "slider"){
        $arg=$file."/callAction?deviceID=".$id."&name=setSlider&arg1=".$item['elements']['id']."&id=".$id."&arg2=";
                foreach($item['elements'] as $elements){
                print "<p>".$elements['caption']." ".$elements['value']."</p>";
                        for($i=0; $i <= 100; $i++){
                                if ($i == $elements['value']){
                                print "<a href=\"".$arg.$i."\" alt=\"".$i."\">*</a>";
                                }else{
                                print "<a href=\"".$arg.$i."\">.</a>";
                                }
                        }
                }
        }
}
?>
</table>
</div>
</html>

[xibman]

Pour le css je vous conseille d'utiliser Bootstrap: http://getbootstrap.com/

 

vous pouvez le charger via CDN : http://www.bootstrapcdn.com/

 

Ayant juste une HCL j'ai un peux de mal à  vous aider !

[Alain56]

Très bonne idée merci pour ce partage !

[NetIPSO]

Voici une nouvelle version : 

 

- Recuperation de l'icon du Module virtuelle

- Gestion du slider (avec une fonction "zoom")

- Ajout d'un select listant tous les modules virtuelle

- possibilité de mettre un fichier de config

- amelioration du refresh toute les 90s

<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8">

<?php
$ip="";
$user="";
$pass="";
include'./config.php';#Ajouter un fichier de config ou renseigner les informations ci-dessus
$path = $_SERVER['PHP_SELF']; 
$file = basename ($path);
$resol=800;
$slider_zoom=5;
$id="1";
if(isset($_GET["id"])) $id=$_GET["id"];
$i=0;
if(isset($_GET["deviceID"])){
	$lien="http://".$user.":".$pass."@".$ip."/api/callAction?";
	foreach ($_GET as $key => $value) {
	$arg.=$key."=".$value."&"; 
	}
	$lien=$lien.$arg;
	print "<div style=\"visibility: hidden;\">";
	include ($lien); #ATTENTION modifier le php.ini pour authoriser les liens externes : allow_url_include = On
	header('location: '.$_SERVER['SCRIPT_NAME']."?id=".$_GET['id']);
	print "</div>";
}
$delai=90; 
$url=$_SERVER['SCRIPT_NAME']."?id=".$_GET['id'];
header("Refresh: $delai;url=$url");
?>
<style>
.btn{
margin:0px auto;
text-align:left;
-webkit-border-radius: 11;
-moz-border-radius: 11;
border-radius: 11px;
-webkit-box-shadow: 1px 5px 3px #666666;
-moz-box-shadow: 1px 5px 3px #666666;
box-shadow: 1px 5px 3px #666666;
font-family: Arial;
text-color: #ffffff;
font-size: 20px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
  background-color: #bfbfbf;
  background-image: -moz-linear-gradient(1deg, #000000, #bfbfbf);
  background-image: -ms-linear-gradient(1deg, #000000, #bfbfbf);
  background-image: -o-linear-gradient(1deg, #000000, #bfbfbf);
  background-image: -webkit-linear-gradient(1deg, #000000, #bfbfbf);
  background-image: linear-gradient(1deg, #000000, #bfbfbf);
border: 2px solid #4a5032;
box-shadow: #6E7849 0px 0px 10px;
padding:20px 5% 20px 5%;
}	
.btn:hover{
background:#5cbf2a;
color:#ffffff;
border: 2px solid #ffffff;
box-shadow: #ff1d14 0px 0px 10px;
background-image: -moz-linear-gradient(1deg, #1e3dcc, #bfbfbf);
background-image: -ms-linear-gradient(1deg, #1e3dcc, #bfbfbf);
background-image: -o-linear-gradient(1deg, #1e3dcc, #bfbfbf);
background-image: -webkit-linear-gradient(1deg, #1e3dcc, #bfbfbf);
background-image: linear-gradient(1deg, #1e3dcc, #bfbfbf);
}
a{
color:#ffffff;
}
.bg{
width: 800px;
background: #000;
padding: 20px 0px 20px 0px;
-webkit-border-radius: 11;
-moz-border-radius: 11;
border-radius: 11px;
text-align:center;
}
table{
width:100%;
}
p{
font-size:26px;
color:#FFF000;
}
td {
padding: 50px 0px 50px 0px;
font-size: 16px;
color: #ffffff;
text-align:center;
}
.slider{
font-size: 36px;
background:#000;
color=#000;
text-decoration:none;
}
.slider_select{
background:#fff;
}
</style>
</head>
<html>
<div>
<form method="GET" >
<select name="id" onchange='this.form.submit()'>
<?php
$get="http://".$user.":".$pass."@".$ip."/api/virtualDevices";
$json = file_get_contents($get);
$data = json_decode($json,true);
foreach($data as $elements){
 print "<option value=".$elements['id'].">".$elements['name']."</option>";
}
?>
</select>
</form>
</div>
</html>
<div id="Vbutton" class="bg">
<table>
<?php
$get="http://".$user.":".$pass."@".$ip."/api/devices?id=".$id;
$json = file_get_contents($get);
$data = json_decode($json,true);
if ($data['properties']['currentIcon']==0){
print "<img src=\"http://".$ip."/fibaro/n_vicons/light.png\" style=\"width:r80px;\" alt=\"\">";
}else{
print "<img src=\"http://".$ip."/fibaro/n_vicons/User".$data['properties']['currentIcon'].".png\" style=\"width:90px;\" >";
}
foreach($data['properties']['rows'] as $item) {
	if ($item['type'] == "label"){
		foreach($item['elements'] as $elements){
		print "<p>".$elements['caption']." ".$data['properties']['ui.'.$elements['name'].'.value']."</p>";
		} 
	}
	if ($item['type'] == "button"){
	print"<tr><td>";
		print"<div>";
		foreach($item['elements'] as $elements) {
		print "<a class='btn' \" href=\"".$file."/callAction?deviceID=".$id."&name=pressButton&arg1=".$elements['id']."&id=".$id."&width=".$resol."&r=1\"target=\"_self\">".$elements['caption']."</a> ";
		}
		print"</div>";
	print "</td></tr>";
	}
	if ($item['type'] == "slider"){
	$arg=$file."/callAction?deviceID=".$id."&name=setSlider&id=".$id."&arg2=";
		foreach($item['elements'] as $elements){
		print "<p>".$elements['caption'].":".$elements['value']."  ";
		$min=(int)$elements['value']-$slider_zoom;
		$max=(int)$elements['value']+$slider_zoom;
			for($i=$min; $i <= $max; $i++){
				if ($i == $elements['value']){
				print "<a class=\"slider_select\" href=\"".$arg.$i."\" alt=\"".$i."\">*</a>";
				}else{
				print "<a class=\"slider\" href=\"".$arg.$i."&arg1=".$elements['id']."\">-</a>";
				}
			}
		print "</p>";
		}
	}
}
?>
</table>
</div>

Voila vraiment impressionnant ce que l'on peut faire avec cette box

[Moicphil]

C'est super ce que tu nous fais ! 

 

Je déplace dans "Tuto".

 

Peut tu éditer ton 1er post et mettre à  jour avec la dernière version  (ou indice ) , c'est plus pratique que de dérouler l'ensemble du sujet.

 

Merci

[NetIPSO]

Merci, franchement je pensais que ca existait deja... mais heureux de faire plaisir

 

Voila j'ai mis a jour la 1ere page avec la dernière version du script.

 

Ca commence a resembler a quelque chose, mais avec un beau CSS on pourrait faire un truc super pour info et  pour ceux qui veulent, ils peuvent facilement reprendre le CSS de la fibaro

[Moicphil]

Je viens de tester avec un module virtuel existant, la page php s'affiche bien avec tous les boutons, labels, etc... mais pas d'action lorsque j'appui sur un bouton.

Tu as une idée? ( j'ai bien mis le bon id dans la config php )

 

[NetIPSO]

as tu activer l'option :

allow_url_include = On

dans ton php.ini ?

 

c'est le seul problème que j'ai rencontré en plus c'est vicieux car par de message d'erreur

[Moicphil]

Ha ben non ! 

 

Mais c'est ou? je vois pas....

 

 

EDIT: Il faut que je créer un php.ini en fait c'est ca ?

 

Désolé mais j'y connais pas grand chose en php.

 

Dans ma page php.ini je met que "allow_url_include=On" ? ou faut il d'autres choses?