MyVera – Faire un widget pour une télécommande, exemple de la Freebox

Dans cet article, vous trouverez un widget pour avoir une télécommande pilotant la Freebox version 6. Nous regarderons en particulier comment les commandes sont envoyées pour ne pas ouvrir Safari en mode standalone sous iOS.

Ce widget a été réalisé par slyos31 du forum Toute la domotique.

Il permet en cliquant sur une icône de widget dans MyVera d’ouvrir une fenêtre en popup qui affiche une représentation de la télécommande de la Freebox V. 6 pour la piloter.

freebox1Les fichiers sont téléchargeables ici: widgetFreeboxV6.zip.

Le principe

Dans MyVera, un « widget » est en fait une page web externe affichée dans une iframe.

Cette télécommande est un tableau d’ images (une par touche). Chacune d’elles est un lien du type:

<a onclick="makeRequest('vol_inc');return false;" href="#"><img alt="" src="images/plus.png" /></a>

Ici l’appui sur le bouton « + » du volume lance la commande javascript makeRequest avec le paramètre vol_inc.

La partie javascript est la suivante:

<script type="text/javascript" language="javascript">// <![CDATA[
       //AJAX source from http://www.captain.at/howto-ajax-form-post-get.php
      var http_request = false;

          function makeRequest(parameters) {
          http_request = false;
          if (window.XMLHttpRequest) { // Mozilla, Safari,...
             http_request = new XMLHttpRequest();
             if (http_request.overrideMimeType) {
                // set type accordingly to anticipated content type
                http_request.overrideMimeType('text/html');
             }
          } else if (window.ActiveXObject) { // IE
             try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                try {
                   http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
             }
          }
          if (!http_request) {
             alert('Cannot create XMLHTTP instance');
             return false;
          }
          http_request.onreadystatechange = alertContents;
          http_request.open('GET', 'http://hd1.freebox.fr/pub/remote_control?code=57249509&key=' + parameters, true);
          http_request.send(null);
       }

       function alertContents() {
          if (http_request.readyState == 4) {
             if (http_request.status == 200) {
                result = http_request.responseText;
		console.log(result);
             }
          }
       }

// ]]></script>

La fonction makeRequest met en place une requête de type XMLHttpRequest et envoie une commande http avec send.

Au retour de la commande, il n’y a rien d’affiché (fonction alertContents). Le contenu du retour (« result ») peut cependant être visible dans la console (« console.log »).

La commande http envoyée est du type: « http://hd1.freebox.fr/pub/remote_control?code=57249509&key= »+parameters

Ce type de script peut assez facilement être réutilisé pour d’autres commandes http afin de faire son propre widget.

Rester en mode standalone sous iOS

Il y a cependant une difficulté supplémentaire pour iOS: En mode standalone (application web affichée en plein écran hors de Safari), un clic sur un lien a pour effet d’ouvrir Safari pour y afficher la page pointée par le lien.

Il faut donc ne pas laisser faire iOS en redirigeant correctement les liens.

1. Dans notre exemple, il y a une solution assez simple: Le lien ne sert qu’à lancer une commande mais nous ne voulons pas de retour. Le lien ne pointe vers rien.
Il suffit d’interrompre la redirection du lien après le lancement de la fonction javascript en rajoutant return false;. La commande onclick est donc:

onclick="makeRequest('vol_inc');return false;"

2. Imaginons maintenant que vous souhaitiez afficher le résultat de la requête dans la page de votre widget, par exemple le mettre dans un « div » de votre page. La commande onclick sera la même mais nous devons ajouter dans la page les balises « div » en leur donnant un non (ici mydiv) et modifier la fonction alertContents:

Les balises div à ajouter:

<div id="myDiv"></div>

La fonction modifiée (avec innerHTML):

       function alertContents() {
          if (http_request.readyState == 4) {
             if (http_request.status == 200) {
                result = http_request.responseText;
		document.getElementById("myDiv").innerHTML=result;
             }
          }
       }

3 réflexions sur “MyVera – Faire un widget pour une télécommande, exemple de la Freebox

  1. Merci beaucoup ! J’avais fait ma télécommande pour neufbox mais j’avais le problème avec la redirection dans safari lorsque je cliquais🙂.

  2. Bonjour,

    Merci pour ce tuto !

    Par contre je remarque toutes les nouvelles icônes sera-t-il possible de les inclures dans ta nouvelle version ?

    Merci d’avance et très bon boulot !

    • Je suppose que les icônes dont il est question sont ceux en noir et blanc que j’utilise dans ma version avec effet jour/nuit.
      Ce sont en fait les mêmes icônes que ceux de la version normale mais sans couleur pour les appareils éteints.
      Je n’ai pour l’instant pas mis de pack d’icônes (car après il faut prendre le temps de gérer leur mise à jour). Mais je peux prévoir de mettre ceux-ci à disposition…

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s