J’espère que votre confinement se passe bien, de mon côté, j’en profite pour repenser et refaire mon design Jeedom (ou en tout cas réaliser des alternatives et vous les partager par la même occasion :)).

L’idée est de partir sur un style assez light dans les tons gris pour coller avec un potentiel affichage sur Google Nest Hub Max. Je vais essayer de vous partager étape par étape mes avancées.

Un menu dans les tons « Light »

Ce menu vertical a pour objectif d’être relativement fin pour maximiser l’usage horizontal de l’écran pour afficher vos équipement. Toutefois quand on touche la partie basse ou passe la souris sur le menu il s’étend pour avoir les détails.

Et voici les sources de ce menu, inspiré d’ici : https://codepen.io/EduardL/pen/aBGAy

Télécharger “Archive Menu Light” Archive-Menu-Light-V1.2.zip – Téléchargé 1269 fois – 3 Ko

Comment « installer » ce menu dans votre design Jeedom Light ?

En attendant, il vous faudra le plugin Jeexplorer pour déposer les fichiers css et js dans un dossier à la racine telle que sur la capture d’écran : mytheme/menu_light/ …

Maintenant rendez vous dans le design en question, il vous faudra passer en mode édition en faisant clic droit au milieu de votre écran :

Puis il vous faudra ajouter un élément Texte / Html toujours grâce au clic droit :

Il vous faudra ensuite faire un nouveau clic droit sur le texte qui est apparu pour afficher les paramètres :

Comme nous sommes dans le cas d’un menu qui s’ouvrira au toucher ou au passage de la souris, et donc potentiellement passer au-dessus des box équipements ou de votre plan. De ce fait, il vous faudra passer la position à 3. Puis dans le champs texte vous pourrez copié/collé le contenu du fichier html :

Il vous faudra être vigilant sur les chemins d’accès au fichier css. Dans mon cas, mytheme/menu_light/menu.css que je devrais mettre ligne 3 lors de l’appel du fichier menu.css

Si vous souhaitez changer ou ajouter des icônes … voici un article dédié à la librairie que j’utilise.

Personnaliser l’affichage des équipements

Toujours dans le même esprit, je souhaitais un style simple, moderne et gris pour afficher mes équipements dans mon design Jeedom.

Comment « installer » cette box ?

Même procédure pour ajouter un text/html et ouvrir les paramètres d’affichage.

Veillez bien à ce que la position soit inférieure à 3 afin de permettre au menu de pouvoir se dérouler par dessus. Largeur et Hauteur vous permettront de manipuler la taille de votre box avec finesse. Dans le champ texte, il vous faudra ajouter le code suivant :

<div style= "width:100%; height:100%;
  background-color: #F7F7F7;
  border-radius: 5px;
  box-shadow: rgba(0,0,0,.2) 0 4px 4px -2px;
  color: #919495;
  font-weight: normal;
  text-align: left;
  overflow:auto;
  display:block;
  ">

  <!-- TITRE DE VOTRE BOX -->
  <p align="left" style= "
      border: 1px solid #999999;
      border-radius: 3px;
      padding: 0.3rem;
      margin-left:20px;
      margin-top:20px;
      text-transform: uppercase;
      font-family: Arial;
      font-size: 10px;
      display:inline-block;
  ">
TITRE DE VOTRE BOX
  </p>

  <!-- CONTENU DE VOTRE BOX-->
  <div style= "min-height:100px; margin-left: 20px"> 

  </div>

</div>

Et voilà votre box devrait avoir un rendu semblable à mes captures d’écran.

Si vous souhaitez faire quelques modifications de ce menu :

Augmenter la taille de vos icônes pour un affichage sur tablette simplifié.

Suite au super commentaire d’un utilisateur du menu, ça me semble pertinent de vous partager les modifications comment agrandir les icônes et texte pour améliorer l’usage sur tablette de ce design Jeedom Light.

<!-- ligne 53 du menu.css -->
<!-- changement de la taille de l'icône -->
font-size:20px;

<!-- ligne 104 du menu.css -->
<!-- augmentation de la hauteur de la ligne -->
height: 50px;

<!-- ligne 109 du menu.css -->
<!-- augmentation de la taille du libellé -->
font-size: 15px;

Remplacer les icônes font awesome en ligne par les font awesome local

Je vous invite à regarder cette page : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself qui décrit plutôt bien l’approche.

N’hésitez pas à me faire vos feedbacks !

A bientôt
/F