J’en profite pour vous partager l’exemple de François que j’ai modifié pour:
- corriger l’icône quand le garage est fermé
- corriger le changement d’icône ouvert/fermé qui ne fonctionnait pas pour moi (Firefox)
- Inclure le tout dans un iframe ce qui permet de dupliquer le Widget sans avoir à changer le nom des fonctions et des ID des éléments HTML. Ça permet de transposer à une autre porte très facilement.
→ Proposition d’amélioration pour les Widgets HTML @GCE: inclure le code HTML dans un iframe par défaut et y ajouter tous les styles automatiquement (gce-color-styles, gce-glyph.min, etc…)
Il n’y a qu’à modifier la clef API
<iframe srcdoc='
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<script type="text/javascript">
/* Get state and set widget */
function init() {
let lockColor,
lockIcon,
stateMsg;
getState((ipx) => {
let garageState = ipx.ioRelayState[0]; // Isolated relay state
if (garageState == "off") {
lockColor = "#FF0000"; // red
lockIcon = "icon-lock-open_security";
stateMsg = "Porte ouverte";
} else if (garageState == "on") {
lockColor = "#32CD32"; // green
lockIcon = "icon-lock_security";
stateMsg = "Porte fermée";
}
setIcon(lockIcon, lockColor);
setMessage(stateMsg, lockColor);
setState(garageState, lockColor);
});
}
/***/
/* Get data from API */
function getState(cb) {
fetch("/api/system/ipx?ApiKey=API_KEY", {method: "GET"}).then((ret) => { // Get IPX object
ret.json().then((ipx) => {
cb(ipx); // Return IPX state from API
});
});
}
/***/
/* Set icon and color */
function setIcon(icon, color) {
let myIcon = document.getElementById("myIcon");
myIcon.style.color = color;
myIcon.className = "";
myIcon.classList.add("gce-glyph");
myIcon.classList.add(icon);
}
/***/
/* Set state message */
function setMessage(text, color) {
let msg = document.getElementById("myStateMsg");
msg.style.color = color;
msg.innerHTML = text;
}
/***/
/* Set garage state */
function setState(text, color) {
let garage = document.getElementById("myGarageState");
garage.style.color = color;
garage.innerHTML = text;
}
/***/
/* Auto refresh (optional) */
function autoRefresh() {
setInterval(() => {
init();
}, 1000); // 1 sec
}
/***/
init();
autoRefresh(); // Optional
</script>
<table width="100%" style="padding: 10px">
<tr style="display: flex; align-item: center; justify-content: space-between">
<!--Icon -->
<td>
<i id="myIcon" class="gce-glyph"></i>
</td>
<!---->
<!-- State message -->
<td>
<span id="myStateMsg" style="font-size: 15px"></span>
</td>
<!---->
<!-- Garage state -->
<td>
<span id="myGarageState" style="font-size: 15px;"></span>
</td>
<!---->
</tr>
</table>
'></iframe>