Petit zoom sur les sliders intégrés pour les nouveaux mokups. Ci-dessous un objet Edje pour le contrôle des lampes à variateur. Un bouton permet d’ouvrir l’objet dans la liste afin d’accèder aux options supplémentaires …

À l’aide de l’écran tactile l’utilisateur peut “slider” et augmenter ou diminuer l’intensité d’une lampe.

Avec Edje ce genre d’éléments est très simple à faire. De plus nous pouvons ajouter toutes sortes d’animations et effets graphiques.

Une petite vidéo pour illustrer tout ça.

Je travaille également à la recherche des mokups concernant les questions posées à l’utilisateur, la demande d’une saisie et éventuellement des tooltips. J’essaie de trouver un type d’affichage.

Les bandeaux resserrés concentres l’attention autour des boutons de confirmation ou d’annulation pour une question. Dans le cadre de la saisie je ne suis pas certain que l’utilisation du même mokup soit une bonne chose. Cela dit cela unifie graphiquement l’intéraction avec l’utilisateur.

Affaire à suivre

L’intégration de la vidéo surveillance est terminé. Le thème edje est en place, et le code est fonctionnel. Les clients ont pu mettre à jour leur interface avec ces nouvelles “features”. Viens maintenant la conception graphique des mokups et l’intégration edje du module audio à partir de certaines idées et certaines contraintes à la fois techniques et ergonomiques.

Une idée c’est souvent une feuille volante pleines de gribouillis issus d’un brainstorming traînant sur un coin de table, C’est ensuite une interrogation plus ou moins longue devant l’écran de votre ordinateur a scruter ces quelques bribes représentées à la hâte sur papier en vous demandant comment vous allez bien pouvoir réaliser ça

Pour le module audio, rien de bien complexe pourtant ! Un player classique avec toutes les fonctions habituelles que l’on souhaite avoir sur ce type de logiciel. La chose devient plus corsée quand il s’agit de retrouver le même fonctionnement que dans les autres modules. Garder la simplicité, mais également l’aspect graphique alors que la masse d’information et d’action à représenter y est bien plus importante.

L’ergonomie devait également rester identique aux précédentes sections de l’interface. Le module offrant l’accès à plusieurs “player” situés sur le réseau, nous avons pu adopter le même système de navigation que dans le module “My Home” ou “Camera”. Naturellement toutes les informations présentes pour un titre en cours de lecture se devaient d’être affichées (pochette, titre, année etc.) J’ai commencé à créer les différentes ressources svg pour réaliser les mokups.

Dans un premier temps les objets graphiques pour des boîtiers de cd, boutons du lecteur etc. Un objet edje sera créé pour afficher un album avec sa boîte et l’image de la pochette chargée depuis Internet.

Une autre nouveauté, des objets de liste qui s’ouvrent pour afficher les informations de la piste.

Utile également, les sliders pour gérer le niveau d’intensité pour une lampe, d’avancement pour une piste ou de niveau pour le volume.

À l’heure actuelle, les mokups commencent à prendre forme avec (je pense) une bonne intégration de la logique de navigation utilisée jusqu’ici. Quand on accède au module via le menu principal, l’interface vous propose la sélection des players actifs, ou disponibles sur le réseau domestique. Les informations de la piste sont mises en valeur par la couleur et l’animation du cd qui tourne pour les lecteurs en fonctionnement.

L’utilisateur sélectionne ensuite le lecteur qu’il désire paramétrer. Le contenu de la playlist apparaît permettant une première navigation et un éventuel ré-ordonnancement des pistes. Les détails des pistes sont accessibles ainsi que le contrôle du volume et les options du périphérique de sortie pris en charge (liste vide à droite de l’interface). Une surbrillance de la piste en cours permet de la localiser facilement dans la liste.

Pour l’édition de playlists et la navigation dans la base de titres / albums / artistes disponibles, l’utilisateur dispose d’un éditeur complet.

La “touchbar” à coté des listes permet de parcourir du bout des doigts rapidement une liste et trouver à l’aide des minis pochettes et du titre, l’album que l’on souhaite écouter. L’utilisateur peut ensuite ajouter ces pistes dans une playlist et la sauvegarder en lui donnant un nom grâce au clavier virtuel.

Ces prochains jours me permettront de fignoler ces mokups, et de réaliser les quelques parties manquantes, avant de commencer l’intégration Edje.

Pour terminer ce billet, une petite image (maj) du plan de navigation que l’on utilise avec Raoul Hecky pour illustrer le cheminement entre les états de l’interface.

Allez c’est tout pour aujourd’hui ! Bientôt la suite …
Vos commentaires sont toujours les bienvenus

Nous allons passer à la révision 500 sur le serveur SVN du projet. Pour illustrer le travail qui a été réalisé voilà quelques chiffres :

Des fichiers :

La racine du projet contient 9357 fichiers pour une taille de 390Mo. La section “Calaos Server” est composée du serveur lui-même et de l’interface Web ainsi que les fichiers de configurations pour un total de 2518 fichiers dont 504 fichiers de code source. La section “Calaos Home” quant à elle contient 649 fichiers, dont 81 fichiers de code source. 1153 fichiers pour les sources graphiques du projet, dont 523 fichiers de code source pour le thème Edje.

Des lignes de code :

“Calaos Server” et “Calaos Home” c’est 23225 lignes de code. 19Mo de sources pour le serveur et pour l’interface tactile. Une fois compilé le binaire du serveur atteint une taille de 827ko et 362ko pour l’interface. Le thème Edje c’est 12385 lignes de code (32 collections) 17Mo de sources dont 292 images. 2,2Mo une fois compilé.

Et la suite ?

Le programme pour les prochaines versions de Calaos Home, c’est dans un premier temps l’intégration Edje de la vidéosurveillance, puis dans un second temps, la réalisation des “mokups” du module “Musique”. Les grandes lignes du fonctionnement sont posées et les besoins sont définis. Il me reste néanmoins à travailler l’ergonomie générale (gestion des ressources, création des playlists etc.). Afin de rendre le l’interface paramétrable, nous allons également intégrer prochainement le clavier virtuel ainsi que l’assistant et les “tooltips” pour les messages de confirmation ou les questions posées à l’utilisateur.

Reste une autre section importante du développement qui concerne le module ‘’Scénarios'’ et “Configuration”, avec l’intégration d’un outil (simple) d’aide à la création de scénarios, et une suite de panneaux de contrôles et d’état des périphériques de l’habitat.

Une fois ces tâches exécutées, c’est la couche “Widget” et informations distantes qui sera à l’étude, sans doute de nouvelles idées germeront durant les brainstorming et viendront agrémenter les besoins et services de bases déjà inclus dans le projet.

Des nouveaux mokups de la vidéo surveillance. Comme toujours l’ordre des caméras est défini en fonction des favoris. Dans la section du bas les six scénarios les plus utilisés dans l’habitat. Cela permet de façon pratique de contrôler la montée ou la descente des volets de la maisons par exemple.

Le mode détaillé d’une caméra sélectionné, avec une zone d’affichage plus grande et toutes les options de celle-ci ainsi que les objets et scénarios de la pièce ou elle se situe.

Enfin, le mode “fullscreen” d’une caméra. Des positions enregistrées si le périphérique est motorisé, ainsi qu’une croix directionnelle pour la rotation.

Bientôt la révision 500 sur notre SVN, à cette occasion un billet spécial statistiques.

On ne présente plus l’Olpc (One Laptop Per Child). Une vidéo toutefois intéressante sur les designers du projet.

Ce reportage intitulé “Le Pc du pauvre sera chic” (le titre laisse à désirer), présente les principales innovations et l’étude qui a été mené pour réaliser un Pc solide et économique en énergie.

À la demande de Silvyn voilà un petit didacticiel sur la réalisation de la terre, lune ou autre planète avec Inkscape. C’est toujours le principe qu’il est utile de retenir et d’exploiter judicieusement. A vous de trouver votre style et votre cheminement dans la conception d’une image avec ce logiciel. Il existe toutefois quelques petites astuces ou “façons de faire” que peuvent vous simplifier la vie.

Le sujet est donc une planète (ou satellite) quelconque en svg pour profiter des propriétés du dessin vectoriel. Il est bien évidement plus simple de composer (montage) une image à partir de bitmaps ou autres ressources que l’on peut même parfois trouver sur les sites, comme ceux de la Nasa par exemple.

Cela-dit c’est beaucoup moins fun et beaucoup moins pratique dans le temps. Une source Svg c’est souple et rapide à retoucher puis à exporter.

#1.1 : L’image que l’on souhaite obtenir.

Comme vous pouvez le constater tout est histoire de “layers” superposés. La question est comment créer ces couches successives qui forment l’image finale. Dans ce cas on souhaite tout de même se rapprocher d’un modèle réel, retrouver dans les motifs complexes de cratères une ressemblance avec la lune. Google est notre amis et encore une fois il va nous être d’une aide précieuse…

#1.2 : On commence par quoi m’sieur ?

2.1 : Dans un premier temps rassemblez des ressources, images de la lune avec une bonne définition, minimum 500×500px. Nous allons les préparer avec The Gimp afin d’extraire les motifs de cratères.

2.2 : Dans un second temps nous allons préparer l’espace de travail sous Inkscape, puis vectoriser les parties intéressantes de l’image.

2.3 : Pour finir nous allons donner de la couleur et quelques effets de glow aux objets.

#2.1 : Préparation des ressources.

Après avoir récupérer au moins une image bien contrastée (1), nous allons jouer de la luminosité et du contraste pour isoler le relief des cratères. Le but de cette opération est de fournir à Inkscape une image propre, aux contours durs afin de faciliter le travail du filtre de vectorisation.

Dans le cas d’une images couleur vous pouvez également utiliser un filtre (décomposer) pour séparer le signal RVB et travailler les contrastes sur chaque canaux. Ici forcer la luminosité ou le contraste suffit à isoler les informations utiles de l’image (2).

En (3) créez une image négatif de l’image (2) mais toujours sur fond blanc. L’image (2) nous donne le relief négatif de la surface de la lune. L’image (3) quand à elle va nous servir pour le relief positif.

#2.2 : Et maintenant Inkscape !

Passons à Inkscape. Créez un nouveau document avec un fond de page sombre. Cela vas vous faciliter la vie pour l’équilibrage des teintes des gris et blancs qui composent ce type d’image.

Vectorisez (trace bitmap) les bitmaps importés …

Ajustez les valeurs pour générer un tracé vectoriel idéal, ni trop condensé ni trop espacé, suivant le niveau de détail désiré.

#2.3 : Couleurs, glow, bloom !

Vous disposez maintenant des 2 “layers” les plus importants pour la ressemblance avec l’objet réel. Changez la couleur de la couche qui représente le relief négatif du sol lunaire. Puis répétez l’opération pour le relief positif avec une couleur clair cette fois. Superposez les objets ! N’hésitez pas à utiliser les outils d’alignement pour une plus grande précision.

Nous allons à présent nous occuper de l’aspect “glow” de l’objet, pour un rendu fidèle, nous devons obtenir un effet important autour de l’objet, et moins présent à l’intérieur. Tout en gardant une certaine luminosité apporté par celui-ci. Commencez par créer 3 objets circulaires de la même taille. En ajoutant un glow important sur le premier, une transparence sur le second, ainsi qu’un glow plus faible sur le troisième. Assemblez ces trois objets.

Vous pouvez superposer le groupe de 3 objets pour le “glow” ainsi que le groupe des 2 objets qui forme le relief.

Pour renforcer les zones sombres du relief nous pouvons ajouter une couche supplémentaire faite de contours libres pour créer divers motifs plus ou moins aléatoires. Veillez cependant à concentrer les formes de grandes tailles au centre. En effet, on applique ces motifs sur ce qui est normalement une sphère, pour respecter les volumes de l’objet les formes sur les cotées ainsi que sur les pôles doivent occuper moins de place que ceux en face de l’observateur. Dans notre cas, le centre de l’objet. Une fois satisfait ajoutez-leur un “glow” important. enfin ajoutez cette couche à votre objet, qui commence a prendre forme.

Pour finir ce didacticiel nous allons ‘’bloomifier'’ tout ça ! Dupliquez l’objet du relief positif (2), et ajoutez du ‘’glow'’. Superposez ensuite cette couche à l’objet (3).

Le relief positif garde un peu de sa netteté mais gagne des contours flous accroissant la luminosité, et créant de ce fait une rémanence de la lumière. Vous pouvez agrémenter votre objet de plusieurs de ces couches qui ajoutent ce coté “mystique”. Il faut toutefois pas trop en abuser, mais plutôt utiliser cette technique pour diminuer le coté tranchant que peut avoir les images de type vectoriel. Dans le cas de la lune, la marge de manœuvre reste souple car floue (voir laiteuse) ou net, la Lune reste largement identifiable. Floue l’image sera interprété comme vue au travers un ciel humide. Un relief net au contraire peu représenter une visualisation par un temps clair, voir dans l’espace.

Conclusion :

À l’aide que de quelques “tips” il est possible de créer des planètes, imaginaires ou réels grâce à la vectorisation de bitmaps qui représentent les reliefs ou les continents. J’espère que cela vous sera utile.

Happy Inkscape !