Weihnachtsangebot 2025! 🎄

[Wszene]

Hallo Zusammen,
In der gibt es ja den Reiter Scripte
Wie kann ich da das nutzen um z.B. so etwas in die VIS als HTML Widget einzufügen
https://codepen.io/ivanodintsov/pen/KVgwRG

Danke Im Voraus
Gruß
Marcel

[liv-in-sky]

@wszene

ich denke, dass wirst du nicht einbinden können - die gehen davon aus, dass du die ganze homepage ändern kannst - das geht aber in der vis nicht - das müßte auch ein div umgeschrieben werden - wird schwierig - bzw. muss man können

[crunchip]

@wszene schau mal hier

[OliverIO]

@wszene
Hast du es einmal ausprobiert?
Click in codepen über den einzelnen Fenstern auf das Pfeil nach unten Icon und wähle jeweils die compiled Darstellung.
Html kopierst du in ein html Widget
JavaScript in den JavaScript Reiter
Css in den css Reiter.

Der Schnee wird in einem canvas Element gemalt.
Wenn du das allerdings über den ganzen Bildschirm haben möchtest musst du ein anderes Skript wählen.

[liv-in-sky]

@wszene zur not - ein animiertes gif googeln

[BananaJoe]

@liv-in-sky sagte in javascript in VIS einbinden:

@wszene zur not - ein animiertes gif googeln

Oder erstellen :-)
https://www.screentogif.com/ wie es hier im Forum ja auch für Anleitungen etc. empfohlen wurde.
Bei Schneeflogen sollten ja 256 Farben reichen.

Theoretisch sind auch transparente Hintergründe möglich.

[Wszene]

@oliverio sagte in javascript in VIS einbinden:

@wszene
Hast du es einmal ausprobiert?
Click in codepen über den einzelnen Fenstern auf das Pfeil nach unten Icon und wähle jeweils die compiled Darstellung.
Html kopierst du in ein html Widget
JavaScript in den JavaScript Reiter
Css in den css Reiter.

Der Schnee wird in einem canvas Element gemalt.
Wenn du das allerdings über den ganzen Bildschirm haben möchtest musst du ein anderes Skript wählen.

Genau so habe ich es ausprobiert
Aber leider ohne Erfolg

[OliverIO]

@wszene
ok, dann liegt es daran, wie die widgets von vis erzeugt werden.
dann wenn das skript losläuft gibt es das canvas element noch nicht.

es gibt da was was man einfügen kann, damit solange gewartet wird bis das element da ist. allerdings habe ich festgestellt, das das skirpt noch eine weitere biliothek (lodash, alle funktionen die mit _. beginnen) verwendet, welche nicht in vis enthalten ist.
das alles anzupassen lohnt sich nicht. such bitte ein anderes skript.

[Enrico Fischer]

@wszene Ich würde es mit iframe über die ganze seite machen und auf z-index 1 legen.

[Wszene]

@enrico-fischer sagte in javascript in VIS einbinden:

@wszene Ich würde es mit iframe über die ganze seite machen und auf z-index 1 legen.

Das ist eine sehr gute Idee
Da habe ich nur eine Frage
Kann ich die HTML Datei auch local ablegen und dann in die VIS einbauen?

[BananaJoe]

@wszene du könntest das html in einen Datenpunkt schreiben und im Widget auf diesen verweisen. { }
Datei müsste auch gehen, der Link wäre etwa so:

http://1.2.3.4:8082/vis.0/main/html/meinedatei.html

aber die muss dann meine ich per VIS-Editor hochgeladen worden sein damit das funktioniert (ist zumindest bei Bildern so)

[Wszene]

@bananajoe sagte in javascript in VIS einbinden:

@wszene du könntest das html in einen Datenpunkt schreiben und im Widget auf diesen verweisen. { }
Datei müsste auch gehen, der Link wäre etwa so:

http://1.2.3.4:8082/vis.0/main/html/meinedatei.html

aber die muss dann meine ich per VIS-Editor hochgeladen worden sein damit das funktioniert (ist zumindest bei Bildern so)

Das klingt nach einer guten Idee
Das werde ich heute Abend mal probieren

[Enrico Fischer]

@wszene said in javascript in VIS einbinden:

@enrico-fischer sagte in javascript in VIS einbinden:

@wszene Ich würde es mit iframe über die ganze seite machen und auf z-index 1 legen.

Das ist eine sehr gute Idee
Da habe ich nur eine Frage
Kann ich die HTML Datei auch local ablegen und dann in die VIS einbauen?

Du musst den ganzen inhalt aus dem dist ordner in der Zip datei in deinen Vis Ordner im Iobroker laden.Ich hab dir mal ein Video angehängt wie ich das gemacht habe.

Video

[BananaJoe]

@enrico-fischer sagte in javascript in VIS einbinden:

Du musst den ganzen inhalt aus dem dist ordner in der Zip datei in deinen Vis Ordner im Iobroker laden.Ich hab dir mal ein Video angehängt wie ich das gemacht habe.

Ich bin enttäuscht ... im Video sehe ich was du gemacht hast (und es sieht cool aus) aber nicht wie

[Wszene]

@bananajoe sagte in javascript in VIS einbinden:

@enrico-fischer sagte in javascript in VIS einbinden:

Du musst den ganzen inhalt aus dem dist ordner in der Zip datei in deinen Vis Ordner im Iobroker laden.Ich hab dir mal ein Video angehängt wie ich das gemacht habe.

Ich bin enttäuscht ... im Video sehe ich was du gemacht hast (und es sieht cool aus) aber nicht wie

@Enrico-Fischer
Kannst du evtl. noch ein Video machen wie du die Dateien wohin läds
Das wäre sehr hilfreich

Danke

[Glasfaser]

@wszene

über den Dateimanager in VIS

.

und dann so wie @BananaJoe beschrieben :
.
https://forum.iobroker.net/topic/51687/javascript-in-vis-einbinden/12

[Meistertr]

@wszene schau mal hier :

https://www.youtube.com/watch?v=SJ3-2LamXkM&t=42s

hab da vor ein paar Jahren auch mal ein video zu gemacht