Bonjour aux pro ici
J’ai essayer de modifier ce code (voir le lien) pour en faire un widget mais je n’y arrive pas …
quelqun’un est tenté d’essayer ?
Salut,
winhex avait fait un widget presque identique qu’il avait partagé sur l’ancien forum :
https://www.jeedom.com/forum/viewtopic.php?t=44352
Arfff, je comprend pas pourquoi il m’affiche tout a la ligne pour le température
j’ai bien trouver comment agrandir le « cadre » ou s’affiche la température instantanée, mais cela ne change rien. le 21.5° s’affiche
2
1
.5
Les caractères sont probablement trop grand pour le cadre.
Quelles tailles as-tu défini?
Mets la taille de ta font en 1em pour voir
oui déjà essayé également mais rien, que dalle, la taille des caractères se modifient bien mais cela reste comme sur mon imprim’écran
Salut,
Il a pas trop mal accusé le passage en V4 mais y’a quand même pas mal de code à revoir pour lui redonner exactement la présentation d’avant… déjà pour éviter le word-break tu peux utiliser ça:
<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="#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>
<div class="centered">
<div class="tg-thermometer small" style="height: 120px;">
<div class="draw-a"></div>
<div class="draw-b"></div>
<div class="meter">
<div class="statistics">
<div class="percent percent-a"></div>
<div class="percent percent-c"></div>
<div class="percent percent-e"></div>
</div>
<div class="mercury">
<div class="percent-current"></div>
<div class="mask">
<div class="bg-color"></div>
</div>
</div>
</div>
</div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
var intNum = Math.floor(value);
var decNum = Math.round((value - intNum) * 10);
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
var moyValue = (maxValue+minValue)/2;
var corrNegative = 0;
if(minValue < 0){
var corrNegative = minValue*-1;
var moyValue = Math.floor((minValue+maxValue)/2);
}
var maxvaleur = maxValue + corrNegative;
var valeurState = value + corrNegative;
var jauge = Math.round( (_options.display_value - ('#minValue#')) * (100/('#maxValue#' - ('#minValue#'))) );
$('.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);
// $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');
$('.cmd[data-cmd_id=#id#] .percent-current').empty().append(intNum).append('<span class="decNumclass">.'+decNum+'</span><span class="uniteclass">#unite#</span>');
$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
$('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');
$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
/* commentaire */
[data-cmd_id="#id#"] .decNumclass {
font-size:12px;
color: #323232 ;
// position: absolute;
top: 15px;
right: 10px;
font-weight: 500;
}
[data-cmd_id="#id#"] .uniteclass {
font-size:12px;
color: gray ;
position: absolute;
font-weight: 500;
top: 3px;
right: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer {
width: 100px;
position: relative;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter {
width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
height: calc(120px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
width: 32px;
height: 32px;
left: -6px;
bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
width: 14px;
height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
display: none;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
text-align: right;
position: absolute;
width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
bottom: calc(100% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
bottom: calc(50% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
width: 10px;
margin: auto;
left: 0;
right: 0;
height: calc(100% - 50px);
top: 12px;
position: absolute;
background-color: #d6d6d6;
border-radius: 10px 10px 0 0;
z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #F44336;
border-radius: 10px 10px 0 0;
background: linear-gradient(0deg, #f44336, #3f51b5);
transition: all .5s ease-in-out;
height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
position: absolute;
bottom: 0;
overflow: hidden;
width: 10px;
height: 100%;
border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
position: absolute;
width: 10px;
height: calc(200px - 57px);
background: linear-gradient(#F44336, #8BC34A, #2196F3);
// background: linear-gradient(#2196F3, #8BC34A, #F44336);
bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
position: absolute;
left: 0;
top: 4px;
transform: translateX(calc(-100% - 10px)) translateY(-60%);
background-color: #fff;
padding: 5px 10px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
border-radius: 2px;
font-weight: 500;
font-size: 2.2em;
color: #333;
word-break: normal;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
border-left: 8px solid white;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
content: "";
position: absolute;
right: 0;
transform: translateX(calc(100% - 2px));
top: 0;
bottom: 0;
margin: auto;
width: 0;
height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
border-left: 7px solid rgba(0, 0, 0, 0.2);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
content: "";
position: absolute;
right: 0;
transform: translateX(calc(100% - 0px));
top: 0;
bottom: 0;
margin: auto;
width: 0;
height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
background-color: #fff;
height: calc(100% - 20px);
width: 30px;
margin: auto;
position: relative;
border-radius: 20px 20px 0 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
width: 100%;
bottom: 0px;
left: 0;
position: absolute;
height: 50px;
background-color: #fff;
content: "";
z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
content: "";
width: 50px;
height: 50px;
position: absolute;
background-color: #fff;
left: -10px;
bottom: -20px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
position: absolute;
width: 50px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 50px;
z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 24px;
height: 24px;
background-color: #2196F3;
content: "";
border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
position: absolute;
left: 0;
right: 0;
width: 10px;
top: 0;
margin: auto;
height: 20px;
background-color: #2196F3;
content: "";
border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/** position: absolute !important; **/
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/** width: 300px;
height: 300px; **/
width: 100%; height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics {
position: absolute;
left: 0;
z-index: 1;
font-size: 1em;
top: 0;
height: 100%;
font-style: italic;
font-weight: 500;
/** text-shadow: 1px 1px #fff; **/
}
</style>
</div>
C’est pas parfait mais ça fait la blague j’essaye d’y rejeter un œil dans les prochains jours.
Ah ouais carrément,
là j’ai le 21 en entier
et le .5 en dessous
Mais merci c’'est déjà bien mieux,
vais essayer de ré-agrandir le cadre pour voir si le .5 vient se coller apres
car la je fais un copier coller brutal
En fait ça se joue ici:
// $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');
$('.cmd[data-cmd_id=#id#] .percent-current').empty().append(intNum).append('<span class="decNumclass">.'+decNum+'</span><span class="uniteclass">#unite#</span>');
Si tu veux quelque chose de lisible immédiatement tu peux décommenter la 1ère ligne (en enlevant les 2 slash //) et commenter la 2ème (ajout des 2 slash au début)
Ehhh je suis passé sur ses deux lignes tout a l heure me disant que s’était lié
j’ai « joué » avec la ligne que tu me dis de commenter mais en vain…
et là… miracle
Merci encore
Une chose à savoir quand tu modifies le code d’un widget c’est que tu dois au moins rafraîchir le cache du navigateur avec ctrl+F5 voire carrément redimensionner la tuile sur le dashboard pour que les changements soient appliqués.