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. Wie aus einem HTML-Widget ein neues Widget machen?

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Wie aus einem HTML-Widget ein neues Widget machen?

Scheduled Pinned Locked Moved Visualisierung
79 Posts 5 Posters 17.7k Views 1 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.
  • C Offline
    C Offline
    Communicate
    wrote on last edited by
    #9

    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
    0
    • BluefoxB Offline
      BluefoxB Offline
      Bluefox
      wrote on last edited by
      #10

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

      ins

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

      Umbenennst?

      1 Reply Last reply
      0
      • C Offline
        C Offline
        Communicate
        wrote on last edited by
        #11

        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
        0
        • C Offline
          C Offline
          Communicate
          wrote on last edited by
          #12

          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
          0
          • C Offline
            C Offline
            Communicate
            wrote on last edited by
            #13

            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
            0
            • C Offline
              C Offline
              Communicate
              wrote on last edited by
              #14

              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
              0
              • BluefoxB Offline
                BluefoxB Offline
                Bluefox
                wrote on last edited by
                #15

                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
                0
                • C Offline
                  C Offline
                  Communicate
                  wrote on last edited by
                  #16

                  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
                  0
                  • BluefoxB Offline
                    BluefoxB Offline
                    Bluefox
                    wrote on last edited by
                    #17

                    @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
                    0
                    • C Offline
                      C Offline
                      Communicate
                      wrote on last edited by
                      #18

                      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
                      0
                      • C Offline
                        C Offline
                        Communicate
                        wrote on last edited by
                        #19

                        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
                        0
                        • BluefoxB Offline
                          BluefoxB Offline
                          Bluefox
                          wrote on last edited by
                          #20

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

                          1 Reply Last reply
                          0
                          • C Offline
                            C Offline
                            Communicate
                            wrote on last edited by
                            #21

                            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
                            0
                            • BluefoxB Offline
                              BluefoxB Offline
                              Bluefox
                              wrote on last edited by
                              #22

                              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
                              0
                              • C Offline
                                C Offline
                                Communicate
                                wrote on last edited by
                                #23

                                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
                                0
                                • BluefoxB Offline
                                  BluefoxB Offline
                                  Bluefox
                                  wrote on last edited by
                                  #24

                                  @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
                                  0
                                  • C Offline
                                    C Offline
                                    Communicate
                                    wrote on last edited by
                                    #25

                                    Oh wie cool :-) Danke schön :P

                                    1 Reply Last reply
                                    0
                                    • C Offline
                                      C Offline
                                      Communicate
                                      wrote on last edited by
                                      #26

                                      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
                                      0
                                      • C Offline
                                        C Offline
                                        Communicate
                                        wrote on last edited by
                                        #27

                                        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
                                        0
                                        • C Offline
                                          C Offline
                                          Communicate
                                          wrote on last edited by
                                          #28

                                          … 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
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          746

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          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