Adapter widget IPX800v5 a Jeedom

Plugins Objets connectés
1

bonjour

je voudrais controler 24 IOs de mon IPX 800 V5 à partir de Jeedom.
j’ai deja écrit un widget html sur l’IPX800V5, je voudrais pouvoir l’utiliser dans le plugin HTML display pour éviter de réécrire du code une fois de plus, ou de définir 24 commandes info et 24 commandes action…

comment l’adapter ? si quelqu’un pouvait me conseiller, j’apprécierais beaucoup …

<iframe width=100% height=100% allowtransparency="true" scrolling=no frameBorder="0" srcdoc='
<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>wam</title>
</head>


<style>

    .styleSize{
        height: 6vw; /* Hauteur Bouton */
        width: 5vw; /* Largeur Bouton */
        font-size: 10px; /* Taille Texte */
        font-weight: normal;
        font-family: sans-serif;
        color: white; /* Couleur Texte Bouton */
        border-radius: 2px; /* Arrondi Bouton */
        border-width: 0px;

    }
    .styleButton{
        margin : 2px;
        text-align: center;    /* Centrage Texte Bouton */
        border-color: white;
        background-color: grey; /* Couleur Bouton */
    }   
    .styleButton:hover {
        background-color: rgba(125,125, 125, 1); /* Couleur Bouton Over */
    }    
    .styleButton:active {
    }
    
    .styleLegend {
        text-align: left;    /* Centrage Texte Bouton */
        margin-left:2px;
        margin-right:2px;
    }

    .outer {
        display: flex;
        align-items: center; 
        justify-content: center;
    }
    
    .styleTitle {
        font-size: 13px; /* Taille Texte */
    }

</style>

<body>
    <div class="styleSize styleTitle" id="Title1"> Circulation </div>
    <div class="outer" id="Frame1"> </div>
    <div class="outer" id="legendFrame"> </div>
    <div class="outer" id="Frame2"> </div>
    <div class="styleSize styleTitle" id="Title2"> PAC </div>
</body>


<script>   

let BCIRCID = [ "65620", "65621", "65622", "65623","65624", "65625", "65626", "65627", "65628", "65652", "65677","65678" ];
let BPACID = [ "65629", "65630", "65631", "65632","65633", "65634", "65635", "65636", "65637", "65667", "65679","65680" ];

let BName = ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22","24"];
let BName2 = ["00-02", "02-04", "04-06", "06-08", "08-10", "10-12", "12-14", "14-16", "16-18", "18-20", "20-22", "22-24"];
let BNum = 12;

let MyHttp = "http://192.X.Y.Z."; 
let MyPort = "80"; 
let MyApi = "secret"; 
let MyUrl= "";

function MyURL(ID) {
        MyUrl= MyHttp + ":";
        MyUrl+= MyPort + "/api/core/io/";
        MyUrl+= ID  + "?ApiKey=";
        MyUrl+= MyApi;
        return MyUrl;
}

function updateStatus(BID) {
    fetch(MyURL(BID), {method: "GET"})
                  .then(function(response) {
                            //console.log(response);
                            if (response.status !== 200) {
                                console.log("Looks like there was a problem. Status Code: " + response.status);
                                return;
                            }
                            response.json().then(function(data) {
                                document.getElementById(BID).style.backgroundColor = (data.on == true) ? "rgb(31, 219, 73)" : "grey";
                                document.getElementById(BID).style.color = (data.on == true) ? "#444" : "white";
                            });
                    })
}

const onClick = function() {
        let clickedID = this.id;
        fetch(MyURL(clickedID), {method:"PUT", body:JSON.stringify({"toggle":true})});
        setTimeout(function() {
            updateStatus(clickedID);
        }, 100);
}

for (let i = 0; i < BNum; i++) {
        var element = document.createElement("input");
        element.type="button";
        element.className="styleButton styleSize";
        element.id=BCIRCID[i];
        element.onclick = onClick;
        document.getElementById("Frame1").appendChild(element);
        updateStatus(BCIRCID[i]);

        setInterval(function() {
            updateStatus(BCIRCID[i]);
        },800)
}
    

for (let i = 0; i < BNum+1; i++) {
        var element = document.createElement("div");
        element.textContent =BName[i]; 
        element.className="styleLegend styleSize outer";
        document.getElementById("legendFrame").appendChild(element);
}

for (let i = 0; i < BNum; i++) {
        var element = document.createElement("input");
        element.type="button";
        element.className="styleButton styleSize";
        element.id=BPACID[i];
        element.onclick = onClick;
        document.getElementById("Frame2").appendChild(element);
        updateStatus(BPACID[i]);

        setInterval(function() {
            updateStatus(BPACID[i]);
        },800)
}

</script>
'> </iframe>