Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Wie aus einem HTML-Widget ein neues Widget machen?

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Wie aus einem HTML-Widget ein neues Widget machen?

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

      pi@raspberrypi ~ $ cd /opt/iobroker/node_modules/ioBroker.vis-communicate

      pi@raspberrypi /opt/iobroker/node_modules/ioBroker.vis-communicate $ ls

      admin         img              LICENSE       README.md  widgets

      Gruntfile.js  io-package.json  package.json  tasks

      pi@raspberrypi /opt/iobroker/node_modules/ioBroker.vis-communicate $

      Aber unter cd node_modules/iobroker.js-controller/adapter

      gibts nur

      root@raspberrypi:/opt/iobroker# cd node_modules/iobroker.js-controller/adapter
      root@raspberrypi:/opt/iobroker/node_modules/iobroker.js-controller/adapter# ls
      example
      
      

      Ist das richtig?

      1 Reply Last reply Reply Quote 0
      • Bluefox
        Bluefox last edited by

        Und wenn du /opt/iobroker/node_modules/ioBroker.vis-communicate

        ins

        /opt/iobroker/node_modules/iobroker.vis-communicate

        Umbenennst?

        1 Reply Last reply Reply Quote 0
        • C
          Communicate last edited by

          dann läuft der visdebug jetzt durch. Sehr gut.

          Jetzt kämpfe ich nur damit, dass ich vorhin vis geupdatet habe und ich vis jetzt gar nicht mehr aufrufen kann.

          das schau ich mir aber morgen erst an.

          Danke für heute schonmal 🙂

          1 Reply Last reply Reply Quote 0
          • C
            Communicate last edited by

            So, das funktioniert prima.

            Für den Moment hab ich dann nur noch eine Frage die das neue widget betrifft.

            Wie kann ich denn jetzt die ganzen Einstellungen vornehmen? Konkret: wie kann Ich z.B. die beiden unterschiedlichen Farben der Rechtecke in den Einstellungen ändern ? Wenn ich background ändere wird das ganze widget eingefärbt. …

            Und dann noch die Farbe bei hover-effekt wie komme ich da ran?

            Gruß

            Dominic

            1 Reply Last reply Reply Quote 0
            • C
              Communicate last edited by

              Guten Morgen,

              es hat mir ja keine ruhe gelassen 🙂

              Also das System läuft wieder einwandfrei - das ist gut 🙂

              Ich kann die Farbe des kleinen vierecks über die Eigenschaft bcolor ändern - das ist auch gut 🙂

              Was ich noch nicht herausgefunden habe ist, wie ich die andern Eigenschaften (also z.B. den Farbverlauf beim Hovereffekt),

              die Hintergrundfarbe für das große Viereck etc. ändern kann, bzw. eine Verbindung (nennt man das dann binding? ) zwischen

              der Eigenschaft und dem Widgeteditor herstellen kann?

              Oder anders ausgedrückt - wie ist denn die Eigenschaft "bcolor" mit dem kleinen viereck verknüpft worden?

              1 Reply Last reply Reply Quote 0
              • C
                Communicate last edited by

                so, einen kleinen Schritt weiter bin ich schonmal.

                grep -r -i 'color' ./ hat mir verraten, wo überall die Eigenschaft bcolor vorkommt.

                Ich glaube, für mich relevant ist in diesem fall die Datei /opt/iobroker/iobroker-data/files/vis/widgets/communicate.html.

                Diese habe ich auch editiert und zwar so:

                ! ioBroker.vis communicate Widget-Set
                ! version: "0.0.1"
                ! Copyright 10.2015-2016 Communicatedominic@bialas24.de
                ! -->
                Soweit so gut - sobald ich aber dann ein iobroker visdebug communicate mache, wird der inhalt von communicate.html mit den ursprungswerten wieder überschrieben und meine Änderungen sind weg.

                Daher zwei Fragen:

                1. Kann mein Code überhaupt grundsätzlich funktionieren

                2. Was mache ich falsch, dass die Änderungen immer wieder überschrieben werden?

                1 Reply Last reply Reply Quote 0
                • Bluefox
                  Bluefox last edited by

                  Wenn du die Datei in iobroker-data änderst, dann muss man visdebug nicht aufrufen(es reicht ein mal nach vis start). Man darf nicht vergessen, dass die Änderungen nach vis Restart überschrieben werden und man muss zurück zu node_modules /iobroker.vis-communicate mergen.

                  Deine Änderungen sehen gut aus und müssen gehen.

                  1 Reply Last reply Reply Quote 0
                  • C
                    Communicate last edited by

                    Danke! Das war mein Gedankenfehler.

                    Wenn ich unter /opt/iobroker/node_modules/iobroker.vis-communicate/widgets/communicate.html ändere, müsste ich mit visdebug wieder erfolg haben, oder?

                    Für mich als Anfänger ist das irgendwie einfach zu begreifen, wenn ich Änderungen vornehme und dann zum Schluss immer visdebug aufrufe.

                    1 Reply Last reply Reply Quote 0
                    • Bluefox
                      Bluefox last edited by

                      @Communicate:

                      Danke! Das war mein Gedankenfehler.

                      Wenn ich unter /opt/iobroker/node_modules/iobroker.vis-communicate/widgets/communicate.html ändere, müsste ich mit visdebug wieder erfolg haben, oder? `
                      Ja. Genau.

                      > Für mich als Anfänger ist das irgendwie einfach zu begreifen, wenn ich Änderungen vornehme und dann zum Schluss immer visdebug aufrufe.
                      Dann mach einfach so.
                      6558_unbenannt.png

                      1 Reply Last reply Reply Quote 0
                      • C
                        Communicate last edited by

                        so, ein letztes noch, dann hab ich hoffentlich alles was ich zunächst für meine Widget-Entwicklung benötige:

                        Wie kann ich denn die Atrribute für breite und höhe (alos genau diese Werte:

                        .var_nav
                        {
                        position:relative;
                        background:#e2e1f4; 
                        width:361px;
                        height:70px;
                        margin-bottom:50px;
                        
                        }
                        

                        einstellbar machen?

                        Wenn ich höhe und Breite mit den normalen Widget-Einstellungen verändere, dann ändert sich nicht das WIdget selbst, sondenr ich ziehe quasi einen Hintergrund auf (hier braun dargestellt):
                        515_bildschirmfoto_2015-10-18_um_12.55.30.png

                        1 Reply Last reply Reply Quote 0
                        • C
                          Communicate last edited by

                          ich kriegs einfach nicht hin 😞

                          so sieht meine communicate.html jetzt aus - und ich verstehe nicht, warum ich die linke breite jetzt nicht steuern kann (über die widget eigenschaften) 😞

                          ! ioBroker.vis communicate Widget-Set
                          ! version: "0.0.1"
                          ! Copyright 10.2015-2016 Communicatedominic@bialas24.de
                          ! -->

                          1 Reply Last reply Reply Quote 0
                          • Bluefox
                            Bluefox last edited by

                            width:<%== this.data.attr('breite_links') %>px

                            1 Reply Last reply Reply Quote 0
                            • C
                              Communicate last edited by

                              das wars leider nicht. Es passiert einfach gar nichts.

                              Kannst Du Dir meine communicate.html mal anschauen / testen bei Dir?

                              515_communicate.html.zip

                              1 Reply Last reply Reply Quote 0
                              • Bluefox
                                Bluefox last edited by

                                Du hast ";" in Still vergessen:

                                style="background: <%== this.data.attr('bcolor') %>****;****width:<%== this.data.attr('breite_links') %>px"

                                Schaue mal mein Widget, ich habe da ein paar Änderungen gemacht.

                                1 Reply Last reply Reply Quote 0
                                • C
                                  Communicate last edited by

                                  Danke, das ";" wars 🙂

                                  Was genau hast Du denn verändert? Ich habe die Datei jetzt nochmal gedownloaded (du hast es doch in deinem Post vom Anfang geändert, oder?)

                                  und eingespielt - kann aber keine Veränderung erkennen :roll:

                                  1 Reply Last reply Reply Quote 0
                                  • Bluefox
                                    Bluefox last edited by

                                    @Communicate:

                                    Danke, das ";" wars 🙂

                                    Was genau hast Du denn verändert? Ich habe die Datei jetzt nochmal gedownloaded (du hast es doch in deinem Post vom Anfang geändert, oder?)

                                    und eingespielt - kann aber keine Veränderung erkennen :roll: `
                                    Schau bitte den Spoiler im meinem vorletztem Post. (Das hier ist letzte 🙂 )
                                    48_widget.gif

                                    1 Reply Last reply Reply Quote 0
                                    • C
                                      Communicate last edited by

                                      Oh wie cool 🙂 Danke schön 😛

                                      1 Reply Last reply Reply Quote 0
                                      • C
                                        Communicate last edited by

                                        Hab gerade noch ein bisschen rumprobiert.

                                        Mittlerweile kann ich sogar ein Navigations-Widget daraus machen.

                                        Aber, was leider nicht mehr geht ist der Farbeffekt bei Hover/Klick. Es wird jetzt

                                        nur noch das linke viereck ausgefüllt. Hast Du eine Idee, woran das liegen könnte?

                                        Gruß

                                        Dominic

                                        1 Reply Last reply Reply Quote 0
                                        • C
                                          Communicate last edited by

                                          So, jetzt habe ich fast alles was ich brauche implementiert.

                                          Was nicht geht ist:

                                          1. Der Hovereffekt ist nur noch auf das kleine viereck beschränkt.

                                          2. Er schreibt mir keinen True / False Wert in die bei Object-ID zugeordnete Variable 😞

                                          Hier nochmal der gesamte Code:

                                          1 Reply Last reply Reply Quote 0
                                          • C
                                            Communicate last edited by

                                            … ich bekomme es einfach nicht hin 😞

                                            kann ich irgendwie debuggen, woran mein Versuch mit den true/false scheitert ?

                                            Gruß

                                            Dominic
                                            2858_screenshot__300__li.jpg

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            981
                                            Online

                                            31.7k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            5
                                            79
                                            15831
                                            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