Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

[WIP] Personnalisation sans toucher au CSS ou HTML

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Répondre
G0M
Timide
Messages : 97
Inscription : 12 avr. 2016, 15:28

[WIP] Personnalisation sans toucher au CSS ou HTML

Message par G0M » 06 oct. 2016, 01:35

Amis Jeedomiens bonjour,

Synopsis
Chez moi, on sait pas coder mais on a des idées !
N'ayant ni l'envie ni le temps d'apprendre à coder en CSS, je me suis décidé à bricoler une interface personnalisée pour mon Jeedom simplement avec un éditeur d'images. Comme ce projet semble réalisable, j'ai décidé de partager ma progression pour que les allergiques à la ligne de code puissent s'en inspirer mais aussi partager leur expérience.

Mon profil (et celui de ceux que ce projet peut intéresser)
  • Je ne suis pas développeur et ne parle aucun langage informatique
  • Je ne suis pas designer et n'ai jamais utilisé Photoshop pour faire du design (seulement un peu de photo et encore, je trouve Lightroom suffisant)
  • Je n'ai ni le temps ni l'envie d'apprendre le CSS ou le HTML
  • Je maitrise les bases de Jeedom (virtuels et widgets en particulier)
[*] Je ne prétends pas inventer quoique ce soit !

Pourquoi ce projet n'est pas si débile que ça
  • Parce que Jeedom reste une interface "statique". Il n'y a que très peu de navigation entre menus, de transitions ou d'éléments animés. De ce fait, tous les jolis éléments de GUI développés en CSS par les membres les plus doués du forums peuvent être reproduits par les nuls comme moi avec Photoshop ou Paint.
  • Parce que c'est facile (il s'agit simplement de concevoir un fond d'écran adapté et d'uploader des jolies icones)
  • Parce que une fois que c'est fait, ça ne tombe pas en panne et souffre peu au fil des updates
  • Parce que ça reste super fluide même sur un vieil iPad tout pourri
Pourquoi ce n'est pas non plus la solution miracle
  • Si comme moi vous ne connaissez rien à Photoshop, il va quand même falloir se fader des tutos (uniquement pour développer des icone persos mais ce n'est pas indispensable étant donné la quantité qu'on trouve sur le net
  • c'est quand même du boulot !
  • ça reste du bricolage (contrairement au CSS)
  • ce ne sera jamais une interface dynamique (contrairement au CSS)
Mon idée de la domotique
Ma conception de la domotique est qu'elle doit REELLEMENT me faciliter la vie. Malheureusement, comme tous les outils informatiques puissants, on peut vite se retrouver submergé par les informations et les commandes.

Personnellement, je trouve ça absolument inutile de savoir en temps réel quelle humidité il fait dans mon sellier ou d'allumer chaque lampe de mon salon via ma tablette.

Selon moi, ce qui fait la puissance de la domotique ce sont avant tout les scénarii et si les scenarii sont bien conçus, alors l'interface graphique du système domotique peut se réduire au minimum.
Pour reprendre les exemples ci-dessus, je n'ai pas besoin de visualiser en temps réel le taux d'humidité dans mon sellier via l'interface Jeedom. J'ai juste besoin qu'on m'alerte quand elle est trop élevée. Pareil pour la lumière de mon salon, pas besoin de créer des dizaines de boutons sur l'interface pour allumer les lampes une par une puisque c'est Jeedom qui les gère pour moi !

En résumé, mon idée de la domotique est qu'au mieux elle est intégrée, au moins elle a besoin d'une interface graphique riche.

Cahier des charges du projet
  • Aucune ligne de code à taper (seulement le chemin des icônes perso à modifier dans les widgets)
  • N'utiliser que des widgets existants dans jeedom
  • Remplacer toutes les icônes par des icônes perso (pas facile j'avoue)
  • Utiliser seulement Photoshop CC (mais je suis sûr que c'est possible avec Paintbrush voire Paint)
  • Une page d'interface par étage (3 pages au total) et une vue plan par page (car plus facilement interprétable a priori)
  • Pas de flat design (question de goûts)
A quoi ça ressemble après quelques heures passées sur le sujet

Attention, c'est un travail en cours

Image

Il me reste à :
  • Ajouter les équipements manquants (volets et thermostats entre autres)
  • ajouter des petites icones pour chaque type d'actionneur (thermostats, interrupteurs, volets)
  • ajouter une horloge
  • Créer les 2 autres étages de la maison (ça va être du boulot)
Le fond d'écran avant d'être uploadé dans jeedom:

Image

Voila, si le projet intéresse du monde, ce sera avec plaisir que je partagerai expérience et fichiers.

Avatar de l’utilisateur
Galen23
Timide
Messages : 30
Inscription : 05 août 2015, 17:32

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par Galen23 » 06 oct. 2016, 16:30

Salut,
je vais suivre ton projet.
Les captures d'écran sont plutôt sympa et je suis curieux de voir comment tu as configuré tout ça (remplacement des icônes...)

Bon courage. ;)
Raspberry PI 2
Arduidom - arduino 2560 pour gestion volets Bubendorff

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par winhex » 06 oct. 2016, 23:49

ya de l'idée on va te suivre

G0M
Timide
Messages : 97
Inscription : 12 avr. 2016, 15:28

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par G0M » 07 oct. 2016, 17:27

Voila, ça prend forme petit à petit.

Image

Ce que j'ai fait depuis la dernière fois
  • Ajout des widgets thermostats pour mes têtes Danfoss
  • Ajout des températures
  • Ajout d'un cartouche Chauffage (avec un seul bouton pour la mise Hors Gel car les autres modes sont asservis par le mode de présence)
  • Ajout d'un cartouche pour les volets de la maison
  • Ajout d'icônes pour identifier les interrupteurs et les thermostats
  • Ajout du widget Waze (Une durée de trajet direct au bureau et une avec un pitstop chez la Nounou)
  • Modification de la mise en page
  • Ajout d'un petit effet bleuté dans le cartouche de la Météo en attendant de pouvoir la modifier elle-même
Ce qui Reste A Faire
  • Ajout des 2 autres étages
  • Personnalisation des icônes du plugin Météo (je ne sais pas si c'est possible)
  • Ajout des commandes de volets => Mais ceux-ci ne sont pas encore posés, c'est prévu pour Mars

Avatar de l’utilisateur
matric
Timide
Messages : 470
Inscription : 11 nov. 2014, 20:17
Localisation : Aquitaine

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par matric » 07 oct. 2016, 17:45

Bjr,

J'aime bien la tournure que prend ton interface. Le moins qu'on puisse dire est "que ça a de la gueule..."
J'ai bookmarké ton topic car cela m'intéresse de voir l'évolution que tu va faire suivre à ton interface. Je pense qu'il y aura matière à réflexion.

Bonne continuation
Jeedom sur NUC - Debian 9 Stretch - RFXcom433E USB - Z-Wave.ME USB - Clé 3G USB Huawei E1552 - NAS Qnap

Avatar de l’utilisateur
bartounet
Actif
Messages : 2541
Inscription : 14 juil. 2016, 10:09

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par bartounet » 07 oct. 2016, 18:54

si j'ai bien compris
Tu fais un fond aux petits oignons et tu insère simplement les widgets existants ?
C'est joli
Jeedom à jour Debian 9
VM VMWARE ESXi 6.7 ( SSD)
Stick ZWave / FIBARO / Ikea Light / Yeelight / Google Home
Wifi Unifi / PFSENSE / Reverse Proxy DMZ SSL

Passionné de bidouillage informatique en tout genre
Mon blog : http://blog.info16.fr

G0M
Timide
Messages : 97
Inscription : 12 avr. 2016, 15:28

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par G0M » 07 oct. 2016, 19:27

Et oui, c'est juste ça !

Comme je disais, dans la mesure où rien n'est dynamique dans l'interface Jeedom, on peut se permettre de figer beaucoup de choses sur le fond pour ensuite mettre les widgets.

C'est plutôt facile et jusque là ça répond à mes attentes.

koulyndriss
Timide
Messages : 257
Inscription : 04 déc. 2014, 15:43
Localisation : 78

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par koulyndriss » 20 oct. 2016, 21:54

Slt,

Oui très sympa ton interface je vais suivre aussi
Odroid c2 / KODI sur un autre c2
Clef USB Gen5 / dongle RFxcom / Xiaomi
éclairage en zigbee avec du Philips et ikea

Xeph
Timide
Messages : 33
Inscription : 20 mai 2016, 09:45

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par Xeph » 21 oct. 2016, 11:25

Par curiosité, quel outil as tu utilisé pour la conception du plan 3D ?

G0M
Timide
Messages : 97
Inscription : 12 avr. 2016, 15:28

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par G0M » 21 oct. 2016, 12:17

Bonjour,

Content que le sujet vous intéresse.

Pour la conception du plan 3D, c'est mon épouse qui a utilisé SweetHome 3D tout simplement.
Les 2 autres étages sont prêts, j'ai déjà pu ajouter celui des chambres. Reste plus que le dernier avec bureau, Home Cinema, chambre d'amis etc.

Voici le lien pour télécharger les icones que j'ai créées. Pour faire votre fond aux petits oignons, je conseille d'utiliser un logiciel de graphisme à base de calques.

https://1drv.ms/f/s!AoIcw_u_eRbGhPl-b0Bb1JR6xQp6AA

Mric
Timide
Messages : 157
Inscription : 29 déc. 2016, 11:27
Localisation : Langlade
Contact :

Re: [WIP] Personnalisation sans toucher au CSS ou HTML

Message par Mric » 19 févr. 2017, 16:08

Je crois que que je vais faire le même esprit que toi car l'interface de jeedom pour coder est imbuvable je trouve :)

Répondre

Revenir vers « Présentation et Vitrine d'installations »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 10 invités