Bug affichage widget consoIMG

Bonjour, j’ai un bug d’affichage, je pense qu’il faut modifier le code mais ou?!

Image1|677x192

Merci

dans l’inspection chrome j’ai:

jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2
index.php?v=d&p=dashboard:1 Failed to decode downloaded font: http://192.168.1.251/plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.woff
index.php?v=d&p=dashboard:1 OTS parsing error: CFF : Failed to parse table
index.php?v=d&p=dashboard:1 Failed to decode downloaded font: http://192.168.1.251/plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.woff
index.php?v=d&p=dashboard:1 OTS parsing error: CFF : Failed to parse table
index.php?v=d&p=dashboard:1 Failed to decode downloaded font: http://192.168.1.251/plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.woff
index.php?v=d&p=dashboard:1 OTS parsing error: CFF : Failed to parse table

Salut,

J’avais le code de ce widget qui traînais quand je l’ai mis à jour V3… A voir les chemins des fichiers image & font, il faudra sûrement remplacer plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/ par data/customTemplates/dashboard/cmd.info.numeric.ConsoIMG/

<div style="width:140px;min-height : 140px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
	<div class= "conso_position#id#">
		<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/Meter2.png" class="IMGmeter#id#" alt="Meter" >
    	<span class="stateint_conso#id#" id="intNumConso#id#"></span> 
    	<span class="statedec_conso#id#" id="decNumConso#id#"></span> 
    	<span class="unite_conso#id#" id="unite#id#">#unite#</span>
	</div>
	<div id="gauge#id#" class=" indicator"></div>
<script>
  jeedom.cmd.update['#id#'] = function(_options){
	var valeur= (_options.display_value);
	var intNum = Math.floor(valeur);
	var decNum = Math.round((valeur - intNum) * 10);

      
  	$('#intNumConso#id#').text(intNum);
  	$('#decNumConso#id#').text(decNum);

	$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
		}
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    
  	if ('#petit#' == 1) {
    	$('div.conso#id#').css('width','90px');
      	$('div.conso#id#').css('min-height','80px');
      	$('div.conso_position#id#').css('left','5px');
      	$('span.statedec_conso#id#').css('font-size','20px');
      	$('span.statedec_conso#id#').css('top','36px');
      	$('span.statedec_conso#id#').css('right','9px');
      	$('span.stateint_conso#id#').css('font-size','20px');
      	$('span.stateint_conso#id#').css('top','36px');
      	$('span.stateint_conso#id#').css('right','13px');
      	$('span.unite_conso#id#').css('font-size','8px');
      	$('span.unite_conso#id#').css('top','55px');
      	$('span.unite_conso#id#').css('right','32px');
      	$('img.IMGmeter#id#').css('width','80px');
      	$('img.IMGmeter#id#').css('height','80px');
    } 
</script>
<style>
@font-face {
    font-family: "Digital-7";
  	src:	url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.ttf") format("truetype");
  	font-weight:normal;
  	font-style:normal;
}
span.stateint_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	letter-spacing: 5px;
  	color: WhiteSmoke;
  	position: absolute;
  	top: 55px;
  	right: 22px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
span.statedec_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	color: LawnGreen;
  	position: absolute;
  	top: 55px;
  	right: 15px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
span.unite_conso#id# {
    font-size:12px;
  	font-weight: bold;
  	color: #000;
  	position: absolute;
  	top: 84px;
  	right: 50px;
  }
img.IMGmeter#id# {
  	width: 120px;
  	height: 120px;
}
div.conso#id# {
  	width:140px;
  	min-height : 140px;
}
div.conso_position#id# {
  	float: center; 
  	position: absolute;
  	left: 10px;
  	top: 20px;
}
</style>
</div>

…Et les erreurs en console vont disparaitre au passage au fait :wink:

@Salvialf merci pour ton retour

J’ai changé les liens mais ca me donne des liens cassé
A chaque fois que j’accède au widget j’ai une erreur 500 qui apparaît en notification et j’ai çà dans le log:


[Mon Oct 21 20:01:35.859146 2019] [access_compat:error] [pid 23967] [client 192.168.1.72:65309] AH01797: client denied by server configuration: /var/www/html/data/customTemplates/dashboard/cmd.info.numeric.ConsoIMG, referer: http://192.168.1.251/index.php?v=d&p=dashboard
[Mon Oct 21 20:01:35.924797 2019] [access_compat:error] [pid 23967] [client 192.168.1.72:65309] AH01797: client denied by server configuration: /var/www/html/data/customTemplates/dashboard/cmd.info.numeric.ConsoIMG, referer: http://192.168.1.251/index.php?v=d&p=dashboard
[Mon Oct 21 20:01:46.075584 2019] [:error] [pid 1650] [client 192.168.1.72:65329] PHP Fatal error:  Uncaught Error: Call to undefined method networks::getBackgroundColor() in /var/www/html/plugins/widget/core/class/widget.class.php:421
Stack trace:
#0 /var/www/html/plugins/widget/core/ajax/widget.ajax.php(152): widget->displayExemple()
#1 {main}
  thrown in /var/www/html/plugins/widget/core/class/widget.class.php on line 421, referer: http://192.168.1.251/index.php?v=d&m=widget&p=widget

Et en laissant comme c’était?..donc sans modifier le code ça donne quoi?

j’ai réinstallé le widget, j’ai récupéré les images avec les décalages, mais toujours l’erreur

Réinstallé le widget? Comment tu l’as installé ce widget? Tu l’avais d’installé en V3 et tu as migré en V4 ?

Faudrait que tu regardes avec Jeexplorer où il est « installé » sur la V4 et tu remplaces le code par celui donné plus haut en mettant les chemins qui vont bien…

Si trop compliqué je check demain soir à quel endroit sont transférés les fichiers et je te donne une procédure plus précise

Édit: tu as un dossier ‹ cmd.info.numeric.ConsoIMG › dans ‹ data/customTemplates/dashboard › ?

J’ai installé le widget par le plugin widget sur une V4

Il n’y a pas de dossier ‘cmd.info.numeric.ConsoIMG’ dans ‘data/customTemplates/dashboard’

J’ai assigné le widget en allant sur « appliquer sur des commandes » et j’ai coché les 4 commandes du plugin sigri linky

Le widget est installé ici: /plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG

Heu y’a plus de plugin widget normalement en V4 !?

Bref tu as juste à remplacer le code dans le fichier ‹ /plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG.html › par celui que je t’ai donné plus haut.

Ensuite tu devras redimensionner la tuile sur le dashboard pour que le nouveau code soit pris en compte (en cliquant sur le stylo en haut à droite

c’est ce que j’avais lu oui, mais le « widget » natif et incompréhensible pour moi sans tuto…

Maj:

J’ai réussi à créer le widget sans passer par le plugin, j’ai donc désinstallé le plugin widget.
Mais c’est beaucoup beaucoup moins ergonomique!

J’essaye de bosser sur un plugin pour installer facilement certains widgets mais je manque cruellement de temps :frowning: …peut-être dans quelques mois ?!

salut

code final :

<div style="width:140px;min-height : 140px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
	<div class= "conso_position#id#">
		<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/Meter2.png" class="IMGmeter#id#" alt="Meter" >
    	<span class="stateint_conso#id#" id="intNumConso#id#"></span> 
    	<span class="statedec_conso#id#" id="decNumConso#id#"></span> 
    	<span class="unite_conso#id#" id="unite#id#">#unite#</span>
	</div>
	<div id="gauge#id#" class=" indicator"></div>
<script>
  jeedom.cmd.update['#id#'] = function(_options){
	var valeur= (_options.display_value);
	var intNum = Math.floor(valeur);
	var decNum = Math.round((valeur - intNum) * 10);

      
  	$('#intNumConso#id#').text(intNum);
  	$('#decNumConso#id#').text(decNum);

	$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
		}
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    
  	if ('#petit#' == 1) {
    	$('div.conso#id#').css('width','90px');
      	$('div.conso#id#').css('min-height','80px');
      	$('div.conso_position#id#').css('left','5px');
      	$('span.statedec_conso#id#').css('font-size','20px');
      	$('span.statedec_conso#id#').css('top','36px');
      	$('span.statedec_conso#id#').css('right','9px');
      	$('span.stateint_conso#id#').css('font-size','20px');
      	$('span.stateint_conso#id#').css('top','36px');
      	$('span.stateint_conso#id#').css('right','13px');
      	$('span.unite_conso#id#').css('font-size','8px');
      	$('span.unite_conso#id#').css('top','55px');
      	$('span.unite_conso#id#').css('right','32px');
      	$('img.IMGmeter#id#').css('width','80px');
      	$('img.IMGmeter#id#').css('height','80px');
    } 
</script>
<style>
@font-face {
    font-family: "Digital-7";
  	src:	url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.ttf") format("truetype");
  	font-weight:normal;
  	font-style:normal;
}
span.stateint_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	letter-spacing: 5px;
  	color: WhiteSmoke;
  	position: absolute;
  	top: 55px;
  	right: 29px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
span.statedec_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	color: LawnGreen;
  	position: absolute;
  	top: 55px;
  	right: 15px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
span.unite_conso#id# {
    font-size:12px;
  	font-weight: bold;
  	color: #000;
  	position: absolute;
  	top: 84px;
  	right: 50px;
  }
img.IMGmeter#id# {
  	width: 120px;
  	height: 120px;
}
div.conso#id# {
  	width:140px;
  	min-height : 140px;
}
div.conso_position#id# {
  	float: center; 
  	position: absolute;
  	left: 10px;
  	top: 20px;
}
</style>
</div>

tu auras les bons chemins et les chiffres blanc bien calés.

++

bonjour,
j’ai installé ton plugin et le virtuel impeccable!!
mais depuis quelques jours la variable au lieu d’être BLEU est devenue TEMPO_BLEU.
si bien qu’elle n’est plus reconnue et n’est plus affichée.
Y at’il quelqu’un à qui il arrive la même chose?

Heu sauf erreur c’est exactement le code que j’ai partagé quelques messages au-dessus…

Salut,

Ta demande ne doit pas concerner ce widget ou alors je n’ai pas compris

bonjour,
Je ne sais pas si c’est pour moi la réponse au cas ou:
je suis en version 3.3.35 de jeedom.
j 'ai recréé un scénario avec ton code du 22 octobre mais les variables tempo couleur jour et couleur lendemain reviennent en TEMPO_BLEU
donc pas d’affichage du petit rond bleu dans le virtuel.
Cdlt

j’ai du me chier dans mon copier / coller :

<div style="width:140px;min-height : 140px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
	<div class= "conso_position#id#">
		<img src="data/customTemplates/dashboard/cmd.info.numeric.ConsoIMG/Meter2.png" class="IMGmeter#id#" alt="Meter" >
    	<span class="stateint_conso#id#" id="intNumConso#id#"></span> 
    	<span class="statedec_conso#id#" id="decNumConso#id#"></span> 
    	<span class="unite_conso#id#" id="unite#id#">#unite#</span>
	</div>
	<div id="gauge#id#" class=" indicator"></div>
<script>
  jeedom.cmd.update['#id#'] = function(_options){
	var valeur= (_options.display_value);
	var intNum = Math.floor(valeur);
	var decNum = Math.round((valeur - intNum) * 10);

      
  	$('#intNumConso#id#').text(intNum);
  	$('#decNumConso#id#').text(decNum);

	$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
		}
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    
  	if ('#petit#' == 1) {
    	$('div.conso#id#').css('width','90px');
      	$('div.conso#id#').css('min-height','80px');
      	$('div.conso_position#id#').css('left','5px');
      	$('span.statedec_conso#id#').css('font-size','20px');
      	$('span.statedec_conso#id#').css('top','36px');
      	$('span.statedec_conso#id#').css('right','9px');
      	$('span.stateint_conso#id#').css('font-size','20px');
      	$('span.stateint_conso#id#').css('top','36px');
      	$('span.stateint_conso#id#').css('right','13px');
      	$('span.unite_conso#id#').css('font-size','8px');
      	$('span.unite_conso#id#').css('top','55px');
      	$('span.unite_conso#id#').css('right','32px');
      	$('img.IMGmeter#id#').css('width','80px');
      	$('img.IMGmeter#id#').css('height','80px');
    } 
</script>
<style>
@font-face {
    font-family: "Digital-7";
  	src:	url("data/customTemplates/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.ttf") format("truetype");
  	font-weight:normal;
  	font-style:normal;
}
span.stateint_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	letter-spacing: 5px;
  	color: WhiteSmoke;
  	position: absolute;
  	top: 55px;
  	right: 29px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
span.statedec_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	color: LawnGreen;
  	position: absolute;
  	top: 55px;
  	right: 15px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }
span.unite_conso#id# {
    font-size:12px;
  	font-weight: bold;
  	color: #000;
  	position: absolute;
  	top: 84px;
  	right: 50px;
  }
img.IMGmeter#id# {
  	width: 120px;
  	height: 120px;
}
div.conso#id# {
  	width:140px;
  	min-height : 140px;
}
div.conso_position#id# {
  	float: center; 
  	position: absolute;
  	left: 10px;
  	top: 20px;
}
</style>
</div>

j’ai du recaler les chiffres en css (léger ajustement) et changer le chemin vers le dossier data.

+++

Bonsoir

Tout d’abord merci pour la correction du code.
Par contre quand je mets le paramètre « petit = 1 » il y a encore des décalages sur valeur égale à 0 par exemple mais pas que le 14 est en fait 141:

et en version petit = 0

Pour ceux que cela intéresse

j’ai modifier le placement si petit=1

<div style="width:140px;min-height : 140px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
    <div class="title #hide_name#">
        <div class="cmdName">#name_display#</div>
    </div>
    <div class="conso_position#id#">
        <img src="data/customTemplates/dashboard/cmd.info.numeric.ConsoIMG/Meter2.png" class="IMGmeter#id#" alt="Meter">
        <span class="stateint_conso#id#" id="intNumConso#id#"></span>
        <span class="statedec_conso#id#" id="decNumConso#id#"></span>
        <span class="unite_conso#id#" id="unite#id#">#unite#</span>
    </div>
    <div id="gauge#id#" class=" indicator"></div>
    <script>
        jeedom.cmd.update['#id#'] = function(_options) {
            var valeur = (_options.display_value);
            var intNum = Math.floor(valeur);
            var decNum = Math.round((valeur - intNum) * 10);


            $('#intNumConso#id#').text(intNum);
            $('#decNumConso#id#').text(decNum);

            $('.cmd[data-cmd_id=#id#]').attr('title', 'Date de valeur : ' + _options.valueDate + '<br/>Date de collecte : ' + _options.collectDate)
        }
        jeedom.cmd.update['#id#']({
            display_value: '#state#',
            valueDate: '#valueDate#',
            collectDate: '#collectDate#',
            alertLevel: '#alertLevel#'
        });

        if ('#petit#' == 1) {
            $('div.conso#id#').css('width', '90px');
            $('div.conso#id#').css('min-height', '80px');
            $('div.conso_position#id#').css('left', '5px');
            $('span.statedec_conso#id#').css('font-size', '20px');
            $('span.statedec_conso#id#').css('top', '35px');
            $('span.statedec_conso#id#').css('right', '10px');
            $('span.stateint_conso#id#').css('font-size', '20px');
            $('span.stateint_conso#id#').css('top', '35px');
            $('span.stateint_conso#id#').css('right', '17px');
            $('span.unite_conso#id#').css('font-size', '8px');
            $('span.unite_conso#id#').css('top', '55px');
            $('span.unite_conso#id#').css('right', '32px');
            $('img.IMGmeter#id#').css('width', '80px');
            $('img.IMGmeter#id#').css('height', '80px');
        }

    </script>
    <style>
        @font-face {
            font-family: "Digital-7";
            src: url("data/customTemplates/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.ttf") format("truetype");
            font-weight: normal;
            font-style: normal;
        }

        span.stateint_conso#id# {
            font-family: "Digital-7";
            font-size: 30px;
            letter-spacing: 5px;
            color: WhiteSmoke;
            position: absolute;
            top: 55px;
            right: 29px;
            transform: scale(0.7, 1);
            -webkit-transform: scale(0.7, 1);
            /* Safari and Chrome */
            -moz-transform: scale(0.7, 1);
            /* Firefox */
            -ms-transform: scale(0.7, 1);
            /* IE 9+ */
            -o-transform: scale(0.7, 1);
            /* Opera */
        }

        span.statedec_conso#id# {
            font-family: "Digital-7";
            font-size: 30px;
            color: LawnGreen;
            position: absolute;
            top: 55px;
            right: 15px;
            transform: scale(0.7, 1);
            -webkit-transform: scale(0.7, 1);
            /* Safari and Chrome */
            -moz-transform: scale(0.7, 1);
            /* Firefox */
            -ms-transform: scale(0.7, 1);
            /* IE 9+ */
            -o-transform: scale(0.7, 1);
            /* Opera */
        }

        span.unite_conso#id# {
            font-size: 12px;
            font-weight: bold;
            color: #000;
            position: absolute;
            top: 84px;
            right: 50px;
        }

        img.IMGmeter#id# {
            width: 120px;
            height: 120px;
        }

        div.conso#id# {
            width: 140px;
            min-height: 140px;
        }

        div.conso_position#id# {
            float: center;
            position: absolute;
            left: 10px;
            top: 20px;
        }

    </style>
</div>

1 « J'aime »

Bonjour et merci pour ce plugin modifié et mis a jour…mais j’ai toujours un petit probleme d’affichage
avant de rentrer dans les details , (jeedom V4) qu’y a t’il dans le repertoire :
src: url("plugins/widget/core/template/dashboard/
Je pense que c’est les widgets issus d’une migration V3