Bonjour,
comment faut il faire pour superposéles widgets?
merci d’avance de ton aide
Salut, ça ne peut se faire que sur un design…
Après je te conseille de faire des virtuels avec les informations que tu veux afficher (sur ta photo température et humidité par exemple), et sur celui que tu veux à l’intérieur tu appliques un coefficient taille genre 0.8.
Ensuite tu alignes avec la souris.
2 « J'aime »
Bonjour à tous,
j’ai suivi les conseils de @Mika59 c’est super !! j’ai donc superposé mes 2 virtuels avec réduction de taille. j’ai juste 2 petits problèmes que vous allez pouvoir je penses m’aider.
Je n’arrive pas a supprimer la valeur de l’intérieur de mon Cercle ( 67 celui de l’humidité) .
2ème chose pour avoir les valeurs à l’intérieur du cercle il faut que j’ajoute les 2 commandes température et humidité ? mais je ne sais pas comment afficher uniquement les valeurs en écriture simple.
merci beaucoup
merci beaucoup
Alors à part modifier le code du widget, ce qui est compliqué et dépasse mes compétences, je ne vois que la continuation de la méthode barbare…
Pour masquer le 67, un carré blanc qui se colle juste au dessus et pour afficher les valeurs que tu souhaites tu recrées un/des virtuels avec l’information souhaitée, et pareil, tu mets ça au dessus du mille feuilles… La cerise sur le gâteau !
Les puristes du code vont hurler, mais visuellement on verra pas le trucage.
1 « J'aime »
Salut ! en effet c’est moi qui ai fait ca dans mon design 
par contre ca serait super cool de pouvoir avoir un seul widget qui gere les deux circle !
malheureusement je ne suis pas suffisement calé en code pour ca…
Bonjour tout le monde,
Ça fait plaisir de voir que ce widget vie toujours.
Je reprends que depuis peu la domotique là où je l’avais laissé il y a quelques années, notamment avec les améliorations de la V4.
L’idée du double Circle est vraiment pas mal.
Il faudrait que je me remette dans le code pour voir ce qu’il est possible de faire (de tête, ça semble pas trop sorcier mais parfois la pratique est éloignée de la théorie 
)
Bonsoir,
Voici un prémisse non Jeedomisé (pas la fonction d’update, pas d’intégration des spécifiés) et non terminé (pas de mise à jour du html via le js, couleur, etc.).
J’ai refait le css, trop lourd l’ancien (enfin je me suis très fortement inspiré d’un travail trouvé sur codepen).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget - Double cercle</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link rel="stylesheet" href="css/circle.css">
</head>
<body>
<div class="progress-pie-chart">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents"></div>
<div class="progress-pie-chart-2">
<div class="ppc-progress-2">
<div class="ppc-progress-fill-2"></div>
</div>
<div class="ppc-percents-2">
<div class="pcc-percents-wrapper-2">
<span>40 %</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
var percent = 75;
var deg = 360 * percent / 100;
var percent2 = 40;
var deg2 = 360 * percent2 / 100;
if (percent > 50) {
$('.progress-pie-chart').addClass('gt-50');
}
if (percent2 > 50) {
$('.progress-pie-chart-2').addClass('gt-50-2');
}
$('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
$('.ppc-percents span').html(percent + '%');
$('.ppc-progress-fill-2').css('transform', 'rotate(' + deg2 + 'deg)');
$('.ppc-percents span-2').html(percent2 + '%');
});
</script>
</body>
</html>
.progress-pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: #81CE97;
}
.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 100px);
top: calc(50% - 100px);
width: 200px;
height: 200px;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 100px);
top: calc(50% - 100px);
width: 200px;
height: 200px;
clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%);
background: #81CE97;
}
.gt-50 .ppc-progress {
clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
background: #E5E5E5;
}
.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 173.9130434783px/2);
top: calc(50% - 173.9130434783px/2);
width: 173.9130434783px;
height: 173.9130434783px;
background: #f7f7f7;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 2.6em;
font-weight: bold;
color: #81CE97;
}
.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}
/* ******* */
.progress-pie-chart-2 {
width: 170px;
height: 170px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
left: 15px;
top: 15px;
}
.progress-pie-chart-2.gt-50-2 {
background-color: #8197ce;
}
.ppc-progress-2 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 85px);
top: calc(50% - 85px);
width: 170px;
height: 170px;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.ppc-progress-2 .ppc-progress-fill-2 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 85px);
top: calc(50% - 85px);
width: 170px;
height: 170px;
clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%);
background: #8197ce;
}
.gt-50-2 .ppc-progress-2 {
clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%);
}
.gt-50-2 .ppc-progress-2 .ppc-progress-fill-2 {
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
background: #E5E5E5;
}
.ppc-percents-2 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 143.9130434783px/2);
top: calc(50% - 143.9130434783px/2);
width: 143.9130434783px;
height: 143.9130434783px;
background: #f7f7f7;
text-align: center;
display: table;
}
.ppc-percents-2 span {
display: block;
font-size: 2.6em;
font-weight: bold;
color: #8197ce;
}
.pcc-percents-wrapper-2 {
display: table-cell;
vertical-align: middle;
}
/* ******* */
body {
font-family: Arial;
background: #f7f7f7;
}
.progress-pie-chart {
margin: 50px auto 0;
}
Je posterais la version définitive quand je l’aurais terminé 
3 « J'aime »
bonjour @sartog,
a tout poster ta version définitive pour ce widget ?
car il est vraiment TROP BEAU !!! 
je confirme vraiment sympa ce widget
Idem , en terme d’ui il est efficace et fonctionnel. J’adore !
(et du coup je m’abonne pour suivre et avoir la « versionDef »
Bonjour à tous,
Désolé, pas eu le temps d’avancer dessus jusqu’à maintenant (beaucoup de boulot et mon PC qui a rendu l’âme entre temps).
J’essais de m’y remettre rapidement pour vous communiquer une version finalisé
3 « J'aime »
Edit du 16/11/2021 : Correction du code.
Edit du 02/02/2022 : Intégration du scale pour réduire la taille du widget
Bonjour tout le monde,
Quand je vois la date de mon précèdent message, j’hallucine … le temps passe vraiment trop vite !!!
Désolé tout le monde pour l’attente.
J’ai donc « Jeedomisé » le code.
Code du widget :
- Allez dans Outils > Widget > Code > Nouveau
- Renseignez :
- Version = Dashboard
- Type = Info
- Sous-Type = Autre
- Nom = Comme vous voulez
- Collez le code ci-dessous :
<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.
// scale : taille du widget. 1 = 100%, inférieur à 1 on réduit la taille et supérieur à 1 on augmente la taille.
//
// 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#' : '%';
const scale = (is_numeric('#scale#')) ? parseFloat('#scale#') : 1;
// 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');
}
// Affichage des valeurs.
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);
// Scale.
cmd.find('.progress-variable').css('transform', 'scale(' + scale + ')');
}
jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>
</div>
- Pour le css, renseignez le code ci-après, soit
- vous l’intégrez dans le code du Widget (et dans ce cas il faut enlever la balise link)
- vous intégrez un fichier css et vous renseignez l’emplacement dans la balise link (l’emplacement renseigné dans mon code est l’emplacement des widgets Code).
.progress-variable div{
/* Variable des couleurs */
--color-bg-1 : #E7EEF7; /* backbround entre les 2 cercles */
--color-bg-2 : #E7EEF7; /* background intérieur 2nd cercle */
--color-bg-progress-1 : #E5E5E5;
--color-bg-progress-2 : #E5E5E5;
--color-progress-1 : #81CE97;
--color-progress-2 : #8197CE;
--color-texte-1 : #81CE97;
--color-texte-2 : #8197CE;
}
.progress-pie-chart-1 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: var(--color-bg-progress-1);
position: relative;
}
.progress-pie-chart-1.gt-50 {
background-color: var(--color-progress-1);
}
.progress-1 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.progress-1 .progress-fill-1 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%);
background: var(--color-progress-1);
}
.gt-50 .progress-1 {
clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%);
}
.gt-50 .progress-1 .progress-fill-1 {
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
background: var(--color-bg-progress-1);
}
.percents-1 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 83.9130434783px/2);
top: calc(50% - 83.9130434783px/2);
width: 83.9130434783px;
height: 83.9130434783px;
background: var(--color-bg-1);
text-align: center;
display: table;
}
/* ******* */
.progress-pie-chart-2 {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: var(--color-bg-progress-2);
position: relative;
/*left: 15px;*/
top: 10px;
}
.progress-pie-chart-2.gt-50-2 {
background-color: var(--color-progress-2);
}
.progress-2 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 40px);
top: calc(50% - 40px);
width: 80px;
height: 80px;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.progress-2 .progress-fill-2 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 40px);
top: calc(50% - 40px);
width: 80px;
height: 80px;
clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%);
background: var(--color-progress-2);
}
.gt-50-2 .progress-2 {
clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%);
}
.gt-50-2 .progress-2 .progress-fill-2 {
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
background: var(--color-bg-progress-2);
}
.percents-2 {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 63.9130434783px/2);
top: calc(50% - 63.9130434783px/2);
width: 63.9130434783px;
height: 63.9130434783px;
background: var(--color-bg-2);
text-align: center;
display: table;
}
/* ******* */
.percents-wrapper {
display: grid;
position : absolute;
top : 12px;
height : 80%;
width : 100%;
/*vertical-align: middle;*/
font-size: 1.6em;
font-weight: bold;
grid-template-columns : 100%;
grid-template-rows : auto auto;
}
.percents-wrapper span:nth-child(1) {
color: var(--color-texte-1);
}
.percents-wrapper span:nth-child(2) {
color: var(--color-texte-2);
}
/* ******* */
Mise en place :
- Il vous faut une commande Info de type Autre
- Dans valeur, vous renseignez vos 2 commandes que vous souhaitez afficher espacées d’une virgule sans espace et vous cochez Afficher
- Vous cliquez sur l’engrenage de la commande > Affichage > Vous choisissez votre widget dans la liste déroulante Dashboard.
- Si vous souhaitez utiliser des paramètres optionnels, voici un exemple :
J’espère que cela vous permettra de le mettre en place.
N’hésitez pas à me faire par des problèmes / amélioration (dans la limite de mes compétences).
1 « J'aime »
Bonjour à tous,
Avant tout, merci beaucoup pour ton widget, magnifique !
Il fonctionne bien et se comporte bien mais je rencontre un soucis dès que je souhaite en intégrer plusieurs.
J’ai donc le widget appliqué aux infos de mes 5 capteurs de température/humidité, via leurs virtuels respectifs.
Mon souci, c’est que mon dashboard/design m’affiche la même valeur témpérature/humidité sur chacun des widgets alors que leurs valeurs sont différentes pour chaque capteur (et forcément sur chaque virtuels).
D’ailleurs, lorsque je « teste » le couple témépérature/humidité dans un virtuel, il m’indique la bonne valeur dans l’onglet « Commande » mais pas sur mon dashboard.
J’espère que je suis clair… n’hésitez pas si ce n’est pas le cas.
Bonjour @sartog
Je viens de tester le widget, et pour ma part, j’ai un défaut d’affichage.
J’ai appliqué ces options.
Et voici ce que donne le résultat de mon info lorsque je la teste.
Mis à part cela, voici des options qu’il serait intéressant de passer :
- un scale pour adapter à la dimension que l’on souhaite
- les couleurs des cercles et du fond.
Merci pour tout !
1 « J'aime »
J’ai trouvé mon problème de décalage. J’ai remplacé la ligne
/*left: 15px;*/
par
left: 10px;
Je remarque qu’il y a un soucis de gestion de la transparence du second cercle sur le color-bg-progress-2. J’ai mis rgba(218, 48, 55,0.1); mais la transparence n’est pas prise en compte comme sur le premier cercle.
Bonsoir messieurs,
Désolé du délai, je n’ai pas reçu les notifications de vos messages et je ne me connecte pas souvent sur le forum.
Ce décalage est étrange, mais j’ai remarqué qu’il y avait de petite subtilité (sans que je sache les expliquer) suivant l’OS d’affichage (je l’ai constaté entre mon Windows et Mac).
Pour la transparence, je vais essayer de tester avec ta couleur @dsigmoun pour voir ce qu’il en est