nach Buttonklick soll iframe Inhalt sich ändern ?

leachim

Hallo zusammen.
Ich hänge gerade an folgendem Problem:

Ich habe ein VIS auf dem ein IFRAME eingebettet ist und 10 Buttons.
Jeder Button verweist auf eine html Seite

Beispiel:
Wenn ich Button 1 klicke [ESP_Easy01] soll in demiframe die passende html Seite des Buttons 1 gezeigt werden [z.B. html://192.168.178.157]
Wird Button2 geklicke [ESP_Easy02] soll sich der Inhalt der html Seite 2 [z.B. html://192.168.178.158] im Iframe gezeigt werden usw.

Ich möchte nicht einzelnen vis bauen, da insgesamt 35 ESP-easy html Seiten aufzurufen. Vis wird dann zu unübersichtlich.

Hat jemand eine idee?

habe es nut hinbekpmmen eine neuen Tab aufzumachen und die seite dort zu zeigen aber das möchte ich nicht.

liv-in-sky

@leachim

kann sowas mit binding anbieten

valuelist widget:

Image 6.png

iframe widget:

{val1:controll-own.0.AAATEST.TestZahl2;  val1=="0" ? "http://192.168.178.171/" : val1=="1" ? "http://192.168.178.161" :  val1=="2" ? "http://192.168.178.152/" : val1=="3" ? "http://192.168.178.98" : val1=="4" ? "http://192.168.178.78" : val1=="5" ? "http://192.168.178.122" : val1=="6" ? "http://192.168.178.123" : val1=="7" ? "http://192.168.178.99" : val1=="8" ? "http://192.168.178.139" : val1=="9" ? "http://192.168.178.152" : val1=="10" ? "http://192.168.178.160" : val1=="11" ? "http://192.168.178.170" : "http://192.168.178.78"}

Image 5.png

import widgets:

[{"tpl":"tplJquiSelectList","data":{"oid":"controll-own.0.AAATEST.TestZahl2","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"0;1;2;3;4;5;6;7;8;9;10;11;11","texts":"USBSwitch5;USBSwitch2;USBSwitch1;next1;next2;next3;next4;next5;next6;next7;next8;next9","height":"100","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"no_style":true},"style":{"left":"372px","top":"642px","width":"144px","height":"18px"},"widgetSet":"jqui"},{"tpl":"tplIFrame","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","seamless":"true","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"{val1:controll-own.0.AAATEST.TestZahl2;  val1==\"0\" ? \"http://192.168.178.171/\" : val1==\"1\" ? \"http://192.168.178.161\" :  val1==\"2\" ? \"http://192.168.178.152/\" : val1==\"3\" ? \"http://192.168.178.98\" : val1==\"4\" ? \"http://192.168.178.78\" : val1==\"5\" ? \"http://192.168.178.122\" : val1==\"6\" ? \"http://192.168.178.123\" : val1==\"7\" ? \"http://192.168.178.99\" : val1==\"8\" ? \"http://192.168.178.139\" : val1==\"9\" ? \"http://192.168.178.152\" : val1==\"10\" ? \"http://192.168.178.160\" : val1==\"11\" ? \"http://192.168.178.170\" : \"http://192.168.178.78\"}"},"style":{"left":"536px","top":"623px","width":"580px","height":"473px","color":"#28eb29","background-color":"#9cc1c4"},"widgetSet":"basic"}]

ich bin mir nicht sicher, ob es ein limit gibt - evtl sind 35 zuviele

leachim

@liv-in-sky :
Danke für deine Hilfe. habe es erstmal so gebaut möchte nun aber auch mit dem Klick auf die Link eine entsprechende Garfana / Float Anzeige mit laden.
Wie kann ich das bewerkstellen.
Das wird sicherlich auch über den erzeugten Datenpunkt gehen. Aber wie?
Ich hatte mir überlegt:
ist 0_userdata.0.Datenpunkt.Menue-binding.Esp_Menue = 7 dann öffne noch die Link garagana/Leistung-Gefriertruhe.....

Aber wie setzte ich das um? bin blutiger Anfänger.

hättest du/Ihr da auch eine Idee? oder ein Beispiel an dem ich mich weiter hangeln kann.

nun noch mein 2tes problem.

das iframe hat einen Scrool Balken weil die webseite zu groß ist. Ich möchte aber nur den Bereich gezeigt bekommen bis zum ON ( der Tasmota Webseite) und nicht mehr,
Ich möchte das iframe die Anzeige fest beschreiden damit ich nicht auf die Steuerbuttens von Tasmota kommen können

Danke schonmal im Voraus

liv-in-sky

@leachim

grafana habe ich nicht, aber bei flot ist das auch ein iframe, der eingebunden wird - letztlich könntest du im grafana- iframe-fenster genau die selbe config nutzen, nur mit anderen urls

evtl wäre es aber übersichtlicher, das ganze in ein script zu verwandeln - dort könnte das ganze übersichtlicher gestaltet werden - flot url sind ja ewig lang. werd mich dazu nochmals melden

zum zweiten - es gibt eine möglchkeit, einem iframe eine größe mitzugeben - damit sollte man den scrollbalken wegbekommen - ich denke dann müßte man ein html widget verwenden und dort die parameter mitgeben - das wäre über ein script auch leichter zu definieren. das bedeutet aber, du hast nur gleiche sonoffs - also nur sonoffs pow, damit die größe (höhe) immer gleich ist. andere sonoffs haben andere werte und daher ist der on button auch an einer anderen stelle.

ps: die anzeige der sonoffs habe ich übrigens anders gelöst: https://forum.iobroker.net/topic/28953/sonoff-geräte-als-html-tabelle-vis-iqontrol

Image 1.png

liv-in-sky

@leachim

hier siehst du das problem mit verschiedenen größen der sonoff anzeige

liv-in-sky

@leachim

hab ein kleines script definiert und 2 zusätzliche datenpunkte

schaut jetzt so aus

widget:

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"{controll-own.0.AAATEST.TestUrl}"},"style":{"left":"52px","top":"59px","width":"936px","height":"768px","background-color":"#73a2b5","transform":""},"widgetSet":"basic"},{"tpl":"tplJquiSelectList","data":{"oid":"controll-own.0.AAATEST.TestZahl2","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"0;1;2;3;4;5;6;7;8;9;10;11;11;12;13;14;15;16;17;18;19;20;21;22","texts":"SonoffPow4 TV Bereich;SonoffPow1 Infrarot Bad;SonoffPow2 Proxmox;WLEDRund;ESPEasy1;next3;next4;next5;next6;next7;next8;next9;USBSwitch5;USBSwitch2;USBSwitch1;next1;next2;next3;next4;next5;next6;next7;next8","height":"357","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"no_style":false},"style":{"left":"225px","top":"23px","width":"307px","height":"28px","z-index":"10"},"widgetSet":"jqui"},{"tpl":"tplIFrame","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","seamless":"true","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"{controll-own.0.AAATEST.TestGraph}"},"style":{"left":"997px","top":"643px","width":"470px","height":"176px"},"widgetSet":"basic"}]

script:


let device= [{"num":0,"name":"SonoffPow4 TV Bereich","url":"http://192.168.178.98/","hoehe":"1000","breite":"1000","graph":"http://192.168.178.59:8082/flot/index.html?l%5B0%5D%5Bid%5D=javascript.0.GETPROCESS.MemoryFree&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=minmax&l%5B0%5D%5Bcolor%5D=%23EE5757&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5Bmax%5D=3000&l%5B0%5D%5Bthickness%5D=3&l%5B0%5D%5Bshadowsize%5D=3&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bdashes%5D=false&l%5B0%5D%5BdashLength%5D=10&l%5B0%5D%5BspaceLength%5D=10&l%5B0%5D%5Byticks%5D=20&l%5B0%5D%5Bfill%5D=0&l%5B1%5D%5Bid%5D=javascript.0.GETPROCESS.MemoryUsed&l%5B1%5D%5Binstance%5D=sql.0&l%5B1%5D%5Boffset%5D=0&l%5B1%5D%5Baggregate%5D=minmax&l%5B1%5D%5Bcolor%5D=%230000FF&l%5B1%5D%5Bmin%5D=0&l%5B1%5D%5Bmax%5D=3000&l%5B1%5D%5Bthickness%5D=3&l%5B1%5D%5Bshadowsize%5D=3&l%5B1%5D%5Byaxe%5D=off&l%5B1%5D%5Bxaxe%5D=off&l%5B1%5D%5BafterComma%5D=0&l%5B1%5D%5Bdashes%5D=false&l%5B1%5D%5BdashLength%5D=10&l%5B1%5D%5BspaceLength%5D=10&l%5B2%5D%5Bid%5D=javascript.0.GETPROCESS.MemoryAvail&l%5B2%5D%5Boffset%5D=0&l%5B2%5D%5Baggregate%5D=minmax&l%5B2%5D%5Bcolor%5D=%2383c1e5&l%5B2%5D%5Bmin%5D=0&l%5B2%5D%5Bmax%5D=3000&l%5B2%5D%5Bthickness%5D=3&l%5B2%5D%5Bshadowsize%5D=3&l%5B2%5D%5Bxaxe%5D=off&l%5B2%5D%5Byaxe%5D=off&l%5B2%5D%5Binstance%5D=sql.0&l%5B3%5D%5Bid%5D=javascript.0.GETPROCESS.SwapSize&l%5B3%5D%5Binstance%5D=sql.0&l%5B3%5D%5Boffset%5D=0&l%5B3%5D%5Baggregate%5D=minmax&l%5B3%5D%5Bcolor%5D=%23FFFF00&l%5B3%5D%5Bmin%5D=0&l%5B3%5D%5Bmax%5D=3000&l%5B3%5D%5Bthickness%5D=3&l%5B3%5D%5Bshadowsize%5D=3&l%5B3%5D%5Bxaxe%5D=off&l%5B3%5D%5Byaxe%5D=off&timeType=relative&relativeEnd=now&range=120&aggregateType=count&aggregateSpan=300&hoverDetail=true&useComma=false&zoom=false&noedit=true&animation=0&barColor=%23fefefe&legBg=%23fefefe&live=30&window_bg=%23000000&bg=5&timeFormat=%25H%3A%25M&noBorder=noborder&x_labels_color=%23d7cf23&y_labels_color=%23d7cf23&start=2019-02-22&start_time=06%3A00&end_time=01%3A30&titlePos=top%3A50%3Bleft%3A65&legend=nw&titleColor=%2300efbf&barFontColor=200&legColumns=5&legBgOpacity=%23FF0000&barLabels=bottom&barWidth=15&barFontSize=15&title=MEMORY&titleSize=14"},
            {"num":1,"name":"SonoffPow1 Infrarot Bad","url":"http://192.168.178.78/","hoehe":"1000","breite":"1000","graph":"http://192.168.178.59:8082/flot/index.html?l%5B0%5D%5Bid%5D=javascript.0.GETPROCESS.CPUIdleALL&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=average&l%5B0%5D%5Bcolor%5D=%230efbf6&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=3&l%5B0%5D%5Byaxe%5D=rightColor&l%5B0%5D%5Bfill%5D=0&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bdashes%5D=false&l%5B0%5D%5BdashLength%5D=10&l%5B0%5D%5BspaceLength%5D=10&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5Bmax%5D=100&l%5B0%5D%5BchartType%5D=line&l%5B0%5D%5BignoreNull%5D=false&l%5B1%5D%5Bid%5D=javascript.0.GETPROCESS.CPUbyProxmox&l%5B1%5D%5Boffset%5D=0&l%5B1%5D%5Baggregate%5D=average&l%5B1%5D%5Bcolor%5D=%234f8b94&l%5B1%5D%5Bmin%5D=0&l%5B1%5D%5Bmax%5D=100&l%5B1%5D%5Bthickness%5D=1&l%5B1%5D%5Bshadowsize%5D=1&l%5B1%5D%5Byaxe%5D=off&l%5B1%5D%5BafterComma%5D=0&l%5B1%5D%5Bdashes%5D=false&l%5B1%5D%5BdashLength%5D=10&l%5B1%5D%5BspaceLength%5D=10&l%5B1%5D%5ByOffset%5D=0&l%5B1%5D%5Bxaxe%5D=off&l%5B1%5D%5Binstance%5D=sql.0&l%5B1%5D%5BignoreNull%5D=false&timeType=relative&relativeEnd=1minute&range=120&aggregateType=step&hoverDetail=true&useComma=false&zoom=true&noedit=false&animation=300&barColor=%23fefefe&barLabels=topover&barWidth=15&legBg=%23fefefe&window_bg=%23000000&bg=5&timeFormat=%25H%3A%25M&noBorder=noborder&x_labels_color=%23d7cf23&y_labels_color=%23d7cf23&start=2019-02-22&start_time=06%3A00&end_time=01%3A30&barFontSize=15&titlePos=top%3A35%3Bleft%3A65&legend=nw&titleColor=%230efbf6&barFontColor=200&title=CPU+Utilization&legColumns=3&legBgOpacity=%23FF0000&titleSize=12&aggregateSpan=300"},
            {"num":2,"name":"SonoffPow2 Proxmox","url":"http://192.168.178.122/","hoehe":"1000","breite":"1000","graph":""}, 
            {"num":3,"name":"WLEDRund","url":"http://192.168.178.129/","hoehe":"1000","breite":"1000","graph":""},
            {"num":4,"name":"ESPEasy1","url":"http://192.168.178.163/","hoehe":"1000","breite":"1440","graph":""}
            

           ]       

           
                  

on({id: "controll-own.0.AAATEST.TestZahl2", change: "any"},  function (obj) {
   let mynum=getState("controll-own.0.AAATEST.TestZahl2").val

setState("controll-own.0.AAATEST.TestUrl",`<iframe src="${device[mynum].url}" height="${device[mynum].hoehe}" width="${device[mynum].breite}" ></iframe>`)
setState("controll-own.0.AAATEST.TestGraph",device[mynum].graph)

});

leachim

@liv-in-sky :
Vielen Dank für dein Script.

Irgendwie habe ich gerade einen Hänger, und versuche es für mich zu verstehen:

Die Datenpunkte lauten:
TestUrl: - URL die aufgerufen wird
TestGraph: - URL zum Grafen
TestZahl2: - ist für die Verknüpfung von Menüeintrag zu URL

diese habe ich auch angelegt

aber wo kommt nun das Script hin.
ich gehe davon aus unter Scripte Java =?? und ist das dann egal welcher Name es ist da es im Hintergrund immer läuft?

Ich hoffe das ich das so richtig verstanden habe.

Werde es am Freitag ausprobieren.
Bin halt blutiger Anfänger und versuche mich an Beispielen entlang zu hangeln damit ich es verstehe.

DANKE nochmals im Voraus und entschuldige meine Anfängerfragen.

Gruß
leachim

liv-in-sky

@leachim ja so simple - einfach ein neues script (java) anlegen - der name ist egal - reinkopieren - und aktivieren

du kannst die datenpunkte auch unter userdata_0 anlegen und im script angleichen - controll-own ist von mir und schon früher angelegt - eigerne datenpunkte sollten unter 0_userdata.0. sein

z.b.

0_userdata.0.iframeAnzeige.TestGraph

und diesen dann im script austauschen

Community Forum

NEWS

nach Buttonklick soll iframe Inhalt sich ändern ?

Support us

495

32.5k

81.7k

1.3m