Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. javascript in VIS einbinden

    NEWS

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    • Save The Date: ioBroker@Smart Living Forum Solingen, 14.06.

    javascript in VIS einbinden

    This topic has been deleted. Only users with topic management privileges can see it.
    • Wszene
      Wszene last edited by

      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 crunchip OliverIO Enrico Fischer 5 Replies Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @Wszene last edited by 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

        1 Reply Last reply Reply Quote 0
        • crunchip
          crunchip Forum Testing Most Active @Wszene last edited by crunchip

          @wszene schau mal hier

          1 Reply Last reply Reply Quote 0
          • OliverIO
            OliverIO @Wszene last edited by 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.

            Wszene 1 Reply Last reply Reply Quote 0
            • liv-in-sky
              liv-in-sky @Wszene last edited by

              @wszene zur not - ein animiertes gif googeln

              AApossis (176).gif

              BananaJoe 1 Reply Last reply Reply Quote 0
              • BananaJoe
                BananaJoe Most Active @liv-in-sky last edited by

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

                1 Reply Last reply Reply Quote 0
                • Wszene
                  Wszene @OliverIO last edited by

                  @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 1 Reply Last reply Reply Quote 0
                  • OliverIO
                    OliverIO @Wszene last edited by 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.

                    1 Reply Last reply Reply Quote 0
                    • Enrico Fischer
                      Enrico Fischer @Wszene last edited by

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

                      Wszene 1 Reply Last reply Reply Quote 0
                      • Wszene
                        Wszene @Enrico Fischer last edited by

                        @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 Enrico Fischer 2 Replies Last reply Reply Quote 0
                        • BananaJoe
                          BananaJoe Most Active @Wszene last edited by

                          @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 1 Reply Last reply Reply Quote 0
                          • Wszene
                            Wszene @BananaJoe last edited by

                            @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

                            1 Reply Last reply Reply Quote 0
                            • Enrico Fischer
                              Enrico Fischer @Wszene last edited by

                              @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 1 Reply Last reply Reply Quote 0
                              • BananaJoe
                                BananaJoe Most Active @Enrico Fischer last edited by

                                @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 1 Reply Last reply Reply Quote 0
                                • Wszene
                                  Wszene @BananaJoe last edited by

                                  @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 Meistertr 2 Replies Last reply Reply Quote 0
                                  • Glasfaser
                                    Glasfaser @Wszene last edited by Glasfaser

                                    @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

                                    1 Reply Last reply Reply Quote 0
                                    • Meistertr
                                      Meistertr Developer @Wszene last edited by

                                      @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 Reply Quote 0
                                      • First post
                                        Last post

                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      976
                                      Online

                                      31.6k
                                      Users

                                      79.4k
                                      Topics

                                      1.3m
                                      Posts

                                      vis
                                      8
                                      17
                                      1238
                                      Loading More Posts
                                      • Oldest to Newest
                                      • Newest to Oldest
                                      • Most Votes
                                      Reply
                                      • Reply as topic
                                      Log in to reply
                                      Community
                                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                      The ioBroker Community 2014-2023
                                      logo