Domopress #3 : créez vos interrupteurs virtuels

Dans ce nouvel article dédié à Domopress, nous allons voir comment ajouter un interrupteur virtuel pour commander notre box domotique.

Dans le précédent aticle, nous avons vu comment ajouter une caméra IP ainsi qu’un widget météo. Cette fois-ci, nous allons plus loin et allons créer un interrupteur virtuel qui va envoyer une commande à notre box domotique.

Domopress et les commandes virtuelles

Le premier prérequis sera de connaître l’URL de la commande à appeler. En effet, nous allons fonctionner par le biais d’une requête http. Quand la box reçoit cette requête, elle exécute l’action correspondante : allumer une lumière, ouvrir la porte du garage, etc.

Si comme moi vous êtes sur Jeedom, rendez-vous dans le menu Général puis Affichage. Dans la colonne de gauche, sélectionnez l’équipement que vous voulez pilotez et repérez le lien nommé URL. Si vous cliquez dessus, vous verrez que la commande s’exécute. Faites un clic droit sur ce lien et copiez-le. Si vous êtes sur une autre box, les équipements sont très certainement également pilotables par le biais de requêtes http, je vous laisse vous référer à la doc pour récupérer les URL qui vont bien.

Création du bouton

Vos boutons personnalisés dans Domopress

Vos boutons personnalisés dans Domopress

Nous allons maintenant faire un peu de HTML pour créer notre bouton. Mais avant cela, nous allons installer un petit plugin pour faciliter son insertion dans la page, il s’agit de XYZ Html. Vous allez ainsi pouvoir créer vos boutons à l’avance, il ne vous restera plus qu’à les insérer ensuite dans votre page à l’aide d’un simple shortcode.

N’étant pas une brute en html, la méthode présentée ici est un peu cavalière et pas très élégante, mais elle fonctionne et c’est ce qui compte pour moi. Nous devons donc faire en sorte que lorsque je clique sur le bouton, la page correspondante s’ouvre pour que la commande s’exécute. Seulement voilà, cette page est vierge. Je dois donc faire en sorte qu’elle s’ouvre et se referme sans qu’on la voie. Je n’ai pas réussi à appeler l’URL sans ouvrir de page du tout, c’est sans doute faisable mais je n’ai pas les connaissances pour. J’ai donc dégoté un petit javascript qui permet l’ouverture et la fermeture automatique d’un popup. Il reste juste à régler le temps sur un délai très court, soit 1 ms.

Dans le plugin XYZ HTML, créez un nouveau snippet, et ajoutez-y le code suivant :

 

<head><!--Test of Pop Window Script BEGIN--><!--Open a popup window and close it in 1 millisecond--><script type="text/javascript">function PopWin(urlName) {var popup = window.open(urlName, "",'width=1,height=1');setTimeout(function(){popup.close();},1)}</script></head><body><!--Opening the popup, erasing the logs and resetting the page with a button--><FORM><INPUT type="button" value="ON" onClick="javascript:PopWin('http://URLDEVOTRECOMMANDE')" id="submitbtn"></FORM><!--Test of Pop Window Script END-->

Encore une fois, il existe sans doute une méthode plus élégante, mais Domopress fonctionne très bien comme cela ! Vous pouvez donc enregistrer le code.

Il nous reste à mettre en forme le bouton sur notre page Domopress. Vous aurez peut-être remarqué la présence de l’id « submitbtn ». Cet id va nous permettre d’ajouter quelques lignes de CSS pour donner à nos boutons l’apparence de notre choix. Conseil : ajoutez un plugin de type « custom CSS », cela vous facilitera l’ajout de CSS personnalisé.

Vous pouvez mettre quelque chose comme ceci :

 

#submitbtn {    background-color: 009EC5;    color: fff;    font-size: 20px;    text-decoration: none;    cursor: pointer;    border:none;  width:80px;    height:40px;}submitbtn:hover {    border: none;    background:#FF7A29;}

*NOTE : Pour des raisons que j’ignore, le texte copié me supprime un # au début de la ligne 14. Pensez donc à le rajouter.

Bien entendu, vous pouvez créer dans Domopress plusieurs types de boutons, d’aspects différents. Pour cela, il vous suffira de nommer votre bouton différemment, en changeant simplement l’id, soit id= »cequevousvoulez » et de rajouter les lignes de CSS qui vont bien en changeant submitbtn par cequevousvoulez.

Il nous reste maintenant à ajouter le bouton sur notre page Domopress. Editez donc la page, puis cliquez sur le bouton bleu HTML, votre bouton devrait être listé. Sélectionnez-le, enregistrez la page, puis affichez-la. Votre bouton devrait apparaître, cliquez et admirez le résultat !

Dans le prochain article, nous verrons comment récuperer dans Domopress des informations de notre box Jeedom.