https://forum.jeedom.com/viewtopic.php?t=22801#p403022
Effectivement c’est sur l’ancien forum (quelle perte d’information d’avoir les liens inactifs … pffff)
cmd.info.numeric.Sky-progressBar.html
Comme d’hab pour installer, outil Widget, code, nouveau
<div id="box#id#" class="cmd #history# tooltips cmd-widget" style="min-width:90px;min-height:90px;position:relative;top:3px;"
data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<center>
<div id="name#id#" style="font-size: 0.85em;position: relative;top:-2px;">#name#</div>
</center>
<div id="cmd#id#" style="text-align: left; position: relative; height: 1.7em; padding: 2px;">
<div id="label#id#" class="progress-label"
style="font-size: 1em; color: black; position: absolute; font-weight: bold; top: 1px; text-align: center; width: 100%;">#state# #unite#</div>
</div>
<script>
var boxid = "box#id#", nameid = "name#id#", labelid = "label#id#", id = "cmd#id#",
valeurState = parseFloat("#state#"), maxvaleur = parseFloat("#maxValue#"), minvaleur = parseFloat("#minValue#"), corrNegative = 0;
if(minvaleur < 0){
corrNegative = minvaleur*-1;
maxvaleur = maxvaleur + corrNegative;
valeurState = valeurState + corrNegative;
}
/*****************************************************************************************************************/
/******************************** Options de personnalisation Valeur par defaut **********************************/
/*****************************************************************************************************************/
/**1** Couleur progressBar **/ var couleurProgressBar = ("#couleurProgressBar#" == '#'+'couleurProgressBar#') ? '#A4D5EF' : ConvertPara("#couleurProgressBar#");
/**2** Couleur texte **/ var couleurText = ("#couleurText#" == '#'+'couleurText#') ? 'black' : ConvertPara("#couleurText#");//'black';
/**3** Barre vértical **/ var progressBarVertical = ("#progressBarVertical#" == '#'+'progressBarVertical#') ? false : ConvertPara("#progressBarVertical#");//false;
/**4** Positionnement Barre **/ var PositionBar = ("#PositionBar#" == '#'+'PositionBar#') ? [0,0] : ConvertPara("#PositionBar#");//[0,0];
/**5** Position texte **/ var PositionText = ("#PositionText#" == '#'+'PositionText#') ? ['center',0,0,0] : ConvertPara("#PositionText#");//['center',0,0,0];
/**6** Dimension barre **/ var DimensionBar = ("#DimensionBar#" == '#'+'DimensionBar#') ? [0,0] : ConvertPara("#DimensionBar#");//[0,0];
/**7** Couleur fond barre **/ var CouleurFondBar = ("#CouleurFondBar#" == '#'+'CouleurFondBar#') ? ['#FFF',0] : ConvertPara("#CouleurFondBar#");//['#FFF',0];
/**8** ??? **/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
function TypeCouleur(valeur){
console.log(' function TypeCouleur('+valeur+')');
var typeCouleur;
if(/true|false/.test(valeur)){
console.log('Valeur vaut : true ou false');
typeCouleur = 'bool';
}else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
console.log('Valeur vaut : Code HTML');
typeCouleur = 'html';
}else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
console.log('Valeur vaut : Code RGB');
typeCouleur = 'rgb';
}else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
console.log('Valeur vaut : Code NOM');
typeCouleur = 'nom';
}else if(/^-?\d{1,}:.+\&?/i.test(valeur)){
console.log('Valeur vaut : Code Objet');
typeCouleur = 'objet';
}else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
console.log('Valeur vaut : Code Array');
typeCouleur = 'array';
}else{
console.log('Valeur vaut : Non reconnu');
typeCouleur = 'inconnu';
}
return typeCouleur;
}
function ConvertPara(valeur){
var para, test = TypeCouleur(valeur);
if(test == 'bool' || test == 'html'|| test == 'rgb' || test == 'nom'){
if(test == 'bool'){
if(valeur == 'true'){
valeur = true;
}else{
valeur = false;
}
}
para = valeur;
console.log('Convertion1 '+test+' : '+para+"\nType : "+typeof(para));
}else if(test == 'objet'){
var arrayVal = valeur.split('&'), cleVal;
console.log(arrayVal);
para = new Object();
for(var cle in arrayVal){
cleVal = arrayVal[cle].split(':');
console.log('Correction : '.corrNegative);
var tmp = (parseFloat(cleVal[0])+corrNegative);
console.log(tmp);
para[tmp] = cleVal[1];
console.log('Clé/valeur : '+tmp+'/'+para[tmp]);
}
// para = valeur;
console.log('Convertion2 '+test+' : '+typeof(para));
}else if(test == 'array'){
para = valeur.split('&');
console.log('Convertion3 '+test+' : '+para);
}else{
console.log('Convertion Impossible');
para = 'erreur';
}
return para;
}
function couleur(valeur){
console.log('Fonction couleur '+valeur);
var couleurs = valeur;
if($.type(valeur) === 'object'){
console.log('Fonction couleur type objet');
console.log(valeur);
for(var cle in valeur){
console.log('Fonction couleur clé:val : '+cle+' - '+valeur[cle]);
if(valeurState >= parseFloat(cle) ){
couleurs = valeur[cle];
console.log('Couleur : '+cle + ' '+valeur[cle]+ ' '+valeurState);
}
}
}
return couleurs;
}
function positionnement(arrayPositionnement){
var position = $('#'+id).position(), P_top = position.top, P_left = position.left;
$('#'+id).css({
'top':(P_top+parseFloat(arrayPositionnement[0])),
'left':((P_left-P_left)+parseFloat(arrayPositionnement[1]))
});
}
function positionnementext(arrayPosition){
var positiontext = arrayPosition[0];
var labelHtml = $('#'+labelid), idParent = labelHtml.parent().attr('id'),
position = $('#'+id).position(), P_top = position.top, P_left = position.left;
if(progressBarVertical){ //Dans le cas d'un positionnement vertical de la barre
console.log("Vértical :\nTop Barre : "+P_top+" \nLeft Barre : "+P_left+
"\nHeight barre : "+ $('#'+id).height()+"\nWidth barre : "+ $('#'+id).width()+
"\n\nLabel top : "+labelHtml.position().top + "\nLabel left : "+labelHtml.position().left +
"\nLabel height : "+labelHtml.height() + "\nLabel width : "+labelHtml.width()+
"\n\nBox width : "+$('#'+boxid).width()+"\nBox height : "+$('#'+boxid).height()+
"\n Positionnement texte : "+positiontext
);
if(positiontext == 'centrer' ){//&& idParent != id
console.log('Positionnement texte Centrer '+$('#'+id).height()+' '+ labelHtml.height()+' '+(($('#'+id).height()-labelHtml.height())/1.7));
$('#'+id).append(labelHtml);
labelHtml.css({
'top':(($('#'+id).height()-labelHtml.height())/1.7)+'px',
'left': 0,
'width': '100%'
});
}
else if(idParent != boxid && positiontext =='dessus' || positiontext == 'dessous' ||
positiontext == 'gauche' || positiontext == 'droite' ){
if(positiontext =='dessus'){
$('#'+id).before(labelHtml);
$('#'+id).css({
'top':((position.top *2)+(labelHtml.height()*0.7))
});
labelHtml.css({
'top': position.top
});
}else if(positiontext == 'dessous'){
$('#'+id).after(labelHtml);
labelHtml.css({
'top': $('#'+id).width()+labelHtml.height()
});
}else if(positiontext == 'gauche'){
$('#'+id).before(labelHtml);
$('#'+id).css({
'left': $('#'+labelid).height()
});
labelHtml.css({
'top':($('#'+labelid).position().top + (($('#'+id).width()+labelHtml.height())/2)),
'left': 0,
'width': '50%'
});
}else if(positiontext == 'droite'){
$('#'+id).after(labelHtml);
$('#'+id).css({
'left': parseFloat('-'+$('#'+labelid).height())
});
labelHtml.css({
'top':($('#'+labelid).position().top + (($('#'+id).width()+labelHtml.height())/2)),
'left': ($('#'+id).height()*2),
'width': '50%'
});
}else{
console.log("Positionnement Inconu : #name#\ntop: "+ position.top +"\nleft : "+ position.left+ "\nParent " + idParent);
}
/([0-9]+)/.exec($('#'+boxid).css('min-height'));
//var minHeight = (parseFloat(RegExp.$1)+labelHtml.height()+ );
var minHeight = (labelHtml.height()+ $('#'+id).width() + $('#'+nameid).height());
$('#'+boxid).css('min-height',minHeight+'px');
}else{
console.log("Positionnement Inconu : #name#\ntop: "+ position.top +"\nleft : "+ position.left+ "\nParent " + idParent);
}
var rotate = 0, textTop = 0, textLeft = 0;
if(typeof(arrayPosition[1] == 'numeric')){
var rotate = arrayPosition[1];
}
console.log('Modif text rotate : '+arrayPosition[1]);
if(typeof(arrayPosition[2] == 'numeric')){
var textTop = parseFloat($('#'+labelid).position().top) +parseFloat(arrayPosition[2]);
}
console.log('Modif text textTop : '+arrayPosition[2]+' '+ $('#'+labelid).position().top);
if(typeof(arrayPosition[3] == 'numeric')){
var textLeft = parseFloat($('#'+labelid).position().left) +parseFloat(arrayPosition[3]);
}
console.log('Modif text textLeft : '+arrayPosition[3]+' '+$('#'+labelid).position().left);
console.log('Modif text : '+rotate+' '+textTop+' '+textLeft);
if(positiontext == 'centrer' ){
labelHtml.css({
'transform': 'rotate('+rotate+'deg)',
'top': textLeft,
'left':textTop
});
}else{
labelHtml.css({
'transform': 'rotate('+rotate+'deg)',
'top': textTop,
'left': textLeft
});
}
}else{//Dans le cas d'un positionnement horizontal de la barre
if(positiontext =='centrer' && idParent != id ){
$('#'+id).append(labelHtml);
}
else if(idParent != boxid && positiontext =='dessus' || positiontext == 'dessous' ||
positiontext == 'gauche' || positiontext == 'droite' ){
$('#'+boxid).append(labelHtml);
if(positiontext =='dessus'){
labelHtml.css({
'top':(position.top-$('#'+id).height())
});
}else if(positiontext == 'dessous'){
labelHtml.css({
'top':(3 + position.top + $('#'+id).height())
});
}else if(positiontext == 'gauche'){
labelHtml.css({
'top':position.top,
'left': '-'+($('#'+id).width()-15)+'px'
});
}else if(positiontext == 'droite'){
labelHtml.css({
'top':position.top,
'left': ($('#'+id).width()-15)+'px'
});
}else{
console.log("Positionnement Inconu : #name#\ntop: "+ position.top +"\nleft : "+ position.left+ "\nParent " + idParent);
}
/([0-9]+)/.exec($('#'+boxid).css('min-width'));
var minWidth = (parseFloat(RegExp.$1)+Math.abs($('#'+labelid).position().left)+ position.left);
$('#'+boxid).css('min-width',minWidth+'px');
}else{
console.log("Positionnement Inconu : #name#\ntop: "+ position.top +"\nleft : "+ position.left+ "\nParent " + idParent);
}
var rotate = 0, textTop = 0, textLeft = 0;
if(arrayPosition[1]){
var rotate = arrayPosition[1];
}
if(typeof(arrayPosition[2] == 'numeric')){
var textTop = parseFloat($('#'+labelid).position().top) +parseFloat(arrayPosition[2]);
}
if(typeof(arrayPosition[3] == 'numeric')){
var textLeft = parseFloat($('#'+labelid).position().left) +parseFloat(arrayPosition[3]);
}
labelHtml.css({
'transform': 'rotate('+rotate+'deg)',
'top': textTop,
'left': textLeft
});
}
}
function sizeBar(arrayPara){
console.log("SizeBarre :\nheigth "+ $('#'+id).height()+"\nwidth "+ $('#'+id).width());
$('#'+id).css({
'height': ($('#'+id).height()+ parseFloat(arrayPara[0]))+'px',
'width': ($('#'+id).width()+ parseFloat(arrayPara[1]))+'px'
});
}
//Création progressBar
$('#'+id).progressbar({
value: valeurState,
max : maxvaleur
});
//Partamètre commun
$('#'+id+' .ui-progressbar-value').css({
'background-color': couleur(couleurProgressBar)
});
$('#'+boxid+' .progress-label').css({
'color':couleur(couleurText),
'z-index':10
})
//Paramètre spécifique A la position vértical/Horizontal
if(progressBarVertical === true){
$('#'+id).css({
'transform': 'rotate(-90deg)',
'width': ($('#'+id).parent().height()*0.8),
'top': '40px'
});
}else{
$('#'+id).css({
'width': ($('#'+id).width()*0.9),
'top': '10px'
});
}
sizeBar(DimensionBar);//Permet le redimentionnement de la barre
positionnement(PositionBar);//Permet de modifier la position de la barre
positionnementext(PositionText);//Permet de modifier la position de la barre
if(CouleurFondBar[1] > 0){
$('#'+id).css({
'box-shadow': '0px 0px '+(($('#'+id).height()*0.02)*CouleurFondBar[1])+'px '+CouleurFondBar[0]+' inset'
});
}else{
$('#'+id).css({
'box-shadow': $('#'+id).width()+'px 0px 0px '+CouleurFondBar[0]+' inset'
});
}
</script>
</div>
donc appel à l’oeil neuf 
