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
    16
    1
    1.8k

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.1k

Wie aus einem HTML-Widget ein neues Widget machen?

Scheduled Pinned Locked Moved Visualisierung
79 Posts 5 Posters 17.6k 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
    #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
                      • BluefoxB Offline
                        BluefoxB Offline
                        Bluefox
                        wrote on last edited by
                        #29

                        Ich sehe nicht mal die Stelle, wo du versuchst true/false rein zuschreiben.

                        Debuggen kann mann indirekt. Indem man console.log('Debug text') einbaut oder du kannst

                        debugger;
                        

                        Zeile reinschreiben und dann hält Javascript an dieser Stelle an und du kannst die Werte anschauen.

                        Ich habe bis jetzt folgendes hinbekommen:

                        comminicate.html

                        style.css

                        ! @font-face { font-family: 'CF'; src: url('Cicle Fina.ttf'); } ! .communicate-var_nav { background: #e2e1f4; width: 100%; height: 100%; display: inline-flex; } ! .communicate-link_bg { background:#7A56A0; color:white; z-index:2; } ! .communicate-link_title { position: relative; z-index:3; color:#7A56A0; height:100%; } ! .communicate-link_title:hover { left: 0; width:10px; font-weight: bold; background: #E01B6A; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ! .communicate-link_bg, .communicate-img { -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; transition:all .5s ease-in-out; height: 100%; } .communicate-link_bg:hover, .communicate-img:hover{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ! .communicate-link_bg:hover { width:100%; background: #E01B6A; background: blue; } ! .communicate-img:hover{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .communicate-p { font-family: CF; position: absolute; left: 0.7em; } !

                        Es geht nur Große-Änderung nicht.

                        Ich denke, dass steuern von Größen ist über ziehen besser als per Einstellung. Findest du nicht?

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

                          > Ich denke, dass steuern von Größen ist über ziehen besser als per Einstellung. Findest du nicht?
                          da hast Du recht. Ich lerne ja noch :-)

                          > Ich sehe nicht mal die Stelle, wo du versuchst true/false rein zuschreiben.
                          HIer:

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

                          aber wahrscheinlich ist das absolut falsch, oder?
                          999_solarlog_versionen.jpg

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

                            wenn ich jetzt nochmal auf meinen Code schaue, denke ich, dass ich zwei DIV Container mit der WID habe, geht das überhaupt?

                            Ich habe versucht mir die min/max (das ist doch true und false oder?) aus andernen Widgets zu kopieren, weiss aber nicht ob ich

                            a) alle relevanten Anweisungen habe und

                            b) die Anweisungen korrekt eingebaut habe (wahrschienlich eher nicht).

                            Magst Du noch mal schauen :roll:

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

                              so, ein true oder false setzen bei checkbox klick geht jetzt:

                              515_bildschirmfoto_2015-10-20_um_20.46.13.png

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

                              Daraus ergeben sich aber zwei neue Fragen:

                              1. wie kann ich statt der checkbox die gesamte Fläche als "ereignis" bei klick nutzen

                              2. wie ändere ich den bool Wert auf einen String? (also das bei Klick zum beispiel Test ABC und TEST BCD rauskommt?)

                              1 Reply Last reply
                              0
                              • BluefoxB Offline
                                BluefoxB Offline
                                Bluefox
                                wrote on last edited by
                                #33

                                48_click.gif

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

                                  Hi,

                                  vielen lieben Dank .´-> da wäre ich ja im leben nicht drauf gekommen :roll:

                                  Einen Schönheitsfehler hat das ganze leider noch:

                                  Im True-Fall wird das größere Viereck einfach transparent.

                                  1 Reply Last reply
                                  0
                                  • BluefoxB Offline
                                    BluefoxB Offline
                                    Bluefox
                                    wrote on last edited by
                                    #35

                                    Kann sein, das bei dir View Hintergrund einfach weiß ist?
                                    48_click.gif

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

                                      Hallo,

                                      das sieht gut aus - danke!

                                      Jetzt muss ich nur noch den Code verstehen :-)

                                      Wie hast Du denn die Betitelung (z.B. Extrasteuerung) hinbekommen?

                                      Gruß

                                      Dominic

                                      1 Reply Last reply
                                      0
                                      • BluefoxB Offline
                                        BluefoxB Offline
                                        Bluefox
                                        wrote on last edited by
                                        #37

                                        @Communicate:

                                        Hallo,

                                        das sieht gut aus - danke!

                                        Jetzt muss ich nur noch den Code verstehen :-)

                                        Wie hast Du denn die Betitelung (z.B. Extrasteuerung) hinbekommen?

                                        Gruß

                                        Dominic `
                                        Das ist schon in basic.html übersetzt: https://github.com/ioBroker/ioBroker.vi … .html#L160

                                        1 Reply Last reply
                                        0
                                        • BluefoxB Offline
                                          BluefoxB Offline
                                          Bluefox
                                          wrote on last edited by
                                          #38

                                          Und hast du verstanden? :) Geht es weiter?

                                          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

                                          603

                                          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