🌡 Collection de Widgets analogiques (CANVAS-GAUGES)

[Domo31]

Bonsoir, merci pour les expplications fgtoul ça fonctionne.
Super travail et merci pour tous les tutos !!!
Cordialement

[Nicocau]

Bonsoir fgtoul,
Ne peut on pas insérer dans le code javascript que vous avez réaliser, la possibilité, en fonction des différents cas/plage de température, directement l’activation d’une sortie de l’IPX ?
Merci d’avance,
Bonne soirée

[fgtoul]

@Nicocau

la possibilité, en fonction des différents cas/plage de température,

bonjour @nicocau,
c’est faisable par scenario avec des comparateurs. De cette manière, vous conservez le caractère autonome alors qu’un widget doit être affiché pour piloter les E/S.
bonne journée

[Douc]

Bonjour,
Je viens de remplacer ma V4 par une V5, je n’arrive plus à faire fonctionner les jauges analogiques personnalisées , après plusieurs jours de lecture des blogs je dois passer à coté de quelque chose.
Pouvez-vous m’aider svp?
Voici ce que j’ai fait:
j’ai créer un API key

j’ai créer un objet XTHL

et un Widget

<center>
    <canvas id=fgtoul1 style="margin-top:15px;" data-type="radial-gauge"
        data-width="200"
        data-height="200"
        data-units="°C"
        data-title="Temperature"
        data-min-value="-10"
        data-max-value="50"
        data-major-ticks="[-10,0,10,20,30,40,50]"
        data-minor-ticks="5"
        data-stroke-ticks="true"
        data-highlights='[
                    {"from": -10, "to": 0, "color": "rgba(0,0, 255, .3)"},
                    {"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"}
                ]'
        data-ticks-angle="225"
        data-start-angle="67.5"
        data-color-major-ticks="#ddd"
        data-color-minor-ticks="#ddd"
        data-color-title="#eee"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-plate="#222"
        data-border-shadow-width="0"
        data-borders="true"
        data-needle-type="arrow"
        data-needle-width="4"
        data-needle-circle-size="7"
        data-needle-circle-outer="true"
        data-needle-circle-inner="false"
        data-animation-duration="1500"
        data-animation-rule="linear"
        data-color-border-outer="#333"
        data-color-border-outer-end="#111"
        data-color-border-middle="#222"
        data-color-border-middle-end="#111"
        data-color-border-inner="#111"
        data-color-border-inner-end="#333"
        data-color-needle-shadow-down="#333"
        data-color-needle-circle-outer="#333"
        data-color-needle-circle-outer-end="#111"
        data-color-needle-circle-inner="#111"
        data-color-needle-circle-inner-end="#222"
        data-value-box-border-radius="0"
        data-color-value-box-rect="#222"
        data-color-value-box-rect-end="#333"
        data-font-value="Led"
></canvas>
        </center>
        <script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js" > </script>

<script type="text/javascript">
 let IPX_apiKey="3DDuTtHzipidtXJ"; //renseignez votre apikey IPX
 let idxths1="30010f1d"; //xths1 sur canal 0 
 var gauge1;
 function initb() {
       getStateb((ipxb) => {
       gauge1 = document.gauges.get("fgtoul1");
       gauge1.value=parseFloat(ipxb.anaPhVal)/100; // pH sur X200 canal 0 sur X-Bridge
   });
   }   
function getStateb(cb) {
        fetch("/api/ebx/xths1/" + idxths1 + "?ApiKey=" + IPX_apiKey, {method: "GET"}).then((ret) => { // Get IPX object
          ret.json().then((ipxb) => {
            cb(ipxb);
          });
        });
        }
      /* Auto refresh (optional) */
function autoRefreshb() {
        setInterval(() => {
          initb();
        }, 60000); // 60 sec
        }
initb();
autoRefreshb();
</script>

Mais rien ne fonctionne

[fgtoul]

Bonjour,
les widgets Html V4 et V5 ne fonctionnent pas de la même manière.
Un réadaptation est nécessaire.
Vous trouverez un exemple de widget retravaillé pour l’ipx800 V5 dans ce post:

V5 : Affichage de la direction des vents

Bonjour à tous, sur la V4 il était possible d’afficher la direction du vent, issue d’une source météo ou d’un capteur type Girouette grâce au widget natif nommé « Pointeur ». Il suffisait de créer une source de données pointant status.xml ou bien vers météo et choisir l’entrée analogique. Sur V5, le widget type « Pointeur » n’existe pas encore. Je vous propose alors d’adapter le widget que j’avais proposé pour V4 dans ce tutoriel Créons d’abord un Widget de type HTML et collons ce code : <c…

Bonne journée

[Douc]

Merci beaucoup, j’étais passé à coté de ce tuto

[fgtoul]

ce tuto est antérieur à l’arrivée de l’API HTML Widget. Vous pouvez adapter le javascript pour utiliser cette API (recommandé).

[fgtoul]

Bonjour à tous,
V5 : Affichage de la direction des vents - Cartes Ethernet IPX800 / Tutoriels - GCE Electronics - Forum domotique - IPX800 - EcoDevices etc…
Dans le tuto en lien ci-dessus, vous trouverez un code à jour pour l’IPX800 V5, utilisant l’API Widget HTML comme préconisé.

Le tutoriel présente un widget spécifique à l’affichage de la direction du vent mais s’adapte à tous les types de jauges Canvas-Gauge.

Bonne journée

[fgtoul]

Pensez à mettre vos Canvas-Gauges à jour en modifiant la référence à la librairie sur vos dashboards V4 ou V5.

<script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js""/>

Vous pourrez surveiller les mises à jour sur cette page :
canvas-gauges/download at gh-pages · Mikhus/canvas-gauges · GitHub

N’utilisez pas le lien vers « Latest ». Certes la dernière version serait automatiquement téléchargée à l’ouverture du dashboard, mais en cas de modification profonde de l’API, vos widgets risqueraient de ne plus fonctionner. Il faut toujours vérifier le bon fonctionnement d’une version avant de l’appliquer.