un petit aperçu de l’avancement ?
J’imagine que le problème vient de là : Ajouter des icones - #4 par kiboost
J’ai pour ma part appliqué ces modifications et tout fonctionne
Bonjour,
Un peu d’aide pour un nul.
Comment agir pour modifier comme indiqué dans le début du programme.
Merci pour vos indications
Cordialement
Bonjour Salviaf,
as tu pu avancer sur le code car j’avoue que de mon côté ce n’est pas parfait, j’aimerai l’avoir sur mobile est là je sèche…
@Salvialf @Morzini ,
J’avoue que j’ai laissé tombé de mon côté. N’étant pas assez à l’aise, je tourne un peu en rond…
J’espère que Salvialf pourra nous dépanner (y compris sur la version Dashboard).
@++
Bonsoir,
J’ai avancé ci-joint version desktop et en dessous la mobile. Les options :
taille fonctionne mal cela marche avec 1 ou 0.9
reflet:yes/no
textshadow:yes ou no
couleur:ex -20:purple&0:lightblue&19:green&24:red
fontcolor: ex white
<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!-- ################ Round V4 ################
********** Paramètres Optionnels ***********
12 couleurs: red, blue, lightblue, orange, black, green, purple, brown, pink, sand, slategrey, yellow **
Couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
taille = taille * 90px*90px (1 | 90px*90px par défaut)
reflet = a&ffiche un reflet sur le widget
textshadow = Police Ombrée
fontcolor = Change la couleur de la police
########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="round_V4display" class="content-lg">
<img id="IMGround"/>
<div id="int_round"></div>
<div id="dec_round"></div>
<div id="unite_round">#unite#</div>
</div>
<div class="cmdStats #hide_history#">
<span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<span class="timeCmd label label-default" data-type="info"></span>
<script>
jeedom.cmd.update['#id#'] = function(_options){
let cmd = $('.cmd[data-cmd_id=#id#]');
let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);
//Récupération des décimales
var signNum = Math.sign(val);
var intNum = parseInt(val);
var decNum = Math.abs(Math.round((val - intNum) * 10));
if (signNum == "-1" && intNum == "0"){
var intNum = "-0";
}
//console.log('intNum : '+intNum);
//Calcul du nombre de chiffres
var valeurChaineInt = intNum + "";
longueurint = valeurChaineInt.length;
if (longueurint > 3) {
if (decNum != 0) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
else if (longueurint > 5) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
}
function TypeCouleur(valeur){
var typeCouleur;
//console.log('Valeur : '+valeur);
if(/true|false/.test(valeur)){
typeCouleur = 'bool';
}else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
typeCouleur = 'html';
}else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
typeCouleur = 'rgb';
}else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
typeCouleur = 'nom';
}else if(/[-+]?\d+:.+\&?/i.test(valeur)){
typeCouleur = 'objet';
}else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
typeCouleur = 'array';
}else{
typeCouleur = 'inconnu';
}
return typeCouleur;
}
let valeur2 = '#couleur#';
var test = TypeCouleur(valeur2);
//console.log('Test : '+test);
if(test == 'objet'){
var arrayVal = valeur2.split('&'), cleVal;
para = new Object();
for(var cle in arrayVal){
cleVal = arrayVal[cle].split(':');
para[cleVal[0]] = cleVal[1];
if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
couleur2 = para[cleVal[0]];
}
}
} else if (test == 'nom'){
couleur2 = "#couleur#";
} else {
couleur2 = "grey";
}
testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
fontcolor2 = "#fontcolor#";
if (testfontcolor == false) {
cmd.find('#int_round').css('color',fontcolor2);
cmd.find('#dec_round').css('color',fontcolor2);
cmd.find('#unite_round').css('color',fontcolor2);
//console.log('Font color2 : '+ fontcolor2);
}
if( '#reflet#' == 'yes' ) {
if ( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow' ) {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'_wr.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey_wr.png');
}
}
else {
if( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow') {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey.png');
}
}
tailleRound = '#taille#';
widthRound = Math.round ( 80*tailleRound );
heightRound = Math.round ( 80*tailleRound );
ecart = Math.abs(Math.round((80 - widthRound)/2));
if ( '#textshadow#' == 'yes' ) {
cmd.find('#int_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#dec_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#unite_round').css('text-shadow','1px 1px 1px #000000');
}
cmd.find('#IMGround').css('width',''+widthRound+'px');
cmd.find('#IMGround').css('min-height',''+heightRound+'px');
cmd.find('#IMGround').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
cmd.find('#int_round').css({'font-size':''+(19+(tailleRound-1)*25)+'px','top':''+(29+(tailleRound-1)*2)+'px','right':''+(38+(tailleRound-1)*3)+'px'});
cmd.find('#dec_round').css({'font-size':''+(14+(tailleRound-1)*25)+'px','top':''+(30+(tailleRound-1)*2)+'px','right':''+(20+(tailleRound-1)*5)+'px'});
cmd.find('#unite_round').css({'font-size':''+(11+(tailleRound-1)*25)+'px','top':''+(47+(tailleRound-1)*20)+'px'});
if ( tailleRound < 1.0 ) {
cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
cmd.find('#int_round').css({'font-size':'14px','top':'27px','right':'28px'});
cmd.find('#dec_round').css({'font-size':'10px','top':'28px','right':'14px'});
cmd.find('#unite_round').css({'font-size':'10px','top':'40px'});
}
cmd.find('#int_round').text(intNum);
cmd.find('#dec_round').text('. '+decNum);
cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');
if ('#time#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
}
else if ('#time#' == 'date') {
let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
let time = "à "+t[3]+":"+t[4];
cmd.find('.timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let time = "à "+t[3]+":"+t[4]+":"+t[5];
cmd.find('.timeCmd').html(time);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
@font-face {font-family: "appleberry";
font-family: stateFont;
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot"); /* IE9*/
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("data/fonts/17225af039f892713875c75d5b6023cf.woff2") format("woff2"), /* chrome、firefox */
url("data/fonts/17225af039f892713875c75d5b6023cf.woff") format("woff"), /* chrome、firefox */
url("data/fonts/17225af039f892713875c75d5b6023cf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("data/fonts/17225af039f892713875c75d5b6023cf.svg#appleberry") format("svg"); /* iOS 4.1- */
}
font-weight:normal;font-style:normal;
}
@font-face {
font-family: stateFont2;
src: url('data/fonts/jennifer.ttf');
}
@font-face {
font-family: uniteFont;
src: url('data/fonts/erasdust.ttf');
}
#int_round {
font-family: stateFont;
color: white;
font-weight:bold;
position:absolute;
}
#dec_round {
font-family: stateFont;
color: white;
font-weight:bold;
position:absolute;
}
#unite_round {
font-family: uniteFont;
color: white;
position:absolute;
width: 100%;
text-align: center;
font-weight:bold;
z-index:2;
}
#round_V4display {
position:relative;
color:#F0F0F0;
}
</style>
</div>saisir ou coller le code ici
Puis version mobile 
:
<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!-- ################ Round V4 ################
********** Paramètres Optionnels ***********
12 couleurs: red, blue, lightblue, orange, black, green, purple, brown, pink, sand, slategrey, yellow **
Couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
taille = taille * 90px*90px (1 | 90px*90px par défaut)
reflet = a&ffiche un reflet sur le widget
textshadow = Police Ombrée
fontcolor = Change la couleur de la police
########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="round_V4display" class="d-flex justify-content-between">
<img id="IMGround"/>
<div id="int_round"></div>
<div id="dec_round"></div>
<div id="unite_round">#unite#</div>
</div>
<div class="cmdStats #hide_history#">
<span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<div class="timeCmd label label-default" data-type="info"></div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
let cmd = $('.cmd[data-cmd_id=#id#]');
let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);
//Récupération des décimales
var signNum = Math.sign(val);
var intNum = parseInt(val);
var decNum = Math.abs(Math.round((val - intNum) * 10));
if (signNum == "-1" && intNum == "0"){
var intNum = "-0";
}
//console.log('intNum : '+intNum);
//Calcul du nombre de chiffres
var valeurChaineInt = intNum + "";
longueurint = valeurChaineInt.length;
if (longueurint > 3) {
if (decNum != 0) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
else if (longueurint > 5) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
}
function TypeCouleur(valeur){
var typeCouleur;
//console.log('Valeur : '+valeur);
if(/true|false/.test(valeur)){
typeCouleur = 'bool';
}else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
typeCouleur = 'html';
}else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
typeCouleur = 'rgb';
}else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
typeCouleur = 'nom';
}else if(/[-+]?\d+:.+\&?/i.test(valeur)){
typeCouleur = 'objet';
}else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
typeCouleur = 'array';
}else{
typeCouleur = 'inconnu';
}
return typeCouleur;
}
let valeur2 = '#couleur#';
var test = TypeCouleur(valeur2);
//console.log('Test : '+test);
if(test == 'objet'){
var arrayVal = valeur2.split('&'), cleVal;
para = new Object();
for(var cle in arrayVal){
cleVal = arrayVal[cle].split(':');
para[cleVal[0]] = cleVal[1];
if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
couleur2 = para[cleVal[0]];
}
}
} else if (test == 'nom'){
couleur2 = "#couleur#";
} else {
couleur2 = "grey";
}
testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
fontcolor2 = "#fontcolor#";
if (testfontcolor == false) {
cmd.find('#int_round').css('color',fontcolor2);
cmd.find('#dec_round').css('color',fontcolor2);
cmd.find('#unite_round').css('color',fontcolor2);
//console.log('Font color2 : '+ fontcolor2);
}
if( '#reflet#' == 'yes' ) {
if ( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow' ) {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'_wr.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey_wr.png');
}
}
else {
if( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow') {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey.png');
}
}
tailleRound = '#taille#';
widthRound = Math.round ( 80*tailleRound );
heightRound = Math.round ( 80*tailleRound );
ecart = Math.abs(Math.round((80 - widthRound)/2));
if ( '#textshadow#' == 'yes' ) {
cmd.find('#int_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#dec_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#unite_round').css('text-shadow','1px 1px 1px #000000');
}
cmd.find('#IMGround').css('width',''+widthRound+'px');
cmd.find('#IMGround').css('min-height',''+heightRound+'px');
cmd.find('#IMGround').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
cmd.find('#int_round').css({'font-size':''+(19+(tailleRound-1)*25)+'px','top':''+(24+(tailleRound-1)*2)+'px','right':''+(38+(tailleRound-1)*3)+'px'});
cmd.find('#dec_round').css({'font-size':''+(14+(tailleRound-1)*25)+'px','top':''+(28+(tailleRound-1)*2)+'px','right':''+(24+(tailleRound-1)*5)+'px'});
cmd.find('#unite_round').css({'font-size':''+(11+(tailleRound-1)*25)+'px','top':''+(47+(tailleRound-1)*20)+'px'});
if ( tailleRound < 1.0 ) {
cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
cmd.find('#int_round').css({'font-size':'14px','top':'25px','right':'28px'});
cmd.find('#dec_round').css({'font-size':'10px','top':'28px','right':'15px'});
cmd.find('#unite_round').css({'font-size':'10px','top':'40px'});
}
cmd.find('#int_round').text(intNum);
cmd.find('#dec_round').text('.'+decNum);
cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');
if ('#time#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
}
else if ('#time#' == 'date') {
let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
let time = "à "+t[3]+":"+t[4];
cmd.find('.timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let time = "à "+t[3]+":"+t[4]+":"+t[5];
cmd.find('.timeCmd').html(time);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
@font-face {font-family: "appleberry";
font-family: stateFont;
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot"); /* IE9*/
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("data/fonts/17225af039f892713875c75d5b6023cf.woff2") format("woff2"), /* chrome、firefox */
url("data/fonts/17225af039f892713875c75d5b6023cf.woff") format("woff"), /* chrome、firefox */
url("data/fonts/17225af039f892713875c75d5b6023cf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("data/fonts/17225af039f892713875c75d5b6023cf.svg#appleberry") format("svg"); /* iOS 4.1- */
}
font-weight:normal;font-style:normal;
}
@font-face {
font-family: stateFont2;
src: url('data/fonts/jennifer.ttf');
}
@font-face {
font-family: uniteFont;
src: url('data/fonts/erasdust.ttf');
}
#int_round {
font-family: stateFont;
color: white;
font-size:30px;
font-weight:bold;
position:absolute;
top:25px;
}
#dec_round {
font-family: stateFont;
color: white;
font-size:10px;
font-weight:bold;
position:absolute;
}
#unite_round {
font-family: uniteFont;
color: white;
position:absolute;
width: 100%;
text-align: center;
font-weight:bold;
z-index:2;
}
#round_V4display {
display:inline-block;
position:relative;
color:#F0F0F0;
}
</style>
</div>
Merci pour cet update 
Je viens de tester la partie Dashboard.
Tout est OK (plus d’erreur !) après deux manips :
1) Suppression de cette ligne
url("data/fonts/17225af039f892713875c75d5b6023cf.woff2") format("woff2"), /* chrome、firefox */
=> Je n’ai pas cette police. Est-ce un problème ?
=> A quel moment cette police est-elle utilisée ?a
2) Renommage de ma police
data/fonts/appleberry.woff" => data/fonts/17225af039f892713875c75d5b6023cf.woff"
=> Pourquoi un nom aussi complexe ?
Question subsidiaire.
Je vois que tu es passé en « bold ».
Pour revenir au normal, j’efface juste ces lignes ?
font-weight:bold;
=> As-tu prévu un paramétre supplémentaire (normal/bold) à terme ?
Encore merci pour le boulot, je me suis ENFIN débarrassé des messages d’erreurs !
@++
1 « J'aime »
Bonsoir DVB,
1/ je ne pense pas, les différentes polices étaient présentes dans le code d’origine je les ai laissé. celà doit dépendre des navigateur utilisés
2/ Mes polices étaient corrompues j’en ai téléchargé d’autres avec ce nom bizarre, tu peux modifier les noms
3/ Voici le code avec l’option fontweight : normal ou bold, j’en ai profité pour retirer plusieurs lignes inutiles.
Si tu veux l’adapter pour le widget square il suffit de remplacer tous les round par square (sauf les Math.round) et de rapatrier les images square de l’ancien widget de Renaud.
A+
<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!-- ################ Round V4 ################
********** Paramètres Optionnels ***********
12 couleurs: red, blue, lightblue, orange, black, green, purple, brown, pink, sand, slategrey, yellow **
Couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
taille = taille * 90px*90px (1 | 90px*90px par défaut)
reflet = a&ffiche un reflet sur le widget
textshadow = Police Ombrée
fontcolor = Change la couleur de la police
########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="round_V4display" class="content-lg">
<img id="IMGround"/>
<div id="int_round"></div>
<div id="dec_round"></div>
<div id="unite_round">#unite#</div>
</div>
<div class="cmdStats #hide_history#">
<span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<span class="timeCmd label label-default" data-type="info"></span>
<script>
jeedom.cmd.update['#id#'] = function(_options){
let cmd = $('.cmd[data-cmd_id=#id#]');
let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);
//Récupération des décimales
var signNum = Math.sign(val);
var intNum = parseInt(val);
var decNum = Math.abs(Math.round((val - intNum) * 10));
if (signNum == "-1" && intNum == "0"){
var intNum = "-0";
}
//console.log('intNum : '+intNum);
//Calcul du nombre de chiffres
var valeurChaineInt = intNum + "";
longueurint = valeurChaineInt.length;
if (longueurint > 3) {
if (decNum != 0) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
else if (longueurint > 5) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
}
function TypeCouleur(valeur){
var typeCouleur;
//console.log('Valeur : '+valeur);
if(/true|false/.test(valeur)){
typeCouleur = 'bool';
}else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
typeCouleur = 'html';
}else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
typeCouleur = 'rgb';
}else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
typeCouleur = 'nom';
}else if(/[-+]?\d+:.+\&?/i.test(valeur)){
typeCouleur = 'objet';
}else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
typeCouleur = 'array';
}else{
typeCouleur = 'inconnu';
}
return typeCouleur;
}
let valeur2 = '#couleur#';
var test = TypeCouleur(valeur2);
//console.log('Test : '+test);
if(test == 'objet'){
var arrayVal = valeur2.split('&'), cleVal;
para = new Object();
for(var cle in arrayVal){
cleVal = arrayVal[cle].split(':');
para[cleVal[0]] = cleVal[1];
if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
couleur2 = para[cleVal[0]];
}
}
} else if (test == 'nom'){
couleur2 = "#couleur#";
} else {
couleur2 = "grey";
}
testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
fontcolor2 = "#fontcolor#";
if (testfontcolor == false) {
cmd.find('#int_round').css('color',fontcolor2);
cmd.find('#dec_round').css('color',fontcolor2);
cmd.find('#unite_round').css('color',fontcolor2);
//console.log('Font color2 : '+ fontcolor2);
}
testfontweight = ("#fontweight#" == '#'+'fontweight#');
fontweight2 = "#fontweight#";
if (testfontweight == false) {
cmd.find('#int_round').css('font-weight',fontweight2);
cmd.find('#dec_round').css('font-weight',fontweight2);
cmd.find('#unite_round').css('font-weight',fontweight2);
//console.log('Font color2 : '+ fontcolor2);
}
if( '#reflet#' == 'yes' ) {
if ( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow' ) {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'_wr.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey_wr.png');
}
}
else {
if( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow') {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey.png');
}
}
tailleRound = '#taille#';
widthRound = Math.round ( 80*tailleRound );
heightRound = Math.round ( 80*tailleRound );
ecart = Math.abs(Math.round((80 - widthRound)/2));
if ( '#textshadow#' == 'yes' ) {
cmd.find('#int_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#dec_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#unite_round').css('text-shadow','1px 1px 1px #000000');
}
cmd.find('#IMGround').css('width',''+widthRound+'px');
cmd.find('#IMGround').css('min-height',''+heightRound+'px');
cmd.find('#IMGround').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
cmd.find('#int_round').css({'font-size':''+(19+(tailleRound-1)*25)+'px','top':''+(29+(tailleRound-1)*2)+'px','right':''+(38+(tailleRound-1)*3)+'px'});
cmd.find('#dec_round').css({'font-size':''+(14+(tailleRound-1)*25)+'px','top':''+(30+(tailleRound-1)*2)+'px','right':''+(20+(tailleRound-1)*5)+'px'});
cmd.find('#unite_round').css({'font-size':''+(11+(tailleRound-1)*25)+'px','top':''+(47+(tailleRound-1)*20)+'px'});
if ( tailleRound < 1.0 ) {
cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
cmd.find('#int_round').css({'font-size':'14px','top':'27px','right':'28px'});
cmd.find('#dec_round').css({'font-size':'10px','top':'28px','right':'14px'});
cmd.find('#unite_round').css({'font-size':'10px','top':'40px'});
}
cmd.find('#int_round').text(intNum);
cmd.find('#dec_round').text('. '+decNum);
cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');
if ('#time#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
}
else if ('#time#' == 'date') {
let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
let time = "à "+t[3]+":"+t[4];
cmd.find('.timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let time = "à "+t[3]+":"+t[4]+":"+t[5];
cmd.find('.timeCmd').html(time);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
@font-face {font-family: "appleberry";
font-family: stateFont;
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot"); /* IE9*/
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("data/fonts/17225af039f892713875c75d5b6023cf.woff2") format("woff2"), /* chrome、firefox */
url("data/fonts/17225af039f892713875c75d5b6023cf.woff") format("woff"), /* chrome、firefox */
url("data/fonts/17225af039f892713875c75d5b6023cf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("data/fonts/17225af039f892713875c75d5b6023cf.svg#appleberry") format("svg"); /* iOS 4.1- */
}
font-weight:normal;font-style:normal;
}
@font-face {
font-family: stateFont2;
src: url('data/fonts/jennifer.ttf');
}
@font-face {
font-family: uniteFont;
src: url('data/fonts/erasdust.ttf');
}
#int_round {
font-family: stateFont;
position:absolute;
}
#dec_round {
font-family: stateFont;
position:absolute;
}
#unite_round {
font-family: uniteFont;
position:absolute;
width: 100%;
text-align: center;
z-index:2;
}
#round_V4display {
position:relative;
color:#F0F0F0;
}
</style>
</div>
1 « J'aime »
Hi,
Testé et approuvé
(C’est bien noté pour « square »).
Seul le paramètre fontcolor ne fonctionne pas (mais je n’avais jamais testé avant). J’ai mis red, blue, green,… la police reste en blanc.
Cela ne me gêne pas, c’est un détail.
@+
hello,
Bizarre ça fonctionne parfaitement chez moi??
Es tu sur d’avoir bien orthographié fontcolor?
Bonjour,
Pour moi fontcolor fonctionne parfaitement aussi.
N’étant pas très à l’aise dans ce domaine, pouvez vous m’indiquer comment je peux faire varier la couleur avec la température ou plage de température.
Très beau travail
Cordialement
Je viens de réessayer, j’ai bien mis « fontcolor » mais cela ne fonctionne pas.
Ce n’est pas grave.
@+
La couleur de la police ne peut pas varier en fonction de la température c’est la couleur du widget qui change.
Oui c’est la couleur du widget que je souhaite faire changer en fonction de la température
Bonjour
Pouvez vous m’aider pour la syntaxe pour changer la couleur du widget, lorsque je mets
#value#<36 couleur yellow (par exemple) cela ne fonctionne pas!!!
Merci pour votre aide
@Morzini
Bonjour,
Je ne souhaite pas de décimales, comment je peux faire?
Pour les couleurs c’est réglé (j’ai compris!!!)
Cordialement
pour ne pas avoir de décimales il faut commenter les lignes contenant dec_Round et il n’y aura plus de décimale.
Bonne soirée.
Excuse moi de déterrer ce vieux sujet mais j’ai ce widget migré de la V3 en changeant l’url des images mais qui me remonte des erreurs dans la console F12, à cause d’un font appleberry.woff… mes compétences s’arrêtes là.
As tu eu le temps et l’envie de finir de mettre à jour ce widget?
Salut
il me manque les image png voudrais tu me ders ou les trouver ou alors me les envoyer
par avance Merci 