Modifier la Source d'une image <img src=""> en fonction d'un "état" retourné par un virtuel

Bonjour à tous,

J’en suis à mes débuts sur Jeedom et j’aimerai savoir/apprendre comment faire pour modifier la src d’une image en HTML en fonction d’un retour d’état de capteur.

Contexte :

  • J’ai créé un design sur lequel j’ai mis le plan de mon RDC
  • J’ai créé les images des portes et fenêtres et les différents états qu’ils peuvent avoir : Ouvert/Fermé
  • Ces images sont insérées sur le design par « Ajouter une image/caméra » => en HTML pour l’instant et L’idée est que l’image change en fonction de mes retours de capteur d’ouverture.

Où j’en suis :

J’ai réussi grâce à un autre poste :
Image sur design
à créer mon virtuel et récupérer mes états, mais pour ce qui est des images, ça me change tout le background et non pas mon image ajoutée sur mon design…

Comment pourrai-je adapter ça à une ?

Résultat que j’aimerai :

  • Avoir une X image(s)/ouverture en fonction du nombre de capteur d’ouverture que je mets (4 images pour ma baie car 2 parties, 2 images pour ma porte d’entrée, etc.)
  • Que ces images se mettent à jour seules en fonction de l’état des capteurs
  • REMARQUE : je parle bien d’image et non pas de background

Exemple avec ma baie vitrée et ses 4 états possibles (donc 4 images)

  • 0=tout fermé (photo ci-dessous en vert fluo)
  • 1=fermé à droite & ouvert à gauche
  • 10= fermé à G et ouvert à D,
  • 11= ouvert à G et à D

Auriez-vous des pistes, je ne dois pas être bien loin de la solution (c’est du codage, mais n’étant pas spécialement bon dans ce domaine, je poste ici ^^).

Bonne soirée à tous et bon weekend de Pâques !

Marc

Re à tous,

Euréka !J’ai trouvé !!! :smiley:

Ci-dessous pour info à ajouter dans « Design > Ajouter texte/html » :

<div class="cmd Change_DoorWindowsView">
    <span class="View"></span>    
    <script>
        var IdVirtuel=224;       
        jeedom.cmd.update[IdVirtuel] = function(_options){
            jeedom.cmd.execute({
                id: IdVirtuel,
                success:  function(valeur_courante) {
                    $(".View").empty().text(valeur_courante);
                    if (valeur_courante == 0){
                        $(".View").empty().append('<img src="data/img/Entrances/DW_CC.png" height=253px width=14px>');
                    }
                    else if (valeur_courante == 1){
                        $(".View").empty().append('<img src="data/img/Entrances/DW_OC.png" height=253px width=14px>');
                    }
                    else if (valeur_courante == 10){
                        $(".View").empty().append('<img src="data/img/Entrances/DW_CO.png" height=253px width=14px>');
                    }
                    else if (valeur_courante == 11){
                        $(".View").empty().append('<img src="data/img/Entrances/DW_OO.png" height=253px width=14px>');
                    }
                }
            })
        };    
        jeedom.cmd.update[IdVirtuel]();
    </script>
</div>

Bonne soirée à tous :slight_smile:

Marc

1 « J'aime »

Merci pour ton partage

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.