Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Tuto - widget sonde

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Tuto - widget sonde

Message par Sshafi » 21 nov. 2016, 15:06

Tutoriel de création d'un widget avec pour exemple la copie d'écran suivant :

[img]SondesOregon.PNG[/img]

Dans mon cas de figure, mes sondes Oregon remontent par le biais de périphériques virtuels, mais cela fonctionne une sonde qui remonte directement dans jeedom.


Configuration du périphérique

Configuration d'une sonde physique


Je ne suis en mesure de faire des copies d'écran de de documenter cette partie, merci pour votre contribution.

Configuration d'une sonde virtuelle

Ajouter une sonde en passant par Plugin => Programation => Virtuel

Et cliquer sur [img]Ajouter-Equipement.png[/img]

La configuration de la sonde : [img]SondeVirtuel.png[/img]


Association des widgets aux informations de la sonde

Widget pour la température et l’hydrométrie

Création d'un nouveau Widget

Aller dans Plugins => Programmation => Widget
Nous allons associer aux informations de température et d'hydrométrie le widget "info.numeric.tile" légèrement modifié pour l’alignement.
Créer un nouveau widget comme ceci :
[img]Widget-temp-hydro.png[/img]

Contenu du code :

Code : Tout sélectionner

<div style="min-width:90px;min-height:100px;" class="cmd #history# tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <center>
        <span style="font-weight: bold;font-size : 12px;">#name#</span><br/>
        <br/>
        <span style="font-size: 1.2em;font-weight:bold;">#state# #unite#</span><br/>
      <span style="#displayHistory#;" class="statistiques">
            <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
        </span>
    </center>
</div>
Association au widget

Dans le widget nouvellement créé, cliquer en haut à droite sur [img]Appliquer-sur-les-commandes.png[/img]
Sélectionner les objets/équipements/commandes auquel vous désirez associer le widget : [img]Appliquer-widget.png[/img]
Ne pas oublier de [img]Valider.png[/img]

Widget pour la batterie

Création d'un nouveau Widget

Aller dans Plugins => Programmation => Widget
Créer un nouveau widget "info.binary.Batterie" comme ceci :
[img]Widget-bat.png[/img]

Contenu du code :

Code : Tout sélectionner

</i><div style="width:90px;min-height:30px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <center>
        <span style="font-weight: bold;font-size : 12px;">#name#</span><br/>
        <span style="font-size: 4em;" id="iconCmd#id#"></span>
    </center>
    <script>
        if ('#state#' == '1' || '#state#' == 1) {
            $('#iconCmd#id#').append('<i class="icon jeedom-batterie3"></i>');
        }
        if ('#state#' == '0' || '#state#' == 0) {
            $('#iconCmd#id#').append('<i class="icon jeedom-batterie1"></i>');
        }
    </script>
</div>
Association au widget

Dans le widget nouvellement créé, cliquer en haut à droite sur [img]Appliquer-sur-les-commandes.png[/img]
Sélectionner les objets/équipements/commandes auquel vous désirez associer le widget : [img]Appliquer-sur-les-commandes-bat.png[/img]
Ne pas oublier de [img]Valider.png[/img]

Widget pour le niveau radio

Utilisation du widget "Sky-progressBar"

Aller dans Plugins => Programmation => Widget Cliquer en haut à gauche sur Market.png Et installer le widget "dashboard.info.numeric.Sky-progressBar"
[img]Sky-progressBar.png[/img]

Association au widget

Pour que le widget fonctionne correctement, il faut bien définir les valeurs min et max de l'information batterie de votre sonde. Dans mon cas min = 0 et max = 5.
Dans le widget nouvellement créé, cliquer en haut à droite sur [img]Appliquer-sur-les-commandes.png[/img]
Selectionner les objets/équipements/commandes auquel vous désirez associer le widget : [img]Appliquer-sur-les-commandes-radio.png[/img]

Ne pas oublier de [img]Valider.png[/img]
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Verrouillé

Revenir vers « Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités