Demande d'aide pour un widget personnalisé

[vedrine]

Bonjour à tous,
La sortie de la 4.4 est l’occasion pour moi de réfléchir à aléger mon travail du côté des templates de mes plugins.
Pour le plugin elmtouch c’est simple, une utilisation de la fonction templateWidget et quelques petits changements car pour le moment la fonction normalizeName ne marcherait pas pour certaines commandes et c’est réglé.
Mais pour le plugin surepetcare je sèche : pour le moment j’embarque un template d’eqLogic « pet » pour les animaux (et une fonction toHtml) à cause de la partie du widget qui affiche une image de l’animal et en superposition une petite icône qui indique si l’animal est à l’intérieur ou à l’extérieur. De plus en cliquant on peut changer la position (intérieur, extérieur)

L’url de la photo de l’animal (cette photo est sur le serveur SurepetCare) est dans la configuration de l’eqLogic, la position est donnée par une commande info binaire (0 = Extérieur, 1 = Intérieur) et le changement de position se fait par une commande Action Liste (0|Extérieur;1|Intérieur) ce qui n’est peut être par très Jeedom, j’aurais sans doute mieux fait de créer 3 commandes Action Défaut pour passer à l’intérieur, passer à l’extérieur et toggler la position mais bon on peut changer çà si çà aide.
Mon but serait en premier de me passer d’un template d’eqLogic « pet » pour avoir au maximum seulement un template personnalisé à appliquer a certaines commandes et idéalement seulement une fonction templateWidget et utiliser les widgets du core.
Le code est là

GitHub - jmvedrine/jeedom-surepetcare: Jeedom plugin for Sure Petcare...

Si vous voyez comment je peux faire, merci beaucoup pour votre aide.

[vedrine]

Voila ce que j’ai fait :
pour le changement de position j’ai conservé la commande action liste mais je l’ai marquée comme obsolète et destinée à être supprimée dans une future version
J’ai créé 3 commandes action autre « Intérieur On », « Intérieur Off » et « Inverser la position » et pour les 2 commandes On et Off via la fonction templateWidget je leur ai attribué un widget core tmplimg avec mes 2 images maison et nuage.
Pour çà la solution me semble parfaite, je n’ai plus à me soucier de l’adaptation aux versions de Jeedom et çà marche bien en 4.3 et en 4.4.
Pour l’affichage de l’image de l’animal je suis moins satisfait, la seule solution que j’ai trouvé c’est de créer une commande info string que je met à jour avec le tag HTML complet img et d’utiliser le widget core cmd.info.string.line. Mais je me demande si je ne commet pas une erreur en utilisant ce widget plutôt conçu je pense pour afficher une chaine, pour afficher un tag HTML. Qu’en pensent les pros ? Voyez vous une meilleure solution ?

[Mips]

Salut,

@vedrine

avec le tag HTML complet img et d’utiliser le widget core cmd.info.string.line. Mais je me demande si je ne commet pas une erreur en utilisant ce widget plutôt conçu je pense pour afficher une chaine, pour afficher un tag HTML.

oui je pense, pour moi c’est un contournement de « l’esprit » du widget voulu et donc c’est voué à casser un jour
Il existe un widget « button image » qui permet d’ouvrir une modale et afficher l’image mais il n’existe pas de widget « image », ca mériterait p-e d’être dispo dans le core, si un membre de l’équipe passe par ici et veut donner son avis sur le principe c’est bienvenu (sans engament ni délai, juste sur l’idée)

si j’étais toi, c’est ce que je ferais (et c’est d’ailleurs ce que j’ai fait pour un de mes plugins): juste créer un widget et l’assigner à ta commande, sans gérer toute la tuile:
ca permet de limiter au max les interventions en cas de changement du core

et p-e que si ca convient on pourra ajouter ca en standard dans le core

voila le code +/- du mien
y a rien de très fancy et aucun paramétrage possible (comme la taille) mais c’est fonctionnel

<div class="cmd cmd-widget" data-type="info" data-subtype="string" data-template="default" data-cmd_id="#id#"
    data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <div class="content">
        <img src="" style="height:200px;width:200px;" />
    </div>
    <div class="timeCmd label label-default #history#" data-type="info"></div>
    <template>
        <div>time : duration|date ({{Affiche durée ou date de la valeur}})</div>
    </template>
    <script>
        jeedom.cmd.addUpdateFunction('#id#', function (_options) {
            if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
                cmd.querySelector('.content').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
                if ('#time#' == 'duration' || '#time#' == 'date') {
                    jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#')
                }
                if (_options.value != '') {
                    cmd.querySelector('.content img').src = './plugins/MQTTDiscovery/core/php/MQTTDiscovery.img.proxy.php?img=' + btoa(_options.value)
                } else {
                    cmd.querySelector('.content img').src = 'core/img/no_image.gif'
                }

            }
        })

        jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#' }])
    </script>
</div>

selon ton cas, je ne suis pas certain de comment est sauvé l’image exactement:

• soit tu as une commande qui donne le path vers l’image que tu sauves dans le dossier data de ton plugin par exemple
• soit tu as une commande qui retourne l’image encodé en base64 et tu peux directement mettre le base64 dans le dom
• soit tu as un fichier php (un peu comme mon exemple) qui renvoi la data suivant l’idLogic reçu par exemple

tu devras adapter la ligne ici

cmd.querySelector('.content img').src = './plugins/MQTTDiscovery/core/php/MQTTDiscovery.img.proxy.php?img=' + btoa(_options.value)

ceci dit je me demande si on peut avoir deux plugins qui déclare le même nom de widget (ex:« image »), à un moment il y avait un bug et seul un des deux était affiché dans la liste il me semble
car moi je l’ai bêtement appelé cmd.info.string.image.html; faudrait que je test ça

[vedrine]

Merci @Mips j’apprécie vraiment ton aide.

@Mips

oui je pense, pour moi c’est un contournement de « l’esprit » du widget voulu et donc c’est voué à casser un jour

C’est ce que je pensais mais je n’étais pas sûr.
Un widget image dans le core serait vraiment top. Je laisse l’équipe répondre.
Je pensais que j’affichais l’image depuis le site de surepetcare mais j’ai vérifié mon code et en fait je la copie dans data/pet avec un nom qui est stocké dans la configuration de l’eqLogic pet lors de la synchro.
Donc c’est facile d’adapter ton widget (merci pour le code) et je vais par sécurité lui donner un nom différent.
comme tu dis un seul widget cmd ce sera plus facile à gérer d’autant que je suis parvenu à supprimer tous mes widget custom du plugin elmtouch donc il ne me restera plus que celui là.
Merci encore.