Bravo ça commence à avoir une belle allure 
Tu ne voudrais pas égaliser les marges de gauche et droite comme celles de haut et bas ?
Ta grille serait bien homogène 
salut,
pour le moment la grille ce sont des code html tous indépendants… faudras que je me pose dessus pour essayer de faire 1 seule HTML commet j’arrive à le faire pour les autres pages.
j’ai encore un probléme de refresh auto… je ne comprends pas. je suis obliger de faire F5 pour avoir l’icone colorées… est ce que le refreshicon est mal placé?
en faite ca ne fonctionne pas car j’ai 2 scripts avec 2 refresh qui apelle la meme valeur. si je supprime un script ca fonctionne bien.
comment faire? il faudrait si <=80 c’est elle icone, sinon c’est autres icones.mais il y aura 7 widgets…
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Porte et fenêtre</title>
<script>
function sendJeedomCommand(cmdId) {
fetch(`http://192.168.1.59/core/api/jeeApi.php?apikey=b13rMw26shOqgyW5xxxxxxxJerf&type=cmd&id=${cmdId}`)
.then(response => response.json())
.then(data => {
console.log("Réponse Jeedom:", data);
refreshIcons(); // Rafraîchir les icônes après la commande
})
.catch(error => console.error("Erreur Jeedom:", error));
}
</script>
<style>
/* Variables CSS pour configurer l'espacement */
:root {
--espace-horizontal: 10px; /* Espacement horizontal entre les widgets */
--espace-vertical: 10px; /* Espacement vertical entre les widgets */
}
/* Conteneur principal en grille */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 2fr); /* 3 colonnes de largeur égale */
gap: var(--espace-vertical) var(--espace-horizontal); /* Espacement vertical et horizontal */
padding: 10px; /* Espacement autour de la grille */
max-width: 1280px; /* Largeur maximale de la grille */
}
/* Style des widgets */
.carre {
width: 400px; /* Largeur du carré */
height: 200px; /* Hauteur du carré */
background-color: black; /* Couleur de fond du carré */
border-radius: 15px; /* Arrondir les coins */
display: flex;
flex-direction: column; /* Aligner les éléments verticalement */
justify-content: flex-start; /* Aligner le contenu en haut */
align-items: center; /* Centrer horizontalement */
padding-top: 10px; /* Espacement en haut pour le texte */
}
.texte {
font-size: 25px; /* Taille du texte */
color: white; /* Couleur du texte */
font-family: Arial, sans-serif; /* Police du texte */
margin-bottom: 20px; /* Espacement entre le texte et l'icône */
}
.carre i {
font-size: 80px; /* Taille de l'icône */
color: white !important; /* Couleur de base de l'icône */
cursor: pointer;
}
.icon_blue {
color: blue !important; /* Couleur de l'icône lorsque active */
}
.icon-container {
display: flex;
gap: 40px; /* Augmente l'espacement entre les icônes */
justify-content: center;
}
/* Espacement personnalisé entre les lignes */
.custom-gap {
grid-column: 1 / -1; /* Prend toute la largeur de la grille */
height: 100px; /* Hauteur de l'espace personnalisé */
}
</style>
</head>
<body>
<!-- Conteneur de la grille -->
<div class="grid-container">
<!-- Widget 1 à 10 -->
<div class="carre">
<p class="texte">Baie Ouest</p>
<div class="icon-container">
<i class="iconCmd jeedomapp jeedomapp-volet-ferme" onclick="sendJeedomCommand(17126)" id="icon1"></i>
<i class="far fa-stop-circle" onclick="sendJeedomCommand(17127)"></i>
<i class="jeedomapp jeedomapp-volet-ouvert" onclick="sendJeedomCommand(17125)" id="icon2"></i>
</div>
</div>
<!--
<div class="carre">
<p class="texte">Baie Est</p>
<i class="iconCmd jeedomapp jeedomapp-volet-ferme" id="icon2"><i class="jeedomapp jeedomapp-volet-ouvert"></i> </i>
</div>
<div class="carre">
<p class="texte">Cuisine</p>
<i class="iconCmd mdi mdi-window-closed-variant" id="icon3"></i>
</div>
<div class="carre">
<p class="texte">Chambre Parent</p>
<i class="iconCmd mdi-window-closed-variant" id="icon4"></i>
</div>
<div class="carre">
<p class="texte">Chambre Armand</p>
<i class="iconCmd mdi mdi-window-closed-variant" id="icon5"></i>
</div>
<div class="carre">
<p class="texte">Bureau</p>
<i class="iconCmd mdi mdi-window-closed-variant" id="icon6"></i>
</div>
<div class="carre">
<p class="texte">Salle de bain</p>
<i class="iconCmd mdi-window-closed-variant" id="icon7"></i>
</div>
-->
<!-- Espacement personnalisé entre les lignes -->
<!-- <div class="custom-gap"></div> -->
<!-- Nouvelle ligne de widgets -->
<!-- <div class="carre">
<p class="texte">Group RDC</p>
<i class="iconCmd mdi jeedom jeedom-portail_coulissant_ferme" id="icon11"></i>
</div>
<div class="carre">
<p class="texte">Groupe R+1</p>
<i class="iconCmd jeedomapp jeedomapp-garage-ferme" id="icon12"></i>
</div>
<div class="carre">
<p class="texte">Totale</p>
<i class="iconCmd fas fa-door-closed" id="icon13"></i>
</div>
-->
</div>
<!-- icones fermetures -->
<script>
function updateElement(iconId, val) {
const iconElement = document.getElementById(iconId);
if (val <=80) {
iconElement.classList.add('icon_blue');
} else {
iconElement.classList.remove('icon_blue');
}
}
function updateIcon(cmdId, iconId) {
jeedom.cmd.addUpdateFunction(cmdId, function(_options) {
updateElement(iconId, _options.display_value)
});
jeedom.cmd.execute({
id : cmdId,
async: false,
noCache: true,
error: function(error) {
console.log(`Erreur jeedom.cmd.execute(${cmdId})`)
},
success: function (data) {
updateElement(iconId, data);
}});
}
function refreshIcons() {
// Fermeture volets
updateIcon('17128', 'icon1');
//updateIcon('4126', 'icon3', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
//updateIcon('4126', 'icon4', 'mdi mdi-window-closed-variant', 'mdi mdi-wndow-open-variant');
//updateIcon('4126', 'icon5', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
//updateIcon('4126', 'icon6', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
//updateIcon('4126', 'icon7', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
//updateIcon('4126', 'icon8', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
}
refreshIcons();
</script>
<!-- icones Ouvertures -->
<script>
function updateElement(iconId, val) {
const iconElement = document.getElementById(iconId);
if (val >= 81) {
iconElement.classList.add('icon_blue');
} else {
iconElement.classList.remove('icon_blue');
}
}
function updateIcon(cmdId, iconId) {
jeedom.cmd.addUpdateFunction(cmdId, function(_options) {
updateElement(iconId, _options.display_value)
});
jeedom.cmd.execute({
id : cmdId,
async: false,
noCache: true,
error: function(error) {
console.log(`Erreur jeedom.cmd.execute(${cmdId})`)
},
success: function (data) {
updateElement(iconId, data);
}});
}
function refreshIcons() {
// ouverture volets
updateIcon('17128', 'icon2');
//updateIcon('4126', 'icon3', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
//updateIcon('4126', 'icon4', 'mdi mdi-window-closed-variant', 'mdi mdi-wndow-open-variant');
//updateIcon('4126', 'icon5', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
//updateIcon('4126', 'icon6', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
//updateIcon('4126', 'icon7', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
//updateIcon('4126', 'icon8', 'mdi mdi-window-closed-variant', 'mdi mdi-window-open-variant');
}
refreshIcons();
</script>
</body>
</html>
Salut
Je suis sur mobile donc pas simple de lire tout ton code. Mais pourquoi tu déclares 2 fois tes méthodes ? Et/ou si tu veux séparer en 2 parties, il faut 2 noms différents.
Pas sûr de comprendre ce que tu cherches à faire.
Que cherches tu à faire sur le onclick ?
Édit: Ok tu veux exécuter les actions monter de descendre. Essaie jeedom.cmd.execute({id: '12345'})
Et si ce n’est pas le cas dans ton code proposé, change ton apikey 
non ce que je cherche a faire c’est changer la couleur de l’icone de gauche quand la valeur <=80 et celle de droite quand la valeur >=81.
les commandes action fonctionnent trés bien 
le but est toujours de garder la méthode pour le faire sur 7 widgets du htmls(comme mes autres htmls)
quand tu dis :
quels noms?
si je peux garder les 2 fonctions séparés je préfère , pour la lisibilité du code(pour le maintenir).
Je ne suis pas sûr que ça soit la meilleure méthode mais je n’ai peut-être pas bien compris pourquoi.
Par contre, si tu veux 2 fonctions séparées et donc dupliquer ton code, il faut des noms de fonctions différentes.
Dans ce que je vois tu as déclaré 2 fois chaque méthode avec le même nom.
L’exécution du javascript ne peut pas fonctionner correctement ainsi : comment veux-tu qu’un appel d’un même de méthode appelle une fois la première déclaration et une autre fois l’autre méthode, avec le même nom.
Tu as 2 fois les fonctions : updateElement, updateIcon, refreshIcons qui font la même chose excepté le test de la valeur de val 
je ne comprends pas ce que tu souhaites faire. A quoi correspondent ces valeurs 80 et 81 que tu compares ? Elles sont fixes ? Elles sont liées à un équipement ? Quel est le but final ?
Pour cette fonction, tu peux éviter d’avoir à préciser ton adresse IP et ton apikey de cette façon :
function sendJeedomCommand(cmdId) {
jeedom.cmd.execute({id : cmdId});
}
Le rafraichissement se fera automatiquement pour tes commandes infos associées que tu auras ajoutées dans le reste de ta page.
Si tu veux un retour et/ou effectuer différentes actions sur tes commandes action, tu peux compléter avec :
function sendJeedomCommand(cmdId) {
jeedom.cmd.execute({id : cmdId,
success: function(data) {
console.log('Réponse Jeedom: ', data);
},
error: function(error) {
console.error('Erreur Jeedom: ', error);
}
});
Salut,
J’ai finalement créé un widget qui répond à ce besoin et un peu plus (paramétrage par fichier json et paramètres optionnels, gestion des types génériques, …)
Je vais tester mais ce qui m’embête c’est de créer un virtuel par tuile.ca va alourdir mon jeedom?
Salut,
Un virtuel par tuile ? Je ne comprends pas.
ÉDIT : tu veux dire un virtuel par grille ?
merci pour ton traval mais je souhaite reste comme ca avec mes codes html.
je progresse la page eclairage est finti à 90% mais je bute sur le refresh au chargement de la page
une idée de comment faire :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Eclairage Simplifié</title>
<script>
function sendJeedomCommand(cmdId, infoId, iconElement) {
// Ajouter l'effet d'animation
if (iconElement) {
iconElement.classList.add("blink");
// Supprimer l'effet après un court délai
setTimeout(() => {
iconElement.classList.remove("blink");
}, 1000);
}
console.log(`Envoi de la commande ID ${cmdId}...`);
fetch(`http://192.168.1.59/core/api/jeeApi.php?apikey=b13r5KKgPRwT93lTbJerf&type=cmd&id=${cmdId}`)
.then(response => response.json())
.then(data => {
console.log(`Commande envoyée pour ID ${cmdId}:`, data);
})
.catch(error => console.error("Erreur Jeedom:", error));
}
// Création et initialisation des objets Jeedom
var jeedom = jeedom || {};
jeedom.cmd = jeedom.cmd || {};
jeedom.cmd.update = jeedom.cmd.update || {};
// Fonction générique de mise à jour d'un widget
function updateWidget(infoId) {
jeedom.cmd.execute({
id: infoId,
success: function(valeur) {
const etat = Number(valeur);
console.log(`Mise à jour widget ${infoId}: état = ${etat}`);
document.querySelectorAll(`.carreslm[data-info-id="${infoId}"] .iconCmd`)
.forEach(icon => icon.classList.toggle('icon_yellow', etat === 1));
}
});
}
// Association de la fonction d'update à chaque widget via Jeedom.cmd.update
[12365, 15396,13453].forEach(function(infoId) {
jeedom.cmd.update[infoId] = function(_options) {
updateWidget(infoId);
};
});
// Mise à jour initiale lors du chargement de la page
document.addEventListener('DOMContentLoaded', function() {
[12365, 15396,13453].forEach(updateWidget);
});
</script>
<style>
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
.blink {
animation: blink 0.5s ease-in-out 2;
}
.widget-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 15px;
}
.carreslm {
width: 100%;
height: 150px;
background-color: black;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
}
.texte {
font-size: 20px;
color: white;
margin-bottom: 20px;
}
.carreslm i {
font-size: 80px;
color: white !important;
cursor: pointer;
}
.icon_yellow {
color: yellow !important;
}
/* Espacement personnalisé entre les lignes */
.custom-gap {
grid-column: 1 / -1; /* Prend toute la largeur de la grille */
height: 60px; /* Hauteur de l'espace personnalisé */
}
</style>
</head>
<body>
<div class="widget-container">
<!-- Widget Salle à manger -->
<div class="carreslm" data-info-id="12365">
<p class="texte">Salle à manger</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(12366, 12365)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(12367, 12365)"></i>
</div>
</div>
<!-- Widget Cuisine -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Cuisine</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396,this)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396,this)"></i>
</div>
</div>
<!-- Widget Salle à mangé -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Salle à Manger</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Widget WC Evier -->
<div class="carreslm" data-info-id="15396">
<p class="texte">WC Evier</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Widget WC -->
<div class="carreslm" data-info-id="15396">
<p class="texte">WC </p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Widget Salon-Placard -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Salon-Placard</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Espacement personnalisé entre les lignes -->
<div class="custom-gap"></div>
<!-- Escalier -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Escalier</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Couloir -->
<div class="carreslm" data-info-id="13453">
<p class="texte">Couloir</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(13454, 13453)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(13455, 13453)"></i>
</div>
</div>
<!-- Ch Parent -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Ch Parent</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Ch Armand -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Ch Armand</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- bureau -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Bureau</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Salle de Bain -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Salle de bain</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
</div>
</body>
</html>
j’ai trouvé voici le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Eclairage Simplifié</title>
<script>
function sendJeedomCommand(cmdId, infoId, iconElement) {
// Ajouter l'effet d'animation
if (iconElement) {
iconElement.classList.add("blink");
// Supprimer l'effet après un court délai
setTimeout(() => {
iconElement.classList.remove("blink");
}, 1000);
}
console.log(`Envoi de la commande ID ${cmdId}...`);
fetch(`http://192.168.1.59/core/api/jeeApi.php?apikey=b13rMw26shOqgyW5KKgPRwT93lTbJerf&type=cmd&id=${cmdId}`)
.then(response => response.json())
.then(data => {
console.log(`Commande envoyée pour ID ${cmdId}:`, data);
})
.catch(error => console.error("Erreur Jeedom:", error));
}
// Création et initialisation des objets Jeedom
var jeedom = jeedom || {};
jeedom.cmd = jeedom.cmd || {};
jeedom.cmd.update = jeedom.cmd.update || {};
// Fonction générique de mise à jour d'un widget
function updateWidget(infoId) {
jeedom.cmd.execute({
id: infoId,
success: function(valeur) {
const etat = Number(valeur);
console.log(`Mise à jour widget ${infoId}: état = ${etat}`);
document.querySelectorAll(`.carreslm[data-info-id="${infoId}"] .iconCmd`)
.forEach(icon => icon.classList.toggle('icon_yellow', etat === 1));
}
});
}
// Association de la fonction d'update à chaque widget via Jeedom.cmd.update
[12365, 15396,13453].forEach(function(infoId) {
jeedom.cmd.update[infoId] = function(_options) {
updateWidget(infoId);
};
});
function refreshAllIcons() {
[12365, 15396, 13453].forEach(updateWidget);
}
// Mise à jour initiale lors du chargement de la page
//document.addEventListener('DOMContentLoaded', function() {
refreshAllIcons(); // Rafraîchir toutes les icônes au chargement
//});
</script>
<style>
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
.blink {
animation: blink 0.5s ease-in-out 2;
}
.widget-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 15px;
}
.carreslm {
width: 100%;
height: 150px;
background-color: black;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
}
.texte {
font-size: 20px;
color: white;
margin-bottom: 20px;
}
.carreslm i {
font-size: 80px;
color: white !important;
cursor: pointer;
}
.icon_yellow {
color: yellow !important;
}
/* Espacement personnalisé entre les lignes */
.custom-gap {
grid-column: 1 / -1; /* Prend toute la largeur de la grille */
height: 60px; /* Hauteur de l'espace personnalisé */
}
</style>
</head>
<body>
<div class="widget-container">
<!-- Widget Salle à manger -->
<div class="carreslm" data-info-id="12365">
<p class="texte">Salle à manger</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(12366, 12365)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(12367, 12365)"></i>
</div>
</div>
<!-- Widget Cuisine -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Cuisine</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396,this)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396,this)"></i>
</div>
</div>
<!-- Widget Salle à mangé -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Salle à Manger</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Widget WC Evier -->
<div class="carreslm" data-info-id="15396">
<p class="texte">WC Evier</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Widget WC -->
<div class="carreslm" data-info-id="15396">
<p class="texte">WC </p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Widget Salon-Placard -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Salon-Placard</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Espacement personnalisé entre les lignes -->
<div class="custom-gap"></div>
<!-- Escalier -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Escalier</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Couloir -->
<div class="carreslm" data-info-id="13453">
<p class="texte">Couloir</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(13454, 13453)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(13455, 13453)"></i>
</div>
</div>
<!-- Ch Parent -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Ch Parent</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Ch Armand -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Ch Armand</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- bureau -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Bureau</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
<!-- Salle de Bain -->
<div class="carreslm" data-info-id="15396">
<p class="texte">Salle de bain</p>
<div class="icons-container">
<i class="kiko kiko-light-turn-off" onclick="sendJeedomCommand(15397, 15396)"></i>
<i class="iconCmd kiko kiko-light-turn-on" onclick="sendJeedomCommand(15398, 15396)"></i>
</div>
</div>
</div>
</body>
</html>
widget piscine avec chnagement de couleurs du drapeau en fonction de l’état de la piscine, le bouton play passe vert quand le mode pompe tourne, les valeurs changent en direct…
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Piscine</title>
<style>
.widget-piscine {
/* Pour éviter d'affecter d'autres éléments, définissez un style spécifique au widget */
max-width: 800px;
margin: auto;
}
.widget-piscine .grid {
display: grid;
grid-template-columns: repeat(4, 180px);
grid-template-rows: repeat(4, 180px);
gap: 10px;
justify-content: center;
margin-top: 10px;
}
.widget-piscine .square,
.widget-piscine .big-square {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
font-family: Arial, sans-serif;
border-radius: 15px;
position: relative;
}
.widget-piscine .square {
width: 180px;
height: 180px;
background-color: black;
}
.widget-piscine .big-square {
width: 370px;
height: 370px;
background-color: black;
grid-column: span 2;
grid-row: span 2;
}
.widget-piscine .icon {
font-size: 50px;
color: white;
margin-top: 20px;
}
.widget-piscine .big-square .icon {
font-size: 200px;
}
.widget-piscine .flag_green { color: green !important; }
.widget-piscine .flag_orange { color: orange !important; }
.widget-piscine .flag_red { color: red !important; }
.widget-piscine .play_green { color: green !important; }
.widget-piscine .play_red { color: red !important; }
.widget-piscine .icons-container {
display: flex;
gap: 25px;
align-items: center;
justify-content: center;
}
.widget-piscine .data-middle {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: white !important;
font-family: Arial, sans-serif;
font-size: 40px;
}
.widget-piscine .text {
position: absolute;
top: 10px;
font-size: 25px;
color: grey;
font-weight: bold;
}
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
.widget-piscine .blink {
animation: blink 0.5s ease-in-out 2;
}
</style>
</head>
<body>
<div class="widget-piscine">
<div class="grid">
<div class="square">
<div class="text">Température</div>
<div class="data-middle">
<span class="temp">--</span> °C
</div>
</div>
<div class="square">
<div class="text">ORP</div>
<div class="data-middle">
<span class="orp">--</span>
</div>
</div>
<div class="square">
<div class="text">PH</div>
<div class="data-middle">
<span class="ph">--</span>
</div>
</div>
<div class="square">
<div class="text">Filtration</div>
<div class="data-middle">
<span class="tempsfiltration">--</span> H
</div>
</div>
<div class="square">
<div class="text">Pompe Auto</div>
<div class="icons-container">
<i id="playIcon1" class="icon far fa-play-circle" onclick="sendJeedomCommand(5870,this)"></i>
<i class="icon far fa-stop-circle"onclick="sendJeedomCommand(5871,this)"></i>
</div>
</div>
<div class="big-square">
<div class="text">État Général</div>
<i id="etatGeneralFlag" class="icon fas fa-flag"></i>
</div>
<div class="square">
<div class="text">Pompe 50HZ</div>
<div class="icons-container">
<i id="playIcon2" class="icon far fa-play-circle" onclick="sendJeedomCommand(5860,this)"></i>
<i class="icon far fa-stop-circle"onclick="sendJeedomCommand(5861,this)"></i>
</div>
</div>
<div class="square">
<div class="text">Pompe 30HZ</div>
<div class="icons-container">
<i id="playIcon3" class="icon far fa-play-circle" onclick="sendJeedomCommand(5865,this)"></i>
<i class="icon far fa-stop-circle"onclick="sendJeedomCommand(5866,this)"></i>
</div>
</div>
<div class="square">
<div class="text">Date de Mesure</div>
<div class="data-middle">
<span class="date">--</span>
</div>
</div>
<div class="square">
<div class="text">Boost 24H</div>
<div class="icons-container">
<i id="playIcon4" class="icon far fa-play-circle" onclick="sendJeedomCommand(5806,this)"></i>
<i class="icon far fa-stop-circle"onclick="sendJeedomCommand(5807,this)"></i>
</div>
</div>
<div class="square">
<div class="text">Mode</div>
<div class="data-middle">
<span class="mode">--</span>
</div>
</div>
<div class="square">
<div class="text">T° Ext</div>
<div class="data-middle">
<span class="tempext">--</span> °C
</div>
</div>
<div class="square">
<div class="text">Boost 8H</div>
<div class="icons-container">
<i id="playIcon5" class="icon far fa-play-circle" onclick="sendJeedomCommand(5803,this)"></i>
<i class="icon far fa-stop-circle"onclick="sendJeedomCommand(5804,this)"></i>
</div>
</div>
</div>
</div>
<script>
function sendJeedomCommand(cmdId, iconElement) {
if (iconElement) {
console.log("Ajout de l'effet blink sur :", iconElement);
iconElement.classList.remove("blink"); // Reset de l'animation
void iconElement.offsetWidth; // Hack pour forcer le navigateur à "repeindre" l'élément
iconElement.classList.add("blink");
// Supprimer l'effet après 1 seconde
setTimeout(() => {
iconElement.classList.remove("blink");
}, 1000);
}
console.log(`Envoi de la commande ID ${cmdId}...`);
fetch(`http://192.168.1.77/core/api/jeeApi.php?apikey=VUUIpk4MRihCRuElSi9Uviswjq9FCZpNsPPFjnjaZJ17sIjBgiJxYy3vB9DcgYwy&type=cmd&id=${cmdId}`)
.then(response => response.json())
.then(data => {
console.log(`Commande envoyée pour ID ${cmdId}:`, data);
})
.catch(error => console.error("Erreur Jeedom:", error));
}
var jeedom = jeedom || {};
jeedom.cmd = jeedom.cmd || {};
jeedom.cmd.update = jeedom.cmd.update || {};
window.infoId = 12944;
window.playInfoIds = [5873, 5859, 5864, 5805, 5802];
function updateWidget(infoId) {
jeedom.cmd.execute({
id: infoId,
success: function(valeur) {
const etat = Number(valeur);
console.log(`🔵 Mise à jour du drapeau ${infoId}: état = ${etat}`);
let flag = document.getElementById("etatGeneralFlag");
if (flag) {
flag.classList.remove("flag_green", "flag_orange", "flag_red");
if (etat === 'green') {
flag.classList.add("flag_green");
} else if (etat === 'red') {
flag.classList.add("flag_red");
} else if (etat === 'orange') {
flag.classList.add("flag_orange");
} else {
flag.classList.remove("flag_green", "flag_orange", "flag_red");
}
} else {
console.error("❌ L'élément #etatGeneralFlag est introuvable !");
}
},
error: function(error) {
console.error(`❌ Erreur mise à jour drapeau ${infoId}:`, error);
}
});
}
function updatePlayIcon(infoId, index) {
jeedom.cmd.execute({
id: infoId,
success: function(valeur) {
const etat = Number(valeur);
console.log(`🟢 Mise à jour Play ${infoId}: état = ${etat}`);
let icon = document.getElementById(`playIcon${index + 1}`);
if (icon) {
icon.classList.remove("play_green", "play_red");
icon.classList.add(etat === 1 ? "play_green" : "play_red");
}
},
error: function(error) {
console.error(`❌ Erreur mise à jour Play ${infoId}:`, error);
}
});
}
jeedom.cmd.update[window.infoId] = function(_options) {
updateWidget(window.infoId);
};
window.playInfoIds.forEach((id, index) => {
jeedom.cmd.update[id] = function(_options) {
updatePlayIcon(id, index);
};
});
function refreshAllIcons() {
updateWidget(window.infoId);
window.playInfoIds.forEach((id, index) => {
updatePlayIcon(id, index);
});
}
refreshAllIcons();
</script>
<script>
jeedom.cmd.update['3508'] = function(_options){
jeedom.cmd.execute({ id: 3508, success: function(valeur_courante) {
document.querySelector('.widget-piscine .temp').textContent = valeur_courante;
}});
};
jeedom.cmd.update['3508']();
</script>
<script>
jeedom.cmd.update['3510'] = function(_options){
jeedom.cmd.execute({ id: 3510, success: function(valeur_courante) {
document.querySelector('.widget-piscine .orp').textContent = valeur_courante;
}});
};
jeedom.cmd.update['3510']();
</script>
<script>
jeedom.cmd.update['3509'] = function(_options){
jeedom.cmd.execute({ id: 3509, success: function(valeur_courante) {
document.querySelector('.widget-piscine .ph').textContent = valeur_courante;
}});
};
jeedom.cmd.update['3509']();
</script>
<script>
jeedom.cmd.update['3507'] = function(_options){
jeedom.cmd.execute({ id: 3507, success: function(valeur_courante) {
document.querySelector('.widget-piscine .tempsfiltration').textContent = valeur_courante;
}});
};
jeedom.cmd.update['3507']();
</script>
<script>
jeedom.cmd.update['3504'] = function(_options){
jeedom.cmd.execute({ id: 3504, success: function(valeur_courante) {
document.querySelector('.widget-piscine .mode').textContent = valeur_courante;
}});
};
jeedom.cmd.update['3504']();
</script>
</script>
<script>
jeedom.cmd.update['15335'] = function(_options){
jeedom.cmd.execute({ id: 15335, success: function(valeur_courante) {
document.querySelector('.widget-piscine .tempext').textContent = valeur_courante;
}});
};
jeedom.cmd.update['15335']();
</script>
</body>
</html>
bonjour,
je continue mes html mais j’ai un soucis de refresh au chargmeent de la page. j’ai fouillé le comunity, demander au IA mais rien ne fonctionne.
Ce widget est une inspiration compléte des widget CORE.
Voici le code qui fonctionne mais sans le refresh de l’état au chargement de la page
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Widget Binaire Jeedom</title>
<style>
.binarySwitch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.binarySwitch input {
opacity: 0;
width: 60px;
height: 34px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.binarySwitch span {
background-color: #ccc;
border-radius: 34px;
width: 60px;
height: 34px;
display: block;
transition: background-color 0.3s;
position: relative;
}
.binarySwitchHandle {
background-color: white;
width: 26px;
height: 26px;
border-radius: 50%;
position: absolute;
top: 4px;
left: 4px;
transition: transform 0.3s;
}
input:checked + .binarySwitch {
background-color: #4CAF50;
}
input:checked + .binarySwitch .binarySwitchHandle {
transform: translateX(26px);
}
.cmdName {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- ⬇️ DUPLIQUE CE BLOC POUR CHAQUE COMMANDE -->
<div class="cmd cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="17921" data-cmd_uid="uid_17921" data-eqLogic_id="1351" data-color="#FF5733" data-color_switch="#FFFFFF">
<div class="content-xs">
<span class="cmdName">Lumière Salon</span>
<label class="binarySwitch tooltips" title="Lumière Salon">
<input type="checkbox" class="binaryInput" />
<span class="binarySwitch">
<span class="binarySwitchHandle"></span>
</span>
</label>
</div>
<div class="timeCmd label label-default" data-type="info" data-cmd_id="17921"></div>
</div>
<div class="cmd cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="17919" data-cmd_uid="uid_17919" data-eqLogic_id="1351" data-color="#FF5733" data-color_switch="#FFFFFF">
<div class="content-xs">
<span class="cmdName">Lumière Salon</span>
<label class="binarySwitch tooltips" title="Lumière Salon">
<input type="checkbox" class="binaryInput" />
<span class="binarySwitch">
<span class="binarySwitchHandle"></span>
</span>
</label>
</div>
<div class="timeCmd label label-default" data-type="info" data-cmd_id="17919"></div>
</div>
<!-- ⬆️ DUPLIQUE AUTANT QUE TU VEUX -->
<script>
// Gère tous les widgets
document.querySelectorAll('.cmd[data-type="action"][data-subtype="other"]').forEach(function (widget) {
const checkbox = widget.querySelector('.binaryInput');
const cmdId = widget.getAttribute('data-cmd_id');
const cmdUid = widget.getAttribute('data-cmd_uid');
// Récupère les couleurs personnalisées depuis les attributs HTML
const color = widget.getAttribute('data-color');
const colorSwitch = widget.getAttribute('data-color_switch');
// Gère l'exécution de la commande lorsque l'utilisateur clique sur le bouton binaire
checkbox.addEventListener('change', function (e) {
jeedom.cmd.execute({ id: cmdId });
e.stopPropagation();
});
// Fonction de mise à jour de l'état du bouton binaire en fonction des informations retournées par Jeedom
jeedom.cmd.addUpdateFunction(cmdId, function(_options) {
const cmdElement = document.querySelector(`.cmd[data-cmd_uid="${cmdUid}"]`);
if (cmdElement) {
// Met à jour l'état du bouton selon la valeur retournée (1 ou 'on' = activé, sinon désactivé)
if (_options.display_value == 1 || _options.display_value === 'on') {
cmdElement.querySelector('input.binaryInput').checked = true;
} else {
cmdElement.querySelector('input.binaryInput').checked = false;
}
// Applique les couleurs personnalisées si définies
if (color) {
cmdElement.querySelector('span.binarySwitch').style.backgroundColor = color;
}
if (colorSwitch) {
cmdElement.querySelector('span.binarySwitchHandle').style.setProperty('background-color', colorSwitch, 'important');
}
}
});
// Rafraîchissement de l'état initial du bouton
jeedom.cmd.refreshValue([{cmd_id: cmdId}]);
});
</script>
</body>
</html>