Si tu cherches à appliquer ta couleur rouge sur la partie du cercle plein, il te faut renseigner ta couleur sur --color-progress-2.
Dit moi si ça fonctionne (ou si j’ai pas compris le besoin 
)
Merci @sartog pour ton retour.
Sur le cercle 2 (rouge pour moi), pour la valeur color-bg-progress-2 :
-
Si je met une couleur sans transparence par exemple ce gris rgba(44, 44, 44,1). Cela me donne ceci.
-
Si je met une couleur avec de la transparence (je reprends la rouge que la première partie du cercle et je mets 0.1 en dernière valeur). rgba(218, 48, 55,0.1);
Bizarrement, on voit que la transparence fonctionne sur le vert.
/* Variable des couleurs */
--color-bg-1 : rgba(33,33,33,1); /* backbround entre les 2 cercles */
--color-bg-2 : rgba(33,33,33,1); /* background intérieur 2nd cercle */
--color-bg-progress-1 : rgba(48, 180, 85,0.1);
--color-bg-progress-2 : rgba(218, 48, 55,0.1);
--color-progress-1 : rgba(48, 180, 85,1);
--color-progress-2 :rgba(218, 48, 55,1);
--color-texte-1 : #e3e3e3;
--color-texte-2 : #e3e3e3;
Idem pour moi.
J’ai mis plusieurs infos dans le même widget.
De plus quand je mets en tableau j’ai le décalage.
Sinon le rendu est excellent avec une seule info.
Ce serait bien de préciser la version. De jeedom v4.1 ou 4.2
Dire si vous avez une personnalisation en css ou autre qui pourrait interagir avec le truc non ?
Car les idem, moi non plus ca marche pas ne va pas aider a diagnostiquer un souci qui peut avoir de multiples origines !
Ok sorry.
Dernière version stable me concernant donc 4.1 ( sauf erreur).
Pas de personnalisation de CSS mais peut être qu’il y en a une par défaut dans les tableaux.
Le problème principal me semble être le fait d’avoir les mêmes valeurs sur tous les widgets.
Je peux fournir d’autres informations si nécessaire ainsi que des captures d’écran.
Cordialement
Fonctionne parfaitement chez moi
Merci pour ce super widget!
Par contre comment puis-je faire pour agrandir la taille des cercles?
1 « J'aime »
J’ai toujours qu’une seule valeur sur mes différents widgets associés a plusieurs capteurs 
C’est vraiment dommage car le rendu est super.
Je suis en version Jeedom 4.1.27
Si quelqu’un a réussi, je suis preneur
J’ai le même soucis que toi. jusqu’à maintenant je l’utilisais sur un seul objet
Même la valeur de la première sonde n’est plus bonne
Peut-être un bug quelque part…
Bonjour
J’avais déjà eu le souci sur un autre widget.
C’est probablement du a une implémentation statique dans le code et non objet.
C’est pas sorcier à modifier mais il faut juste un peu de temps.
Salut
Merci de ta réponse
Tu peux développer un peu, je ne comprend pas
Apparemment ce n’est par rapport à l’id
jeedom.cmd.update['#id#'] = function(_valeur){
J’essayerai de regarder des que je trouve du temps. Le widget m’intéresse.
Je ne peux pas te dire quand encore
1 « J'aime »
@bed31, @Dams et les autres désolé pour cette erreur dans mon code.
Je viens de le corriger, vous pourrez l’applique sur plusieurs commandes sans problèmes dorénavant.
Je vous laisse faire les tests et revenir vers moi (les changements sont dans la balise script) :
<div class="cmd cmd-widget" data-type="info" data-subtype="string" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<link rel="stylesheet" href="data/customTemplates/dashboard/cmd.info.string.double cercle/circle.css">
<div class="progress-variable">
<div class="progress-pie-chart-1">
<div class="progress-1">
<div class="progress-fill-1"></div>
</div>
<div class="percents-1"></div>
<div class="progress-pie-chart-2">
<div class="progress-2">
<div class="progress-fill-2"></div>
</div>
<div class="percents-2">
<div class="percents-wrapper">
<span class="percents-wrapper-valeur1"></span>
<span class="percents-wrapper-valeur2"></span>
</div>
</div>
</div>
</div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_valeur){
// Initialisation des variables.
//
// Pour l'utilisation des "Paramètres optionnels widget" (conseillé), il faut impérativement utiliser ces libélés :
// #borne_min_valeur1 : la valeur minimal sur laquelle sera basée le calcul de pourcentage.
// #borne_max_valeur1 : la valeur maximal sur laquelle sera basée le calcul de pourcentage.
// #borne_min_valeur2 : idem que #borne_min_valeur1
// #borne_max_valeur2 : idem que #borne_max_valeur1
// unite_valeur1 : L'unité qui sera affichée à côté de la 1ère valeur.
// unite_valeur2 : L'unité qui sera affichée à côté de la 2nde valeur.
//
// Si les "Paramètres oprtionnels widget" ne sont pas de numérique ou absent, on considèrera que
// valeur1 : sera une température intérieure et aura des bornages compris entre 10° et 30°
// valeur2 : sera un pourcentage (humidité par exemple) et aura des bornages compris entre 0 et 100.
// Initialisation des constantes.
const borne_min_valeur1 = (is_numeric('#borne_min_valeur1#')) ? parseFloat('#borne_min_valeur1#') : 10;
const borne_max_valeur1 = (is_numeric('#borne_max_valeur1#')) ? parseFloat('#borne_max_valeur1#') : 30;
const borne_min_valeur2 = (is_numeric('#borne_min_valeur2#')) ? parseFloat('#borne_min_valeur2#') : 0;
const borne_max_valeur2 = (is_numeric('#borne_max_valeur2#')) ? parseFloat('#borne_max_valeur2#') : 100;
const unite_valeur1 = ('#unite_valeur1#' != '#' + 'unite_valeur1' + '#') ? '#unite_valeur1#' : '°';
const unite_valeur2 = ('#unite_valeur2#' != '#' + 'unite_valeur2' + '#') ? '#unite_valeur2#' : '%';
// Initialisation des variables.
var valeur = _valeur.display_value.split(',');
var cmd = $('.cmd[data-cmd_id=#id#]');
// Calcul des pourcentages et degrés des cercles.
var percents1 = Math.round((valeur[0] - borne_min_valeur1) / (borne_max_valeur1 - borne_min_valeur1) * 100);
var deg1 = 360 * percents1 / 100;
var percents2 = Math.round((valeur[1] - borne_min_valeur2) / (borne_max_valeur2 - borne_min_valeur2) * 100);
var deg2 = 360 * percents2 / 100;
if (percents1 > 50) {
cmd.find('.progress-pie-chart-1').addClass('gt-50');
}
if (percents2 > 50) {
cmd.find('.progress-pie-chart-2').addClass('gt-50-2');
}
cmd.find('.progress-fill-1').css('transform', 'rotate(' + deg1 + 'deg)');
cmd.find('.percents-wrapper-valeur1').html(valeur[0] + unite_valeur1);
cmd.find('.progress-fill-2').css('transform', 'rotate(' + deg2 + 'deg)');
cmd.find('.percents-wrapper-valeur2').html(valeur[1] + unite_valeur2);
}
jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>
</div>
Je vais regarder pour cette histoire de couleur et de transparence qui déconne maintenant, voir si je trouve quelque chose.
4 « J'aime »
Assez délicat de mémoire (c’est la contre partie de l’ultra allégement du code).
Je vais essayer de regarder la viabilité d’une solution simple (via un scale en css (un « zoom »)).
1 « J'aime »
Très étrange cette affaire.
Impossible en effet d’avoir la transparence avec cette couleur alors qu’elle y est avec une autre couleur !
Par exemple, si je mets le vert du background du cercle 1 au background du cercle 2 (à la place du rouge voulu), j’ai bien la transparence
Et plus étrange, quand j’inverse la transparence (le background non transparent et la progress transparente là ça fonctionne !)
Là comme ça je ne comprends pas du tout.
Je vais essayer de faire d’autre test pour voir, mais si un spécialiste du css passe par là peut être qu’il trouvera.
Tu n’as pas à être désolé !
Merci d’avoir cherché et trouvé d’où cela provenait!
Merci
Super, ça fonctionne maintenant.
Merci beaucoup.
J’aimerai que la couleur du texte par exemple (mais on pourrait aussi imaginer la progress bk color) soit conditionnée à certains range de valeurs.
Mais comme la définition des couleurs est localisée dans le css je ne sais pas comment faire et si cela est faisable.
Cordialement
Eric
J’aurais tendance à dire que c’est faisable via l’injection de CSS avec JS (les scripts JS se chargeant après tout le monde, ça permet d’écraser le code CSS natif).
Il me faudrait, je penses, ajouter des variables css pour les couleurs pour les cercles et le texte et des variables à ajouter dans le paramètre optionnel du widget pour activer la fonctionnalité et déterminer les valeurs.
J’essais de regarder ça dès que possible.
1 « J'aime »
Sublime je vois que ma superposition à fait son chemin et qu’elle à fait avancer la science lol
Merci à tous est surtout à @sartog d’avoir remis les main dans le code !!
1 « J'aime »
