Interface tactile Calaos Home

Pour ce premier Rétropixel je vais commencer avec un des projets me tenant le plus à cœur ! Calaos est un système domotique complet s’appuyant sur un équipement électrique dédié ainsi qu’une application embarquée accessible via un ou plusieurs écrans tactiles dans la maison. Au regard de la concurrence de l’époque, Calaos était résolument en avance sur son temps et prenait en charge un grand nombre de périphériques comme des caméras, des volets roulants, des mélangeurs RVB pour de la lumière ambiante, des interrupteurs ainsi que du matériel audio. Ce Rétropixel traitera de son interface tactile pour laquelle j’ai réalisé une prestation de design et d’intégration grâce aux librairies EFLs (Enlightenment Foundation Libraries).

Rentrée du Libre 2006

J’ai rencontré Raoul Hecky, l’un des fondateurs de Calaos à « La Rentrée du Libre » organisée à Strasbourg en 2006. En passant sur le stand de présentation du projet, j’ai tout de suite remarqué que Calaos Home, s’exécutait grâce aux EFLs. J’utilisais alors Enlightenment tous les jours, un gestionnaire de fenêtres sous GNU/Linux tirant parti de ces superbes librairies crée par Carsten Haitzler (alias Rasterman). En partageant note intérêt commun pour Enlightenment et les EFLs nous avons rapidement fait connaissance.

Une nouvelle collaboration

Le projet avançait bien et les premières installations chez les clients se déroulaient correctement. Cependant Raoul cherchait à améliorer l’interface graphique de Calaos Home. De plus le développement de certaines fonctionnalités complexes allait bousculer la logique de navigation qu’il avait alors mise en place dans cette première version. Il fallait tout revoir et aménager de la modularité pour les fonctionnalités à venir. Rendre le tout compréhensible par les utilisateurs et transformer le prototype fonctionnel en un produit accueillant au design pérenne. Raoul me proposa de contribuer sur tous ces points à la condition d’intervenir également dans l’intégration technique du design. C’est équipé de tout le nécessaire (un Calaos Server et un écran tactique) que j’embarquais dans l’aventure avec une tonne de choses à apprendre notamment l’utilisation des EFLs.

Enlightenment Foundation Libraries

Et les débuts n’ont pas été simples. Il a fallu appréhender pas mal de nouvelles notions dans un tout nouvel environnement de développement. Heureusement les EFLs sont extrêmement bien fichus et nous avons rapidement trouvé le moyen de travailler chacun de notre côté sans nous marcher dessus. Pendant que Raoul implémentait une nouvelle fonctionnalité, j’intégrais le design de chaque widgets nécessaire à la précédente. Grâce à un échange de signaux entre le cœur de l’application et l’interface nous pouvions travailler ensemble avec une grande souplesse. J’ai principalement utilisé Edje, la librairie d’animation. Elle disposait d’un visualiseur permettant d’exécuter le code des widgets qui composaient l’interface. On pouvait également y simuler l’envoi d’un signal et contrôler la bonne réaction de l’interface.

Par quoi commencer ?

L’interface était structurée en modules qui eux-mêmes comportaient plusieurs widgets, cela nous donna un ordre et des priorités. Une fois la navigation globale posée nous pouvions nous pencher sur chacun d’entre eux. Avant de commencer l’intégration, j’ai donc passé pas mal de temps à concevoir une structure permettant d’ajouter des modules qui allaient toujours avoir la même logique de navigation et d’interaction, le tout en restant attrayant même dans les modules de configuration ou d’édition avancée. Tout allait être fait sur mesure, avec des logiciels libres et dans un style bien particulier, il y avait un gros travail à fournir avant de voir quelque chose de concret et de fonctionnel.

Infographie et logiciels libres

Calaos fut ma première prestation couvrant autant d’aspects différents avec du logiciel libre. De l’iconographie au design d’interfaces en passant par de l’image de synthèse toutes ces techniques allaient être nécessaires à la réalisation de ce projet. Pour ce premier RetroPixels je propose d’aborder le projet par chaque technique et logiciel employé.

Des vecteurs avec Inkscape

Avec une tonne de boutons, d’icônes, de bordures, le tout dans différentes tailles j’ai rapidement opté pour du vectoriel afin d’avoir tous les composants d’interface exportables dans les tailles et résolutions souhaitées. Les Efls manipulent exclusivement des bitmaps et c’est pour cette tâche qu’elles sont performantes. J’ai donc commencé par constituer une bibliothèque d’éléments de base composant les premières vues. J’allais trouver les dimensions finales de mes widgets en avançant dans le projet, là encore le vectoriel prenait tout son sens.

Des layouts et des bitmaps avec The Gimp

Une fois tous les ces éléments de base réunis ou du moins une fois que j’en avais suffisamment pour créer les premières vues c’était au tour de Gimp d’intervenir. Le but était de mettre en page les principales interfaces ainsi que certains de leurs états avant de commencer l’intégration avec Edje. Le temps entre l’idée sur papier et une interface fonctionnelle était loin d’être négligeable avec les Efls.

C’était principalement dû au fait que l’intégration de chaque bitmap était un processus long, qu’il fallait réaliser avec soin, ensuite venait l’essentiel, l’écriture des fichiers de définition d’interface ainsi que les animations et les tests de réception, envoi de signaux. Avant de se lancer il valait mieux être assuré de la direction esthétique. La plupart des interfaces clés ont donc été entièrement mises en page avec Gimp afin d’avoir un aperçu du rendu final. En 2006 Gimp ne disposait pas (encore?) de système de groupement de calques c’était donc avec des fichiers avec 100 ou 200 calques que j’ai dû travailler sans pouvoir organiser des groupes facilement manipulables. C’était la partie la plus laborieuse. Mais avec de la patience …

Voici donc les premières vues qui ont permis d’étalonner toutes les autres. Du point de vue des couleurs, formes, style des éléments mais aussi de la navigation avec son menu principal au bas de l’écran le contenu principal au centre et des boutons navigation de coté à la façon d’une galerie photo. Avoir un style identifiable était important et dès l’écran de démarrage nous souhaitions avoir la sensation d’un produit fini. J’ai donc profité de cet espace pour animer un logo et une séquence d’introduction.

Un second niveau de navigation était disponible depuis l’écran principal. Avec un sous-menu il était possible de configurer le bureau de l’écran tactile avec différent widgets et jouets mais aussi d’accéder aux fonctionnalités de base comme redémarrer le système ou mettre en veille l’écran. Pour l’utilisateur il y avait donc deux navigations à assimiler celle du contenu d’un des modules (My Home, Media, Scenarios, Configuration) et celle des widgets qui à terme devait être accessible et installable depuis un catalogue. Calaos se voulait être ouvert aux développeurs en ce sens il était parfaitement possible de proposer de nouvelle fonctionnalité au travers de widgets. Toute cette logique se dessinait et une navigation propre aux widgets était nécessaire.

Le centre de configuration de Calaos Home a été un gros morceau. D’une part une interface de configuration avec autant de paramètres est difficilement digeste, d’autre part le fait d’avoir une interface tactile comme principal accès au système nous obligea à limiter les imbrications de fenêtre et de sous-fenêtres. Garder une navigation horizontale était une vraie préoccupation.

Nous souhaitions qu’à chaque mise à jour majeure l’utilisateur ait la possibilité de l’installer mais également de revenir en arrière si cela ne lui convenait pas. Le système était en perpétuelle évolution et nous souhaitions offrir la possibilité aux clients de faire partie des testeurs, de recueillir du feedback etc. Pour limiter les pannes matérielles le système Calaos était embarqué sur une machine disposant d’une mémoire flash. Raoul Hecky effectua un excellent travail pour garantir la stabilité des versions du logiciel car une fois le système flashé avec une nouvelle version il fallait s’assurer que dans tous les cas l’utilisateur puisse revenir a une version antérieure. Accessible depuis le menu de configuration cette interface était complexe et devait afficher pas mal d’information sur la nature de la mise à jour.

Le module media reprenait quant à lui la navigation des pièces du module Home avec une navigation là encore horizontale. Avec Calaos il est possible de définir plusieurs zones dans la maison et y diffuser la musique de son choix. Des fonctionnalités plus avancées comme la création de playlists était également disponible. Là aussi beaucoup d’animations venaient égayer l’interface.

Certains éléments, certaines vues ont eu une attention particulière. Les notifications de mise à jour par exemple avec une zone dédiée dans le coin supérieur droit de l’écran. Cette zone affichait un tooltip de notification mais aussi quelques pixels animés faisant office d’indicateur de progression ou d’activité. Tout l’interface et tous les éléments qui la composent ont été réalisés sur mesure afin d’avoir un certain style. Le widget de météo a également eu un traitement particulier avec toute une série d’icônes spécialement conçues pour se fondre dans le reste de l’interface.

Enfin, et pour clôturer cette section sur l’interface et Gimp nous devions également permettre à l’utilisateur d’effectuer des saisies via l’écran tactile. Plusieurs claviers virtuels ont été conçus pour différents types de saisie comme un titre de playlist ou une date pour un scénario. Dù au manque de certaines fonctionnalités dans Gimp, concevoir toutes ces interfaces a été un processus long et assez laborieux spécialement dans la gestion des calques, des groupes ou des documents embarqués. Cela dit, j’ai eu la bonne surprise de découvrir pour les besoins de ce RetroPixels qu’après dix ans les fichiers s’ouvrent parfaitement et sont pleinement exploitables.

Des polygones avec Blender

Pour l’accès aux pièces de la maison nous voulions, là encore, avoir un style particulier ou plus précisément nous ne voulions pas avoir dans l’interface une ou des photos représentant la maison en question. Nous aurions été dans l’incapacité de contrôler la qualité des images affichées. Dans la perspective de construire une image de marque, un produit, ce genre de détails est important. Nous avons alors opté pour une série de pièces types qui allaient être réalisées en image de synthèse et qui de fait allaient avoir le style et les couleurs désirés.

En suivant le même processus que le design des différentes vues à l’aide de Gimp et Inkscape, j’ai commencé par modéliser à l’échelle toute une série d’éléments qui allaient meubler ces futures pièces. Je ne souhaitais pas utiliser un catalogue existant car je voulait maitriser le style et fournir des fichiers dans des formats open source.

Une fois suffisamment d’éléments modélisés je pouvais les mettre en scène dans leur environnement. Toutes les pièces étaient vues sous le même angle afin d’avoir la même apparence sous forme d’icônes une fois placées dans l’interface.

Venait ensuite l’ajout de textures, souvent très simplistes. Là encore le contrôle était très important. En réduisant la taille de l’image finale les détails n’allaient pas être suffisamment visibles. Ceux-ci allaient même brouiller la lecture de l’image. Certains grands objets qui allaient occuper (même à plus petite échelle) une place importante de l’image méritaient une texture plus fouillée. Mais de façon générale le rendu allait être assuré par de simples couleurs mises en valeur par un éclairage satisfaisant et des ombres douces afin de garantir la lisibilité de la scène.

Voilà une des scènes rendues et finalisées, on peut remarquer que celle-ci supporte assez bien la réduction et ne perd que moyennement sa lisibilité. Une autre idée était que réserver une couleur prédominante pour chaque pièce afin que même dans la plus petite taille l’utilisateur puisse la reconnaitre sans trop d’effort de lecture. Cela allait être utile dans la création de scénarios ou la représentation de la pièce est servie par de très petites icônes.

En résumé

Calaos a été une sacrée aventure avec beaucoup d’investissement et riche en enseignements. Avec du recul je pense que les logiciels libres (pour le design de l’application) furent un choix judicieux même si cela a eu un coût non négligeable pour Calaos. Le manque de flexibilité ou de fonctionnalité vraiment basique ont pesé dans le temps de conception. Sur un projet aussi complexe cela a représenté des dizaines et des dizaines d’heures. Sans doute le coût à payer en 2006 pour avoir une base de ressources graphiques dans des formats open source et créées avec des logiciels libres. Encore aujourd’hui tous les fichiers que j’ai rouverts pour la rédaction ce RetroPixels, n’ont eu aucun souci de lecture ou de corruption. Une grande pérennité des formats donc. Le design quant à lui à un peu pris de l’âge même s’il tient bon. J’espère à l’avenir participer à d’autres projets de ce type. Merci à Calaos de m’avoir fait confiance, et aux lecteurs d’être arrivé encore une fois au bout de cet article. A très vite pour un autre RetroPixels.