mini tuto grâce à un exemple de retranscription d’un widget V4 par @Jeremy_GCE, pendant les bétatests :
sur V4, il fallait créer une source de données, puis l’utiliser en javascript :
let EtatGarage = ([((datasources["MonIPX800"]["response"]["btn0"]))])
if (EtatGarage=="0") {
Lockcolor="#FF0000"; // red
Verrou="glyphicons glyphicons-unlock x2";
Etat="Porte ouverte";
} else if (EtatGarage=="1") {
Lockcolor="#32CD32"; // green
Verrou="glyphicons glyphicons-lock x2";
Etat="Porte fermée";
}
return `
<table width='100%'>
<tr>
<td align=center valign=middle width='30%'><span style='color: ${Lockcolor}'class='${Verrou}'</span></td>
<td align=right valign=middle width='40%'><span style='color:${Lockcolor};font-size: 15px;'>${Etat}</span></td>
<td align=right valign=middle width='40%'><span style='color:${Lockcolor};font-size: 15px;'>${EtatGarage}</span>
</td>
</tr>
</table>
`;
Sur V5, il n’y a pas de source de données à créer, par contre il faut faire les appels à l’API par script Javascript.
Le Widget HTML de la V5 attend du code HTML, le javascript sera donc inséré dans les balises <script>.....</script>
Voici la transcription du widget précédent :
<script type="text/javascript">
/* Get state and set widget */
function init() {
let lockColor,
lockIcon,
stateMsg;
getState((ipx) => {
let garageState = ipx.ioRelays[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-open_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=myApiKey", {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.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>
Vous aurez besoin de consulter la doc de l’API V5 afin de lancer les bonnes requêtes au travers de la commande fetch