Widget Html avec Javascript

Bonjour,
Je voudrais faire évoluer le widget « bouton ON/OFF » avec un retour d’information différent de la sortie pilotée. Mon IPX800_V4 est complet et je dispose d’un IPX800_V3 et c’est l’une de ses sorties qui m’intéresse. J’ai commencer à créer un widget HTML. Dans ce widget, j’arrive à piloter la sortie sur l’IPX800_V4 mais je n’arrive pas à récupérer l’info de sortie sur l’IPX800_V3 pour animer en vert le voyant et le texte. N’étant pas un expert en JavaScript, je ne connais pas la syntaxe pour récupérer l’info depuis une source de données.
Voici ce que j’ai commencé à faire en java et ce que cela donne:


Dans mon code, le texte et le voyant s’anime puisque j’ai testé en utilisant la syntaxe d’une sortie de l’IPX800_V4 mais pour l’IPX800_V3, je sèche.

Quelqu’un aurai t’il une idée pour aller chercher une info dans un fichier de données?

bonjour,
sur la V4, il existe un widget spécifique pour piloter une sortie sur une V3.
Il faut donc utiliser « Bouton ON/OFF - IPX800 V3 ».
Bonne journée

Bonjour fgtoul,
C’est exact mais il n’est pas possible de piloter une sortie de l’IPX800_V4. Donc c’est pour ça que j’essaye de faire la même chose mais avec un pilotage sur la _V4 et un retour d’info sur la _V3. Aujourd’hui j’ai 1 sortie temporisé qui pilote un télérupteur sans retour d’info. Mon but c’est d’utiliser la _V3 pour avoir un retour d’info en utilisant le contact sec du télérupteur. La _V3 me servirait simplement de relais.

je ne comprends pas, alors je reformule ce que j’ai cru comprendre :

à partir d’un widget sur V4 :

  • vous souhaitez piloter un relais de la V3
  • vous souhaitez voir apparaître le retour d’état du relais de la V3

Si c’est bien ça, c’est le widget cité plus haut qui fait le job.

  • créez une source de données sur le dashboard. Cette datasource doit pointer vers l’adresse IP de la V3. renseignez le login si la V3 est protégée par mot de passe.
    image

  • créez un widget « Bouton ON/OFF - IPX800 V3 » sur le dashboard de la V4
    image

l’exemple ci-dessus est fait pour piloter le relais n°1 de l’ipx800 V3 et pour avoir l’état de ce même relais (indicateur).
Pour un autre relais, il faut remplacer « btn0 » et « Relay 1 » par les bons éléments.
Attention, « btn0 » correspond au relais 1, « btn1 » correspond au relais 2, et ainsi de suite.

Non ce n’est pas ça que je souhaite. Ce widget je l’utilise déjà et il fonctionne très bien. Ce que je souhaite c’est de piloter une sortie de la V4 et d’avoir un retour d’état de la V3

Pour vous aider, ci-dessous le code source du widget « Widget Bouton ON/OFF - IPX800_V3 »

       /* Widget Bouton ON/OFF - IPX800V3 */

        var buttonV3 = function(e) {
            var a = $('<div class="tw-value-wrapper tw-td" style="position:absolute;margin-top: 10px"></div>'),
                t = $('<input type="button" id="bouton2" class="bouton2" style="margin-left:55px;margin-top: 25px;width: 200px;"></input>'),
                i = e,
                o = !1;
            this.render = function(e) {
                $(e).empty(), $(e).append(a).append(t)
            }, this.getHeight = function() {
                return 1
            }, this.onSettingsChanged = function(e) {
                switch (i = e, null != document.getElementById("listeRelay") && (e.listeRelay = document.getElementById("listeRelay").value), t.attr("value", e.title), e.icon) {
                    case "aucun":
                        a.empty();
                        break;
                    default:
                        a.empty(), a.append("<span class='glyphicons " + e.icon + " x2'></span>")
                }
                _.isUndefined(e.port) && (e.port = 80), 1 != e.control ? _.isUndefined(e.user) ? t.attr("onClick", "newAJAXCommand('api.cgi?SetPushURL=" + e.ip + "&Port=" + e.port + "&Message=/leds.cgi?led=" + e.listeRelay + "EndMsg');") : t.attr("onClick", "newAJAXCommand('api.cgi?SetPushURL=" + e.ip + "&Port=" + e.port + "&Login=" + e.user + ":" + e.pass + "&Message=/leds.cgi?led=" + e.listeRelay + "EndMsg');") : t.attr("onClick", "")
            }, this.onCalculatedValueChanged = function(e, n) {
                "val1" == e && ((o = 0 != n && "up" != n) ? t.attr("value", i.on) : t.attr("value", i.off)), a.toggleClass("on", o), t.toggleClass("on", o)
            }, this.onDispose = function() {}, this.onSettingsChanged(e)
        };
        ihmIPX.loadWidgetPlugin({
            type_name: "button",
            display_name: "Bouton ON/OFF - IPX800V3",
            settings: [{
                name: "on",
                display_name: "Texte ON",
                type: "text"
            }, {
                name: "off",
                display_name: "Texte OFF",
                type: "text"
            }, {
                name: "ip",
                display_name: "Adresse IP",
                type: "text"
            }, {
                name: "port",
                display_name: "Port",
                type: "text"
            }, {
                name: "user",
                display_name: "Nom d'utilisateur",
                type: "text"
            }, {
                name: "pass",
                display_name: "Mot de passe",
                type: "text"
            }, {
                name: "icon",
                display_name: "Icone",
                type: "option2",
                default_value: "aucun",
                options: [{
                    name: " Feuille",
                    value: "glyphicons-leaf"
                }, {
                    name: " Feu",
                    value: "glyphicons-fire"
                }, {
                    name: " Neige",
                    value: "glyphicons-snowflake"
                }, {
                    name: " Ampoule",
                    value: "glyphicons-lightbulb"
                }, {
                    name: " Goutte",
                    value: "glyphicons-tint"
                }, {
                    name: " Soleil",
                    value: "glyphicons-sun"
                }, {
                    name: " Lampe",
                    value: "glyphicons-lamp"
                }, {
                    name: " Voiture",
                    value: "glyphicons-car"
                }, {
                    name: " Lune",
                    value: "glyphicons-moon"
                }, {
                    name: " Nuage",
                    value: "glyphicons-cloud"
                }, {
                    name: " Cadenas fermé",
                    value: "glyphicons-lock"
                }, {
                    name: " Cadenas ouvert",
                    value: "glyphicons-unlock"
                }, {
                    name: " Musique",
                    value: "glyphicons-music"
                }, {
                    name: " Coeur",
                    value: "glyphicons-heart"
                }, {
                    name: " Maison",
                    value: "glyphicons-home"
                }, {
                    name: " Clefs",
                    value: "glyphicons-keys"
                }, {
                    name: " Eclair",
                    value: "glyphicons-electricity"
                }, {
                    name: " Horloge",
                    value: "glyphicons-clock"
                }, {
                    name: " Calendrier",
                    value: "glyphicons-calendar"
                }, {
                    name: " ON/OFF",
                    value: "glyphicons-power"
                }, {
                    name: " Température",
                    value: "glyphicons-temperature"
                }, {
                    name: " Manche à air",
                    value: "pol-noun_614_cc"
                }, {
                    name: " HDD",
                    value: "glyphicons-hdd"
                }, {
                    name: " Batterie",
                    value: "glyphicons-battery-50"
                }, {
                    name: " Lettre",
                    value: "glyphicons-envelope"
                }, {
                    name: " Caméra",
                    value: "glyphicons-camera"
                }, {
                    name: " Camérade sécurité",
                    value: "glyphicons-security-camera"
                }, {
                    name: " Téléphone fixe",
                    value: "glyphicons-phone-alt"
                }, {
                    name: " Dollar",
                    value: "glyphicons-usd"
                }, {
                    name: " Volume",
                    value: "glyphicons-volume-up"
                }, {
                    name: " Prise",
                    value: "glyphicons-electrical-plug"
                }, {
                    name: " Wi-Fi",
                    value: "glyphicons-wifi"
                }, {
                    name: " Main up",
                    value: "glyphicons-hand-up"
                }, {
                    name: " Chargeur de station",
                    value: "glyphicons-charging-station"
                }, {
                    name: " Douche",
                    value: "glyphicons-shower"
                }, {
                    name: " Famille",
                    value: "glyphicons-family"
                }, {
                    name: " Chien",
                    value: "glyphicons-dog"
                }, {
                    name: " Feu à la maison",
                    value: "glyphicons-house-fire"
                }, {
                    name: " Bicyclette",
                    value: "glyphicons-bicycle"
                }, {
                    name: " TV",
                    value: "glyphicons-tv"
                }, {
                    name: " Imprimante",
                    value: "glyphicons-multifunction-printer"
                }, {
                    name: " Bitcoin",
                    value: "glyphicons-bitcoin"
                }, {
                    name: " PC Portable",
                    value: "glyphicons-laptop"
                }, {
                    name: " Parents",
                    value: "glyphicons-parents"
                }, {
                    name: " Piscine",
                    value: "glyphicons-pool"
                }, {
                    name: " Poissons",
                    value: "glyphicons-fishes"
                }, {
                    name: " Chat",
                    value: "glyphicons-cat"
                }, {
                    name: " Projecteur",
                    value: "glyphicons-projector"
                }, {
                    name: "Aucun",
                    value: "aucun"
                }]
            }, {
                name: "val1",
                display_name: "Indicateur",
                type: "calculated"
            }, {
                name: "listeRelay",
                display_name: "Relay",
                type: "option",
                options: [{
                    name: " Relay 1",
                    value: "0"
                }, {
                    name: " Relay 2",
                    value: "1"
                }, {
                    name: " Relay 3",
                    value: "2"
                }, {
                    name: " Relay 4",
                    value: "3"
                }, {
                    name: " Relay 5",
                    value: "4"
                }, {
                    name: " Relay 6",
                    value: "5"
                }, {
                    name: " Relay 7",
                    value: "6"
                }, {
                    name: " Relay 8",
                    value: "7"
                }, {
                    name: " Relay 9",
                    value: "8"
                }, {
                    name: " Relay 10",
                    value: "9"
                }, {
                    name: " Relay 11",
                    value: "10"
                }, {
                    name: " Relay 12",
                    value: "11"
                }, {
                    name: " Relay 13",
                    value: "12"
                }, {
                    name: " Relay 14",
                    value: "13"
                }, {
                    name: " Relay 15",
                    value: "14"
                }, {
                    name: " Relay 16",
                    value: "15"
                }, {
                    name: " Relay 17",
                    value: "16"
                }, {
                    name: " Relay 18",
                    value: "17"
                }, {
                    name: " Relay 19",
                    value: "18"
                }, {
                    name: " Relay 20",
                    value: "19"
                }, {
                    name: " Relay 21",
                    value: "20"
                }, {
                    name: " Relay 22",
                    value: "21"
                }, {
                    name: " Relay 23",
                    value: "22"
                }, {
                    name: " Relay 24",
                    value: "23"
                }, {
                    name: " Relay 25",
                    value: "24"
                }, {
                    name: " Relay 26",
                    value: "25"
                }, {
                    name: " Relay 27",
                    value: "26"
                }, {
                    name: " Relay 28",
                    value: "27"
                }, {
                    name: " Relay 29",
                    value: "28"
                }, {
                    name: " Relay 30",
                    value: "29"
                }, {
                    name: " Relay 31",
                    value: "30"
                }, {
                    name: " Relay 32",
                    value: "31"
                }]
            }, {
                name: "control",
                display_name: "Contrôle",
                type: "option",
                default_value: 0,
                options: [{
                    name: " OUI",
                    value: 0
                }, {
                    name: " NON",
                    value: 1
                }]
            }],
            newInstance: function(e, n) {
                n(new buttonV3(e))
            }
        }), ihmIPX.addStyle(".tw-value-wrapper.tw-td.on", "color:#3FB740;"), ihmIPX.addStyle(".bouton2.on", "color:#00FF00;");
        // Fin widget bouton ON/OFF - IPX800V3

Je pense qu’il faut analyser et modifier cette ligne pour remplacer le pilotage de la _V3 par le pilotage de la V4:

_.isUndefined(e.port) && (e.port = 80), 1 != e.control ? _.isUndefined(e.user) ? t.attr("onClick", "newAJAXCommand('api.cgi?SetPushURL=" + e.ip + "&Port=" + e.port + "&Message=/leds.cgi?led=" + e.listeRelay + "EndMsg');") : t.attr("onClick", "newAJAXCommand('api.cgi?SetPushURL=" + e.ip + "&Port=" + e.port + "&Login=" + e.user + ":" + e.pass + "&Message=/leds.cgi?led=" + e.listeRelay + "EndMsg');") : t.attr("onClick", "")

Mais là j'y comprend rien. Dans l'idée je cherche à simplifier en supprimant tout les menu déroulant et de faire quelque chose de beaucoup plus simple.

Bonjour,
Finalement je m’en suis sorti en passant par jeedom. C’est beaucoup plus open et il n’y a pas forcément besoin de faire du codage que je ne comprend pas.