Le design Jeedom sera la porte d’entrée de votre instalation domotique. Et bien souvent c’est la partie immergée de l’iceberg que vous presentez fierement à votre entourage et surtour qu’il faut faire valider 100% WAF !!
Alors dans cet article je souhaite vous accompagner à ma façon pour réaliser votre propre design.
Quelques autres articles sur le sujet
Prérequis :
- Jeedom (Tout se joue en core)
La première page Design Jeedom
L’image de fond
- Cliquer dans : Accueil, Design, créer un nouveau Design.
- Dans l’écran faire un Clic droit puis Édition. Cette manip, vous allez la faire souvent pour ajuster votre design.
- Refaire un clic droit puis Configurer le Design.
- Dans image cliquer sur « Envoyer » et sélectionner l’image de votre choix et surtout adaptée.
Vous devez en effet connaitre les dimensions du futur appareil sur lequel vous allez lire votre design, pour ma part c’est une tablette Asus 10″ et les dimensions sont 1280*800
Votre image est donc calibrée et s’affichent sur le fond de votre design.
Ajout d’un équipement
Si vous êtes toujours en mode ÉDITION cliquez droit et « ajout d’un équipement » sinon clic droit édition puis ajout
Pour ajouter une image cliquer sur le + noir à droite du bloc et sélectionner image, pensez à choisir taille grande et activer le zoom
L’équipement sera automatiquement inséré en-haut à gauche, attention parfois on ne le trouve pass a cause des parametre d’affichage on y reviendra.
Pour le déplacer, faire clic droit, Edition.
L’équipement doit être en brillant.
A vous maintenant de personnaliser son emplacement sa taille et ce qui apparait. Pour cela aller dans l’équipement et cocher visible ou pas dans les commandes.
Cliquer sur AFFICHAGE va vous permettre d’afficher une grille de lui donner des repères et même d’aimanter les objets. Je vous le conseille.
Configurer un equipement
Cliquez droit sur l’équipement.
Les parametres d’affichages
Pour avoir un beau design, vous allez passer du temps ici 😉
- Profondeur : il faut imaginer cela comme un mille-feuille, niveau 0 serait la feuille sur la table, niveau 1 au-dessus… je vous disais tout à l’heure que certaine fois des équipements semblaient ne pas apparaitre, en fait ils ont souvent caché derrière un plus haut dans le mille-feuille.
- Position X et Y / et largeur / hauteur : ici vous n’avez pas à toucher, car cela se fait en swapant votre équipement.
- Taille : vous pouvez tenter de changer la taille, elle est mise par défaut
- Afficher le nom : Perso j’aime pas
- MAsquer : OUi j’aime 🙂
- couleur de fond : Sympa de pouvoir changer ici le fond de votre equipement, perso transparent
- Couleur du texte : Laisser par defaut
- Arrondis : en pixel
- Bordure :
- Opacité :
- CSS personalisé : En bas de page je vous joints un article à ce sujet voici ma commande border: 3px solid #0D0301 ;
- Appliquer le CSS :
Puis les commandes.
Configuration avancées
Vous permet de rentrer dans votre équipement.
Ajout divers
En cliquant droit sur le design, vous aurez plusieurs choix qui s’offrent à vous. Nous allons prendre l’exemple l’Ajout d’un test/html.
Cliquer droit et paramètre d’affichage
Tout se passe où il est écrit : Texte à insérer.
Pour le test vous pouvez écrire ce que vous voulez.
Ou alors afficher une page web grâce au code suivant :
<iframe width= »1200″ height= »605″ src= »https://www.netatmo.com »> </iframe>
Il existe des codes pour obtenir des cadres à insérer ici et même de super cadres lumineux.
Mais ça je vous laisse le découvrir.
Aller plus loin
Merci de m’avoir lu 🙂
Au plaisir Xiao Nico
