Sébastien Warin

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.

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..).

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 !

Après plusieurs tentatives, je vous présente mon dernier “S” projet : 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

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.

 

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.

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

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.

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

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 :

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

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

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

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 :

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 :

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

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 :

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 ++) :

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.

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

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

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é !).

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 :

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

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 :

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

… afin de le connecter au 220V :

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

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 :

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

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 !

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 !

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 :

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 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 :

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 !

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 :

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 :

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 …

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 :

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) :

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 :

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 :

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.

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 :

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).

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 :

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 :

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 !

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.

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

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 :

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 :

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 :

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

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 :

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 :

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 :

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

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 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 :

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 :

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 :

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.

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…