Bonjour,
Je viens de créer un widget HTML sur un dashboard. Je récupère une valeur ANA. et la publie.
je copie et widget dans un autre dashboard
Je supprime tous les affichages, je recupère l’affichage du precedent. en passant d’un dashboard a l’autre. (F5 du navigateur)
Les variables des widget HTML sont-elles communes ?
Cdlt
Bonjour,
je ne suis pas sûr de comprendre.
Pouvez-vous décrire le souci et fournir le code html ? des captures d’écran ?
bonne journée
Merci @fgtoul
voici les copies & codes
Voici le dashboard « conso »
voici le code ANA -HTML
> <link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
> <script type="text/javascript">
>
> let URI = "/api/core/ana?ApiKey=7T4R0jwxA4bC88R"
>
> // YEAR-1 VALUE :
>
> let arrEcoDevice = {};
> //arrEcoDevice.yesterday_hchp = 327698;
> //arrEcoDevice.yesterday_hchc = 327701;
> arrEcoDevice.day_hchp = 327698;
> arrEcoDevice.day_hchc = 327701;
> arrEcoDevice.month_hchp = 327695;
> arrEcoDevice.month_hchc = 327706;
> arrEcoDevice.year_hchp = 327708;
> arrEcoDevice.year_hchc = 327707;
>
> let idYhp = 327708;
> let idDhp = 327698;
>
> let anaId = 327708; //196617;
>
>
> /* Get state and set widget */
> function updateData() {
> let dataColor,
> dataIcon,
> dataText,
> titleText;
>
> getAna((ana) => {
> const anaFound = ana.find( analog => analog._id === anaId);
> if (undefined == anaFound) {
> dataColor = "#FF0000"; // red
> dataIcon = "icon-circle-remove";
> dataText = "ANA id = " + anaId + " non trouvée"
> titleText = "Erreur"
> } else {
> switch (anaFound.value) {
> case 0: // value = 0
> dataColor = "#32CD32"; // green
> dataIcon = "icon-lamp_light";
> dataText = "Valeur 0"
> break;
> case 1: // value = 1
> dataColor = "#32CD32"; // green
> dataIcon = "icon-lamp2_light";
> dataText = "Valeur 1"
> break;
> case 2: // value = 2
> dataColor = "#32CD32"; // green
> dataIcon = "icon-lamp4_light";
> dataText = "Valeur 2"
> break;
> default: // Any other value
> dataColor = "#FF7C00"; // orange
> dataIcon = "icon-circle-question";
> dataText = "Valeur = " + anaFound.value + " non définie";
> }
> titleText = anaFound.name;
> }
>
> setTitle(titleText);
> setIcon(dataIcon, dataColor);
> //setText(dataText, dataColor);
> soustraction(idDhp, idYhp);
> });
> }
> /***/
>
> function getValue(cb) {
> getAna((ana) => {
> var idValue = ana.find( analog => analog._id === cb);
> idValue.value
> });
> }
> /***/
>
> /* Get data from API */
> function getAna(cb) {
> fetch(URI, {method: "GET"}).then((ret) => { // Get ANA group
> ret.json().then((ana) => {
> cb(ana); // Return ANA group from API
> });
> });
> }
> /***/
>
> function soustraction(id0, id1 ) {
> getAna((ana) => {
> var idR0 = ana.find( analog => analog._id === id0);
> var idR1 = ana.find( analog => analog._id === id1);
> result = idR0.value - idR1.value;
> dataText = result; //"Valeur = " +
> // + idR0.value +","+ idR1.value +","
> dataColor = "#FF7C00";
> setText(dataText, dataColor);
> });
> }
>
> /* 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 text and color */
> function setText(text, color) {
> let msg = document.getElementById("myDataText");
> msg.style.color = color;
> msg.innerHTML = text;
> }
> /***/
>
> /* Set title */
> function setTitle(text) {
> let msg = document.getElementById("myTitle");
> msg.innerHTML = text;
> }
> /***/
>
> /* Auto refresh (optional) */
> function autoRefresh() {
> setInterval(() => {
> updateData();
> }, 1000); // 1 sec
> }
> /***/
> soustraction(idYhp, idDhp)
> updateData();
> autoRefresh(); // Optional
> </script>
>
> <table width="100%" style="padding: 10px">
> <thead>
> <tr>
> <!-- Title -->
> <th colspan="2">
> <span id="myTitle" style="font-size: 15px; text-align:center"></span>
> </th>
> <!---->
> </tr>
> </thead>
> <tbody>
> <tr style="display: flex; align-item: center; justify-content: space-between">
> <!-- Icon -->
> <td>
> <i id="myIcon" class="gce-glyph"></i>
> </td>
> <!---->
>
> <!-- Text -->
> <td>
> <span id="myDataText" style="font-size: 15px"></span>
> </td>
> <!---->
> </tr>
> </tbody>
> </table>
voici le dashboard « HOME »
voici le code Annee-1
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<script type="text/javascript">
let URI = "/api/core/ana?ApiKey=7T4R0jwxA4bC88R"
// YEAR-1 VALUE :
let arrEcoDevice = {};
//arrEcoDevice.yesterday_hchp = 327698;
//arrEcoDevice.yesterday_hchc = 327701;
arrEcoDevice.day_hchp = 327698;
arrEcoDevice.day_hchc = 327701;
arrEcoDevice.month_hchp = 327695;
arrEcoDevice.month_hchc = 327706;
arrEcoDevice.year_hchp = 327708;
arrEcoDevice.year_hchc = 327707;
let anaId = 327708; //196617;
/* Get state and set widget */
function updateData() {
let dataColor,
dataIcon,
dataText,
titleText;
dataColor = "#FF0000"; // red
dataIcon = "icon-circle-remove";
dataText = "ANA id = " + anaId + " non trouvée"
titleText = "Erreur"
//getAna((ana) => {
// const anaFound = ana.find( analog => analog._id === arrEcoDevice.day_hchp);
//titleText = anaFound.name;
//setIcon(dataIcon, dataColor);
//setTitle(titleText);
//setLabel("myTitle", titleText, 0);
//setText(dataText, dataColor);
//setLabel("myDataText", dataText, dataColor);
//soustraction(idDhp, idYhp);
//});
}
/***/
/* Get data from API */
function getAna(cb) {
fetch(URI, {method: "GET"}).then((ret) => { // Get ANA group
ret.json().then((ana) => {
cb(ana); // Return ANA group from API
});
});
}
/***/
/* Get data from ID */
function getValue(id) {
getAna((ana) => {
var idValue = ana.find( analog => analog._id === id);
idValue.value
});
}
/***/
/* Set text and color */
/*function setLabel(element, text, color) {
let msg = document.getElementById(element);
if (color != 0 ) {
msg.style.color = color;
}
msg.innerHTML = text;
}
*/
/***/
/* Set title */
function setTitle(text) {
let msg = document.getElementById("myTitle");
msg.innerHTML = text;
}
/***/
/* Set text and color */
function setText(text, color) {
let msg = document.getElementById("myDataText");
msg.style.color = color;
msg.innerHTML = text;
}
/***/
/* 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);
}
/***/
/* Auto refresh (optional) */
function autoRefresh() {
setInterval(() => {
updateData();
}, 1000); // 1 sec
}
/***/
//soustraction(idYhp, idDhp)
updateData();
autoRefresh(); // Optional
</script>
<table width="100%" style="padding: 10px">
<thead>
<tr>
<!-- Title -->
<th colspan="2">
<span id="myTitle" style="font-size: 15px; text-align:center"></span>
</th>
<!---->
</tr>
</thead>
<tbody>
<tr style="display: flex; align-item: center; justify-content: space-between">
<!-- Icon -->
<td>
<i id="myIcon" class="gce-glyph"></i>
</td>
<!---->
<!-- Text -->
<td>
<span id="myDataText" style="font-size: 15px"></span>
</td>
<!---->
</tr>
</tbody>
</table>
le problème ne saute pas aux yeux, quel est le souci ?
avez-vous revérifié les id de variables utilisées dans les calculs ?
Je comprends bien,
J’ai tagué les affichages dans le second widget
//getAna((ana) => {
// const anaFound = ana.find( analog => analog._id === arrEcoDevice.day_hchp);
//titleText = anaFound.name;
//setIcon(dataIcon, dataColor);
//setTitle(titleText);
//setLabel("myTitle", titleText, 0);
//setText(dataText, dataColor);
//setLabel("myDataText", dataText, dataColor);
//soustraction(idDhp, idYhp);
//});
Donc je ne devrai rien d’afficher 
pour vérifier si c’est un cache navigateur ou non, essayez de différencier les id sur les objets html entre les 2 widgets.
sinon, ce sera effectivement .
Pour vérifier si c’est un pb lié à la duplication du widget, créez un nouveau widget et collez le code source.
Bonjour,
Le contenu de chaque widget html est simplement copié dans la page qui affiche le dashboard.
Vos deux widgets HTML sont sur le même dashboard donc il vous faut différencier chaque id d’objet html et chaque nom de fonction. Par exemple vous avez deux fois la même fonction updateData(), ça ne peut pas fonctionner correctement.
Ou alors en plus simple vous mettez chaque widget dans une iframe (2 lignes à ajouter dans le widget, voir un exemple ici Widget HTML ipxv5 - #4 par jbbeauf)
Bonjour @jbbeauf, @fgtoul
Nous sommes obligé de faire « F5 » sur chaque dashboard pour faire un update des widgets HTML ?
Clt
non, pas obligé de faire F5
la fonction javascript autoRefresh devrait faire le taff
Oups @fgtoul … Merci et cachette de la honte
Pour le « F5 »: en théorie non. Le contenu de la page est bien changé quand on ferme la fenêtre d’édition du widget
Mais en pratique oui, je n’explique pas pourquoi mais j’ai souvent eu des soucis après avoir modifié le code, surtout quand il y a des erreurs qu’on les corrige etc. J’ai pris l’habitude de refraichir la page à chaque fois et plus aucun soucis avec Firefox.
1 « J'aime »
il s’agit du cache du navigateur.
lorsqu’on modifie le code dans un widget html existant, le navigateur garde l’ancienne version en cache.
Il faut donc supprimer ces versions par CTRL F5 sur PC (Cmd F5 sur mac).
Ensuite, lorsque la bonne version est affichée et ne contient pas d’erreur, la fonction autoRefresh présente dans le script devrait remplir son rôle.
1 « J'aime »
pour rafraichir en vidant le cache sur Mac il faut tenir la touche Majuscule enfoncée et cliquer sur le symbole de rafraichissement du navigateur 
Sinon le raccourci clavier est Cmd R.
R pour Refresh
La 1ère méthode est la plus sûre.
Bonne journée
1 « J'aime »
n’ayant pas de mac, j’ai voulu improviser 
1 « J'aime »
Tu n’es pas à blâmer @fgtoul , je suis sur mac depuis plus de trente ans et je ne le connaissais pas celui-là 
1 « J'aime »
être Macintoshien c’est comme être savoisien… faut au moins 3 générations 
Bonne soirée
1 « J'aime »