Collection de Widgets HTML (Boutons)

wamsound · Février 8, 2022, 11:35

Bonjour,
J’ai eu besoin (ou envie) de créer des boutons en HTML afin de pouvoir en changer la couleurs.
Et javais remarqué que sur mon smartphone les « boutons d’origines » étaient un peu gros…
Et l’envie de piloter 2, 3 truc avec ma montre
Bref… je met à dispo ce Widget HTML.
Bonne journée.

SharedScreenshot

<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>
    .styled {
        border: 0;
        height: 65px; /* Hauteur Bouton */
        width: 90px; /* Largeur Bouton */
        font-size: 15px; /* Taille Texte */
        text-align: center;    /* Centrage Texte Bouton */
        color: #fff; /* Couleur Texte Bouton */
        text-shadow: 1px 1px 1px #000; /* Ombre Texte Bouton */
        border-radius: 10px; /* Arrondi Bouton */
        background-color: rgba(220, 0, 0, 1); /* Couleur Bouton */
        box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), /* Couleur 3D Bouton */
                    inset -2px -2px 3px rgba(0, 0, 0, .6); /* Couleur 3D Bouton */
        
    }   
    .styled:hover {
        background-color: rgba(255, 0, 0, 1); /* Couleur Bouton Over */
    }    
    .styled:active {
        box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), /* Couleur Bouton Clic */
                    inset 2px 2px 3px rgba(0, 0, 0, .6); /* Couleur Bouton 3D Clic */
    }
    .centre {
        display: flex;
        align-items: center;
        justify-content: center
    }
</style>
<body>
<div class="centre">
    <input type="button" class="styled" value="no return"  id="btn1" />
    &nbsp&nbsp
    <input type="button" class="styled" value="no return"  id="btn2" />
</div>
<div class="centre">
&nbsp
</div>
<div class="centre">    
    <input type="button" class="styled" value="no return"  id="btn3" />
    &nbsp&nbsp
    <input type="button" class="styled" value="no return"  id="btn4" />
</div>
</body>


<script>

let MyHttp = ""; /* Adresse IP IPX800 */
let MyPort = ""; /* Port IPX800 */
let MyApi = ""; /* API IPX800 */
let MyIDButton1 = ""; /* ID Bouton 1 */
let NameButton1 = "";      /* Nom Bouton 1 */
let MyIDButton2 = ""; /* ID Bouton 2 */
let NameButton2 = "";      /* Nom Bouton 2 */
let MyIDButton3 = ""; /* ID Bouton 3 */
let NameButton3 = "";      /* Nom Bouton 3 */
let MyIDButton4 = ""; /* ID Bouton 4 */
let NameButton4 = "";      /* Nom Bouton 4 */


let MyUrl1, MyUrl2, MyUrl3, MyUrl4;


d = {true:NameButton1+"\nOn", false:NameButton1+"\nOff"}

/* BOUTON 1*/

MyUrl1= MyHttp + ":";
MyUrl1+= MyPort + "/api/core/io/";
MyUrl1+= MyIDButton1 + "?ApiKey=";
MyUrl1+= MyApi;
 
    setInterval(function() {
        fetch(MyUrl1, {method: "GET"})
                  .then(reponseA => reponseA.json())
                  .then(reponseA2 => btn1.value = d[(reponseA2.on)])
    }, 800) /*temps pour rafraichissement en cas de manipulation exterieure*/

    btn1.onclick = () => {

        fetch(MyUrl1, {method:"PUT", body:JSON.stringify({"toggle":true})}) /* Envoi du PUT */
        setTimeout(function() {
            fetch(MyUrl1, {method: "GET"})
                .then(reponseA => reponseA.json())
                .then(reponseA2 => btn1.value = d[(reponseA2.on)])
        }, 200) /*temps après clic pour rafraichissement*/
    }

/* BOUTON 2*/

d2 = {true:NameButton2+"\nOn", false:NameButton2+"\nOff"}

MyUrl2= MyHttp + ":";
MyUrl2+= MyPort + "/api/core/io/";
MyUrl2+= MyIDButton2 + "?ApiKey=";
MyUrl2+= MyApi;
 
    setInterval(function() {
        fetch(MyUrl2, {method: "GET"})
                  .then(reponseB => reponseB.json())
                  .then(reponseB2 => btn2.value = d2[(reponseB2.on)])
    }, 800) /*temps pour rafraichissement en cas de manipulation exterieure*/

    btn2.onclick = () => {

        fetch(MyUrl2, {method:"PUT", body:JSON.stringify({"toggle":true})}) /* Envoi du PUT */
        setTimeout(function() {
            fetch(MyUrl2, {method: "GET"})
                .then(reponseB => reponseB.json())
                .then(reponseB2 => btn2.value = d2[(reponseB2.on)])
        }, 200) /*temps après clic pour rafraichissement*/
    }

/* BOUTON 3*/

d3 = {true:NameButton3+"\nOn", false:NameButton3+"\nOff"}

MyUrl3= MyHttp + ":";
MyUrl3+= MyPort + "/api/core/io/";
MyUrl3+= MyIDButton3 + "?ApiKey=";
MyUrl3+= MyApi;
 
    setInterval(function() {
        fetch(MyUrl3, {method: "GET"})
                  .then(reponseC => reponseC.json())
                  .then(reponseC2 => btn3.value = d3[(reponseC2.on)])
    }, 800) /*temps pour rafraichissement en cas de manipulation exterieure*/

    btn3.onclick = () => {

        fetch(MyUrl3, {method:"PUT", body:JSON.stringify({"toggle":true})}) /* Envoi du PUT */
        setTimeout(function() {
            fetch(MyUrl3, {method: "GET"})
                .then(reponseC => reponseC.json())
                .then(reponseC2 => btn3.value = d3[(reponseC2.on)])
        }, 200) /*temps après clic pour rafraichissement*/
    }
    
/* BOUTON 4*/

d4 = {true:NameButton4+"\nOn", false:NameButton4+"\nOff"}

MyUrl4= MyHttp + ":";
MyUrl4+= MyPort + "/api/core/io/";
MyUrl4+= MyIDButton4 + "?ApiKey=";
MyUrl4+= MyApi;
 
    setInterval(function() {
        fetch(MyUrl4, {method: "GET"})
                  .then(reponseD => reponseD.json())
                  .then(reponseD2 => btn4.value = d4[(reponseD2.on)])
    }, 800) /*temps pour rafraichissement en cas de manipulation exterieure*/

    btn4.onclick = () => {

        fetch(MyUrl4, {method:"PUT", body:JSON.stringify({"toggle":true})}) /* Envoi du PUT */
        setTimeout(function() {
            fetch(MyUrl4, {method: "GET"})
                .then(reponseD => reponseD.json())
                .then(reponseD2 => btn4.value = d4[(reponseD2.on)])
        }, 200) /*temps après clic pour rafraichissement*/
    }
</script>
'></iframe>

Il faut juste renseigner les valeurs de la ligne 58 à 68

fgtoul · Février 8, 2022, 12:14

Bonjour,
merci pour le partage
n’avez-vous pas peur que de tels widgets prennent trop de place dans les dashboards ? (5840 octets c’est beaucoup pour 4 boutons).
Attention tout de même à limiter l’usage de widgets html sur un dashboard, notamment avec des appels API sur l’ipx elle-même.
Un problème est connu (pertes de connexion réseau) et en cours d’analyse.
bonne journée

wamsound · Février 8, 2022, 12:44

Je voulais juste comprendre le système des Fetch method Put.

On peut aussi l’utiliser en Standalone HTML dans un navigateur en rajoutant les balises.
Bref j’essaie des trucs…
Bonne journée

fgtoul · Février 8, 2022, 12:57

vous pouvez réduire la taille occupée en mémoire en optimisant le javascript, par exemple avec des fonctions (Vous codez effectivement la même chose pour les 4 boutons)

wamsound · Février 8, 2022, 12:59

Ah là on touche à ma méconnaissance du codage dsl…
Mais je suis prêt à apprendre

t0urista2 · Mai 9, 2022, 7:20

Bonjour

J’ai essaye de travailler avec des fonctions et des boucles, pour créer autant de boutons que souhaité sur un seul widget

le code ci-dessus ne fonctionn e pas comme prevu, :

la mise a jour de l’etat d’u bouton fonctionne (function updateStatus) :
- bouton à 1 → vert,
- bouton à 0 → rouge
cliquer sur un bouton ne fonctionne pas, quelque soit le bouton sur lequel on clique, c’est le dernier qui ‹ toggle ›

Où est l’erreur dans la logique du code ?

<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>
    .styled {
        border: 0;
        height: 65px; /* Hauteur Bouton */
        width: 90px; /* Largeur Bouton */
        font-size: 15px; /* Taille Texte */
        text-align: center;    /* Centrage Texte Bouton */
        color: #fff; /* Couleur Texte Bouton */
        text-shadow: 1px 1px 1px #000; /* Ombre Texte Bouton */
        border-radius: 10px; /* Arrondi Bouton */
        background-color: rgba(220, 0, 0, 1); /* Couleur Bouton */
        box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), /* Couleur 3D Bouton */
                    inset -2px -2px 3px rgba(0, 0, 0, .6); /* Couleur 3D Bouton */
        
    }   
    .styled:hover {
        background-color: rgba(255, 0, 0, 1); /* Couleur Bouton Over */
    }    
    .styled:active {
        box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), /* Couleur Bouton Clic */
                    inset 2px 2px 3px rgba(0, 0, 0, .6); /* Couleur Bouton 3D Clic */
    }
    .centre {
        display: flex;
        align-items: center;
        justify-content: center
    }
</style>

<body>
<div class="centre mainClass" id="mainFrame"> </div>
</body>


<script>   

let BID = ["65620", "65621", "65622", "65623"];
let BName = ["PH1", "PH2", "PH3", "PH4"];
let BNum = 4;

let MyHttp = "http://192.168.0.128"; 
let MyPort = "80"; 
let MyApi = "xxxxxxxxxxxxx"; 
let MyUrl= "";


function updateStatus(BID) {
    MyUrl= MyHttp + ":";
    MyUrl+= MyPort + "/api/core/io/";
    MyUrl+= BID  + "?ApiKey=";
    MyUrl+= MyApi;
    fetch(MyUrl, {method: "GET"})
                  .then(function(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) ? "green" : "red";
                            });
                    })
}

for (let i = 0; i < BNum; i++) {
    
        MyUrl= MyHttp + ":";
        MyUrl+= MyPort + "/api/core/io/";
        MyUrl+= BID[i]  + "?ApiKey=";
        MyUrl+= MyApi;
        
        var element = document.createElement("input");
        element.type="button";
        element.value=BName[i];   
        element.className="styled";
        element.id=BID[i];
        element.onclick = () => { 
            fetch(MyUrl, {method:"PUT", body:JSON.stringify({"toggle":true})});
            setTimeout(function() {
                updateStatus(BID[i]);
            }, 200)
        };
        
        document.getElementById("mainFrame").appendChild(element);

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

</script>
'> </iframe>

fgtoul · Mai 9, 2022, 7:34

Bonjour @t0urista2,

le widget « bouton poussoir » de la V5 accepte une sélection multiple dans la liste datasources, et permet donc déjà de créer autant de boutons que souhaité (de 1 à 4).
Quel comportement supplémentaire souhaitez vous ?
bonne journée

t0urista2 · Mai 9, 2022, 7:54

bonjour et merci @fgtoul

je souhaiterais avoir jusque 12 bouton-poussoirs sur un seul widget (sélection des plages horaires prédéfinies de fonctionnement d’une pompe de circulation)

fgtoul · Mai 9, 2022, 7:57

il me semble que la matrice peut remplacer avantageusement les BP dans ce cas

t0urista2 · Mai 9, 2022, 8:08

la matrice ne permet pas d’afficher le nom du bouton

t0urista2 · Mai 9, 2022, 8:09

j’ai modifié le code qui fonctionne maintenant :

<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>
    .styled {
        border: 0;
        height: 65px; /* Hauteur Bouton */
        width: 90px; /* Largeur Bouton */
        font-size: 15px; /* Taille Texte */
        text-align: center;    /* Centrage Texte Bouton */
        color: #fff; /* Couleur Texte Bouton */
        text-shadow: 1px 1px 1px #000; /* Ombre Texte Bouton */
        border-radius: 10px; /* Arrondi Bouton */
        background-color: rgba(220, 0, 0, 1); /* Couleur Bouton */
        box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), /* Couleur 3D Bouton */
                    inset -2px -2px 3px rgba(0, 0, 0, .6); /* Couleur 3D Bouton */
        
    }   
    .styled:hover {
        background-color: rgba(255, 0, 0, 1); /* Couleur Bouton Over */
    }    
    .styled:active {
        box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), /* Couleur Bouton Clic */
                    inset 2px 2px 3px rgba(0, 0, 0, .6); /* Couleur Bouton 3D Clic */
    }
    .centre {
        display: flex;
        align-items: center;
        justify-content: center
    }
</style>

<body>
<div class="centre mainClass" id="mainFrame"> </div>
</body>


<script>   

let BID = ["65620", "65621", "65622", "65623"];
let BName = ["PH1", "PH2", "PH3", "PH4"];
let BNum = 4;

let MyHttp = "http://192.168.0.128"; 
let MyPort = "80"; 
let MyApi = "xxxxxxxxxxxxxxxx"; 
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) {
                            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) ? "green" : "red";
                            });
                    })
}

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.value=BName[i];   
        element.className="styled";
        element.id=BID[i];
        element.onclick = onClick;
        document.getElementById("mainFrame").appendChild(element);

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

</script>
'> </iframe>

grocrabe · Mai 9, 2022, 8:45

Bonjour t0urista2,

le RollOver fonctionne sur les matrices.

Bonne journée