Tutoriel mode Design pour débutant

Temps de lecture : 8 minutes.

Aujourd’hui je vous propose un article pour vous montrer comment créer un Design très simple et l’ouvrir en plein écran sur votre smartphone.

Le mode Design, aussi appelé mode Plan, fait parti du core de Jeedom et ne nécessite pas l’installation de plugin. Il permet d’afficher les différents composants de Jeedom, avec une mise en forme plus poussée que sur le Dashboard et avec, entre autres, l’ajout d’images de fond.

Nous verrons rapidement l’option tableau disponible depuis Jeedom V3 pour la mise en forme, puis comment créer un raccourci sur le bureau de votre smartphone, avec un effet « application » plein écran.

Il est possible d’utiliser le même Design pour les écrans de PC, tablettes et smartphones, ou des Designs adaptés à chaque taille d’écran.

Je ferais d’autres articles sur les Designs et si cela vous intéresse, n’hésitez pas à laisser un commentaire en ce sens ou à remplir le sondage en haut à droite.

Ajout d’une image de fond

Pour l’exemple, j’utilise une image très simple qui se compose de cadres de différentes tailles que je peux modifier dans Photoshop en fonction du contenu.

Il est possible de mettre la photo de son appartement, ou encore la photo d’un paysage. Mais attention de ne pas surcharger le Design avec une image de fond qui pourrait gêner la lecture des équipements. Le but est d’avoir une vue d’ensemble claire et rapide. Vous trouverez des exemples sur Google.

  • Pour les smartphones, il est conseillé d’utiliser le mode portrait. L’image utilisée est adaptée à la taille de mon OnePlus 5, soit 375 * 640 px, afin de ne pas devoir scroller de haut en bas ou de gauche à droite. Vous devrez peut-être la modifier pour l’adapter à la taille de vos écrans.

    Design d’exemple pour smartphone. Vous pouvez le télécharger si besoin.

La source Photoshop (psd) est disponible ici, ainsi que d’autres exemples.

  • L’image suivante est plus destinée aux tablettes et PC. Elle fait 1400 * 900 px en mode paysage, vous pouvez la modifier à votre convenance.

    Design d’exemple pour PC et tablette. Vous pouvez le télécharger si besoin.

La source Photoshop (psd) est disponible ici, ainsi que d’autres exemples.

  • Aller dans : Accueil, Design, créer un nouveau Design.
  • Au centre de l’écran faire : Clique droit, Edition.
  • Refaire un clique droit, Configurer le Design.
  • Dans image cliquer sur « Envoyer » et sélectionner l’image.

L’image s’affiche directement au centre de votre écran.

Ajout d’un équipement

  • Pour ajouter un équipement faire un clique droit, « Ajouter équipement« .
  • Sélectionner un équipement.

    J’ai choisi un virtuel avec mes équipements Home-cinéma.
  • L’équipement est inséré en-haut à gauche du Design.
  • Pour le déplacer, faire clique droit, Edition.
  • L’équipement doit être en surbrillance.
  • Le faire glisser avec la souris pour le déplacer à l’emplacement voulu.
  • Ajuster la taille en déplaçant le coin inférieur droit.
Virtuel en surbrillance avant la mise en forme.

Mise en forme en tableau

  • Pour mettre en forme l’équipement, faire un clique droit sur l’équipement, Configuration avancée.
    • Dans l’onglet « Informations » : Vous pouvez activer et rendre visible l’équipement et accéder aux commandes qui le composent.
    • Dans l’onglet « Affichage » : Vous pouvez modifier plusieurs options, couleur de fond (transparent), afficher le nom…
    • Dans l’onglet « Disposition » : Vous pouvez organiser votre équipement sous forme de tableau, en utilisant le CSS.

Pour chacune des commandes, j’ai caché leur nom dans « Configuration de la commande » onglet « Affichage« . Comme vu juste au dessus, vous pouvez accéder aux différentes commandes depuis l’onglet « Informations« .

Mon tableau se compose de 3 lignes et 5 colonnes avec des bords arrondis. Il occupe 100% de la largeur et une ligne sur deux a un fond transparent. Pour finir il y a une bordure en bas des lignes 1 et 2 et les éléments sont centrés dans les cases.

Virtuel, une fois la mise en forme tableau appliquée.
  • Dans l’onglet « Disposition« , choisir « Tableau« .
  • Nombre de ligne : 3.
  • Nombre de colonne : 5.
  • Cocher : Centrer dans les cases.
  • Style du tableau (CSS) : width:100%; -webkit-border-radius: 20px; overflow: hidden;
    • width:100%; C’est la largeur du tableau.
    • -webkit-border-radius: 20px; Permet d’arrondir les angles.
    • overflow: hidden; Permet de rogner les éléments.
  • Enregistrer, fermer la fenêtre, et retourner dans l’onglet « Disposition » pour voir les lignes et colonnes du tableau apparaître.
  • Faire glisser les commandes dans les cases désirées.
  • Ajouter du code CSS pour personnaliser les cases, exemple : padding: 0 0 0 0;background: rgba(255,255,255,0.1);border-bottom: 1px solid #AAAAAA; 
    • padding: 0 0 0 0; c’est l’espacement autour des elements.
    • background: rgba(255,255,255,0.1); permet de régler l’opacité du fond.
    • border-bottom: 1px solid #AAAAAA; permet de mettre une bordure en bas de la case.

Vous trouverez plus de détails au sujet du CSS sur : https://developer.mozilla.org/fr/docs/Web/CSS/.

 

Ajout d’un élément

En plus des équipements, il est possible d’ajouter des commandes, ou d’autres éléments, en choisissant les options disponibles. Pour cela, faire un clique droit sur le Design.

Voila 2 exemples :

  • Ajouter text/html  : Permet d’ajouter un simple texte, ou du code html, comme un lien vers l’image d’une caméra  :

<a href="URL_IMAGE" title="Camera Salon." target="_blank"><img src="URL_IMAGE" alt="Camera Salon." width="475" border="0"/></a>

  • Ajouter une Zone : Permet d’ajouter une zone qui se superpose sur le passage de la souris ou sur un clique. Par exemple lorsque l’on passe la souris sur la photo d’un membre de ma famille les détails de géolocalisation s’affichent. Distance de la maison, heure de présence / absence et adresse.
Exemple pour smartphone.

 

Exemple pour Pc ou tablettes.

Je reviendrai plus en détail sur les différentes options, dans un article dédié. N’hésitez pas à laisser un commentaire et à répondre au sondage en haut à droite de chaque page, si cela vous intéresse.

Ouvrir un Design en plein écran

Maintenant que vous avez fait un beau Design, nous allons voir comment y accéder depuis une icône sur le bureau de votre smartphone, comme si c’était une application et l’ouvrir en plein écran.

Edit du 15/01/2018 : Pour pouvoir modifier l’icone il faut utiliser un lanceur tiers comme Nova Launcher.

Depuis votre smartphone :

  • Télécharger l’icone Jeedom ci dessous ou une autre sur Google .
  • Ouvrir Chrome et taper l’adresse externe de votre Jeedom. Lire cet article pour plus de détails Réseau – Accès distant avec Nom de domaine.
  • Cliquer sur Design et choisir le Design désiré.
  • Cliquer sur les 3 point verticaux, en haut à droite de la page.
  • Cliquer sur « Ajouter à l’écran d’accueil » et donner un nom.
  • Cliquer sur Ajouter.
  • Sur le bureau rechercher le raccourci créé et garder le doigt appuyé quelques secondes.
  • Cliquer sur « Modifier« , puis sur l’icone à gauche.
  • Sélectionner l’icone préalablement téléchargé et valider.

Maintenant vous avez une icône sur le bureau, comme si c’était une application et si vous cliquez dessus, le Design va s’ouvrir en plein écran.

Conclusion

Voila pour ce premier article sur les Designs Jeedom, plutôt axé sur les smartphones, mais au final, le principe est le même pour l’affichage sur PC ou tablette. Vous êtes nombreux à me demander des articles sur les Designs et j’espère qu’avec cet article, vous allez pouvoir commencer à créer vos premiers Designs personnalisés.

N’hésitez pas à laisser en commentaire les points que vous voudriez voir approfondir dans un prochain article sur le mode Design.

Tutoriel mode Design pour débutant
5 (100%) 2 votes
Partager :

19
Laisser un Commentaire

avatar
8 Comment threads
11 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
TEmsolutexavierBrunollomes Recent comment authors
  Notifications  
plus récents plus anciens plus de votes
Me notifier des
florent
florent

Je n’arrive pas à changer l’icone sur mon bureau android. Pouvez vous nous donner la procédure plus en détail

florent
florent

Je n’ai pas de bouton modifier quand je garde le doigt sur l’appli que je veux modifier

llomes
llomes

Bonjour,

Tout d’abord bonne année 2018 et merci pour votre site, LE TOP !!!

Lorsque j’appuie sur l’icône pour modifier l’image, je peux que supprimer mais rien modifier (android 7).

Avez vous une idée du pourquoi de la différence avec vous ?

Merci

Bruno
Bruno

Bonjour,
Super ! merci … et meilleurs voeux
Tu aurais une ressource explicative pour gérer le tout en CSS
pas sur le CSS a proprement dis mais comment on l’intègre dans Jeedom
merci merci
Bruno

florent
florent

Merci je comprends mieux pourquoi je n’étais pas en mesure de faire la manipulation

xavier
xavier

Bonjour et bonne année 2018
Super article encore ! Merci Guillaume.
Je n’arrive pas à accéder aux sources psd du smartphone (page réservée aux contributeurs).

xavier
xavier

Autre question, comment détermines-tu la résolution de ton écran ? (le one + 5 a une réso de 1080 x 2160 pixels du coup comment tu détermines la taille de 375 * 640 px ?). Merci

olute
olute

Bonjour,
je suit justement en train d’essayer de faire un design pour smartphone.
j’aurais une question concernant les widgets.
Est ce que tu crée des widget specialement pour smartphone afin d’avoir une petite taille ? ou y a il une astuce. merci

olute
olute

bonjour,
merci de la réponse rapide.
J’avais vus cette fonction. J’ai teste 0.75 ca réduit bien la taille du widget.
Mais le problème c’est que après je ne peut plus déplacer mon widget comme je le souhaite sur l’image de fond.
par exemple si je met en taille 0.5 au widget, he bien je ne pourrait le déplacer que dans la moitié supérieur de l’ecran….

Mais si je rentre manuellement les coordonnées du widget ca fonctionne. ca ma l’air d’un bug.

TEms
TEms

Bonjour,
tout d’abord merci pour votre travail, je consulte régulièrement votre site et je le trouve super!!
Ma question se porte sur le Widget de laspirateur : comment avez-vous fait pour mettre l’image du Mi Robot en fond s’il vous plait??

Merci

Merci à ceux qui ont contribué.
Votre don contribuera à fournir encore plus de contenu de qualité.