Widget "barre de progression"

Bonjour,

les jauges prennent beaucoup de place sur les dashboard, quelqu’un aurait’il écrit un widget jauge sous forme de barre de progression horizontale ?
Si oui je suis preneur du code parce que j’y arrive pas à l’écrire moi :-/

D’avance merci !!

Bonjour,

+1
Ca m’intéresse aussi.
La solution que j’utilise: je réduit le format de la page a 80%.
L’inconvénient c’est le widget X4VR, il a tendance a se déformer

Cdt

Celui ci est pas mal il permet 2 boutons cote à cote mais j’ai pas réussi à passer le texte en vert pour l’état à 1
Visuellement on dirais que le bouton n’est jamais « cliqué » comme ceux de GCE

<input value="On / Off" onclick="newAJAXCommand('/api/xdevices.json?apikey=maximem&SetVin=82')" type="button" class="bouton2" style="margin: 18px 15px; width: 40%;">
<input value="Prog." onclick="newAJAXCommand('/api/xdevices.json?apikey=maximem&SetVin=81')" type="button" class="bouton2" style="margin: 18px 1px; width: 40%;">

Bonjour,

+1 pour la barre horizontale

Cordialement

Bonjour,
Si quelqu’un avait la solution pour réaliser ce widget à 2 boutons, avec un aspect identique aux widgets GCE (texte passant en vert) ce serait sympa de nos communiquer la façon d’y arriver.

Bonjour, j’ai progressé sur le sujet:
reste toujours à charger l’état de la variable du bouton au chargement de la page, par défaut le bouton est sur off même si la variable qu’il commande est sur on.

<script type="text/javascript">
  function onoff1() {
      currentvalue = document.getElementById('onoff1').value;
      if (currentvalue == "Off") {
          document.getElementById("onoff1").value = "On";
          newAJAXCommand('/api/xdevices.json?SetVI=82');
      } else {
          document.getElementById("onoff1").value = "Off";
          newAJAXCommand('/api/xdevices.json?ClearVI=82');
      }
  }
</script>

<input type="button" class="bouton2" style="margin: 18px 15px; width: 40%;" value="On" id="onoff1" onclick="onoff1();">

<script type="text/javascript">
  function onoff2() {
      currentvalue = document.getElementById('onoff2').value;
      if (currentvalue == "Off") {
          href = "javascript:changecouleur('#FFF000')";
          document.getElementById("onoff2").value = "On";
          newAJAXCommand('/api/xdevices.json?SetVI=81');
      } else {
          document.getElementById("onoff2").value = "Off";
          newAJAXCommand('/api/xdevices.json?ClearVI=81');
      }
  }
</script>

<input type="button" class="bouton2" style="margin: 18px 1px; width: 40%;" value="On" id="onoff2" onclick="onoff2();">

Trouvé Michel !!

nécessite une datasource (ici « IPX800 - io ») avec le fichier io.xml
Dans un widget « html » écrire ce code :

var EcsOnOff = datasources["IPX800 - io"]["response"]["vin"][71];
var ColorEcsOnOff = `color: #${ EcsOnOff ? '000' : '0f0' };`;
var EcsProg = datasources["IPX800 - io"]["response"]["vin"][70];
return `
<input type="button" class="bouton2" style="margin: 18px 15px; width: 40%; color:#${ EcsOnOff=="0" ? "eee" : "0f0" };" value=${ EcsOnOff=="0" ? "Off" : "On" }  onclick="newAJAXCommand('/api/xdevices.json?ToggleVI=72');">
<input type="button" class="bouton2" style="margin: 18px 1px; width: 40%; color:#${ EcsProg=="0" ? "eee" : "0f0" };" value=${ EcsProg=="0" ? "Manu" : "Auto" } onclick="newAJAXCommand('/api/xdevices.json?ToggleVI=71');">
`;

ya plus qu’a adapter à vos besoins
cdt

1 « J'aime »

Merci, super !
Je vais essayer et je vous tiens au courant

Après quelques essais infructueux, c’est bon ça fonctionne (j’avais omis la clé de l’API à rajouter) !

Merci pour votre contribution

1 « J'aime »