[Présentation] Benj29 et blog Jeedom-Facile

Hello et voilà, après quelques jours de réflexion, le tableau de suivi « intérieur » est fini.

Règle de base tout en gris, sauf alerte ou warning.
Si la VMC tourne, flèche tournante en orange à défaut gris.
Pour les températures, j’ai un widget qui en fonction du mode (clim,chauffage, arrêt) vérifie « intelligemment » la température. Exemple, en chauffage, je vérifie si la température est inférieure à 1° de la consigne ou 2°. L’été ce sera l’inverse, c’est à dire supérieur. Et en fonction je colorise.
De même si les splits chauffent, température en +. S’ils refroidissent ce sera le même en bleu avec -. Pour l’humidité, simple gamme de valeur pour colorer.

Les entêtes des colonnes sont cliquables pour ouvrir de futurs popups.

4 « J'aime »

Salut
tu pense toujours a moi? :herb:

Mais je ne comprends pas du tout ce que tu veux…
Ce n’est qu’un tableau avec une mise en forme adaptée et le code pour merger les colonnes données plus haut.
Dis moi exactement ce que tu as besoin car sincèrement je ne vois pas.

Salut
Précisément les etape avec les quelles tu a fait ce maguifique tablau, tu sais je suis un déboutant en jeedom et quand je vois un travail innovant je demande les détail pour élargir mes horizons jeedomien, pardon de prendre trop de ton temps.
très cordialement

Bonsoir,

Je n’avance pas forcément à la vitesse que je souhaite car je nettoie toujours.
Mais peu à peu…
Il me reste à solutionner le problème de l’icone action qui change avec l’aide de @noodom.
Faire tous les popups mais peu à peu… ça prend forme !

Je partage au cas où les icones que j’ai faites avec Photofiltre.
Le reste c’est par l’excellent plugin icones et les librairies proposées mdi, mti.

Icones Jeedom V4.txt (133,1 Ko)

A renommer en .zip (.txt).

1 « J'aime »

Bonjour @nak,

En relisant tes messages, j’ai l’impression que tu te fais une montagne de beaucoup de choses. Je ne fais qu’utiliser des virtuels, en mode disposition, avancée en tableaux.

Ensuite, toutes les astuces que j’ai données sont les mêmes que celles déjà données sur mon blog puisque je joue avec width, heigth, vertical-align, text-align, background-color, color etc.

font-family:Rubik-light;vertical-align: middle;text-align:center;
background-color:ghostwhite;color: black;font-size:15px;column-span:all;

La base est ici :

La fonction column-span:all permet de fusionner toutes les colonnes d’une ligne. Voir :

https://youdom.net/2020/06/18/creer-et-centrer-des-informations-dans-un-tableau-de-mise-en-forme-sous-jeedom/

Et dans les cases, je ne fais qu’appel à mes virtuels et leur état de capteurs ouverts etc. Les led viennent de là :

Pour les boutons, comme je l’ai indiqué, j’utilise ce widget et les librairies d’icones du plugin du même nom dispo en béta icones.

Je ne peux que te conseiller de partir de ce tutoriel si tu débutes et ne pas placer ta barre trop haute. J’en suis à 5 ans de Jeedom depuis la V2 après 1 an de Domoticz. Et je m’estime bien nul à côté des compétences de vrais informaticiens de métier. Donc il n’y a pas de secret. Un marathon ça se ne court pas en 4h comme ça (déjà) et il faut plusieurs semaines… comme tout !

https://youdom.net/2020/11/28/faire-un-design-simple-monopage-avec-jeedom/?fbclid=IwAR0WshGzZz5eiMpK2K9Tf7Dcoz6ym5qtX79ss88PKbP6GYkwp86LAHVsSII

Les widgets que j’ai créés rapidement sur la même base (mais il te faut toujours avoir les icones du plugin installées) :

Les icones « rapides » utilisent la fonction widget bien pratique :

Mais tu peux faire la même chose quand tu veux une mise en forme un peu plus poussée (exemple boite aux lettres) :

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          // 0 rien ; 1 = facteur passé ; 2 = courrier récupéré
          
          if (state == 0 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox" style="color:#acacac;font-size:65px;"></i>');
			}
		  else if (state == 1 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox-up" style="color:#30b455;font-size:65px;"></i>');
			}
          else if (state == 2 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox-open-up" style="color:#ff8c00;font-size:65px;"></i>');
			}
		  cmd.find('.state').empty().append(' '+state);
          cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Pour avoir des couleurs sur mes virtuels exemple jaune, orange, rouge en fonction de limite.
J’utilise ce widget dont je passe les options de #color1#, #color2# par les options d’affichage du widget.
Sur le même principe, j’ai modifié ce code pour avoir des changements en fonction de la clim, chauffage etc.

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="content-xs">
		<span class="cmdNameColor#id# cmdName #hide_name#">#name_display# </span><span class="valueColor#id# value">#state#</span><span class="uniteColor#id# unite"> #unite#</span>
	</div>	
  <style>
    .cmdNameColor#id# {
      font-size: 12px;
    }
    .valueColor#id# {
      font-size: 12px;
    }
    .uniteColor#id# {
      font-size: 12px;
    }
</style>
	
	<script>
		jeedom.cmd.update['#id#'] = function(_options) {
			var cmd = $('.cmd[data-cmd_id=#id#]')
			
			//Définition des paramètres et couleurs par défaut et définition des limites par défaut
            //Sinon à passer en paramètres !
            
            var saison = is_numeric('#saison#') ? parseFloat('#saison#'):0;
            
			var color1 = ('#color1#' != '#' + 'color1#') ? "#color1#" : "#5078aa";
			var color2 = ('#color1#' != '#' + 'color1#') ? "#color2#" : "#acacac";
			var color3 = ('#color1#' != '#' + 'color1#') ? "#color3#" : "#ff8c00";
			
            var AppliedColor = ('#AppliedColor#' != '#' + 'AppliedColor#') ? "#AppliedColor#" : "#FFFFFF";
            
			var limit = is_numeric('#limit#') ? parseFloat('#limit#'):15;
            var range1 = is_numeric('#range1#') ? parseFloat('#range1#'):1;
            var range2 = is_numeric('#range2#') ? parseFloat('#range2#'):2;
            var valeur = parseFloat(_options.display_value).toFixed(1);
          	
          

          	//Fonctionne sur un range +/-1 ; +/-2 ; à défaut hors range
          	//Chauffage = 0 on regarde si inférieur uniquement
          
            if (saison == 0) {
                var limit1 = limit-range1;
            	var limit2 = limit-range2;
               	if (valeur >= limit1) {
            	   	AppliedColor = color1;          
         	   	} 
               	else if ((valeur >= limit2) && (valeur < limit1)) {
                   	AppliedColor = color2;            
               	} 
               	else {
                   	AppliedColor = color3;            
               	} 
        	}
          	//Arrêt = 1 on regarde si inférieur et supérieur
          	else if (saison == 1) {
                var limit1i = limit-range1;
            	var limit2i = limit-range2;
				var limit1s = limit+range1;
            	var limit2s = limit+range2;
			   	if ((limit1i <= valeur) && (valeur <= limit1s)) {
                	AppliedColor = color1;          
            	} else if ((limit2i <= valeur) && (valeur <= limit2s)) {
                	AppliedColor = color2;            
            	} else {
                	AppliedColor = color3;            
            	}       
      		}
            //Clim = 2 on regarde si supérieur uniquement
            else if (saison == 2) {
                var limit1 = limit+range1;
            	var limit2 = limit+range2;
               	if (valeur <= limit1) {
            	   	AppliedColor = color1;          
         	   	} 
               	else if ((valeur > limit1) && (valeur <= limit2)) {
                   	AppliedColor = color2;            
               	} 
               	else {
                   	AppliedColor = color3;            
               	} 
        	}
            //Debug au cas où on fixe une couleur bien lisible !
            else {
                   	AppliedColor = "#2B140E";            
                 }      
          
            
			cmd.find('.cmdNameColor#id#').attr('style', 'color: ' + AppliedColor + ';');
			cmd.find('.valueColor#id#').attr('style', 'color: ' + AppliedColor + ';');
			cmd.find('.uniteColor#id#').attr('style', 'color: ' + AppliedColor + ';');
            
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
			cmd.find('.state').empty().append(_options.display_value);
			if(_options.alertLevel){
				if(_options.alertLevel == 'warning'){
					cmd.find('.content-xs').addClass('label label-warning')
					cmd.attr('data-alertlevel','warning');
				}else if(_options.alertLevel == 'danger'){
					cmd.find('.content-xs').addClass('label label-danger')
					cmd.attr('data-alertlevel','danger');
				}else{
					cmd.find('.content-xs').removeClass('label label-warning label-danger')
					cmd.attr('data-alertlevel','none');
				}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
	</script>
</div>
1 « J'aime »

Salut à toi mon ami @benj29 :herb:
Tout d’abord je voudrais te remercier vivement de cette belle réponse bien détaillée que tu viens de me faire , elle est en effet extremement pédagogique et je suis conscient du temps que tu as dû passer pour me l’élaborer.
étant débutant en matière de jeedom, mais surtout subjuguer par l’esthétique de ton projet :heart: :orange_heart: :yellow_heart: que je vais mettre en pratique rapidement , cela t’expliquera les doutes qui émergent dans mon esprit, encore une fois milles merci, avec toute mon amitié

1 « J'aime »

Je peux aider avec le temps que j’ai à ma disposition. Après, sincèrement, faut essayer, tenter.
J’ai perdu 4h cette après-midi pour juste faire ça…
La gestion des activités et de l’ampli multi zone. Et tout était déjà implémenté côté jeedom. Là c’est que les virtuels et les tableaux.

1 « J'aime »

Encore merci atoi mon ami @benj29 :yellow_heart:

Salut @benj29,
J’ai vu dans ton post JPi que tu utilisais des tablettes lenovo ?
Tu en es content?
Il faut que je change la mienne qui est hs mais la gamme est tellement vaste je me pose toujours des questions sur les modèles/budget/performance.

Merci et bonne journée.

J’en suis content à l’exception d’une qui me pose des soucis mais le problème est côté webview.
La m10 plus est un très bon produit. La xiaomi mipad4 plus aussi. 4 Go de ram, bonne batterie.
Et rapport qualité prix imbattable à moins de 200 euros.

Oui la lenvovo me fait de l’œil depuis un moment mais y’a tellement de choix que j’hésite du coup…
Merci de l’info

je n’ai trouvé aucune alternative sérieuse personnellement à ce niveau de prix. J’ai écarté Huawei aux problématiques OS et de lien Android…

Ça marche merci de l’info je vais m’orienter vers ce type de tablette.
Et bon courage pour ton bug alors.

Au passage stylé ton design black & white, bravo.

2 « J'aime »

Merci. Je progresse…

2 « J'aime »

Pour ma part, j’ai une mediapad Huawei 10 pouces sous Android 8 et aucun souci.
Elle n’est pas tres rapide mais honnêtement pour faire de l’affichage de Design et faire office de camera intérieur, je referai le même choix.
La reco vocale marche bien mais j’ai laissé tomber au profil de Alexa car jamais réussi a faire marche eMeetMe 2 facilement en bluetooth.
Pas de regrets au vue de ce qu’on fait avec Alexa et le prix que ca coute…
J’avais du l’acheter 160€. J’en cherchais une blanche et pas evident à trouver. C’est plus discret…

Blog en dérangement pour le weekend…

1 « J'aime »

Petit à petit. En 1 mois et 1 semaine.

Bon il me reste encore à fixer le problème du colspan qui saute ainsi que toutes les popups à mettre en place : digicode, pilotage et configuration etc.

Cela prend forme :).

6 « J'aime »

Tres beau travail, bravo !
Benoit

1 « J'aime »

Bonjour
C’est Sublime. :herb:
Cordialement

1 « J'aime »