[Showcase] Hydro


#1

Bonjour,

Petit sujet pour présenter mon travail avec Constellation.

Bref petit historique :

J’ai commencé la domotique avec une Vera Lite et un WallPlug. Déjà à l’époque je cherchais des interfaces alternatives à celles de la Vera, celle-ci me plaisant que moyennement.

Puis j’ai entendu parler de Jeedom, je suis rapidement passer sur un cubieboard 2 + razberry dès le début de l’aventure, on devait être 4/5 personnes à l’époque sur le forum lol.

Jeedom avait un gros potentiel, une bonne base et de bonnes idées mais je trouvais que ça manquait de quelque chose niveau design.

Alors oui j’accorde beaucoup d’importance au design, c’est pour moi la base de la domotique. Il faut que ça soit simple, rapide et jolie à utiliser.
J’avais fait des propositions pour améliorer tout ça mais elles n’ont jamais été retenues et du coup maintenant on a le mode design à la place.

Du coup n’arrivant pas à faire ce que je voulais du mode design j’ai un peu laissé couler.

Puis je tombe par hasard sur le blog de Sébastien parlant de Constellation. J’y vois tout de suite le potentiel pour quelqu’un comme moi qui aimerait faire le design à sa sauve tout en ayant une plateforme pour récupérer et centraliser les données.

Après des heures de lecture, de visionnage de Geek in da house, je spam Sébastien d’emails, de commentaires…le pauvre :wink:

J’accède finalement à la beta !

Après quelques heures à comprendre le C# (nouveau language pour moi) je me lance dans la réalisation de package qui me serviront dans mon installation.

Ni une, ni deux je commence par le package Squeezebox. Ayant développé un plugin sur Jeedom, je connais je pense bien l’architecture de communication avec LMS.
Puis un package pour contrôler ma Freebox, ma TV Panasonic…On se prend vite au jeu !

J’ai commencé à vraiment réfléchir à mon design l’été dernier. Puis un accident de trajet m’a fait perdre plusieurs mois mais maintenant je profite de ma rééducation pour avancer.

Voila pour le bref (pas tant que ça) historique.

Mon design :

Alors je sais que certaines personnes n’aimeront pas, en même temps c’est pour moi :slight_smile:

Je voulais un design dans lequel on pouvait se promener de pièce en pièce en accédant rapidement aux différents équipements. Bien sûr il y a le système avec un fond illustrant l’appartement mais en site web responsive, la gestion de la carte en arrière plan donne quelque chose de pas terrible je trouve.

Il me fallait quelque chose de responsive surtout parce que j’ai un téléphone Android (donc je peux faire une app) mais ma copine à un iPhone. Je ne pouvais donc pas développer une app Apple pour elle. Et si jamais je voulais accéder au site depuis mon PC ou autre, je voulais que ça soit adapté.

Voilà mon premier jet :

Je suis pas allez beaucoup plus loin que des tests d’interactions avec Constellation mais cela ne me plaisait pas sur la forme.
Sur téléphone ça devient compliqué si j’ai pleins d’informations sur la même page. Et il est difficile d’afficher certaines chose qui peuvent prendre de la place sur la page comme la musique ou le statut de son serveur.

Du coup j’ai enfin réussi à obtenir ce que je voulais :

Bon du coup le site est pas du tout optimisé, je ne connais pas le language angular malheureusement.
Bien sûr le site est responsive, sur mobile ça bonne :

Alors petit état des lieux :

  • le bandeau du haut affiche le nom de la pièce et en alternance la data + heure.
  • la partie du milieu avec les données est en réalité un slide. On peut donc slider entre chaque équipement de la pièce ou utiliser le menu de droite pour aller directement à une slide.
  • les flèches à gauche et à droite du nom de l’équipement permettent de passer à la slide précédente / suivante rapidement.
  • quand on est dans un équipement et qu’on clique sur une autre pièce, si cette pièce contient l’équipement il s’affichera directement sinon il ira sur général. Par exemple si je suis dans Salon - Eclairage et que je vais dans Chambre, si Chambre contient Eclairage j’irais directement dessus sinon j’irais sur Chambre - Général.
  • sur mobile, on ne peut avoir que un seul menu d’ouvert, si j’ouvre le menu droit, ça ferme le menu gauche et inversement.
  • le site utilise un système d’authentification basique. Je récupère ainsi le nom d’utilisateur et j’affiche les données Constellation suivant ce nom. Ca me permet d’afficher l’horoscope suivant la personne par exemple.

Voilà mon site est en utilisation tous les jours et fonctionne au top. J’aurais pu faire l’inverse et mettre les équipements à gauche et les pièces à droite mais cela aurait pu être plus compliqué pour des équipements présents dans peu de pièce.

Après comme évoqué avec mon ami marmoul, dans le menu général on peut toujours y mettre des slides avec le recap des températures de chaque pièce par exemple.

Je mettrais à jour ce sujet pour décrire les différentes parties / évolutions de mon site :slight_smile:

Merci d’avoir lu ce pavé !


#2

Partie accueil :

La première page de mon site constituant la partie accueil ne possède pas grand chose pour le moment, j’attend de voir ce que j’utilise le plus pour voir ce qui serait intéressant de mettre.

Elle dit juste bonjour à la personne loguer :slight_smile:

Nous avons ensuite le deuxième onglet indiquant la météo sur mon lieu de travail et mon lieu de résidence (Package ForecastIO).
Les différentes météos slide elles mêmes pour avoir les prévisions (Package ForecastIO - WIP) et la liste des vigilances en cours pour le département (Package VigilanceMeteoFrance). Nous avons en dessous la prévision de pluie pour l’heure, très utile pour sortir le chien :slight_smile: (Package RainHourForecast)

Le troisième onglet indique l’horoscope, là aussi basé sur la personne loguer (Package Horoscope à venir)

Enfin le quatrième onglet indique les services / équipements réseaux qui sont On ou Off. Ca me permet de voir rapidement si quelque chose ne vas pas et savoir quoi (Package NetworkTools).

Voila pour la partie accueil. Je pense que je rajouterais les prévisions de transport via le package Ratp, peut-être les ouvrants important quand j’aurais assez de capteurs.


#3

Bonjour Hydro,
J’ai découvert myconstellation il y a peu (- d’un mois) et j’ai moi aussi décidé de me construire ma propre UI Domotique.
J’ai comme toi mis les mains dans le cambouis pour créer mes propres package broadlink et livebox.
Maintenant que tous fonctionne je travail aussi sur mon interface sous Bootstrap.
C’est vraiment difficile pour moi car je suis dev mais vraiment graphiste.
J’ai toute les notion mais pas la fibre graphisme et ergonomique.
En conclusion je vais regarder en détails ton interface pour y piqué quelques idées.

Bonne soirée


#4

#5

C’est dingue que je ne découvre ton post seulement maintenant !!! (il était temps de migrer ce forum :wink:

C’est vraiment top ton post, je vais le publier sur le portail !

Beau boulot !