Salut à tous,
Sous Jeedom v3, j’utilisais le widget round :
Très pratique pour afficher température de consigne, et statut du chauffage (rouge quand actif par exemple).
Je cherche le code actualisé pour Jeedom v4, savez-vous où le trouver ?
Merci.
Bonsoir,
Un petit « up » en passant…
Bonjour
Est ce de ce widget mobile.info.numeric.Round dont tu parles ?
@iPapy,
Oui c’est ça ainsi que cmd.info.numeric.Round.html pour le Dashboard
J’avais déjà eu de l’aide suite évolution Jeedom V3 ici :
https://forum.jeedom.com/viewtopic.php?t=41597&start=40
@Salvialf
Merci avec vous deux je suis rassuré !
Pour info c’est un widget crucial pour moi, je l’utilise avec l’excellent plugin chauffage de DavZero.
En plus d’afficher la température de consigne, le fond change de couleur :
- fond noir : manager chauffage éteint.
- fond gris : thermostat off
- fond rouge : thermostat on.
@+
Hello @Salvialf @iPapy
Un petit up, si l’un d’entre vous peut m’aider.
J’ai essayé de regarder le code mais trop compliqué pour moi à date…
Merci.
Salut,
J’ai oublié de te tenir au courant, j’ai bien commencé à le retravailler dès mon retour de vacances.
C’est un widget qui offre énormément de possibilité de personnalisation et existe en rond ou en carré. Du coup je suis en train d’en faire un widget incluant beaucoup plus de personnalisation.
Coming very soon 
1 « J'aime »
Génial, j’ai hâte.
OK, je « stay tuned » alors 
A++
Bonjour,
J’ai tenté de modifier le code (cf ci-dessous) avec mes maigres connaissances et surtout le code de Salviaf sur jauge (merci ;-)).
Ça fonctionne pour moi et ce que j’en fait, il y a un soucis d’adaptation de la police en fonction de l’option taille mais de 0.8 à 1.2 ça fonctionne bien.
Si un programmeur chevronné peut regarder et corriger ce qui doit l’être merci d’avance.
<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 * 80px*80px (1 | 80px*80px 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':''+(18+(1-tailleRound)*10)+'px','top':''+(29+(1-tailleRound)*2)+'px','right':''+(38+(1-tailleRound)*5)+'px'});
cmd.find('#dec_round').css({'font-size':''+(13+(1-tailleRound)*10)+'px','top':''+(30+(1-tailleRound)*2)+'px','right':''+(29+(1-tailleRound)*5)+'px'});
cmd.find('#unite_round').css({'font-size':''+(11+(1-tailleRound)*10)+'px','top':''+(50+(1-tailleRound)*5)+'px'});
if ( tailleRound < 1.0 ) {
cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
cmd.find('#int_round').css({'font-size':'15px','top':'25px','right':'31px'});
cmd.find('#dec_round').css({'font-size':'10px','top':'27px','right':'21px'});
cmd.find('#unite_round').css({'font-size':'7px','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: stateFont;
src:url("data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/appleberry.eot?") format("eot"),
url("data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/appleberry.woff") format("woff"),
url("data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/appleberry.ttf") format("truetype"),
url("data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/appleberry.svg#appleberry") format("svg");
font-weight:normal;font-style:normal;
}
@font-face {
font-family: stateFont2;
src: url('data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/jennifer.ttf');
}
@font-face {
font-family: uniteFont;
src: url('data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/erasdust.ttf');
}
#int_round {
font-family: stateFont;
color: white;
position:absolute;
}
#dec_round {
font-family: stateFont;
color: white;
position:absolute;
}
#unite_round {
font-family: uniteFont;
color: white;
position:absolute;
width: 100%;
text-align: center;
z-index:2;
}
#round_V4display {
position:relative;
color:#F0F0F0;
}
</style>
</div>
A ajouter dans le core 
@Morzini,
Merci pour le partage. Je viens d’essayer mais l’icône ne s’affiche pas.
Sans doute un souci côté image.
Sais-tu partager le(s) image(s) utilisée(s) et préciser ou il faut les stocker ?
@salvialf,
J’espère que ta solution va arriver, ce sera sympa d’avoir un clé en main…
@+
Salut,
Je me cale un moment à mon retour pour le finir. Début septembre
Salut à tous,
En attendant que @salvialf finalise, j’essaie quand même d’avancer (je vais devoir tester mon chauffage, et ces widgets sont vitaux…).
J’ai réglé le souci d’image qui venait simplement du path à ajuster.C’est fonctionnel, mais je me rends compte que j’ai des erreurs au chargement du Dashboard. F12 m’affiche ceci :
GET http://192.168.200.100/data/customTemplates/dashboard/cmd.info.numeric.round/fonts/appleberry.ttf net::ERR_ABORTED 403 (Forbidden)
Est-ce que l’un de vous me préciser comment fixer svp ?
Merci.
Bonjour DVB,
Désolé pour ce retour tardif je suis rarement sur le forum.
J’ai pris les images de l’ancien plugin en utilisant jeexplorer.
Elles sont dans le répertoire : html/plugins/widget/core/template/dashboard/cmd.info.numeric.round
Tu copie tout le répertoire dans : html/data/customtemplates/dashboard/cmd.info.numeric.round
Tu sauvegarde également le code ci-dessus sous cmd.info.numeric.round.html dans le répertoire html/data/customtemplates/dashboard/ et ça devrait fonctionner.
Tiens moi au courant.
A+
Bon j’ai tout vérifié mais pas de changement :
- Le widget fonctionne.
- Mais j’ai encore ce message d’erreur en faisant F12
GET http://192.168.200.100/data/customTemplates/dashboard/cmd.info.numeric.round/fonts/appleberry.woff net::ERR_ABORTED 403 (Forbidden)
Peux-tu me repousser ton dernier code pour être certain de repartir sur la bonne base ?
Hello @salvialf,
Je voulais savoir si ton développement était toujours d’actualité ?
Bonne soirée à toi !
@+
Hello,
Oui bien sûr… je fais en sorte de faire ça au plus vite dès que je trouve un moment dans les prochains jours promis
Super ! Je craignais que tu n’aies été préempté par autre chose.
Cela me rassure, je vais donc m’armer de patience.
Vivement les tests…