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
    140

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.4k

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

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

                        863

                        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