Mode design JEEDOM: Une page live camera avec ses commandes

Dans le tuto précédent je vous expliquais comment créer une page qui rassemble en live 4 caméras.

Aujourd’hui nous allons voir comment visualiser (toujours en mode design) une seul camera avec les commandes (haut bas.. etc.):

camera-salon-final

 

Création des commandes de la caméra:

Pour pouvoir commander notre camera nous allons utiliser le plugin script. Si vous ne l’avez pas je vous invite à le récupérer sur le market de JEEDOM.

Une fois dans le plugin script, cliquer sur « ajouter ». On va le nommer « camera 2 ».

script1camera2

Passons à la créations des commandes:

Ajouter une commande.

ajoutcommandescript

Voici l’exemple pour la commande HAUT , il suffira de reprendre l’ajout de commande pour le bas, la gauche et la droite.

NOTE: Pour ma camera j’ai créé une commande STOP car l’envoi de la commande de direction ne s’arrête qu’en butée. J’ai aussi créé une commande POSITION ENREGISTREE. En effet la camera peut avoir plusieurs positions prédéfinieS. Donc cette commande me permet de remettre la caméra en position initial.

ajoutcommandeup

On choisi une icone. Pour selectionner facilement les flèches dans jeedom, vous pouvez mettre fa-arrow dans la barre de recherche. Vous aurez en bas de page toutes les directions.

Type script: HTTP

Type: action

Requette: Voir votre api ou l’exemple en photo.

Une fois le tout enregistrer, la vue de votre équipement devrait ressembler à ceci:

equipement-camera

Notre équipement est cré2, on va pouvoir l’utiliser sur notre page design.

 

Création de la page camera : (ici appelée camera 2).

Comme sur le tuto précédent . On va en mode design et le petit + vert pour créer une nouvelle page.

parametres-page

 

On nomme notre page camera (1/2/3…)

nouvelle-page-design

On enregistre via « D’accord »

L’étape suivant est de passer en « mode édition. »

Notre page est créer mais est complètement vierge. Il suffit de créer un nouvelle élément « lien/html »

On insère alors notre code (Attention modifier selon votre api et selon vos paramètres de réseau):

<html>
<body>
<BR>
<BR>
<BR>
<br>
<br>
<br>
<center>CAMERA SALON
</center>
<br>
<img src= »
http://ipetport/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=nomutil
&pwd=motdepasse
« style= »width:550px; height:350px; box-shadow:0 0 15px 5px grey; » />

</body>
</html>

On enregistre et c’est presque terminer. Le code nous affiche en haut « CAMERA SALON » et un peu plus bas le flux de la camera.

Pour ajouter les commandes il suffit d’ajouter un élément « Equipement  » et on va chercher notre commande  « Camera 2 » pour le placer sous notre flux.

Le résultat final nous permet de voir en live notre caméra et de la piloter:

camera-salon-final

Pour ajouter une image de fond je vous invite à voir le tuto précédent. Vous pourrez ainsi avoir quelque chose de très design et fonctionnelle.

N’hésitez pas à poser vos questions si il vous manque des étapes ;-).  Un commentaire fait toujours plaisir.

LBC Concept

Ancien ingénieur dans le secteur de l industrie, je travaillais sur des systèmes de conduite automatisée de ligne de fabrication. Aujourd'hui, j'utilise mes connaissances au service de la domotique.

Une pensée sur “Mode design JEEDOM: Une page live camera avec ses commandes

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *