Je chercher depuis plusieurs jours des erreurs sur mon jeedom (cf ce post Erreur JavaScript sur Dashboard)
et est-ce que ce code de widget est compatible V4 ?
Si non est- ce compliqué pour le rendre compatible ?
Si oui est-ce qu’il y a ce type de widget en V4 ? Celui de JAG je ne trouve pas le visuel top (désolé JAG c’est bien le seul que je n’aime pas trop :))
<div style="min-width:120px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<center><span class="cmdName" style="font-weight: bold;font-size : 0.8em;width: 65px;height: 17px;overflow: hidden;position: relative;#hideCmdName#;" title="#name#">#name_display#</span></center>
<div style="text-align:center;">
<div id="thermometreDivIMG#id#" class="thermometre_div_img">
<span class="thermometre_img" id="thermometreIMG#id#"></span>
<span class="thermometre_state" id="thermometreState#id#">#state#</span>
<span class="thermometre_unite" id="thermometreUnite#id#">#unite#</span>
</div>
<div>
<!-- A activer si vous voulez avoir les statistiques -->
<div>
<span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
<span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
<span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
<span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
</span>
</div>
</div>
</div>
<!-- Début du script -->
<script>
/* Attributs list :
- position : position of the icon you want : left or right, by default : left
- heightImage : height in pixel of image to show default is 90
- widthImage : width in pixel of image to show default is 90
- fontsizeState : state font size in px or em, default : 2em
- fontsizeUnite : unite font size in px or em, default : 1em
- displayState : display type allow to hide the state with none by example, by default : block
- oneLine : display State and Unite on the same line
*/
var imgHeight;
var imgWidth;
<!-- La taille réelle de votre image n'est pas importante mais doit respecter un ratio de 2.4 entre la hauteur et la largeur -->
if (!isNaN(parseFloat("#heightImage#"))) {
imgHeight = "#heightImage#";
} else {
imgHeight = "72"; <!-- Peut importe la taille de votre image originale, elle sera ramenée à la taille de 72Px de hauteur -->
}
if (!isNaN(parseFloat("#widthImage#"))) {
imgWidth = "#widthImage#";
} else {
imgWidth = "30"; <!-- Peut importe la taille de votre image originale, elle sera ramenée à la taille de 30Px de Largeur -->
}
/* C'est ici que vous définissez les plages de température qui vont permettre d'afficher une image différente à chaque fois
Vous pouvez les modifier suivant vos besoins. Pensez également à modifier le chemin du répertoire des images.
*/
if ("#state#" <= 0) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo10.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 0 && "#state#" <= 6) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo20.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 6 && "#state#" <= 12) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo30.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 12 && "#state#" <= 18) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo40.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 18 && "#state#" <= 25) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo50.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 25 && "#state#" <= 30) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo80.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 30 && "#state#" <= 40) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo90.png' class='thermometre_img' id='thermometre#id#'/>");
}
else {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo100.png' class='thermometre_img' id='thermometre#id#'/>");
}
/* Cette partie du script ne doit pas être modifiée,
sauf si vous êtes un/une spécialiste
Le style est géré plus bas dans le code
*/
if ("#position#" == "right") {
$("#thermometreDivIMG#id#.thermometre_div_img").css("float","right");
$("#thermometreIMG#id#.thermometre_img").css("margin-right","15px");
} else {
$("#thermometreDivIMG#id#.thermometre_div_img").css("float","left");
$("#thermometreIMG#id#.thermometre_img").css("margin-left","15px");
}
if (typeof "#fontsizeState#" != "undefined" && "#fontsizeState#" != "2em") {
$("#thermometreState#id#.thermometre_state").css("height","#fontsizeState#");
}
if (typeof "#fontsizeUnite#" != "undefined" && "#fontsizeUnite#" != "1em") {
$("thermometreUnite#id#.thermometre_unite").css("height","#fontsizeUnite#");
}
if (typeof "#displayState#" != "undefined" && "#displayState#" != "block") {
$("#thermometreState#id#.thermometre_state").css("display","#displayState#");
}
if (typeof "#oneLine#" != "undefined" && "#oneLine#" == "on") {
if ("#position#" == "right") {
//$("#thermometreState#id#.thermometre_state").css("margin-left","20px");
$("#thermometreUnite#id#.thermometre_unite").css("display","block");
$("#thermometreUnite#id#.thermometre_unite").css("margin-top","-25px");
$("#thermometreUnite#id#.thermometre_unite").css("margin-right","85px");
} else {
$("#thermometreState#id#.thermometre_state").css("margin-right","20px");
$("#thermometreUnite#id#.thermometre_unite").css("display","block");
$("#thermometreUnite#id#.thermometre_unite").css("margin-top","-25px");
$("#thermometreUnite#id#.thermometre_unite").css("margin-left","85px");
}
}
</script>
<!-- Fin du script -->
</div>
<!-- Le code suivant gère le style et l'affichage des données, vous pouvez le modifier et faire des tests-->
<style>
span.thermometre_img {
height: 90px;
float: left;
}
<!-- Gestion de l'affichage de l'image du thermomètre -->
span.thermometre_div_img {
margin-left: 5px;
position:relative;
margin-top: 10px;
height: 64px;
width: 62px;
float: left;
display: block;
}
<!-- Gestion de l'affichage de la température -->
span.thermometre_state {
font-weight: bold;
font-size: 2em;
margin-top: 10px;
margin-left: 5px;
float: left;
display: block;
}
<!-- Gestion de l'affichage de l'unité "C°" (ou autre chose) -->
span.thermometre_unite {
font-size: 0.7em;
font-weight: bold;
margin-top: 14px;
margin-left: 2px;
top: 30px;
float: right;
display: block;
}
</style>
Je vais tenter JAG encore une fois mais c’est vraiment du chinois pour moi car j’avais regarder pour changer le visuel et je n’avais pas réussi
Mon visuel actuel ne me plait pas trop non plus mais je n’arrive pas à trouver mon bonheur sur les températures.
Difficile peut être mais c’est ce que l’on regarde le plus tous les jours.
Ma lecture de code et mes connaissances date du lycée donc du siècle dernier même si cela n’a pas changé c’est pas comme le vélo
Comme j’adore le reste de ta production @JAG je garderais ton visuel si je n’y arrive pas
D’ailleurs suite à ma migration V3 vers V4 il vaut mieux supprimer mes widget compatible V4 installé depuis la V3 et faire les manip de copier/coller les fichiers les dossiers via Jeexplorer ? Ou laisser comme ça ce qui marche ?
Ma migration sous Jeedom v4 étant achevée, je me penche sur les petits détails. Le widget thermomètre a une police un peu trop juste, pas assez lisible sur la tablette. Cela donne ça :
Sais-tu me dire à quel endroit du code modifier la taille de la police ?
Si cela se trouve, le code que j’utilise n’est pas le dernier et ce n’est pas le bon. N’hésite pas à me le dire.
J’utilise celui-ci :
Merci.
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.thermometer.html
Comment: A thermometer image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2020-05-01
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : https://github.com/ajja17/thermometreIMG/tree/master/cmd.info.numeric.thermometreIMG2
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="pull-left">
<span id="thermo#id#"></span>
</div>
<div class="pull-right">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var temperature = parseFloat(_options.display_value).toFixed(1);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 65 + parseInt(largeurPx);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (temperature <=0){
imgNumber = '00';
}else if (temperature > 0 && temperature <= 5) {
imgNumber = '01';
}else if (temperature > 5 && temperature <= 10) {
imgNumber = '02';
}else if (temperature > 10 && temperature <= 13) {
imgNumber = '03';
}else if (temperature > 13 && temperature <= 16) {
imgNumber = '04';
}else if (temperature > 16 && temperature <= 18) {
imgNumber = '05';
}else if (temperature > 18 && temperature <= 20) {
imgNumber = '06';
}else if (temperature > 20 && temperature <= 22) {
imgNumber = '07';
}else if (temperature > 22 && temperature <= 24) {
imgNumber = '08';
}else if (temperature > 24 && temperature <= 26) {
imgNumber = '09';
}else if (temperature > 26 && temperature <= 28) {
imgNumber = '10';
}else if (temperature > 28 && temperature <= 34) {
imgNumber = '11';
}else{
imgNumber = '12';
}
cmd.find('#thermo#id#').empty().append('<img class="thermoImg" src="data/img/thermometer/thermometer' + imgNumber + '.png"></img>');
cmd.find('.thermoImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgHeight = document.querySelector(".thermoImg").clientHeight;
var imgMaxHeight = 93;
var imgMinHeight = 70;
cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;')
if (imgHeight>imgMinHeight){
pos = (imgHeight - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(temperature);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
cmd.find('.unitValue').css('cssText', cssCurrentValue );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
cmd.css("width", largeurWidget + "px");
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Bonsoir @JAG,
J’utilise le widget thermomètre mais quand je l’importe en « commande » dans mon desgin voici comment il apparaît…
Il y a un double problème de température en bas et d’image tronquée… Je n’arrive pas à comprendre d’où vient le problème …
Il marche très bien dans le dashboard :
Par contre sur ton design on dirait que tu l as mis dans un tableau ? Si oui ton tableau est peut être un peu petit car la température ne doit pas être dessous
Par contre il serait bien d ouvrir un autre sujet car là on mélange tout
Je reviens sur mon petit souci de widget. J’ai réussi à augmenter la police, mais pas à centrer l’affichage de la température. Voici ce que cela donne visuellement, c’est moche… :
L’un de vous saurait m’aiguiller sur la modification à faire sur le code ?
Merci d’avance !
Je reposte la dernière version modifiée :
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.thermometer.html
Comment: A thermometer image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2020-05-01
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : https://github.com/ajja17/thermometreIMG/tree/master/cmd.info.numeric.thermometreIMG2
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="pull-left">
<span id="thermo#id#"></span>
</div>
<div class="pull-right">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var temperature = parseFloat(_options.display_value).toFixed(1);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 65 + parseInt(largeurPx);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (temperature <=0){
imgNumber = '00';
}else if (temperature > 0 && temperature <= 5) {
imgNumber = '01';
}else if (temperature > 5 && temperature <= 10) {
imgNumber = '02';
}else if (temperature > 10 && temperature <= 13) {
imgNumber = '03';
}else if (temperature > 13 && temperature <= 16) {
imgNumber = '04';
}else if (temperature > 16 && temperature <= 18) {
imgNumber = '05';
}else if (temperature > 18 && temperature <= 20) {
imgNumber = '06';
}else if (temperature > 20 && temperature <= 22) {
imgNumber = '07';
}else if (temperature > 22 && temperature <= 24) {
imgNumber = '08';
}else if (temperature > 24 && temperature <= 26) {
imgNumber = '09';
}else if (temperature > 26 && temperature <= 28) {
imgNumber = '10';
}else if (temperature > 28 && temperature <= 34) {
imgNumber = '11';
}else{
imgNumber = '12';
}
cmd.find('#thermo#id#').empty().append('<img class="thermoImg" src="data/img/thermometer/thermometer' + imgNumber + '.png"></img>');
cmd.find('.thermoImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgHeight = document.querySelector(".thermoImg").clientHeight;
var imgMaxHeight = 93;
var imgMinHeight = 70;
cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;')
if (imgHeight>imgMinHeight){
pos = (imgHeight - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(temperature);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 10 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (25 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '30px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
cmd.find('.unitValue').css('cssText', cssCurrentValue );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 25px !important;');
cmd.find('div span.tooltips').css('cssText', 'font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
cmd.css("width", largeurWidget + "px");
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Bonjour à tous,
Je commence doucement à vouloir mettre des widgets sur mon jeedom.
J’ai installé le widget ci-dessus mais quand je l’applique à une commande au lieu d’afficher l’image ça m’affiche un texte « why github? »
Désolé j’ai du rater un truc…
Merci d’avance pour votre aide
Bonjour,
Super, merci je n’ai plus le message d’erreur github.
Par contre l’image ne s’affiche pas, le chemin a l’air d’etre le bon pourtant !
J’obtiens ce visuel bien loin du tiens, il me manque encore pas mal de chose …