bonjour à tous
dans mon Dashboard, mon widget température est beau
Dans mon design, ce même widget est moche
Les statistiques sont en dessous et non a droite. De plus mon dessin de thermomètre est coupe en deux
Je ne sais pas pourquoi ?
Salut,
Très sympa 
Hello,
Je ne vais pas répondre à ta question donc je m’en excuse mais comment as tu obtenu ce beau widget?
Bonjour,
Sans donner d’informations je ne vois pas comment sans être devant ta machine trouver cette différence
Le code du widget, du CSS perso ? Bref une capture montre le souci mais ne donne aucune indication pour un diagnostic.
Si ça se trouve une erreur de taille de zone dans le design, une 2eme zone en profondeur supérieure bref c’est impossible
voici le code de mon widget
<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-01-04
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 img">
<span id="thermo#id#"></span>
</div>
<div class="pull-right val">
<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) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : 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 = 80 + parseInt(largeurPx);
var hauteurPx = (largeurPx * 64 / 20);
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' + imgNumber + '.png"></img>');
cmd.find('.thermoImg').css('cssText', 'width:' + largeurPx + ' !important;');
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 (hauteurPx>imgMinHeight){
pos = (hauteurPx - 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");
cmd.find('.img').css('height', hauteurPx + 'px');
cmd.find('.img').css('width', largeurPx);
cmd.find('.val').css('height', hauteurPx + 'px');
cmd.find('.val').css('width', '59px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Oui j’ai copier/coller le @JAG
Dans mon desing, voila ce que j’ai fait
Hello
Peut-être a moi mais en tout cas c’est pas le code qui est disponible sous mon git !!
Merci pour le partage de ton travail.
Hello @JAG
J’ai du louper quelque chose. J’ai pris le fichier png (te.thermometre.png) que j’ai mis dans html/data/img
Ensuite, j’ai copié collé le code présent dans github pour créer le widget, mais malgré tout, je n’ai pas l’image:
J’ai manqué une étape? Je ne parle pas des statistiques que je vais gérer après mais de l’image en elle-même qui ne me renvoie pas un thermomètre comme sur cette photo
Je suis en V4 je précise.
Hello
Il manque des infos
- quelle version tu as pris ?
- ou as tu mis l image ?
J’ai pris les images sources ici:
Et j’ai copié le code présent ici:
Et l image tu l as mis où ? Dans ton Jeedom
Ah oui pardon, avec Jeexplorer, je l’ai mis dans:
html/data/img
avec d’autres images où j’ai crée des widgets moi-même.
Tu as quelle version v4 ?
Si v4.2 il ne faut plus se servir de jeexplorer il est inclu dans le core
Il faut bien mettre l image dans le dossier 
que tu as dit mais aussi dans le même sous dossier que sur le git
2 « J'aime »
@JAG j’ai compris par moi-même, j’ai copié collé l’image sans le dossier avec donc le chemin était faux. J’ai rectifié et c’est tout bon et tout beau!
Au passage, un énorme merci pour toutes les images disponibles, je vais me faire plaisir avec quelques widgets! Franchement, beau boulot!
1 « J'aime »