Jul.15

S-Panel : une interface domotique et IoT multi-plateforme avec Cordova, AngularJS et Constellation–ou comment créer son dashboard domotique mural

Comme vous le savez surement, j’ai un tas d’objets et de services connectés : de la domotique Z-Wave, thermostat Nest, capteur météo NetAtmo, amplis et TVs connectés, lampes Hue mais aussi des réalisations “home-made” comme The Mirror, S-Light, S-Energy, S-Sound, etc…

Afin de connecter tout cela, j’ai créé au début de l’année 2014 une plateforme nommée “Constellation” permettant d’interconnecter mes objets et services dans le but de simplifier l’orchestration et le développement, permettre la collaboration entre ces systèmes et créer de l’intelligence ambiante.

Plateforme Constellation

Les cas d’usage de la plateforme ont déjà été abordé dans cet article, celui là ou encore celui là ! La puissance de la plateforme permet de faire dialoguer n’importe quel système ou objet une fois connecté à Constellation. Par exemple contrôler des lampes Hue depuis un Arduino ne représente que deux lignes de code : une pour se connecter à Constellation et l’autre pour envoyer un message ! De ce fait, il devient facile d’automatiser un tas de scénario en prenant en compte les informations de chaque objet ou service.

Au delà de la pro-activité de la maison, j’ai cherché depuis longtemps une interface domotique centrale. Il y a maintenant 2 ans j’ai réalisé “The Mirror”, une interface domotique cachée dans un miroir de mon entrée me permettant d’avoir accès à toutes les informations essentielles au moment de partir de la maison ou en rentrant (météo, temps de route, agenda, rappel, état des zones, etc..).

Comme expliqué dans cet article, le miroir n’est ni plus ni moins qu’une interface connectée à ma Constellation pour me présenter visuellement les différentes informations des systèmes connectés (comme mon agenda, les temps de route, météo, la domotique, etc..).

Constellation

Pour la pièce de vie de la maison, il me fallait également une interface me permettant un contrôle centralisé de l’ensemble des équipements : TVs, amplis, diffusion audio des différentes pièces, contrôle des mediacenters Kodi, des lumières, du chauffage, de l’alarme, suivi des compteurs d’énergie, disponibilité de mes sites web, contrôle hardware de mes serveurs, T° des pièces, cameras,  etc.. etc..

Bref un véritable dashboard de la maison connectée !

S-Panel logo

Après plusieurs tentatives, je vous présente mon dernier “S” projet : S-Panel !

S-Panel

Retour sur les pistes envisagées

Côté logiciel, comme tous les équipements sont connectés à Constellation, il me suffira de réaliser (comme pour le miroir) une interface graphique de pilotage en se connectant à Constellation. Cette partie sera abordée plus bas dans cet article.

Côté hardware, il me faut une tablette murale “assez design” et bien intégrée (c’est à dire ne pas avoir de bouton ou connecteur visible – surtout pour l’alimentation – ou encore ne pas voir le système attache mural). Malgré des mois de recherche, je n’ai jamais rien trouvé à l’exception de la tablette QUEL.

La tablette QUEL

Tablette murale QUEL de CurrentCost

Conçu par CurrentCost, cette tablette semblait idéale : destinée à être fixé au mur ou posé sur une table, elle dispose d’un écran tactile 7 pouces et d’une interface Wifi. Grâce à des encoches sur l’arrière la fixation est simple et l’intégration très esthétique (fixation murale propre et sans aucun fil qui dépasse).

Fournie avec un shell “Current Cost” elle est basée sur un système Android ce qui rendait possible une “customisation” du software !

Voir : http://www.univers-domotique.com/peripherique-android/1540-current-cost-tablette-domotique-quel-7-android.html

Seulement cette tablette n’a jamais trouvé son marché et n’a été commercialisé que quelques mois. Impossible aujourd’hui de la trouver !

Solution Zotac + écran touch USB

Début 2014, j’ai fait l’acquisition d’un écran touch USB (carte graphique intégrée) 10 pouces de la société LILLIPUT. Disposant d’un système d’attache VESA, je pensais l’installer au mur et “cacher” un mini-ordinateur ZOTAC sur lequel j’aurai déployé mon application Dashboard.

LILLIPUT 10,1 " Moniteur LCD Ecran avec mini USB Port Zotac Nano

Seulement l’écran n’est pas d’une qualité exception et c’est un écran résistif qui manque de finesse ! Aussi, l’écran est très épais, avec le support mural comptez plus de 8 cm de distance avec le mur.

Pour la certification WAF c’est pas gagné, j’ai alors abandonné cette piste ! Aujourd’hui je l’utilise sur mon bureau (voir la fin de l’article).

Solution Beaglebone + écran touch 7 pouces

Autre piste testée puis abandonnée, un Beaglebone couplé à l’écran touch de Chipsee sur lequel est déployé un système Android.

7" Touchscreen and Expansion I/O for BeagleBone Black7" Touchscreen and Expansion I/O for BeagleBone Black

L’écran étant “nu” (open-frame) je pensais que ca serait plus pratique pour l’intégration. Seulement c’est un module d’extension pour le prototypage, il chauffe beaucoup, la qualité de l’image laisse à désirer et de plus Android sur le BB est vraiment instable !

J’ai également testé Windows CE et Ubuntu dessus mais après une semaine de test j’ai abandonné cette piste : trop instable, ca ne passera jamais la certification WAF Clignement d'œil

La solution retenue : une tablette Acer Iconia One 8

Au bout d’un moment on commence à vraiment perdre espoir pour trouver “LA” solution parfaite pour mon besoin. Et puis j’ai reconsidéré mon projet : il me faut un écran touch avec un système type Android équipé du Wifi. En gros il me faut une tablette tout simplement !

J’ai donc repris mes recherches en partant sur une tablette avec un bon angle de vision, un connecteur USB pour l’alimentation et surtout avec des surfaces plates et sans aucune bordure au niveau de l’écran pour faciliter l’intégration.

J’ai trouvé mon bonheur avec la Acer Iconia One 8 qui est d’ailleurs bien moins cher que les 3 solutions au paravent testées.

Acer Iconia One 8

Les spécifications de cette tablette :

  • Android 4.4.2
  • 8 pouces en 1280 x 800
  • Intel Atom Z3735 : 4 cœurs à 1,33Ghz
  • 1Go de RAM
  • 16Go de HDD
  • Wifi a/b/g/n, Bluethooh 4.0, GPS
  • 2 caméras
  • Un port MicroUSB, mini-HDMI et jack 3.5
  • Batterie 4420 mAh
  • Dimensions : 215 x 130 x 8,5 mm pour 340 grammes

En clair un très bon rapport qualité prix pour un écran de bonne qualité avec de bons angles de vision et des performances au delà du nécessaire pour un dashboard.

De plus cette tablette dispose d’une application bien pratique pour l’usage : “Acer Touch WakeApp” permettant de sortir la tablette de veille posant son doigt sur l’écran (car une fois encadrée plus d’accès au bouton physique !).

Créer un encadrement pour la tablette

Pour le coup c’est un projet “maker” non-technologique : rangez votre étain et fer à souder Winking smile

Il nous faut :

  • Des chambranles pour le cadre
  • Des tasseaux de bois
  • De la pate à bois, enduit de lissage et papier à poncer
  • Boite à onglet & scie à bois
  • Quelques équerres & vis à bois

Pour commencer nous allons découper quatre morceaux d’un chambranle en sapin aux dimensions de l’écran :

Découpe du chambranle

Chambranles pour l'encadrementChambranles pour l'encadrement

Nous utiliserons ensuite des équerres avec de petites vis à bois pour assembler le cadre :

EquerreCréation de l'encadrement

Attention aux angles car la découpe à la scie n’est pas très précise :

Cadre OK

Pour “cacher les jeux” des angles, utilisez de la pate à bois puis poncez :

Rebouchage à la pate à boisPoncage

Pour donner du volume à notre cadre afin de cacher complètement la tablette, j’utilise un tasseau de bois (pour ma part 28mmx9mm) découpé en 4 parties puis cloué au cadre :

Découpe des tasseauxFixation des tasseaux de bois

Je consolide ensuite les angles avec des équerres en plastique pour ne pas alourdir d’avantage le cadre ! S’ensuive une nouvelle séance de rebouchage :

Renforcement des coinsRebouchage à la pate à bois

Pour finir collez un tasseau de bois de manière horizontale pour supporter la tablette à la bonne hauteur par rapport à l’ouverture du cadre :

Installation du support pour la tabletteInstallation du support pour la tablette

Maintenant la structure réalisée, utilisez l’enduit de lissage et du papier à poncer avec un grain fin pour avoir une surface parfaitement lisse !

Pour ma part j’ai d’abord peint l’extérieure dans un blanc cassé de la même couleur que notre mur pour casser l’effet d’épaisseur :

Enduit de lissage et poncagePeinture des bords (couleur du mur)

Et le cadre lui même est peint dans la même couleur que les portes et placards de notre cuisine pour garder une unité visuelle avec le reste du mobilier (WAF ++) :

Peinture du cadrePeinture du cadre

Pour finir il ne reste plus qu’à installer la tablette en la maintenant avec un tasseau de bois ! J’ai utilisé un câble Micro USB coudé de 30cm pour l’alimentation.

Installation de la tabletteFixation de la tablette

Et voilà, une tablette Android de bonne qualité encadrée proprement aux couleurs de notre intérieur :

S-Panel

L’installation dans la cuisine / salle à manger

C’est le point de non-retour : une fois le mur percé, il faut aller jusqu’au bout Smile

J’ai sélectionné le meilleur endroit pour installer la tablette avec comme prérequis la présence d’une prise 220V à proximité. Dans mon cas, juste au dessus d’un groupe de prise sachant qu’il s’agit d’un carreau de plâtre avec un vide de quelques centimètres : parfait pour y passer des câbles ! (j’avais déjà passé mes câbles audio et RJ45 l’an passé !).

Positionnement & Clou de fixation

Après avoir installer le clou pour soutenir le cadre, j’ai compté 8cm vers le bas pour installer une boite d’encastrement ! Ne reste plus qu’à sortir la scie cloche :

Emplacement de l'alimentation

Après avoir ouvert le mur, j’ai passé deux fils (N&L) connectés sur ma prise 220V plus bas :

Trou de scie clochePassage du 220V (neutre & phase)Connexions OK

Pour alimenter la Acer Iconia One 8, il vous faudra une tension de 5V (USB) avec plus d’un ampère ! Pour cela, j’ai utilisé le chargeur Acer fournie avec la tablette car le transformateur est vraiment très petit :

Découpe de l'alimentation USB 5V 1.35ADécoupe de l'alimentation USB 5V 1.35A

Après extraction, j’ai soudé deux fils connectés à un domino …

Alimentation USB 5V 1.35ASoudage du cable 220V

Alimentation USB 5V 1.35AAlimentation USB 5V 1.35A

… afin de le connecter au 220V :

Installation de l'alimentation dans une boite d'encastrement

Et voilà notre chargeur 5V/1.35A encastré dans le mur :

Alimentation dans le murConnexion de la tablette

Il ne reste plus qu’à y connecter notre tablette, la fixer sur le mur puis remettre le courant pour constater que l’alimentation est opérationnelle :

Alimentation OK

On obtient alors une tablette murale parfaitement intégrée dans l’habitat :

S-Panel installé !

Connecter une page Web dans votre Constellation avec AngularJS

Maintenant que l’on a une tablette Android accrochée au mur, on peut y installer des applications comme Yatse pour les media-centers Kodi, Imperihome pour la domotique ou des applications propre à chaque objet connecté (Nest, NetAtmo, Philips, Samsung, Pioneer, etc…).

L’inconvénient est qu’on se retrouve avec une multitude d’application ! Pas très pratique !

Constellation logo

C’est justement l’intérêt d’une plateforme comme Constellation : interconnecter les objets et services connectés ! La plateforme dispose d’un tas API .NET, Python, JavaScript, etc.. Comme chaque objet/système publie son état sous forme de StateObject, il suffit de récupérer et de s’abonner aux mises à jour des StateObjects pour afficher en temps réel les informations de tous les objets et services : des lampes à l’ampli, en passant par l’agenda ou le temps de trajet Google Maps !

AngularJS & BootStrap

Pour faciliter l’intégration graphique, j’ai réalisé mon dashboard en HTML/Javascript en utilisant le framework Bootstrap pour la mise en forme et le framework AngularJS pour avoir le minimum de ligne de code à écrire ! En effet, tout n’est qu’une histoire de template HTML !

Et ca tombe bien car la plateforme Constellation me mets à disposition un module pour Angular !

Pour démarrer il suffit de créer une page HTML et l’éditer avec votre éditeur/IDE préféré. Ensuite nous allons télécharger/installer les libraires AngularJS et le module Angular pour Constellation. Pour cela il suffit d’installer le package  “Constellation Client for AngularJS” depuis Nuget dans votre Visual Studio :

Installation du module Constellation pour AngularJS avec NuGet

ou par la ligne de commande :

Vous pouvez également vous servir de Nuget pour installer Bootstrap.

Dans notre page HTML nous allons ajouter les références vers les librairies JS téléchargés :

Toujours dans votre page nous allons simplement déclarer un contrôleur Angular en prenant soin d’injecter le module Constellation (nommé ngConstellation) :

A l’initialisation du contrôleur on se connecte sur notre Constellation (ici http://skynet-server.ajsinfo.lan:8888/constellation/) en spécifiant l’AccessKey (la clé d’accès est bien sûr à déclarer dans la configuration de votre Constellation).

Lorsque la page Web reçoit des mises à jour de StateObjects (onUpdateStateObject) je l’ajoute comme variable au scope courant.

Pour la part j’ai besoin des StateObjects du package S-Energy (compteur d’eau, gaz et électricité), des capteurs NetAtmo, de ma domotique Z-wave (package Vera), de mon thermostat Nest, les media-centers XBMC, mon ampli Pioneer, l’état de mon onduleur APC, de l’alarme Paradox, des temps de réponse de mes sites internet poussés par un script Powershell, des informations du jours (comme la fête du jour), de la luminosité ambiante (poussée par un capteur TLS), des prévisions de MeteoFrance, de mon agenda Exchange, du contrôle du son dans la cuisine et salle de bain (projet S-Sound) ainsi que des infos hardware de mon serveur CEREBRUM.

Toutes ces informations sont poussées dans la Constellation sous forme de StateObject car j’ai activé les packages (= connecteurs) pour chacun de ses objets ou services dans ma Constellation.

Pour m’abonner il suffit d’ajouter dans mon contrôleur les lignes suivantes :

La méthode requestSubscribeStateObjects permet de récupérer la valeur du dernier StateObject connu dans la Constellation et de s’abonner en temps réel aux mises à jour. La signature permet de spécifier quelle est la sentinelle source, le package source, le nom du StateObject et son type. Le wildcard « * » permet de tout récupérer.

Côté JavaScript c’est fini Sourire Reste le HTML à produire !

Afficher vos “StateObjects”

Vous vous souvenez du package Constellation “S-Energy” ! Le package écrit en Python grâce à l’API Constellation pour Python, capte la consommation électrique via un Arduino et la communique grâce à une puce nRF24 au package Python tournant sur un Raspberry.

Côté Raspberry, les informations sont encapsulées dans un StateObject “Electricity” et poussées dans la Constellation par la ligne :

Donc pour afficher ma consommation instantanée dans ma page Web, il me suffit d’écrire :

Comme certaine valeur peuvent avoir un nombre important de décimale, j’ai ajouté un filtre Angular que j’ai nommé “round” pour arrondir :

Ainsi en prenant mon thème Bootstrap, le code HTML complet pour afficher ma consommation électrique est le suivant :

Ce qui visuellement rend :

image

Une fois le principe du databinding d’AngularJS (avec la syntaxe {{ … }}) et la notion de filtre compris, libre à votre imagination pour afficher l’ensemble des informations que vous avez dans votre Constellation.

Le “Control Center” de la Constellation vous mets à disposition le “Constellation State Objects Explorer”, une simple page Web qui affiche dans un tableau tous les StateObjects de votre Constellation. Cela permet de découvrir toutes les informations que vous avez à disposition !

image

Vous pouvez également ajouter des conditions dans votre template HTML. Par exemple si l’on reprend les StateObjects publiés par l’alarme (revoir l’article) on peut facilement conditionner un template en ajoutant la balise “ng-if” :

En fonction du StateObject “AreaInfo1” du package Paradox, le template sera différent en fonction du mode d’armement de l’alarme :

Fig2

On peut également, grâce à AngularJS, produire du code HTML dans une itération. Par exemple le package “Exchange” dans ma Constellation publie un StateObject contenant les rendez-vous de mon calendrier pour les jours à venir.

Je peux, par exemple, créer un tableau HTML pour afficher chaque RDV dans une ligne (tr) grâce à la balise “ng-repeat” :

Ce qui nous donne :

image

Suivant ce principe j’ai ajouté les informations de ma station NetAtmo et autre capteur de température Z-Wave, l’état des zones de mon alarme, mes consommations d’électricité, eau et gaz (S-Energy), les prévisions Météo de la journée, le capteur de luminosité drivé par un Raspberry, les infos du jour, l’état et temps de réponse de mes sites Web, les informations de mes onduleurs, etc …

Ecran principal (1/2)

Ajouter des contrôles Bootstrap

Jusqu’à présent je me suis contenté d’afficher du texte dans mon template HTML. Pour rendre le dashboard plus agréable à lire, on peut également afficher certaines données avec des contrôles.

Prenons l’exemple du package “HWMonitor”. Il s’agit d’un package Constellation qui publie dans la Constellation toutes les informations “hardware” de la machine sur lequel il est déployé comme la consommation CPU, RAM, des disques dur, températures, etc.. etc..

Pour afficher la consommation du CPU (un pourcentage) j’utilise le contrôle ngPercentDisplay ! Après avoir installé et référencé cette librairie JS, j’ai ajouté dans mon template le code suivant :

Le résultat :

image

Difficile de faire plus simple ! Autre contrôle intéressant pour les pourcentages : la “progressbar” de Bootstrap UI.

Par exemple pour afficher le taux d’occupation de mes trois disques dur sur mon serveur (toujours via le package HWMonitor) :

image

On peut également citer Angular Chart (basé sur Chart.js) pour les graphiques. Je l’utilise pour afficher la température du CPU et mainboard de mon serveur :

image

Contrôler vos objets connectés en envoyant des messages dans la Constellation

Pour le moment notre page Web ne fait qu’afficher des StateObjects textuellement ou visuellement . Nous pouvons également envoyer des messages dans la Constellation pour piloter des objets comme la domotique Z-Wave, les media-centers, notre thermostat, etc…

Chaque package dans la Constellation peut exposer des “Message Callbacks”. Ce sont des méthodes invocables  depuis la Constellation. Chaque MessageCallback est déclaré et décrit au serveur ce qui permet à tout système connecté dans la Constellation de découvrir les MC.

A l’image du “StateObject Browser”, vous avez à disposition le “Constellation MessageCallbacks Explorer” permettant d’explorer sur une page Web l’ensemble des MC de votre Constellation avec un formulaire de test pour chacun d’entre eux :

image

Prenons l’exemple du thermostat Nest également connecté dans la Constellation. Le package “Nest” expose des “MessageCallbacks” pour définir le mode absent (que j’utilise quand l’enclenche mon alarme par exemple) ou la température de consigne.

image

Dans mon interface Web, je vais donc afficher la température de consigne courante ainsi que la température ambiante mesurée par le Nest (propriétés de mon StateObject publié par le Nest) et ajouter des boutons pour monter ou descendre cette température de consigne grâce au Message Callback “SetTargetTemperature” exposé par le package.

Cela se matérialise par le code HTML suivant :

Dans le code Javascript de mon contrôleur j’ai déclaré la méthode “SetTargetTemperature” pour envoyer le message dans la Constellation à destination du package Nest pour incrémenter ou décrémenter la température de consigne de 0,5°C :

Et voilà, notre dashboard peut maintenant de piloter notre thermostat :

image

Autre exemple avec le pilotage des volets.  Dans mon cas ils sont tous connectés en Z-Wave grâce à des micromodules Fibaro (FGRM) et pilotés via la box Vera (elle-même connectée dans la Constellation).

Vera Lite

Je vais donc pour chaque volet, afficher un slider (contrôle Angular Bootstrap Slider) me permettant de définir le pourcentage d’ouverture de mon volet.

Comme pour l’agenda, il s’agit de faire une boucle (ng-repeat) sur tous les StateObjects dont le type est “VeraNet.WindowCovering” pour ajouter une ligne dans un tableau HTML contenant un slider.

La valeur du slider est “bindée” à la propriété “Level” du StateObject, c’est à dire au niveau d’ouverture du volet.

Ce code HTML permet d’afficher :

image

Lorsque je bouge un des sliders, la méthode SetWindowCovering est invoquée. Déclarée dans mon contrôleur Angular, cette méthode récupère l’ID du volet grâce à l’attribut posé sur la balise slider et envoie un message dans la Constellation à destination du package “Vera” pour indiquer la nouvelle valeur d’ouverture (= la valeur du slider) pour l’ID du volet sélectionné :

Et voilà comment recréer facilement une belle interface pour sa domotique Z-Wave.

Pour finir on peut faire de même avec des switchs “On/Off” que j’utilise notamment pour les lumières :

image

Le principe est le même, on itère pour chaque StateObject de type “Switch” pour afficher un switch On/Off (qui est en fait un radio button HTML). Dès que la valeur du switch est modifiée on envoie un message au package Vera pour donner l’ordre au module Z-Wave. Bien entendu comme la Constellation (tout comme le Z-Wave) est bi-directionnelle, le fait d’allumer (ou éteindre) une lumière manuellement modifiera votre interface instantanément !

Ecran principal (1/2)Ecran principal (2/2)Ecran Lumières/Volets

Contrôler ses équipements multimédia

Déjà présenté dans cet article, mon système de diffusion audio multi-room, nommé S-Sound est basé sur Constellation. Rien de plus simple d’intégrer le contrôle du son dans S-Panel.

ssound

Sélection de l’entrée audio, choix des radios ou contrôle du volume (tout est déjà détaillé dans cet article) :

image

Pour le salon, ma TV Samsung est également connecté à Constellation tout comme mon ampli Pioneer VSX ! Cela permet de contrôler l’allumage, contrôler le volume ou encore sélection l’entrée vidéo de l’ampli :

image

Dommage que la box Numéricâble ne se pilote pas !

Dans la chambre, ma veille TV Panasonic de 2007 n’est pas connecté, cependant je peux grâce à une prise Z-wave AN-158 piloter la marche/arrêt via la box Vera :

image

Dans la chambre comme dans le salon vous remarquerez le bouton “Wake up Kodi” qui s’affiche lorsque l’intel NUC associé n’est pas allumé. En HTML j’affiche le bouton uniquement si le StateObject du XBMC concerné n’est pas connecté :

Lorsque l’on clique sur le bouton, on envoie un message Constellation pour le package WakeOnLan qui s’occupe de générer des “magic packets” sur le réseau pour réveiller les machines (c’est ce package qui est utilisé pour réveiller The Mirror).

Lorsqu’un film/série est en lecture sur un des Kodi, le package XBMC publie dans un StateObject l’état de la lecture et le média en cours de lecture. On peut ainsi afficher dans S-Panel les informations sur le média et des touches de contrôle :

Contrôle Kodi

Pour ma part j’affiche la pochette du média, le titre et deux boutons pour mettre pause ou arrêter la lecture :

Et voilà de quoi mettre pause en courant dans la cuisine chercher le popcorn Clignement d'œil

S-Panel : onglet Son/Vidéo

Encapsuler notre dashboard dans une application Android avec Cordova

Le point intéressant dans notre développement est qu’il s’agit d’une simple page Web donc multi-plateforme accessible aussi bien sur un mobile, qu’une tablette ou un ordinateur peu importe l’OS utilisé.

Seulement pour revenir à notre tablette “S-Panel” sous Android ce n’est pas très joli ni pratique d’avoir à ouvrir un navigateur pour lancer notre Dashboard ! Il nous faut une véritable application en plein écran que l’on pourra lancer automatiquement au démarrage d’Android.

Pour cela nous allons réaliser une application avec Apache Cordova (ex-PhoneGap). Pour l’installation je vous invite à consulter l’article de Grafikart ou encore le site officiel.

Créons notre projet “SPanel” grâce à la commande :

Ensuite ajoutons la plateforme cible “Android” (sans oublier d’installer le SDK Android avant – plus d’info ici) :

Si vous souhaitez compiler cette application pour d’autre plateforme, n’hésitez pas à les ajouter à votre projet :

Pour afficher une page Web en plein écran nous allons utiliser le plugin “InApp Browser” que nous ajoutons à notre projet grâce à la commande suivante :

Création de l'application Android

En éditant le fichier “index.js” (dans “www > js”) nous allons au démarrage de l’application (dans la méthode “onDeviceReady”) ouvrir notre page Web en désactivant la barre d’adresse, le zoom et le bouton “back”.

Pour un bel effet visuel, je lance le “InAppBrowser” en “hidden” et l’affiche lorsque la page est chargée.

Autre détail qui à son importance : masquer la barre de statuts Android en haut de l’écran pour avoir notre dashboard en plein écran !

Pour cela ajoutez dans le fichier “config.xml” :

Seulement ca ne suffira pas car l’activity de l’IAB ne tient pas compte de ce paramètre. Vous pouvez tenter d’installer le plugin “StatusBar” pour cacher la barre manuellement (StatusBar.hide()) mais ca ne changera rien !

Alors pour forcer l’IAB à se lancer en plein écran sans la barre de statuts il vous faudra modifier le code du plugin !

Pour cela éditez le fichier “InAppBrowser.java” dans le répertoire “platforms > android > src > org > apache > cordova > inappbrowser” et ajoutez à la ligne 711 :

Voilà notre application est prête, il ne reste plus qu’à la compiler :

Nous pouvons maintenant copier l’APK généré (dans le sous dossier “platforms > android > build > outputs > apk”) sur la tablette pour installer l’application.

A noter que vous pouvez également tester votre application dans l’émulateur Android via la commande :

Ou encore déployer et débugger votre application sur votre tablette en la connectant en USB à votre ordinateur via la commande :

Compilation et émulation de l'application sous Windows

Vous pouvez également personnaliser le manifeste de votre application (fichier “config.xml”) pour définir le titre de l’application, sa description, infos sur l’auteur, etc… Personnalisez également l’image de l’écran de démarrage (splashscreen) et icones de votre application (fichiers PNG dans le sous-dossier “platforms\android\res”).

Enfin, pour lancer l’application automatiquement au démarrage de la tablette installez le plugin “cordova-plugin-start-on-boot” :

Il ne nous reste plus qu’à lancer l’APK sur la tablette pour installer l’application :

Installation de l'application S-Panel

Et voilà notre dashboard en plein écran sur la tablette Smile

Comme il s’agit d’une application Android et que notre application Web Bootstrap est responsive, elle fonctionne aussi bien sur nos smartphones. Ici sur mon Sony Xperia Z1 :

S-Panel sur smartphoneS-Panel sur smartphone

S-Panel dans une application Windows 8.x / Windows 10

Sans trop d’effort nous pouvons également créer une application Windows 8.x ou 10.

Il suffit simple d’ajouter la plateforme “Windows” à notre projet Cordova et la compiler :

On peut alors tester notre application dans le simulateur Microsoft Surface :

S-Panel sur Windows 8.1

Personnellement je l’ai installé sur mes différents PC Windows afin d’avoir un accès rapide aux différents objets de la maison depuis l’écran d’accueil Windows :

Application S-Panel sur l'écran d'acceuil

Très pratique, on peut alors docker l’application en plein écran sur des parties de l’écran. Vous remarquerez sur la dernière image le côté “responsive” de notre application qui est capable de s’adapter même sur une surface étroite :

Application S-Panel au 3/4

Application S-Panel côte à côte

Application S-Panel à 1/4

Conclusion

C’est donc avec une simple tablette Android, quelques morceaux de bois et un peu de peinture que j’ai pu construire un dashboard domotique parfaitement intégré pour la maison.

P1170571

Grace à la plateforme Constellation, ses nombreuses API et ses connecteurs, interconnecter ses objets ou services et réaliser des interfaces de contrôle sont des choses simples et rapides à faire. De plus avec des frameworks comme AngularJS cela ne nécessite quasiment aucune ligne de code Javascript comme vous avez pu le découvrir à travers cet article.

Encapsulé dans une application Cordova, ce dashboard est déployé aussi bien sur nos smartphones, tablettes et même les PC que ce soit sous Android que sous Windows 8.x/10 afin de retrouver un contrôle immédiat sur la maison : contrôle des media-centers, du multi-room, du thermostat Nest, de l’alarme Paradox, de la station météo NetAtmo, de l’agenda, de l’ampli Pioneer, des lumières et volets, etc.. etc…

SPanel

Constellation
Share this Story:
  • facebook
  • twitter
  • gplus

Comments(17)

  1. Toto
    le 15 juillet 2015 à 14:23

    Juste pour info car j’ai découvert ça recemment, pour la « transformation » en appli android, on peut utiliser la fonction « Add to homescreen » aussi de chrome si la page web contient les bonnes informations (https://developer.chrome.com/multidevice/android/installtohomescreen).. Ca peut, peut-être, éviter l’utilisation de Apache Cordova… ou pas ! 😉

  2. Sebastien
    le 15 juillet 2015 à 14:41

    Hello,
    Merci pour l’info en effet je ne connaissais pas cette fonctionnalité ! Bon pour ma part l’utilisation de Cordova etait nécessaire car j’ai une authentification basic sur ma page Web S-Panel ! Le InAppBrowser de Cordova charge la page avec le format http://user:pwd@xxxxx/spanel ce qui me permet de gérer nativement l’authen 😉
    De plus grâce à Cordova j’ai pu dans la foulée générer l’application pour mes PC & tablette Windows!
    Mais je garde cette info sous le coude 😉

  3. Hydro
    le 15 juillet 2015 à 15:40

    Salut,

    Super boulot, ça rend super bien sur la tablette ! Hâte de pouvoir tester tout ça 🙂

  4. Mario Vernari
    le 16 juillet 2015 à 12:55

    Very nice project and very nice article, indeed: congrats.
    We’re going to complete something similar but the problems are many more than your solution. The goal is to avoid the UI programming, and move (keep) all the configuration in a tiny section on the server side (node.js).
    A nightmare, but probably we’ll be able to show off something sooner.
    Cheers

  5. Romain
    le 19 juillet 2015 à 01:23

    Salut,
    Super boulot, j’ai aussi une tablette dashboard sous cordova mais je suis confronté à un soucis depuis un moment…. Le cache de l’application grandi continuellement avec les appels JS, etc. Avez vous aussi ce problème ?
    Avez vous trouvé un moyen pour vider le cache quand l’appli démarre par exemple ?

    Encore bravo pour tout le système domotique 😀

  6. Marc
    le 21 juillet 2015 à 17:16

    Bonjour,

    La suite constellation est-elle disponible ?
    merci pour les infos,

  7. Stuart
    le 26 juillet 2015 à 16:42

    Hi Sebastien,
    Just wanted to drop you a note to thank you for the excellent music streaming application! Installed, in seconds and now enjoying YouTube on my SONOS 🙂
    Hope the donation goes a little way towards you continuing the good work !
    Thanks
    Stuart

  8. Eric
    le 31 juillet 2015 à 14:08

    Super article ! Bravo ! Comment peut-on tester Constellation ? Est-ce possible d’être béta-testeur ?

  9. site recommandé
    le 31 juillet 2015 à 16:23
  10. Trackback: Créez votre “Home Analytics” : l’analyse et le reporting de votre domotique, informatique et objets connectés avec ElasticSearch, Graylog, Kibana et la plateforme Constellation - Sebastien.warin.fr

  11. Trackback: Contrôlez votre maison avec la télécommande de la TV

  12. Hydro
    le 18 janvier 2016 à 11:15

    Salut.

    J’ai vu sur ton dashboard tu as différentes sondes suivant les pièces. Quel type de hardware utilises-tu pour la température / humidité / pression / gaz ?

    Est-tu parti sur du esp8266 ou sur une autre plateforme ? Je suis en pleine réflexion sur le hw à utiliser pour ce genre d’info, ton retour d’utilisation m’intéresse fortement.

    Merci 🙂

  13. Sebastien
    le 19 janvier 2016 à 18:09

    Hello Hydro,
    Plein de technos différentes, c’est l’avantage d’utiliser une plateforme comme Constellation, elle permet d’interconnecter tout type de device!
    Historiquement j’ai bcp de sonde Z-Wave (T°, humidité) mais des capteurs via l’alarme (voir mon article sur les alarmes Paradox), des capteurs RF, et depuis pas mal de capteurs type NetAtmo (pression, sonomètre, T°, CO2, pluie, etc…), Nest, Fitbit, etc…
    Et puis à côté de tout ça j’en réalise aussi pas mal autour de RPi, Net Gadgeteer, NetDuino, Arduino ou plus récent ESP8266. Par exemple, ma conso electrique c’est un Arduino, mon compteur de gaz & eau c’est un RPi comme la luminosité (Luxmetre) extérieure (un RPi) et pour l’intérieur c’est des ESP8266 (7€ le capteur !!) installer dans différentes pièces.
    Depuis qqs mois, je mise tout sur l’ESP8266 permettant de réaliser des capteurs très peu cher connectés en Wifi à Constellation ! Idéal pour équiper massivement la maison de capteurs/actionneurs en tout genre!
    Grace à Constellation tout communique facilement sur le même bus, me permettant d’integrer tout ca dans des dashboards génériques comme S-Panel, dans des systèmes d’analytics comme Kibana/ElastricSearch, ou encore de créer des « IA » en Python ou C# sans se focaliser sur « comment accéder aux données ou fonctionnalités » de mes objets/services 🙂
    A+

  14. Guillaume
    le 25 mai 2016 à 15:32

    Bonjour,
    Votre article est excellent.
    Cela fait des mois que j’essai de trouver un moyen de mettre une tablette au mur.
    Au niveau de l’alimentation de la tablette . Il n’y a pas un risque de la laisser branché en permanence ?
    La batterie ne risque t -elle pas de gonflé?
    Et encore merci pour cette excellent article.

  15. Anselme
    le 5 juin 2016 à 21:34

    Une autre solution intéressante : http://smarticase.com/products/smartipi-touch 🙂

  16. Trackback: Fonctionnement de la fibre Orange et remplacement de la Livebox par un routeur Mikrotik sous RouterOS – Petit aperçu de mon réseau local, du GPON, de l’IGMP, Asterisk et Cacti sans oublier Constellation - Sebastien.warin.fr

  17. Trackback: S-Electricity : connecter son compteur d’électricité en Wifi dans Constellation - le remake d'S-Energy avec un ESP8266 - Sebastien.warin.fr

Leave a comment

Comment