Javascript in vis einfügen
-
Hallo zusammen
Ich bin am verzweifeln.
Ich versuche meine ersten schritte in der VIS.
also da ist grafana und LAMP ein kinderspiel im vergleich zu der VIS....
Egal was ich versuche, nichts funktioniert.wobei ich "NUR" einen einfachen jquery code einfügen möchte, wie bspw.
$('.vis-widget').click(function () { alert("hello world"); });oder
$(document).ready(function(){ alert("kaum zu glauben"); });Ich habe nun schon ein html widget erstellt und den code dort in die rubrik script eingefügt...... nichts passiert....
In der view unter scripte..... nichts passiert.....weiters würde ich einfach nur ein paar script mittels 0815 html tag
<script type="text/javascript" src=einfügen.... auch hier, NULL erfolg.
Ich habe es auch schon versucht ins html widget zu schreiben. ebenfalls kein erfolg.Ein iframe unter css mittels transform scale verkleinern-> null erfolg.
Dann dachte ich mir schon, vielleicht funktioniert es nicht sofort im editor und habe in die vorschau gewechselt in einem neuen tab. -> null erfolg...
Bitte um Hilfe
-
@jumbo125 Vielleicht hilft dir das weiter? Nur ein Beispiel.
https://mcuiobroker.gitbook.io/jarvis-infos/jarvis-v3/vis-grundriss-responsiv-rkccorian -
@jumbo125 said in Javascript in vis einfügen:
also beispiel 1:
in den javascript tab eingefügt, den runtime mode gestartet, funktioniert$(document).ready(function(){ alert("kaum zu glauben"); });das folgende in das html-property des html-widgets eingefügt, funktioniert
die tags sind notwendig, da es ja ein html-widget ist<script> $(document).ready(function(){ alert("kaum zu glauben"); }); </script>beispiel 2
hier gibt es eine besonderheit bei vis.
alle widgets existieren noch nicht, wenn das dokument ready geladen ist,
sondern werden erst im anschluss dynamisch generiert und eingefügt.
wenn der folgende code läuft, dann findet der selektor nix und der click handler wird auch nicht hinzugefügt.
da du hier eine css klasse adressierst und die alle widgets betrifft, wird es schwierig herauszufinden, wann alle generiert wurden. vis bietet hier kein event an, auf das man hören könnte.$('.vis-widget').click(function () { alert("hello world"); });jquery hat mal die funktion live angeboten
https://api.jquery.com/live/
diese wurde mittlerweile entfernt und es gibt den folgenden aufruf
$( document ).on( events, selector, data, handler );
dieser hat aber nie zufriedenstellen funktioniert, da das event auf document ebene abgefangen wird. wenn aber das event die document ebene nicht erreicht, dann kann es auch nicht reagieren.in diesem thread gibt es die funktion waitForElement
https://forum.iobroker.net/topic/48663/howto-skripte-im-vis-editor-mit-jquery?_=1681427063399
allerdings muss die für jedes einzelne element aufgerufen werden, da sie sobald der selektor einen treffer hat, durchgeführt und beendet wird, auch wenn danach evtl noch weitere widgets erzeugt werden. -
@oliverio said in Javascript in vis einfügen:
in den javascript tab
ah, super:
-
wo ist der javascript tab????????
ist das der "script" tab????? -
den runtime mode immer im neuen tab starten?
anbei ein bild wo ich es eingefügt habe
Wenn ich ein html element einfüge:
kann ich dann ein script via html tag <script src=".... laden????
das problem liegt darin, das ich ein script lade welches functionen beinhaltet. auf diese möchte ich dann zugreifen. zurzeit erscheinen diese als undefinied -
-
@jumbo125 said in Javascript in vis einfügen:
@oliverio said in Javascript in vis einfügen:
in den javascript tab
ah, super:
-
wo ist der javascript tab????????
ist das der "script" tab?????
Ja -
den runtime mode immer im neuen tab starten?
ja
anbei ein bild wo ich es eingefügt habe
Wenn ich ein html element einfüge:
kann ich dann ein script via html tag <script src=".... laden????
das problem liegt darin, das ich ein script lade welches functionen beinhaltet. auf diese möchte ich dann zugreifen. zurzeit erscheinen diese als undefinieddas habe ich bei vis noch nie gemacht.
erstelle mal eine javascript-datei und schreib da einfach nur den befehl
debugger;
rein
das lädst du dann im html-widget per script anweisung.
wenn du die debugger tools des browsers geöffnet hast, und du neu lädst, dann müsste das skript genau an dieser anweisung stoppen. wenn nicht dann
schau mal im internet nach dynamisch geladenes javascript nach.
irgendwo hab ich mal eine lösung gesehen, bei der man per javascript das scripttag am ende des dokumentenbaumes hinzufügt. -
-
@oliverio Danke dir
jetzt klappt es
-
@oliverio
lieber oliverio, bitte um verzeihung das ich nochmals störe.weißt du zufällig, wie ich mittels js einen datenpunkt erstelle oder zumindest werte in einen bestehenden datenpunkt schreibe und wieder auslese????
ich möchte buttons in einer view verwenden, welcheauch content und tags in anderen views beeinflusst. Da wäre es super, wenn ich daten in einen datenpunkte schreiben kann und wieder auslese.
also reinen js code, bspw:
jQuery(....).on("click....{
schreibe wert in datenpunkt
});
danke -
Schreiben von datenpunkten
Kann mit dem Befehlvis.setValue(datenpunkt,wert)durchgeführt werden.
Von vis aus einen datenpunkt erstellen würde ich nicht empfehlen.
Gehen tut das, aber man muss mit socket.Io direkt sprechen und die Parameter korrekt setzen.Das lesen von bereits abonnierten datenpunkten (d.h. Der datenpunkt wurde irgendwo bereits in einem Widget oder in einem binding eingetragen) geht so
wert=vis.states.attr(datenpunkt.val)Anstatt val kann beispielsweise auch .ts für den timestamp genommen werden.
Das lesen von nicht abonnierten datenpunkten geht auch ist aber auch aufwändiger. -
@oliverio said in Javascript in vis einfügen:
vis.setValue(datenpunkt,wert)
Super danke.
Gibt es eine Übersicht der vis options, vis klassen, vis methoden????in meiner view habe ich bis jetzt nur mal html und iframe widgets.
wie kann ich hier einen datenpunkt einbinden, weil derzeit funktioniert es nicht und ich denke das ist, weil ich noch keinen datenpunkt eiungebunden habe -
@jumbo125 sagte in Javascript in vis einfügen:
@oliverio said in Javascript in vis einfügen:
vis.setValue(datenpunkt,wert)
Super danke.
Gibt es eine Übersicht der vis options, vis klassen, vis methoden????Leider nur so
https://github.com/ioBroker/ioBroker.vis/blob/v1.4.16/www/js/vis.jsin meiner view habe ich bis jetzt nur mal html und iframe widgets.
wie kann ich hier einen datenpunkt einbinden, weil derzeit funktioniert es nicht und ich denke das ist, weil ich noch keinen datenpunkt eiungebunden habeich verstehe deine Frage nicht ganz.
Was funktioniert nicht? -
@oliverio
Danke das du dir die zeit nimmst.
danke für die github info..ich habe ins html widget nun:
<input type="hidden" value="{0_userdata.0.Datenpunkte.Status.Video.aktuellesVideo}"> damit ich es anspreche
Dort wird der richtige wert auch angezeigtim script steht bspw zum testen:
alert(vis.states.attr(0_userdata.0.Datenpunkte.Status.Video.aktuellesVideo.val));leider kommt hier undefinied
-
@Codierknecht
Sehr geehrte/r CodierknechtDa du dich so gut mit CPU Ressorucen usw. auskennst wollte ich Sie fragen, ob es Ihreransicht nach mehr ressourcen benötigt, mittels ajax eine mysql eingabe und ausgabe zu starten, als die daten direkt aus dem iobroker Datenobjekt zu holen.
Grund dafür(damit Sie nicht alles lesen müssen): ich schaffe es leider nicht mittels javascript einen datenpunkt zu lesen und neu zu beschreiben.alert(vis.states.attr(0_userdata.0.Datenpunkte.Status.Video.aktuellesVideo.val));ich kämpfe nun schon seit 2 stunden.
Die mysql abfrage habe ich ihn 10 minuten fertig
Vielen Dank
Lg Jumbo -
@jumbo125 sagte in Javascript in vis einfügen:
alert(vis.states.attr("0_userdata.0.Datenpunkte.Status.Video.aktuellesVideo.val"));Um einen Datenpunkt per Binding einzubinden reicht auch folgendes, wenn der input tag für dich nicht anderweitig noch wichtig wäre
<div style="display:none;"> {0_userdata.0.Datenpunkte.Status.Video.aktuellesVideo} </div>wichtig ist nur, das der Datenpunkt von vis registriert und abonniert wurde
ein komplettes funktionierendes beispiel für html widget wäre der folgende Inhalt für das Feld HTML
aktuellesVideo: {0_userdata.0.Datenpunkte.Status.Video.aktuellesVideo} <script> alert(vis.states.attr("0_userdata.0.Datenpunkte.Status.Video.aktuellesVideo.val")); </script>wenn im browser mit javascript fehler entstehen, dann kann man mit F12 in die browser-Konsole schauen, wie der genau heißt und wo er entstanden ist.
wenn du in deinem javascript code noch den befehl
debugger;
einträgst, dann stoppt der eingebaute debugger genau an dieser stelle bei der ausführung. danach kannst du dann schritt für schritt prüfen was vor sich geht.
hier ein kleines tutorial, welches für chrome und edge gilt. bei firefox aber ganz ähnlich aussieht. opera weiß ich nicht
https://developer.chrome.com/docs/devtools/javascript/ -
@oliverio danken Ihnen Oliver
Die dev console kannte ich bereits, da ich sehr häufig mit jquery/js programmiere... nur die VIS ist mir völlig neu.
Da muss ich mich erst einarbeiten
Außerdem dachte ich das .val als Methode oder o.ä. fungiert und nicht im String mit drinnen steht
Danke -
das ist eine vis eigenheit.
du kannst dir in der developer console einfach mal den inhalt von
vis.states
anschauen.
dazu einfach im sources-tab auf der rechten seite unter watch
vis.states eintragen.
dann siehst du die liste mit allen für das projekt abonnierten datenpunkten und allen sub-werten -
@oliverio
alles klar!ich habe gerade herausgefunden, dass das event
document.ready nicht auslöst wenn meine vis container geladen ist, sondern nur die vis container. es löst viel zu früh aus. daher werden alle meine widget ids nicht gefunden. kennt das problem jemand -
@jumbo125 Sollte in dem Beispiel stehen, dass ich Dir am Anfang als Link eingestellt habe.
-
@jumbo125 sagte in Javascript in vis einfügen:
kennt das problem jemand
ja
das html wird nicht fertig generiert vom server geladen sondern dynamisch generiert.
document.ready signalisiert nur, das das was vom server geladen wurde nun vollständig gerendert wurde.
das da dann programme loslaufen und nachträglich das noch verändert weiß der browser nicht.
leider besitzt vis ebenfalls keine events die ein irgendwelches fertig signalisiert (widget fertig, view fertig, etc.)siehe dieser thread
https://forum.iobroker.net/topic/48663/howto-skripte-im-vis-editor-mit-jquery?_=1682065519805
suche nach function waitForElement -
@oliverio
Danke dir! -
Danke euch vielmals!!!!!!
alles funktioniert. mit dem bockls und debugg habe ich mich schon auseinadergesetzt. Das ist ja wirklich einfach
was mich noch interessieren würde:
wie kann man den ins blockly js code einfügenbspw wird hier eine debug infos ausgegeben, wenn der Datenpunkt verändert wird.
Super wäre es, wenn ich einen jquery code statt nur einen Text eintragen kann.Sinn dahinter:
ich habe ein html element (Bild), welches je nach Datenpunkt das bild wechseln soll. Das würde ich nun gerne mit jquery angeben. hier mal das bl
ocklydanke euch!
