Apr.26

S-Watch : pilotez votre domotique et objets connectés depuis une montre Samsung Gear S2 ou comment développer des applications Tizen connectées à Constellation

Heureux détenteur d’une montre Samsung Gear S2 depuis fin de 2015, j’admets l’avoir toujours autour du poignet depuis maintenant plus de deux ans !

Samsung Gear S2 Classic

Très pratique pour donner l’heure (private joke), elle permet aussi et surtout de recevoir tout type de notification de son téléphone quelque soit l’application (Facebook, WhatsApp, Twitter, Paypal, Amazon, SNCF et j’en passe), prendre ou refuser les appels, répondre aux SMS, rappel du calendrier,  mesurer sa fréquence cardiaque, ses pas, etc. Bref plus besoin de sortir constamment son téléphone de la poche !

Et forcément en bon développeur, j’ai très rapidement cherché à connecter ma montre dans la plateforme Constellation afin de pouvoir facilement piloter l’alarme, lumières, volets, thermostat, media-center, porte de garage ou même la voiture depuis le poignet !

S-Watch / Constellation

Découvrons dans cet article comment développer des applications Tizen pour votre montre Samsung et delà piloter votre maison et autre objets connectés du poignet avec Constellation.

Note : la première version (plus courte) de cet article a été initialement publiée dans le magazine Programmez! n° 201 en Novembre 2016.

Magazine Programmez! n° 201

Découverte du système Tizen

Samsung Gear

Concrètement la Samsung Gear S2 tourne sous l’OS Tizen 2.3, un OS open source basé sur Linux.

Initialement le projet a été initié par Samsung sous le nom LiMo (Linux Mobile) avant d’être renommé en 2011 par Tizen lorsque que Intel a rejoint le projet en abandonnant MeeGo. Depuis 2012, Tizen est développé par l’association “Tizen Association” qui regroupe entre autres : Samsung et Intel mais aussi Huawei, Fujitsu, NEC, Panasonic, Orange, NTT DoCoMo ou encore Vodafone.

Tizen

Dans ses premières versions, toutes les applications Tizen étaient développées en HTML/JS permettant de garantir la portabilité entre les différents devices. Depuis la version 2.0 de Tizen sortie en 2013, il est également possible de développer des applications natives. C’est également à cette date que Samsung a annoncé l’abandon de son précédent système Bada pour se consacrer exclusivement à Tizen.

On retrouve Tizen dans plusieurs devices : des smartphones comme la série Samsung Z (Z, Z1, Z3), des tablettes ou PC, des wearables comme les montres Samsung Gear, des TV comme la dernière UN65H8000AF qui tourne sous Tizen 2.3, des appareils photos (comme le NX1). L’OS a pour objectif d’équiper d’autres devices comme des produits d’électroménager (micro-onde, lave-linge, réfrigérateur, etc..), des voitures, des imprimantes, etc…

Installation du SDK Tizen pour la Samsung Gear S2

Note / Update 2018 : le SDK Tizen a été profondément revu en 2017. Il n’y a plus de Tizen IDE comme présenté dans cet article, il est remplacé par le nouveau “Tizen Studio 2.0” mais les principes reste les mêmes (même technologie, mêmes APIs) !

Tizen Studio 2.0

Pour commencer, rendez-vous sur le site développeur de la Samsung Gear pour télécharger le SDK.

A l’heure actuelle (décembre 2015), vous avez deux SDK : la version 2.3.1 et la nouvelle monture 2.4. Bien que la Samsung Gear S2 tourne sous l’OS Tizen 2.3, il est possible depuis le SDK 2.4 de développer des applications 2.3.x.

Avec la version 2.4 du SDK, le système de déploiement a été entièrement revu et pour avoir installé les deux versions, la 2.4 est nettement plus simple. Avant, avec le SDK 2.3.1, il fallait télécharger un “Web Installer” de quelques Mo (compatible Ubuntu, Windows et MacOS) et sélectionner les frameworks et outils souhaités :

SDK Tizen 2.3.1SDK Tizen 2.3.1

Avec le nouveau SDK 2.4, c’est un peu plus simple. Il existe deux packaging : la version CLI (ligne de commande) ou GUI (graphique).

SDK Tizen 2.4 Rev1

Une fois lancé, il n’y a aucune option à sélectionner hormis le répertoire d’installation et hop le tout est déployé sur votre poste.

SDK Tizen 2.4 Rev1

Une fois le SDK de base installé, il faudra lancer l’ “Update Manager”. A noter que vous pouvez à tout moment démarrer l’ “Update Manager” depuis le menu démarrer pour gérer les composants (ajout/suppression et mise à jour). On a ainsi la possibilité d’ajouter différents composants en cliquant sur le bouton Télécharger. C’est le même principe que sur le Android SDK Manager pour ceux qui connaissent ou encore que le Web Platform Installer pour Constellation.

Dans notre cas, nous allons donc télécharger le Framework “Wearable” 2.3.1 pour développer des applications pour la S2 ainsi que les outils du SDK Tizen (dont l’Emulateur Manager) mais surtout, dans la catégorie “Extras”, les extensions “Tizen Wearable” et le Certification Manager :

Installation du framework Wearable 2.3.1 - Update Manager - SDK Tizen 2.4 Rev1 Installation des Extras - Update Manager - SDK Tizen 2.4 Rev1

Apres quelques minutes, l’ensemble des composants sélectionnés sont installés. Dans votre menu démarrer, vous retrouverez l’Update Manager, l’IDE Tizen (basé sur Eclipse), le simulateur Web, le gestionnaire d’émulateur et un profiler de performance :

SDK Tizen 2.4 Rev1 installé !

Voilà votre environnement de développement Tizen est prêt !

Développer une application Tizen pour Samsung Gear S2

Pour développer une application Tizen de type “Wearable” (pour une montre par exemple), on peut soit faire une application “Web” en utilisant HTML5, CSS et du JavaScript ou soit une application native en C/C++.

Architecture Tizen

Note / Update 2018 : il est également désormais possible de développer des applications .NET Standard (.NET Core)

Ces applications Wearables peuvent être rangées dans deux catégories :

  • “Standalone” : fonctionne sur le device (comme une montre) de manière autonome
  • “Companion” : liée à une application “host” qui tourne sur un mobile (Tizen ou Android)

Type d'application Tizen

Hello World Tizen

Commençons par un bon vieux Hello World Tizen. Lançons l’IDE Tizen :

Lancement de l'IDE Tizen 2.4 Rev1

Le wizard de création d’un nouveau projet “Web” vous propose alors plusieurs templates de projet:

Wizard de création d'une Web App

Vous pouvez également, depuis ce wizard, parcourir les exemples prêts à l’emploi :

Samples Tizen

Pour créer une application native, il faut simplement sélectionner la perspective “Tizen Native” dans le menu à l’extrême droite :

IDE Perspectives

Revenons dans la perspective “Web” et créons un nouveau projet basé sur le sample “Hello Tizen” :

Template Hello Tizen

Dans le “Project Explorer” vous trouverez l’architecture standard d’une application Web :

  • des styles CSS
  • des fichiers de code Javscript
  • des vues HTML
  • une icone PNG pour l’application
  • un manifeste XML de description et configuration de l’application

Project Explorer

La page “index.html” est un simple Hello World avec des <div> et <span> :

Page index.html

Le code Javascript dans le fichier “js/main.js” changera le contenu du <span> lorsque que l’on clique sur la <div> principale :

Code JS du template

Rien de bien méchant, un hello world JavaScript en clair Smile

Testez et débuggez votre application dans l’émulateur

Pour exécuter notre application, le SDK met à disposition des émulateurs. Il suffit de lancer de “Emulator Manager” depuis l’IDE :

Emulator Manager

On pourra alors créer et configurer des machines virtuelles (résolution, CPU, RAM, capteurs, etc…) :

Emulator Manager

Puis en cliquant sur le bouton “Start”, votre VM avec un style qui reproduit fidèlement votre Gear S2 se lancera :

Emulateur Gear S2

Une fois votre VM démarrée, elle se connectera automatiquement à l’IDE que vous retrouvrez dans la fenêtre “Connection Explorer” :

Connection Explorer

Afin de pouvoir déployer votre application, il faut créer un profile de sécurité pour signer votre code. Pour cela il suffit d’aller dans la page de Préférences et sous la section “Tizen SDK > Security Profile” créer un profile avec un certificat existant ou auto-généré (bouton “Generate”) :

Security Profile

Maintenant il suffit de générer le package de votre application (“Build Package”) et de lancer son exécution (“Run As”). Ou plus rapidement, lancer le “Smart Launch” pour automatiser ces deux actions : Smart Launch

Deux modes sont alors possibles : “Run” pour lancer l’application simplement ou “Debug” pour lancer l’application avec l’inspecteur Chrome attaché.

Configuration de démarrage

Et voilà votre application Web Tizen tourne dans votre émulateur !

Hello Tizen

En changeant le mode de démarrage à “Debug”, vous avez l’inspecteur Chrome qui se lancera en même temps que l’application vous permettant de retrouver vos outils habituels en terme de débogage d’application Web :

Debug Chrome

Bref si vous faites du Web, vous ne serez vraiment pas dépaysé quant au développement d’application Tizen Sourire

Déployer et debugger votre application sur votre Samsung Gear S2

Maintenant que vous avons testé et validé notre application dans l’émulateur, nous allons la déployer sur une vrai montre !

Activer le mode développeur sur la montre et connectez-la à votre IDE

La première chose à faire est d’activer le débogage sur la montre. Dans les paramètres de votre montre, entrez dans “Infos sur Gear” et activez le “Débogage” :

Activation du debug

Ensuite connectez votre montre à votre réseau Wifi (réseau sur lequel votre poste de développement doit être également connecté) et notez l’adresse IP de votre Gear.

Depuis le “Connection Explorer” de l’IDE Tizen, ajouter un nouveau “Remote Device” en spécifiant l’IP de votre Gear et le port 26101 :

Connection de la montre à l'IDE

Vous devrez alors approuver la connexion sur la montre :

Approbation du debug par l'IDE

Maintenant votre montre est connecté l’à l’IDE Tizen de la même manière que l’émulateur :

Connection Explorer

Créer un certificat développeur

Cependant, si vous lancez l’exécution de votre application vous aurez un problème de “SIGNATURE_INVALID” car il faut d’abord demander à Samsung un certificat développeur pour pouvoir déployer une application sur votre montre !

Certificat non installé !

Pour cela, cliquez sur le bouton Création du certificat pour lancer un wizard de création du certificat :

Création du certificat

Première étape : générer une demande de certificat (CSR)

Commencez par remplir les informations de demande de certificat (CSR) :

Création du certificat

Une fois le CSR généré, cliquez sur le bouton “Request the certificate” du wizard.

Une page Web s’ouvrira où vous pourrez uploader votre demande de certificat sur le site de Samsung (il faudra au préalable créer un compte développeur sur le site de Samsung) :

Création du certificat sur le portail SamsungCréation du certificat sur le portail Samsung

Quelques secondes plus tard, vous recevrez par mail votre certificat (CRT) dans un fichier zip en pièce jointe :

Réception du certificat

Deuxième étape : générer le “Device Profile

Sur la page principale du wizard, cliquez maintenant sur “Request a device profile”. Une page Web s’ouvrira où vous pourrez alors sélectionner le privilège demandé et les ID des devices sur lesquels vous souhaitez déployer vos applications.

Si vous avez connecté votre Gear au “Connection Explorer”, vous retrouverez l’ID de votre device dans le tableau de droite.

Concernant les privilèges vous avez le choix entre :

  • Public : standard, ouvert à tout le monde
  • Partner : réservé aux comptes déclarés comme “partenaire”
  • Platform : accès complet au API du système, réservé à certain compte développeur

Les restrictions ne sont valables que si vous souhaitez publier une application sur le store. Dans notre cas, il s’agit d’un certificat développeur restreint aux devices que nous enregistrons. Nous pouvons donc demander les privilèges les plus haut : “Platform”.

Génération du Device Profile

Une fois la demande soumise à Samsung, le profile (fichier XML) vous sera envoyé par mail avec son mot de passe :

Reception du Device Profile

Il ne nous reste plus qu’à compléter le wizard avec le certificat (crt) que nous avons demandé à l’étape 1 et le “Device Profile” fraîchement reçu :

Enregistrement du certificat

Et voilà notre enregistrement est terminé, nous allons (presque) pouvoir déployer nos applications sur sur notre montre depuis l’IDE !

Enregistrement OK

Installer le certificat

Dernière étape avant de pouvoir déployer nos applications : il faut installer notre certificat développeur sur le(s) device(s) déclaré(s) dans le profile. Pour cela, depuis le “Connection Explorer”, cliquez simplement sur “Permit to Install application” du menu contextuel pour votre Gear concernée :

Installation du certificat sur la montre

Voilà, maintenant votre IDE et votre Gear S2 sont enfin opérationnels pour pouvoir déployer vos applications directement sur votre montre.

Déployez votre application sur la montre

Comme pour l’émulateur,  lancez le “Smart Launch” Smart Launch pour compiler, packager, déployer et démarrer votre application en sélectionnant non plus l’émulateur dans le “Connection Explorer” mais votre montre Gear S2 identifiée par son adresse IP.

Et voilà notre Hello World sur la Gear S2 Smile

Hello Tizen sur la montre

En sélectionnant le profile “Debug” vous aurez même la possibilité de faire du “Remote Debug” avec l’inspecteur Chrome directement sur votre montre !

Créer une application Tizen connectée à Constellation pour piloter sa maison ou sa voiture

Est-ce encore utile de vous présenter Constellation sur ce blog ? Winking smile

Constellation se définit comme une plateforme technique d’orchestration et d’interconnexion des objets, des services et des applications, multi-langage et multi-technologie, à destination des développeurs, makers, enseignants/chercheurs, étudiants et professionnels de l’informatique. Constellation permet développer rapidement des applications, des services, des pages Web ou objets connectés, en simplifiant le développement, le déploiement et l’administration tout en maximisant la facilité d’interconnexion.

Et comme vous le savez l’ensemble de mes systèmes (serveurs, media-center, multi-room, …), de ma domotique, objets connectés home-made ou non, sont tous connectés dans Constellation. Ainsi, si je connecte ma montre via une application Tizen à Constellation, je pourrais communiquer avec tous les systèmes, services et objets de la maison facilement !

Comme une application Tizen pour ma montre est ni plus ni moins qu’une application Web/Javascript, nous pouvons simplement utiliser la librairie JavaScript de Constellation et hop en quelques lignes de code le tour sera joué Winking smile

Pour simplifier d’avantage le code, utilisons AngularJS et  son module Constellation ! Bref une application Tizen en AngularJS connectée à Constellation Smile

Constellation

Créons donc un nouveau projet Tizen Wearable de base (template “Basic”) :

Création d'un projet Tizen vide

Ajoutons ensuite les libraires Constellation dans le dossier « js », à savoir :

  • JQuery et SignalR (les prérequis pour la librairie Constellation)
  • La librairie Constellation JavaScript en elle même
  • AngularJS pour simplifier le développement de notre application Tizen
  • Le module Constellation pour AngularJS

Soit 5 fichiers JS à ajouter dans notre projet Tizen :

Solution Explorer

Après avoir référencé ces libraires dans la page « index.html », éditons le fichier « app.js » à la racine du projet pour créer un contrôleur AngularJS en y injectant le module Constellation.

Nous initialiserons le client Constellation avec l’URI de votre Constellation et une clé d’accès :

Pour chaque StateObject reçu de la Constellation, stockons-le dans une variable de notre scope Angular ce qui nous permettra de les exploiter dans la vue HTML :

Pour rappel un StateObject est un objet de données produit et publié par un package d’une Constellation. Il représente une variable de type simple (numérique, chaîne de caractère, booléen, etc..) ou de type complexe (objet formaté en JSON). Les StateObjects sont tous stockés sur le serveur Constellation et peuvent être interrogés par n’importe quel package ou consommateur de la Constellation (sauf si des autorisations restreignent l’accès).

Pour finir notre code JavaScript, abonnons-nous aux StateObjects des différents packages de notre Constellation que nous souhaitons intégrer dans notre application Tizen.

Pour ma part je demande les StateObjects du thermostat Nest, des caméras de sécurité connectées à ZoneMinder, de mon système home-made de monitoring des ressources énergétiques S-Energy (basé sur un Raspberry) et S-Opener (gestion de la porte de garage), des capteurs NetAtmo et Oregon via un RFXCOM, de la domotique Z-Wave via une Vera, des media-centers Xbmc/Kodi, de mon ampli Pioneer, des onduleurs, de l’alarme (Paradox), des capteurs de luminosité home-made (à base de Raspberry et ESP8266), des capteurs hardware via WMI et ceux des routeurs DD-WRT ou Mikrotik.

Libre à vous d’intégrer ce que bon vous semble Smile

Pas besoin de plus de code, on peut dès maintenant éditer la page HTML pour créer notre interface ! La magie Constellation Winking smile

Affichage simple d’un StateObject en temps réel : la consommation électrique

Le sample “Basic” est créé avec la page suivante :

On a ici une page (div avec la classe “ui-page”) qui est définie comme la page de démarrage (ui-page-active) nommée “main”. Cette “page” contient un titre (ui-header) et ainsi qu’un contenu (ui-content) qui est une “listview” avec une seul ligne “Hello!”.

Remplaçons le titre ainsi que le paragraphe pour afficher la consommation électrique !

Cette information est capturée et publiée par le package S-Energy depuis un Raspberry Pi (relire ici) et depuis la fin 2015 par un ESP8266 nommé S-Electricity (relire ici). Quelque soit le moyen, au final il y a dans ma Constellation un StateObject qui porte cette information.  Comme nous l’avons vu plus haut, je me suis abonné aux StateObjets souhaités et à chaque mise à jour de l’un d’entre eux est stocké dans le scope AngularJS.

Utilisons le StateObjects Explorer de Constellation pour analyser le StateObject nommé “Electricity” et publié par le package S-Electricity :

StateObject Electicité

On cherche ici à afficher sur la montre la puissance active contenu dans ce State Object sous la propriété “WattPerHour”.

Ainsi il suffira d’écrire le code suivant :

Affichage simple

C’est aussi facile que cela ! Parcourrez vos StateObjects et sélectionnez les informations à afficher sur votre montre.  En avant plan notre application Tizen avec le StateObect de l’électricité capté par un ESP8266 et affiché en temps réel et en arrière plan, le même StateObject affiché sur le dashboard S-Panel.

Affichage des sondes NetAtmo et Oregon avec une listview

En partant de l’exemple précédent et en utilisant le StateObjects Explorer on pourrait afficher la température et l’humidité captées par les sondes NetAtmo avec le template HTML suivant :

Seulement pour rendre notre interface plus ergonomique, Tizen propose des composants (CSS/JS) prêts à l’emploi pour rendre le visuel plus agréable et respectant le look & feel de Tizen.

Quelques exemples :

  Composants Tizen

Composants Tizen

Composants Tizen

Dans notre cas, utilisons la “listview” pour afficher à la fois les StateObjects des capteurs NetAtmo, Oregon (RFXcom), Z-Wave et home-made (capteur de luminosité sur Raspberry et ESP8266).

Il suffit pour cela il suffit d’encapsuler nos StateObjects dans une liste HTML (ul/li) avec la classe CSS “ui-listview” ! On peut également définir des éléments “multiline”.

Et voilà le résultat :

 

StateObjects NetAtmo capteurs

Une belle interface pour afficher toutes les informations des différents capteurs quelque soit la technologie utilisée !

Ici chaque capteur a été “hard codé” dans le template HTML mais comme nous le verrons plus tard avec les devices Z-Wave nous pouvons aussi rendre l’interface entièrement dynamiquement avec un “ng-repeat” d’AngularJS pour itérer sur une collection de StateObjects.

Contrôle du thermostat Nest

La librairie Tizen fournit également quelques contrôles Javascript. Par exemple utilisons le « tau.widget.CircleProgressBar » qui nous attachons sur un élément « progressbar » lié au StateObject « Nest » (représentant mon thermostat).

Le code HTML est :

On affiche la température de consigne et actuelle au centra de l’écran et il devient alors possible de contrôler son thermostat en tournant le cadran rotatif de la montre :

Pilotage du thermostat Nest

Pour envoyer la température de consigne, il me suffit d’invoquer le MessageCallback « SetTargetTemperature » au package Nest par la ligne :

Et voilà comment piloter son thermostat en tournant simplement le cadran de sa montre avec ces quelques lignes de code !

nest

Thermostat Nest

Contrôle de la sonnette avec un toggleswitch

Pour reprendre ma sonnette connectée sur laquelle on peut “couper le carillon”,  on peut facilement ajouter le contrôle du mode « muet » de la sonnette sur notre montre. Il suffit d’ajouter une checkbox avec la classe “toogle switch” dont l’état est coché si notre StateObject « IsMute » est vrai :

Et lorsque l’on clique sur la checkbox, on invoque le MessageCallback « SetMute » en passant l’état inverse de notre StateObject :

De quoi contrôler la sonnette à n’importe quel moment depuis son poignet :

sonnette

Contrôle de la domotique Z-Wave

On peut aussi très facilement contrôler toute notre domotique Z-Wave. Pour ce faire, créons une listview (<ul>) pour tous nos StateObjects du package « Vera » afin d’afficher un toogle switch liée à l’état de notre module Z-Wave en utilisant un « ng-repeat ».

Et comme pour la sonnette, lorsque l’on clique dessus, on envoie un message au package Vera pour définir le nouvel état :

Et là encore, juste avec ces quelques lignes de code HTML on obtient une interface de contrôle de tous nos équipements Z-Wave (lumières, appliances, volets) sur notre poignet :

veraPilotage des devices Z-Wave / Vera

De ce fait, chaque objet, service ou programme connecté dans Constellation peut être facilement intégré dans vos applications Javascript, que ce soit une page Web, une application mobile Cordova/Ionic ou bien comme ici une application Tizen pour votre montre !

Comme tout StateObject est synchronisé en temps réel sur Constellation, chaque client, ci-dessous S-Panel et S-Watch, reflète le même état au même instant :

vera_spanel

Visualiser ses cameras analogiques ou IP via ZoneMinder

Autre exemple, le package ZoneMinder qui permet d’intégrer dans Constellation la plateforme ZoneMinder,  système de vidéo surveillance.

Rien de bien compliqué encore une fois car le package publie des StateObjects sur l’état de chaque caméra :

StateObject d'une camera ZoneMinder

Je crée donc une itération sur les StateObjects de ZoneMinder pour créer des sections dans lesquelles j’afficherai le “StreamPath”, nom de la caméra, son état et autres informations :

Et voilà une nouvelle fois, juste avec quelque ligne d’HTML, j’ai la possibilité de visualiser mes différentes cameras depuis ma montre :

 

Cameras ZoneMinder cameras

Autre fonctionnalité : l’alarme Paradox, le suivi des serveurs Windows, la voiture Tesla ou encore le contrôle de l’ampli Pioneer

Avec les StateObjects produits par le package Tesla, et sans rajouter de code, on retrouve toutes les informations sur sa voiture à son poignet (position, état, batterie, clim) avec la possibilité régler le chauffage, le toit ouvrant, faire des appels de phares, klaxonner, etc…

Pilotage de la Tesla

Pour l’alarme, encore et toujours le même principe. Je vous avais détaillé le fonctionnement de mon alarme Paradox en 2014. Comme chaque zone est un StateObject il est très facile d’afficher l’état des différentes zones de l’alarme sur la montre!

Contrôle de l'alarme Paradox

Rajoutons également les StateObjects du package HWMonitor pour suivre en temps réel la consommation CPU, RAM, températures, disques dur des serveurs !

servers

Autre fonctionnalité bien utile : piloter l’ampli Home-Cinéma ! Très pratique pour monter/descendre le volume depuis son poignet.

Contrôle de l'ampli Pioneer

Rien de bien méchant, le package Pioneer expose un MessageCallback pour allumer/éteindre l’ampli et un autre pour définir le volume. Il publie des StateObjects sur son état courant.

De ce fait voilà la vue HTML que j’ai écrite :

On affiche le StateObject du Volume et on utilise un “toggle-switch” lié au StateObject “Power”. Lorsque l’on switch d’état, on invoque la méthode “SwitchPioneerPower”.

De plus on a ajouté un “ui-circle-progress” comme pour le Nest pour contrôler le volume depuis le cadran relatif de la montre.

Cela m’oblige à rajouter ces quelques lignes de Javascript :

La méthode du scope “SwitchPioneerPower” permet d’invoquer le MessageCallback “SetPower” sur l’ampli pour “switcher” l’état.

On a également ajouté un handler sur l’événement “rotaryDetent” du contrôle “tau.widget.CircleProgressBar” pour détecter la rotation du cadran afin d’invoquer le MessageCallback “SetVolume” de l’ampli :

ampli

On contrôle ainsi le volume avec le cadran de la montre !

Pioneer VSX

Créer un menu de navigation

Pour finir notre application Tizen, je vais utiliser un “ui-selector” permettant de créer un menu à la Tizen.

Il suffit simplement de créer une <div> avec la classe “ui-selector” et d’ajouter des éléments enfants avec la classe “ui-item”. Sur chaque item, on rajoutera l’icône souhaitée, un titre ainsi que le lien vers la page à afficher :

Pour les icônes il faut les ajouter au format 56×56 en PNG puis les déclarer en CSS :

En obtient ainsi un beau menu pour entrer dans nos différentes pages :

Menu principal de l'application menu

Pour finir, on peut facilement ajouter un “loader” au démarrage de l’application le temps que l’application Tizen se connecte à votre Constellation.

Pour cela ajoutons une nouvelle page qu’on définira comme page de démarrage (ui-page-active). Cette page contiendra un loader grâce à la classe “ui-processing” :

Dans le code Javascript, nous allons simplement changer de page (location.href vers #main) lorsque que nous serons connectés à Constellation :

Pour rappel la page “#main” est notre menu principal créé juste au dessus. Et voilà, le tour est joué !

 

loading

Conclusion

Au final avec une petite centaine de lignes de JavaScript et environ 300 lignes de code HTML, j’ai pu créer une application Tizen pour ma montre Samsung Gear S2 me permettant au quotidien de garder un œil sur mes serveurs, ma consommation énergétique et les différents capteurs météo de la maison, voir en temps réel mes caméras de sécurité, piloter mon système d’alarme, les lampes et volets de la maison, le thermostat, l’ampli ou encore porte ma porte de garage.

Tout cela a été réalisé facilement grâce au SDK Tizen qui me permet de développer des applications avec les technologies standards du Web (HTML/CSS/JS), à AngularJS me permettant de définir des vues HTML sans devoir écrire trop de code et surtout à Constellation qui fédère tous mes objets, systèmes et services sur un bus temps réel accessibles en HTTP/S et de manière universelle (via les StateObjects et MessageCallbacks).

Dev,Constellation
Share this Story:
  • facebook
  • twitter
  • gplus

Leave a comment

Comment