bonjour a tous
je recupere des valeurs sur ma V5 en numerique
j 'aimerais quelle avoir un widget qui la transforme
voila ce que je veut
valeur. 0 = standby
1 = automatique
2 = manuel
3 = passif
comment je peut faire pour creer ce genre de widjet ?
merci a vous
Bonjour,
Tu peux utiliser un widget html et coller le code suivant dans l’éditeur de texte.
Attention à bien changer l’ID de ta commande et l’APIKEY.
Il faut aussi que tu adapte les icones et leur couleurs.
Il y a peu être une autre manière de faire maintenant car le mien ne s’affiche pas sur l’application.
<iframe srcdoc='
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<script type="text/javascript">
let anaId = TON ID;
/* Get state and set widget */
function updateData() {
let dataColor,
dataIcon,
dataText;
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"
} else {
switch (anaFound.value) {
case 0: // value = 0
dataColor = "#32CD32"; // green
dataIcon = "icon-fan_power";
dataText = "Standby"
break;
case 1: // value = 1
dataColor = "#FFA500"; // orange
dataIcon = "icon-fan_power";
dataText = "Automatique"
break;
case 2: // value = 2
dataColor = "#FF0000"; // red
dataIcon = "icon-fan_power";
dataText = "Manuel"
break;
case 3: // value = 3
dataColor = "#FF0000"; // red
dataIcon = "icon-circle-remove";
dataText = "Passif"
break;
default: // Any other value
dataColor = "#FF7C00"; // orange
dataIcon = "icon-circle-question"
}
}
setIcon(dataIcon, dataColor);
setText(dataText, dataColor);
});
}
/***/
/* Get data from API */
function getAna(cb) {
fetch("/api/core/ana?ApiKey=TON APIKEY", {method: "GET"}).then((ret) => { // Get ANA group
ret.json().then((ana) => {
cb(ana); // Return ANA group 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 text and color */
function setText(text, color) {
let msg = document.getElementById("myDataText");
msg.style.color = color;
msg.innerHTML = text;
}
/***/
/* Auto refresh (optional) */
function autoRefresh() {
setInterval(() => {
updateData();
}, 5000); // 5 sec
}
/***/
setTimeout(() => {updateData();}, 50)
autoRefresh(); // Optional
</script>
<center>
<div style="width:100px;font-size:48px;padding:30px">
<div id="myIcon" class="gce-glyph" style="font-size:48px;" ></div>
<div id="myDataText" style="font-size:18px;color:white;" ></div>
</div>
</center>
'></iframe>
bonsoir @patam
j 'ai bien remplacer id par sa valeur et bien renseigne l 'api key mais rien ne s 'affiche
why?
je n 'ai pas touche aux icones
Tu as rafraîchi la page avec F5 après validation du widget? Test en agrandissant le widget sur 4 cases.
Tu peux mettre une copie du code en remplaçant quelques lettres de ton Apikey?
<iframe srcdoc='
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<script type="text/javascript">
let anaId = 262320;
/* Get state and set widget */
function updateData() {
let dataColor,
dataIcon,
dataText;
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"
} else {
switch (anaFound.value) {
case 0: // value = 0
dataColor = "#32CD32"; // green
dataIcon = "icon-fan_power";
dataText = "Standby"
break;
case 1: // value = 1
dataColor = "#FFA500"; // orange
dataIcon = "icon-fan_power";
dataText = "Automatique"
break;
case 2: // value = 2
dataColor = "#FF0000"; // red
dataIcon = "icon-fan_power";
dataText = "Manuel"
break;
case 3: // value = 3
dataColor = "#FF0000"; // red
dataIcon = "icon-circle-remove";
dataText = "Passif"
break;
default: // Any other value
dataColor = "#FF7C00"; // orange
dataIcon = "icon-circle-question"
}
}
setIcon(dataIcon, dataColor);
setText(dataText, dataColor);
});
}
/***/
/* Get data from API */
function getAna(cb) {
fetch("/api/core/ana?ApiKey=cBxxxxxxxxx, {method: "GET"}).then((ret) => { // Get ANA group
ret.json().then((ana) => {
cb(ana); // Return ANA group 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 text and color */
function setText(text, color) {
let msg = document.getElementById("myDataText");
msg.style.color = color;
msg.innerHTML = text;
}
/***/
/* Auto refresh (optional) */
function autoRefresh() {
setInterval(() => {
updateData();
}, 5000); // 5 sec
}
/***/
setTimeout(() => {updateData();}, 50)
autoRefresh(); // Optional
</script>
<center>
<div style="width:100px;font-size:48px;padding:30px">
<div id="myIcon" class="gce-glyph" style="font-size:48px;" ></div>
<div id="myDataText" style="font-size:18px;color:white;" ></div>
</div>
</center>
'></iframe>
Il manque un guillemet à la fin de l’Apikey.
arff ca marche
sais tu comment je peut trouver les icones ?
Tu crées un widget, tu choisis une icone.
Clic droit sur l’icone dans le tableau de sélection, choisir « inspecter », ce qui ouvre la console et te donne le nom de l’icone.
ok
j 'aimerais pas avoir d 'icone juste le texte et pouvoir l 'agrandir le texte
Test ça:
<iframe srcdoc='
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<script type="text/javascript">
let anaId = TON ID;
/* Get state and set widget */
function updateData() {
let dataText;
getAna((ana) => {
const anaFound = ana.find( analog => analog._id === anaId);
if (undefined == anaFound) {
dataText = "ANA id = " + anaId + " non trouvée"
} else {
switch (anaFound.value) {
case 0: // value = 0
dataText = "Standby"
break;
case 1: // value = 1
dataText = "Automatique"
break;
case 2: // value = 2
dataText = "Manuel"
break;
case 3: // value = 3
dataText = "Passif"
break;
default: // Any other value
dataColor = "#FF7C00"; // orange
dataIcon = "icon-circle-question"
}
}
setIcon(dataIcon, dataColor);
setText(dataText, dataColor);
});
}
/***/
/* Get data from API */
function getAna(cb) {
fetch("/api/core/ana?ApiKey=TON APIKEY", {method: "GET"}).then((ret) => { // Get ANA group
ret.json().then((ana) => {
cb(ana); // Return ANA group from API
});
});
}
/***/
/* Set text and color */
function setText(text, color) {
let msg = document.getElementById("myDataText");
msg.style.color = color;
msg.innerHTML = text;
}
/***/
/* Auto refresh (optional) */
function autoRefresh() {
setInterval(() => {
updateData();
}, 5000); // 5 sec
}
/***/
setTimeout(() => {updateData();}, 50)
autoRefresh(); // Optional
</script>
<center>
<div style="width:100px;font-size:48px;padding:30px">
<div id="myDataText" style="font-size:18px;color:white;" ></div>
</div>
</center>
'></iframe>
Je ne suis pas sûr de moi sur cette modification…
C’est @fgtoul qui m’avait fait ce widget, je pense qu’il est beaucoup mieux placé que moi pour modifier ce code.
Bonjour,
voilà qui devrait fonctionner.
Je n’ai pas testé, juste modifié le code d’origine dans un traitement de texte.
Merci de me faire un retour.
Chris, pense à modifier l’APIKEY, attention au guillemets.
Changer l’ID de la variable et les couleurs en fonction des besoins.
Bonne journée
<iframe srcdoc='
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<script type="text/javascript">
let anaId = 262258;
/* Get state and set widget */
function updateData() {
let dataColor,
dataText;
getAna((ana) => {
const anaFound = ana.find( analog => analog._id === anaId);
if (undefined == anaFound) {
dataColor = "#FF0000"; // red
dataText = "ERREUR"
} else {
switch (anaFound.value) {
case 0: // value = 0
dataColor = "#0f0"; // vert
dataText = "Standby"
break;
case 1:
dataColor = "#0f0"; // vert
dataText = "Automatique"
break;
case 2:
dataColor = "#0f0"; // vert
dataText = "Manuel"
break;
case 3: //
dataColor = "#00f"; // bleu
dataText = "Passif"
break;
default: // Any other value
dataColor = "#FF7C00"; // orange
dataText = "INCONNU"
}
}
setText(dataColor, dataText);
});
}
/***/
/* Get data from API */
function getAna(cb) {
fetch("/api/core/ana?ApiKey=ulmWrsx0QvdoWvH", {method: "GET"}).then((ret) => { // Get ANA group
ret.json().then((ana) => {
cb(ana); // Return ANA group from API
});
});
}
/***/
/* Set icon and color */
function setText(color,texte) {
let myValue = document.getElementById("myValue");
myValue.style.color = color;
myValue.innerHTML=texte;
}
/***/
/* Auto refresh (optional) */
function autoRefresh() {
setInterval(() => {
updateData();
}, 5000); // 5 sec
}
/***/
setTimeout(() => {updateData();}, 50)
autoRefresh(); // Optional
</script>
<center>
<div style="width:100px;padding:30px">
<div id="myValue" style="font-size:18px;color:white;" ></div>
</div>
</center>
'></iframe>
Bonjour seraphinou,
pour ça il faut éditer cette ligne :
<div id="myValue" style="font-size:18px;color:white;" ></div>
Vue la taille de texte à afficher vous pourrez probablement aller jusqu’à 30px.
Bonne journée
Bonjour,
J’ai le même principe avec ma vmc, elle m’envoie via le modbus la position du bypass sur une variable analogique (1=ouvert 2= fermé à 45° ou 3=fermé).
J’ai crée 3 règles pour convertir sur 3 variables on-off chaque positions du bypass:
Ensuite sur mon dashboard (liveview) j’ai superposé mes 3 variables on-off:
Ça peux dépanner si comme moi tu ne maîtrise pas les widget HTML.
Bonne journée.
je viens d’apporter une petite correction au code ci-dessus.
Bonjour,
Ce widget modifié devrait-il s’afficher sur l’application de la même façon que sur un navigateur?
J’en parlais sur un autre fil, j’ai toujours le problème d’affichage.
@seraphinou, peux-tu me dire si ce widget s’affiche correctement chez toi avec l’application mobile ?
