Rédaction : le 17/01/2019
Mise à jour le 21/02/2019 (merci Fab !)
Mise à jour le 13/06/2019 (Jeedom3)

Cet article a pour but de vous aider à réaliser un design dans les meilleures conditions. Je vais donc vous livrer quelques astuces qui m’ont permis de bien avancer et réaliser les miens et avec le recul les trucs à faire et à ne pas faire !

Mais qu’est-ce qu’un design ?

Il faut comprendre ce qu’est un design sous Jeedom ?

Plutôt qu’un long discours, relisez la documentation à ce sujet. “Le design permet de configurer l’affichage de toute votre domotique de manière très fine. Celle-ci demande du temps mais sa seule limite est votre imagination”.

Voilà qui est dit…

En gros, vous voulez faire vos écrans de suivi, de pilotage, d’actions, de présentation de votre documentation… c’est ça qu’il faut faire ! Plus poussé qu’une “vue” dans Jeedom, plus intelligent que le dashboard qui empile tout.

Pour l’afficher où ?

Ici, la question à se poser… c’est OK, je fais un écran mais je fais l’afficher où ? Dans mon cas, j’ai deux types d’écran :

• ceux dédiés à nos téléphones. Au final, je ne les utilise plus du tout ou très rarement… la raison, Domowidget qui finalement est plus pratique au quotidien : caméras, interrupteurs, informations etc. Oui, mais c’est quand même plus “moche” ! Mais plus pratique. Et dans mon cas, Domowidget a eu raison de mes designs de téléphone qui ont 2 ans. Mais ils sont quand même pratiques et il est intéressant de les avoir quand je veux bouger une caméra ou voir une consommation.

Je vous invite à relire l’article pour Domowidget.

• Avec le recul, les designs ont réellement trouvé leur intérêt pour les tablettes domotiques de la maison. Vous pouvez relire différents articles comme celui dédié à JPI pour leur affichage ou bien celui de la surveillance de mon installation. Dans mon cas donc, ils ont été conçus pour s’afficher sur une tablette de taille 10.1 pouces avec une résolution de 1920×1200.

Quelques points pour une tablette de qualité :

• choisissez une tablette dont la résolution est suffisante en 1920 à minima (1920×1080 à minima, 1920×1200). Le problème est que le prix va souvent de pair avec la résolution ou la technologie de l’écran.
• avec le recul 2 Go de RAM sont un minimum ! Je regrette réellement que la performance actuelle des téléphones ne soit pas reporté au même niveau de prix pour les tablettes (on a souvent du 3, 4 voir 8 Go de RAM … pourquoi les constructeurs font des tablettes au rabais…). Quand on voit ce qu’on peut avoir en octo-coeur, 4 Go de RAM avec un écran de 6 pouces pour moins de 250€ et que de l’autre une tablette coûte 2 à 3 fois ce prix, non ! On nous prend vraiment pour des idiots.

Pour ma part, j’ai fait le choix de la marque Acer à l’époque… Déjà 2 ans d’utilisation pour le prix, je ne râlerai pas. Payé entre 100 et 150€ (ODR, promotions). Si je devais changer, voilà les modèles que je viserai :

• Galaxy Tab 10 pouces (9.6 ou 10.1 ou 2) d’occasion car les prix piquent ! Mettre 300 à 400€ sur un mur, non…
• Xiaomi Mipad (mais Global version !) en import 10.1 pouces – attention, ces tablettes nécessitent beaucoup de manipulation : root, flash de ROM, modifications etc.
• Acer Iconia B3-A40FHD 10.1 pouces (< 150€)
• Asus Zenpad Z301MF-1H006A 10.1 pouces (< 200€)
• Lenovo X103F 10 pouces (< 130€)
• Mention pour la Huawei T5 (pas la lite !) 10.1 pouces 3 Go de RAM (< 200€)

D’autres possibilités comme utiliser une tablette 4G Wifi ce qui permet d’avoir JPI comme outil de notification SMS/MMS. Mais là encore le prix souvent détend ! au bas mot 300/400€ pour des performances réduites (souvent du 2 Go). Quand un téléphone rooté Android 7 ancienne génération se trouve pour moins de 100€ la plupart du temps…

Définissez la taille de votre design

Pour commencer, vous devez déduire la taille de votre design. Pour cela, prenez votre tablette qui affichera vos designs que ce soit par le logiciel Fullykiosk ou JPI, affichez ce site :

http://fr.screenresolution.org

Ce qui vous donnera la résolution :

Étant sous JPI (relisez l’article si vous n’êtes pas à l’aise), allez dans :

• le menu Outils,
• Exécuter action.

Dans un premier temps, indiquons à JPI comment nous allons utiliser notre navigateur par l’action Configurelayout dans Outils/Générer URL :

• buttons : 0,
• webTitlebar : 0,
• webZoomEnabled : 1,
• webTextSize : 100,
• androidFullScreen : 1.

Puis cliquez sur Exécuter. Ensuite faites de même avec Générer URL :

Choisissez dans menu “baguette magique”,

• Application APK,
• goToUrl,
• Indiquez l’adresse précédente,
• puis cliquez sur Exécuter.

Vous aurez donc la résolution de votre design à configurer côté Jeedom.

Ensuite direction Jeedom, dans le menu Design. Créer votre premier design, nommez-le …

Puis débloquez votre design, bouton droit sur la zone “dessin” puis cliquez sur Edition. Votre design devient éditable.

Vous remarquez que le menu devient plus importante au clic droit suivant :

Et réglez votre taille de design :

Vous remarquerez que votre design a un ID, dans mon cas le 35.

Pour affiner la résolution, j’ai utilisé cette technique. J’ai ajouté un graphique. Je l’ai ensuite agrandi au maximum de l’écran. Et j’ai sauvegardé.

Côté JPI, j’ai ensuite dans le menu Outils/Générer URL, afficher le design du numéro ID (ici le 35).

De cette manière, vous pouvez modifier la taille de votre design et afficher à chaque fois le carré agrandi côté design de manière à “border” votre tablette au maximum et profiter de l’écran.

Pour ma part, la résolution utile de ma tablette Acer est de 1270×788. De même, la résolution d’un téléphone type MotoG5S 5.5 pouces était de 325×560.

Astuce : pensez à dupliquer votre design de base et à garder un design ‘neutre’ que vous dupliquerez chaque fois comme base de départ !

Un thème de départ

Mettez un fond d’écran par le menu “Configurer votre design”. Je trouve après plusieurs essais qu’un design clair avec écriture noire est plus lisible sur des tablettes domotiques.

Autre solution, utilisez Adobe Photoshop, Gimp ou autre logiciel de dessin pour réaliser des cadres, traits etc. Sinon… adoptez un thème !

Là dessus, bon nombre de designs que vous voyez de Jeedom sont inspirés du travail proposé par un membre du forum à savoir F$33. Je vous recommande son fil qui empile les posts de demandes. Pour ma part, j’ai utilisé en partie son travail pour les boxes, c’est tout.

Le lien du forum

Le principe d’installation de son thème est donné ici :

Le lien du forum

Pour ma part, j’ai modifié quelques éléments de transparence pour avoir ce que vous voyez dans les copies d’écran. Voici le code de la box correspondante. Police Montserrat de Google, icône à modifier, titre etc.

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<!-- cadre global --> 
<div style=" width:100%; box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.3);">

      <!-- icone à gauche --> 
      <div style=" height:30px; width:30px; position:absolute; margin-top:6px; margin-left:0px; opacity:0.8; max-width:100%; height:auto;">
	  <i class="icon meteo-nuage-soleil-pluie" style="font-size:20px;color:black;"></i>
      </div>
      
      <!-- barre de titre  --> 
      <div align=center style="color:rgba(0,0,0,1); font-size:20px; height:30px; background-color: rgba(0,0,0,0.2); padding-top:0px; font-family:Montserrat, Arial; font-variant: small-caps; font-weight:normal;">
      <strong>Prévisions</strong>
      </div>
      
      <!-- carré de sélection pour le déplacer  --> 
      <div style="height:170px;  background-color: rgba(255,255,255,0.3);">
      </div>
</div>

Pour modifier l’icône de la boite, il faut modifier la ligne suivante :

icon meteo-nuage-soleil-pluie

Pour savoir ce que vous voulez mettre. Cliquez sur icone dans le champ texte que vous avez ajouté pour mettre ce code. La catégorie est donc le titre (ici jeedom mais qui n’est pas obligatoire) et le nom de l’icône.

Pour modifier le titre, c’est ici :

<strong>Prévisions</strong>

La barre de titre faisant 30px de hauteur, il faut que la hauteur de votre bloc fasse 30px de plus que le carré de sélection.

Vous pouvez jouer sur le 4e paramètre de rgba pour jouer sur la transparence de votre bloc : titre, bloc complet etc :

rgba(0,0,0,0.3)

Essayez ! A vous de jouer.

Un menu !

Pour ma part, j’ai élaboré mon menu comme cela. Voici le code que j’ai réalisé :

<ul class="nav flex-column">
  <link href="/montheme/menu.css" rel="stylesheet" type="text/css">
  <li class="nav-item">
    <a class="nav-link active" href="/index.php?v=d&p=plan&plan_id=26"><img src="/montheme/images/HOUSE.png" height=75px width=75px></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/index.php?v=d&p=plan&plan_id=27"><img src="/montheme/images/CAMERA.png" height=75px width=75px></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/index.php?v=d&p=plan&plan_id=31"><img src="/montheme/images/PLAN1.png" height=75px width=75px></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/index.php?v=d&p=plan&plan_id=30"><img src="/montheme/images/RADIATEUR.png" height=75px width=75px></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/index.php?v=d&p=plan&plan_id=35"><img src="/montheme/images/GEST_MAISON.png" height=75px width=75px></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/index.php?v=d&p=plan&plan_id=33"><img src="/montheme/images/PISCINE.png" height=75px width=75px></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/index.php?v=d&p=plan&plan_id=34"><img src="/montheme/images/LOCALISATION.png" height=75px width=75px></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/index.php?v=d&p=plan&plan_id=32"><img src="/montheme/images/SERVEUR.png" height=75px width=75px></a>
  </li>
</ul>

Là encore quelques explications :

• nav-link active : l’active est à mettre dans design sur le bon bouton, il va “griser” la page en cours. Pour cela, pensez à ajouter un fichier CSS dans le répertoire où vous stockerez les images ou autres fichiers CSS de votre thème, ici montheme/menu.css avec ce contenu :

.active{
background-color: #4c8eaf; # à changer si nécessaire couleur de fond
color: red;
}

• index.php?v=d&p=plan&plan_id=XX : XX est l’ID du design que je veux afficher tout simplement ;
• img src=”montheme/images/SERVEUR.png : est l’image que j’affiche dans le menu avec une taille réglée de 75/75 px ici. Les fichiers d’image ont été mis dans le répertoire images de mon thème. N’oubliez pas, vous pouvez transférer ces fichiers (et ceux du thème) par l’utilisation du client SFTP de votre client SSH (Bitvise, Putty). Relisez les articles des machines virtuelles si vous êtes perdus.

Vous trouverez le fichier ZIP de toutes mes images, plusieurs fois demandés. J’ai aussi mis les sources de Photofiltre ou Gimp qui m’ont permis la réalisation de certaines images. J’apprécie qu’on me paye un coup à boire car cela représente quelques heures de boulot… à votre santé !

https://jeedom-facile.fr/wp-content/uploads/2019/01/images.zip

Réalisez des graphiques sans échelle

Quelque chose que j’aime, c’est la forme d’une courbe sans s’encombrer. Cela permet de suivre une tendance d’un coup d’œil de manière simple et efficace. Très utile pour une courbe électrique, une courbe de consommation d’eau etc.

Comme faire cela ? Il faut ajouter un fichier PHP à votre design (comme pour les images précédentes). Dézipper le fichier et envoyez-le à la racine de /var/www/html (le fichier PHP !) mais ajoutez votre API dedans :

https://jeedom-facile.fr/wp-content/uploads/2019/01/chart.zip

Avant d’envoyer le fichier, ajoutez votre API Jeedom à deux reprises :

• ligne 11 – private $apikey = ‘XXXXXXX’;
• ligne 218 – $apiKey = “XXXX”;

Ensuite, dans votre design, ajoutez “texte/html” avec ce code :

<iframe  src="/chart.php?cmdId=9573&chartWidth=365&chartHeight=72" width="365" height="72" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

Voici les paramètres à modifier :

• cmdId : désigne l’information que vous souhaitez afficher, pensez à l’historiser !
• chartWidth : largeur du graphique ;
• chartHeigh : hauteur du graphique ;
• à reporter dans width & height.

Le widget est un peu difficile à bouger ensuite, je vous recommande de faire bouton droit sur le triple trait pour accéder au menu. Je reporte la taille (hauteur/largeur dans la taille du widget) :

Et voilà, ! Et bien sûr vous pouvez en avoir plusieurs…

Alignez vos éléments !

Alors là … on rigole ! Méthode manuelle à la mano. Achetez une bonne souris et armez-vous de patience… ou ???

Utilise la fonction d’alignement ! Tout simplement…

Quand vous ajoutez un champ texte, image ou autre, vous avez la position X ou Y en %. 0% et 0% sont en haut à droite, 100% et 100% le dernier pixel à droite en bas.

Je souhaite aligner du texte verticalement, je vais donc mettre le même X à 10.46% partout.

Faites de même verticalement, horizontalement. Vous verrez, vous irez bien plus vite pour aligner ! Pensez à avoir des éléments de même taille pour faciliter les pourcentages ;).

Titre ou sous-partie

Pour faire ressortir certains textes, par exemple, j’ai ajouté un fond et j’ai joué sur la police. Voici le code :

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div align=center style="color:rgba(0,0,0,1); font-size:16px; height:30px; padding-top:5px; font-family:Montserrat, Arial;; font-weight:normal;">
<strong>Consommation à l'heure</strong>
</div>

Vous pouvez changer la hauteur, la couleur de fond dans votre widget par la sélection de la couleur :

Vous aurez ça :

Suivi le trafic en temps réel

Il faudra un compte Google et une clé API (que vous aurez déjà si vous utiliser Geoloc ou Geotrav comme plugin). Je vous renvoie vers un tutoriel complet.

Le cas de mes virtuels

Je ne vais pas reprendre l’explication pour mes interrupteurs que vous trouverez dans l’article de pilotage des éclairages. Vous pouvez les utiliser !

Dans le cas de boutons animés – portail/garage, comme ai-je fait ? Mon garage s’ouvre le bouton change d’état !

J’ai créé des widgets portail/garage qui utilise l’état d’un capteur ouvert/fermé et dont l’action ouvre ou ferme l’ouvrant en question.

Voici le code pour le garage (widget action, défaut, dashboard) :

<div style="background-color:#30678C !important;border-color : transparent !important;width:75px;min-height:75px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
       <span style="font-weight: bold;font-size: #size#;margin-top: 5px;position:relative;top:6px" class="iconCmd"></span>
    </center>
    <script>
        jeedom.cmd.update['#id#'] = function(_options){
            if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
                if (jeedom.cmd.normalizeName('#name#') == 'on') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon #icon-on#" style="font-size:50px"></i>').css('color', '#color-on#');
                }
            } else {
                if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon #icon-off#" style="font-size:50px"></i>').css('color', '#color-off#');
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</div>

Vous changez l’icône et vous aurez le portail 😉 !

De même, pour présenter une information de type binaire ou autre d’une manière sympa, j’utilise l’icône sur le même modèle ! Il faut travailler sur les 2 lignes suivantes avec le choix de l’icône, la taille, la couleur …

A faire autant de fois que nécessaire ! Petite astuce, vous pouvez utiliser des icones animées ;), voir ici !

<i class='fa fa-refresh fa-spin' style='font-size:40px;color:green;'></i>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="width:25px;min-height:25px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
     <span style="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" class="iconCmd"></span>
  </center>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
      if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="material-icons" style="font-size:20px;color:black;">signal_wifi_4_bar</i>');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="material-icons" style="font-size:20px;color:red;">signal_wifi_off</i>');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Pour finir, je mets quelques widgets que j’applique. Utilisez ce site pour trouver les codes couleurs adéquats :

https://htmlcolorcodes.com/fr/

• le premier est un bouton dont j’adapte la couleur (ici 3498db) au besoin (dashboard, action, défaut) :

<span class="cmd reportModeHidden cmd-widget" style="display: inline !important;margin-right: 2px;" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" class="center-block">
    <a class="btn btn-sm btn-default action cmdName tooltips" title="#name#" style="width:123px; min-height:30px;background-color:#3498db !important;border-color : transparent !important;margin-top: 2px;">#name_display#</a>
    <script>
        $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
        if ($('.cmd[data-cmd_uid=#uid#]:last').prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]:last').prev().data('subtype') != 'other'
                && $('.cmd[data-cmd_uid=#uid#]:last').prev().css('display') != 'block') {
            $('.cmd[data-cmd_uid=#uid#]:last').prepend('<br/>');
        }
    </script>
</span>

• le second est un champ info (dashboard/info/numeric) où on peut modifier la taille, couleur etc. Ici le texte est à droite (pull-right) – si vous le voulez à gauche, pull-left. La couleur est color:green ; à vous de changer !

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div style="min-width:150px;min-height:20px;margin-right: 3px;margin-left: 3px;padding:0px !important;font-family:Montserrat, Arial; font-weight:normal;color:green;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#;">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2em;font-weight: bold;" class="pull-right state"></span><br/>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

• le troisième pour afficher une valeur avec unité (dashboard/information/numeric) :

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div style="min-width:130px;min-height:20px;margin-right: 3px;margin-left: 3px;padding:0px !important;font-family:Montserrat, Arial; font-weight:normal;color:rgba(0,0,0,1);" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#;">
	<center>
		<div style="font-weight: bold;font-size : 18px;#hideCmdName#">#name_display#</div>
		<span style="font-weight: bold;" class="pull-right">#unite#</span>
		<span style="font-size: 2.5em;font-weight: bold;" class="center-block state"></span>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Enfin, un pour afficher du texte depuis une information : dashboard/info/autre (vous l’avez déjà vu dans cet article sur la météo) :

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div style="min-width:130px;min-height:20px;margin-right: 3px;margin-left: 3px;padding:0px !important;font-family:Montserrat, Arial; font-weight:normal;color:rgba(0,0,0,1);" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#;">
	<center>
		<div style="font-weight: bold;font-size : 18px;#hideCmdName#">#name_display#</div>
		<span style="font-weight: bold;" class="pull-right">#unite#</span>
		<span style="font-size: 2.5em;font-weight: bold;" class="center-block state"></span>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Un dernier, ceux qui utilisent des images faites par mes soins (voiture, moto, personne, porte etc) :

<div style="padding:0;width:115px;min-height:115px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
		<div class="center-block col-xs-12 h5 cmdName" id="cmdName#id#" style="margin-top:0; #hideCmdName#;">#name_display#</div>
		<div class="center-block col-xs-12 iconCmd#uid#"></div>
	</div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"308_off.png","image2":"308_on.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) {
				$(".iconCmd#uid#").append("<img src='/montheme/images/Moto_on.png'>");
			} else {
				$(".iconCmd#uid#").append("<img src='/montheme/images/Moto_off.png'>");
			}
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Pensez à placer des fichiers de la taille adéquate dans le répertoire avec le bon nom (ici : /montheme/images/Moto_on.png et Moto_off.png).

Mettez en forme vos virtuels type tableau

Il existe une option méconnue. Utilisez dans la configuration avancée de votre virtuel, l’option “Disposition” – “Tableau”. Vous pouvez facilement mettre en forme un tableau d’informations ou commandes comme cela :

C’est un virtuel de consommation qui regroupe plusieurs informations. Bon le coup des icônes rouge/vert, je pense que vous l’avez compris ! Un binaire avec 2 couleurs vert/rouge en fonction du signe. Non, bon je vous le mets :

<div style="width:30px;min-height:10px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <span style="font-size: 0.5em;font-weight: bold;" class="iconCmd"></span>
  </center>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
      if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon fa fa-chevron-up" style="font-size:14px;color:red;"></i>');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon fa fa-chevron-down" style="font-size:14px;color:green;"></i>');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Pour le tableau c’est par ici que ça se passe. Ici il s’agit d’un tableau de 6×10 avec centrage et les éléments suivants :

• style général CSS : padding-top:-5px;
• style tableau CSS : font-family:Montserrat, Arial;color:black;font-size:8px;border:2px;border-style:solid;border-color:#FFFFFF
• style titre : font-weight: bold;background-color: rgba(0,0,0,0.2);width:130px;font-size:12px
• je fixe la taille d’une case par height:50px;
• vous aurez compris le principe je pense ; on joue sur la taille, l’épaisseur, la couleur, le fond …

Dans le même principe :

Des graphiques

Vous pouvez mettre en forme des graphiques. Soit comme précédemment avec le code PHP, soit en jouant un peu de paramétrage. Ajoutez un graphique, mais personnellement, voici comment je les configure :

• j’utilise 2 échelles pour mieux présenter mes données (ici l’eau, l’électricité) ;
• j’utilise souvent la représentation par “empiler” ; “escalier” ; “aire”
• en prenant le max d’une journée par exemple sur une grandeur pour la visualiser (ici de la consommation mais cela reste valable pour la température etc) – à vous d’adapter :

Côté widget, j’indique cette configuration :

Ajoutez simplement un texte avec ce code pour cacher certaines options que vous ne saurez voir !

<style>
.highcharts-legend
{
 display:none;
}
</style>

<style>
.highcharts-data-labels
{
 display:none;
}
</style>


<style>
.highcharts-title
{
 display:none;
}
</style>

<style>
.highcharts-contextbutton
{
 display:none;
}
</style>

<style>
.highcharts-subtitle
{
 display:none;
}
</style>

<style>
.highcharts-button
{
 display:none;
}
</style>

Un dernier pour la fin, grâce à un membre du forum, merci à lui. Mettre en forme des graphiques type camembert. Il convient de modifier alors le code “color” (voir lien pour le choix de la couleur plus haut), d’avoir le même champ “Name” (que le var dans le premier bloc) et l’ID Jeedom de l’information que vous voulez grapher :

• id consommation-piscine donne id: ‘10234’ ;
• variable var piscine correspondante ;
• dans la partie data donne name : ‘Piscine’ mais surtout le champ Y qui est la variable var piscine précédente ;
• et qui sera affiché avec la couleur #408080.

<div id="container" style="min-width: 150px; height: 150px;"></div>
<script>

    var piscine;
    jeedom.cmd.execute({ id: '10234',
          success:  function(resultat) {   
            piscine = parseFloat(resultat);
        }
  });
    var chauffage;
    jeedom.cmd.execute({ id: '10235',
          success:  function(resultat) {   
            chauffage = parseFloat(resultat);
        }
  });
    var ecs;
    jeedom.cmd.execute({ id: '10236',
          success:  function(resultat) {   
            ecs = parseFloat(resultat);
        }
  });
    var onduleur;
    jeedom.cmd.execute({ id: '10245',
          success:  function(resultat) {   
            onduleur = parseFloat(resultat);
        }
  });
  var autres;
    jeedom.cmd.execute({ id: '10237',
          success:  function(resultat) {   
            autres = parseFloat(resultat);
        }
  });
    
    
    
  setTimeout(graph, 5000); 
  function graph(){
  Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Répartition de la veille'
    },
    tooltip: {
        pointFormat: '{series.name}<b>{point.y}€ soit: {point.percentage:.1f}%</b><b></b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    
    series: [{
          type: 'pie',
          name: ' ',
          size: '100%',
        data: [{
            name: 'Piscine',
            y: piscine,
            color: '#408080'       
          }, {
            name: 'Chauffage',
            y: chauffage,
            color: '#FF8080'
          }, {
            name: 'Eau Chaude',
            y: ecs,
            color: '#0080FF'
          }, {
            name: 'Onduleur',
            y: onduleur,
            color: '#FFFF80'
          }, {
            name: 'Autres',
            y: autres,
            color: '#FF9900'
          }
        ]
    }]
  });
  
}
      
 
</script>
  

Bénéficier de plus d’icônes

Depuis Jeedom3, Jeedom est plus fourni en icônes ! Cette partie de l’article était surtout pour Jeedom2, avare sur ces dernières … s’il reste des personnes qui tournent dessus ?

Là, il faut passer votre market de stable en bêta ! Donc attention à ce que vous faites. Rendez-vous dans le menu du site market de Jeedom. Dans votre profil, activez l’option “Activer l’option pour accéder aux plugins bêta ” :

Et dans votre market sous Jeedom/Plugins, ajoutez le plugin “Icones” qui vous permettra d’accéder à des centaines d’icônes, voir d’en ajouter !

Installez, activez ceux que vous souhaitez. Attention, du coup, le chargement des icônes quand vous souhaitez en sélectionner une sera plus long ! Vous serez prévenus.

Il faudra donc jouer soit du HTML, soit de la sélection dans votre sélection :

<i class="NOMDUPACK NOMDELICONE" style="font-size:XXpx;color:COLORCODE;"></i> 

où :

• nom du pack : brands, jeedom, jeedom2-color, etc
• nom de l’icône : l’intitulé de l’icône dans la sélection ;
• XX : taille de l’icône en pixels ;
• COLORCODE : le code hexa ou autre pour la couleur. Aidez-vous du site précédent : https://htmlcolorcodes.com/fr/

Faire des traits

Dernier truc, faire des traits. Il suffit d’ajouter un texte/html (activez transparent) avec ce code et réglez la couleur (#XXXX) et épaisseur (2px) de vos traits avec :

2px solid #2f3640

<div style=" position : relative; border-bottom: 2px solid #2f3640; min-height: 100%; transform:rotate(7deg);
-ms-transform:rotate(7deg); /* Internet Explorer */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari et Chrome */
-o-transform:rotate(7deg); /* Opera */"></div>

Ici le trait est oblique de 7°. Modifiez l’angle en positif ou négatif (-7) ou à 0 si vous voulez un trait droit !

Voilà, je vous ai livré mes secrets pour un design réussi. Beaucoup de ressources. Bien sûr, il faut du temps, de l’envie de faire quelque chose de sympa et agréable à l’œil et oui, oh que oui ! du temps, du temps, du temps … surtout si vous voulez quelque chose de sympa. Mais à la fin, quel plaisir d’avoir un écran domotique digne de ce nom !

La conclusion de cet article

Si vous avez aimé cet article, remerciez-moi en considérant une petite donation financière par Paypal. Cela prend du temps de rédiger et de partager ce contenu, sans publicité !

Merci à vous !