Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

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

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    16
    1
    1.5k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    831

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.1k

javascript in VIS einbinden

Scheduled Pinned Locked Moved Visualisierung
vis
17 Posts 8 Posters 1.4k Views 8 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • liv-in-skyL liv-in-sky

    @wszene zur not - ein animiertes gif googeln

    AApossis (176).gif

    BananaJoeB Offline
    BananaJoeB Offline
    BananaJoe
    Most Active
    wrote on last edited by
    #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 Reply Last reply
    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
      wrote on last edited by
      #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 Reply Last reply
      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
        wrote on last edited by 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 Reply Last reply
        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
          wrote on last edited by
          #9

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

          WszeneW 1 Reply Last reply
          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
            wrote on last edited by
            #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 Replies Last reply
            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 Offline
              BananaJoeB Offline
              BananaJoe
              Most Active
              wrote on last edited by
              #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 Reply Last reply
              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
                wrote on last edited by
                #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 Reply Last reply
                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
                  wrote on last edited by
                  #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 Reply Last reply
                  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 Offline
                    BananaJoeB Offline
                    BananaJoe
                    Most Active
                    wrote on last edited by
                    #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 Reply Last reply
                    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
                      wrote on last edited by
                      #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 Replies Last reply
                      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
                        wrote on last edited by 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 Reply Last reply
                        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
                          wrote on last edited by
                          #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 Reply Last reply
                          0
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          387

                          Online

                          32.6k

                          Users

                          82.1k

                          Topics

                          1.3m

                          Posts
                          Community
                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                          ioBroker Community 2014-2025
                          logo
                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Home
                          • Recent
                          • Tags
                          • Unread 0
                          • Categories
                          • Unreplied
                          • Popular
                          • GitHub
                          • Docu
                          • Hilfe