Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. javascript in VIS einbinden

NEWS

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    10
    1
    322

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.5k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.5k

javascript in VIS einbinden

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
17 Beiträge 8 Kommentatoren 1.4k Aufrufe 8 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • WszeneW 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-skyL Offline
    liv-in-skyL Offline
    liv-in-sky
    schrieb am zuletzt editiert von liv-in-sky
    #2

    @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

    nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

    1 Antwort Letzte Antwort
    0
    • WszeneW 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

      crunchipC Abwesend
      crunchipC Abwesend
      crunchip
      Forum Testing Most Active
      schrieb am zuletzt editiert von crunchip
      #3

      @wszene schau mal hier

      umgestiegen von Proxmox auf Unraid

      1 Antwort Letzte Antwort
      0
      • WszeneW 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

        OliverIOO Offline
        OliverIOO Offline
        OliverIO
        schrieb am zuletzt editiert von OliverIO
        #4

        @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.

        Meine Adapter und Widgets
        TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
        Links im Profil

        WszeneW 1 Antwort Letzte Antwort
        0
        • WszeneW 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-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          schrieb am zuletzt editiert von
          #5

          @wszene zur not - ein animiertes gif googeln

          AApossis (176).gif

          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

          BananaJoeB 1 Antwort Letzte Antwort
          0
          • liv-in-skyL liv-in-sky

            @wszene zur not - ein animiertes gif googeln

            AApossis (176).gif

            BananaJoeB Online
            BananaJoeB Online
            BananaJoe
            Most Active
            schrieb am zuletzt editiert von
            #6

            @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.

            ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

            1 Antwort Letzte Antwort
            0
            • OliverIOO 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.

              WszeneW Offline
              WszeneW Offline
              Wszene
              schrieb am zuletzt editiert von
              #7

              @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

              Meine Hard- & Software:

              • MSI Cubi 5 10M-049DE mit Proxmox
              • CC2652P Zigbee Stick
              • Steckdosen mit Tasmota und Zigbee
              • Lichtschalter mit Tasmota
              • IKEA TRÅDFRI Glühbirnen
              • Aqara Sensoren
              OliverIOO 1 Antwort Letzte Antwort
              0
              • WszeneW 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

                OliverIOO Offline
                OliverIOO Offline
                OliverIO
                schrieb am zuletzt editiert von OliverIO
                #8

                @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.

                Meine Adapter und Widgets
                TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                Links im Profil

                1 Antwort Letzte Antwort
                0
                • WszeneW 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

                  Enrico FischerE Offline
                  Enrico FischerE Offline
                  Enrico Fischer
                  schrieb am zuletzt editiert von
                  #9

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

                  WszeneW 1 Antwort Letzte Antwort
                  0
                  • Enrico FischerE Enrico Fischer

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

                    WszeneW Offline
                    WszeneW Offline
                    Wszene
                    schrieb am zuletzt editiert von
                    #10

                    @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?

                    Meine Hard- & Software:

                    • MSI Cubi 5 10M-049DE mit Proxmox
                    • CC2652P Zigbee Stick
                    • Steckdosen mit Tasmota und Zigbee
                    • Lichtschalter mit Tasmota
                    • IKEA TRÅDFRI Glühbirnen
                    • Aqara Sensoren
                    BananaJoeB Enrico FischerE 2 Antworten Letzte Antwort
                    0
                    • WszeneW 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?

                      BananaJoeB Online
                      BananaJoeB Online
                      BananaJoe
                      Most Active
                      schrieb am zuletzt editiert von
                      #11

                      @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)

                      ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                      WszeneW 1 Antwort Letzte Antwort
                      0
                      • BananaJoeB 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)

                        WszeneW Offline
                        WszeneW Offline
                        Wszene
                        schrieb am zuletzt editiert von
                        #12

                        @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

                        Meine Hard- & Software:

                        • MSI Cubi 5 10M-049DE mit Proxmox
                        • CC2652P Zigbee Stick
                        • Steckdosen mit Tasmota und Zigbee
                        • Lichtschalter mit Tasmota
                        • IKEA TRÅDFRI Glühbirnen
                        • Aqara Sensoren
                        1 Antwort Letzte Antwort
                        0
                        • WszeneW 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?

                          Enrico FischerE Offline
                          Enrico FischerE Offline
                          Enrico Fischer
                          schrieb am zuletzt editiert von
                          #13

                          @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

                          BananaJoeB 1 Antwort Letzte Antwort
                          0
                          • Enrico FischerE 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

                            BananaJoeB Online
                            BananaJoeB Online
                            BananaJoe
                            Most Active
                            schrieb am zuletzt editiert von
                            #14

                            @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

                            ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                            WszeneW 1 Antwort Letzte Antwort
                            0
                            • BananaJoeB 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

                              WszeneW Offline
                              WszeneW Offline
                              Wszene
                              schrieb am zuletzt editiert von
                              #15

                              @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

                              Meine Hard- & Software:

                              • MSI Cubi 5 10M-049DE mit Proxmox
                              • CC2652P Zigbee Stick
                              • Steckdosen mit Tasmota und Zigbee
                              • Lichtschalter mit Tasmota
                              • IKEA TRÅDFRI Glühbirnen
                              • Aqara Sensoren
                              GlasfaserG MeistertrM 2 Antworten Letzte Antwort
                              0
                              • WszeneW 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

                                GlasfaserG Offline
                                GlasfaserG Offline
                                Glasfaser
                                schrieb am zuletzt editiert von Glasfaser
                                #16

                                @wszene

                                d8785798-f56b-4d52-b5c6-f21f94ba7184-grafik.png

                                e13b04f0-d04b-40f4-a298-1597efedd86d-grafik.png

                                über den Dateimanager in VIS

                                .
                                58f88d19-0735-4351-b458-9186b4c3f948-grafik.png

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

                                Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                                1 Antwort Letzte Antwort
                                0
                                • WszeneW 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

                                  MeistertrM Offline
                                  MeistertrM Offline
                                  Meistertr
                                  Developer
                                  schrieb am zuletzt editiert von
                                  #17

                                  @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

                                  1 Antwort Letzte Antwort
                                  0
                                  Antworten
                                  • In einem neuen Thema antworten
                                  Anmelden zum Antworten
                                  • Älteste zuerst
                                  • Neuste zuerst
                                  • Meiste Stimmen


                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  781

                                  Online

                                  32.5k

                                  Benutzer

                                  81.7k

                                  Themen

                                  1.3m

                                  Beiträge
                                  Community
                                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                  ioBroker Community 2014-2025
                                  logo
                                  • Anmelden

                                  • Du hast noch kein Konto? Registrieren

                                  • Anmelden oder registrieren, um zu suchen
                                  • Erster Beitrag
                                    Letzter Beitrag
                                  0
                                  • Home
                                  • Aktuell
                                  • Tags
                                  • Ungelesen 0
                                  • Kategorien
                                  • Unreplied
                                  • Beliebt
                                  • GitHub
                                  • Docu
                                  • Hilfe