Skip to content
  • 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
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Hqwidgets - Status Entwicklung, Motion Detector, Mouseover, hover, Text anzeigen mit CSS

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.1k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.8k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.0k

Hqwidgets - Status Entwicklung, Motion Detector, Mouseover, hover, Text anzeigen mit CSS

Scheduled Pinned Locked Moved Visualisierung
12 Posts 4 Posters 2.4k Views
  • 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.
  • greyhoundG Offline
    greyhoundG Offline
    greyhound
    wrote on last edited by
    #1

    Ich nutze in meinem Projekt einige hqwidgets - ist ja Sinn der Sache.

    Da ich ich gern verstehe, welche Möglichkeiten die einzelnen Widgets bieten, nutze ich auch die Hilfe. Mit Freude habe ich die Beschreibung des "Motion Detector" in der Hilfe zur Kenntnis genommen. Um dann in VIS (hqwidgets v1.0.8) festzustellen, dass dieses Widget dort nicht angeboten wird. Nicht uninteressant sind sicherlich auch das "Battery Indicator"- und das "Ping device widget" aus der Hilfe. In den "ältewren" Quellen zum Widget tauchen dann noch weitere interessante Namen auf.

    Auf der Github-Seite sind "nur" die Widgets präsentiert, die auch in VIS verfügbar sind, ist ja auch okay.

    Ist die Veröffentlichung der in der Hilfe beschriebenen zusätzlichen Widgets geplant oder ist das inzwischen gestrichen?

    Erfreulich ist die relativ ausführliche Beschreibung der hqwidgets im Vergleich zu einigen anderen. Allerdings bleiben für mich einige Möglichkeiten schleierhaft. Wie z. B. "In Arbeit Zustand ID:", "SignalObjektID:", eine ausführlichere Beschreibung zu den Möglichkeiten von "Stile", den Möglichkeiten der "Extrasteuerung" und der "Signalbilder".

    Gibt es andere Quellen, wo ich mich zu diesen Punkten informieren kann? Habe leider im Forum nichts gefunden.

    ioBroker auf ODROID-XU4 / Influx u. a. auf FUJITSU D3400-B, Celeron G3900, 16 GB RAM / CCU2 / Nuki

    1 Reply Last reply
    0
    • A Offline
      A Offline
      andyb
      wrote on last edited by
      #2

      http://www.iobroker.net/?page_id=2754&lang=de#Widget

      1 Reply Last reply
      0
      • HomoranH Do not disturb
        HomoranH Do not disturb
        Homoran
        Global Moderator Administrators
        wrote on last edited by
        #3

        @greyhound:

        Mit Freude habe ich die Beschreibung des "Motion Detector" in der Hilfe zur Kenntnis genommen. `
        Was meinst du mit "der Hilfe"?

        Gruß

        Rainer

        kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

        der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

        1 Reply Last reply
        0
        • greyhoundG Offline
          greyhoundG Offline
          greyhound
          wrote on last edited by
          #4

          @andyb:

          http://www.iobroker.net/docu/?page_id=2 … =de#Widget ` da war ich beim ersten Lesen vor einigen Monaten noch nicht so weit und dann vergessen, dass da auch etwas für mich immer noch Neues stehen könnte.

          ioBroker auf ODROID-XU4 / Influx u. a. auf FUJITSU D3400-B, Celeron G3900, 16 GB RAM / CCU2 / Nuki

          1 Reply Last reply
          0
          • greyhoundG Offline
            greyhoundG Offline
            greyhound
            wrote on last edited by
            #5

            @Homoran:

            Was meinst du mit "der Hilfe"? ` die Hilfe zu den Widgets selbst.

            Okay, die Erklärungen unter dem "VIS Adapter" hatte ich schon wieder vergessen.

            Ich habe aber auch immer wieder mit den Hilfen zu den Witgets selbst Probleme. Entweder, weil sie sehr allgemein gehalten sind oder auf sich auf in Planung oder wieder verworfene (?) Widgets beziehen. Als Bsp. das hqwidget für den Motion Detector. Nach dem Fund in der Hilfe habe ich mir die unter VIS und VIS.beta angebotenen Widgets angeschaut und bin nicht fündig geworden. Anschließend habe ich die hqwidgets-Version aus git installiert - negativ, im ioBroker-Forum gesucht, in www gegoogelt, um dann festzustellen, dass da ggf. "mal" etwas kommt oder schon wieder rausgefallen ist. Den Kurvenverlauf meiner Morphine und des Adrealins möchte ich hier nicht weiter ausführen.

            Generell denke ich, ist es für Neueinsteiger ohne Background in Webprogrammierung schwierig, die Einsatzmöglichkeiten der einzelnen Widgets mit ihren Vor- und Nachteilen für ein spezielles Szenario zu erkennen. Sehr hilfreich wäre in meinen Augen ein Art Register mit Erklärungen zu den einzelnen Widgets bzw. Funktionsgruppen und deren vorgesehenen Einsatzzweck, ggf. mit Verweis auf die bereits bestehenden Beispielprojekte oder weiterführende Tutorials. Vielleicht gibt es das ja bereits und ich habe nur den Überblick verloren.

            ioBroker auf ODROID-XU4 / Influx u. a. auf FUJITSU D3400-B, Celeron G3900, 16 GB RAM / CCU2 / Nuki

            1 Reply Last reply
            0
            • kmxakK Offline
              kmxakK Offline
              kmxak
              Most Active
              wrote on last edited by
              #6

              Moin,

              also bei den Widgets gebe ich dir recht. Da komme ich auch noch nicht mit klar. Wenn ich was basteln will weiß ich nie welches Widget wofür :?

              Das manche Sachen noch nicht fertig/da sind finde ich erstmal nicht schlimm. Die Community tut und macht was sie kann, besonders die Mods/Admins stehen einem stehts zur Seite. Die sind auch nur Menschen und investieren viel viel Zeit.

              Ohne vorkenntnisse ist ja ok aber man muss bereit sein sich weiterzuentwickeln. Im bereich SmartHome ist immer eigeninitiative gefordert.

              Wenn du nun etwas bauen willst und nicht weißt wie es geht erstell einfach einen Foren Beitrag. Dort wird man helfen und wenn es erledigt ist haben wir wieder eine gute Vorlage wenn mal wieder einer sowas oder sowas ähnliches sucht.

              Hast du aktuell eine spezielle frage zu dem Widget?

              Gruß Alex

              1 Reply Last reply
              0
              • HomoranH Do not disturb
                HomoranH Do not disturb
                Homoran
                Global Moderator Administrators
                wrote on last edited by
                #7

                @greyhound:

                Generell denke ich, ist es für Neueinsteiger ohne Background in Webprogrammierung schwierig, die Einsatzmöglichkeiten der einzelnen Widgets mit ihren Vor- und Nachteilen für ein spezielles Szenario zu erkennen. Sehr hilfreich wäre in meinen Augen ein Art Register mit Erklärungen zu den einzelnen Widgets bzw. Funktionsgruppen und deren vorgesehenen Einsatzzweck, ggf. mit Verweis auf die bereits bestehenden Beispielprojekte oder weiterführende Tutorials. Vielleicht gibt es das ja bereits und ich habe nur den Überblick verloren. `
                Nein, gibt es leider noch nicht, ich bin aber dran.

                Wie bereits in anderen Threads beschrieben ist es eine echte Herausforderung so ein Register von mehreren hundert Widgets einerseits übersichtlich und andererseits mit vollumfänglichen Informationen zu versehen. Vom Aufbau und der Pflege ganz abgesehen.

                Gruß

                Rainer

                kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

                Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                1 Reply Last reply
                0
                • greyhoundG Offline
                  greyhoundG Offline
                  greyhound
                  wrote on last edited by
                  #8

                  wo ich jetzt da gerade wieder dabei bin und im Forum nichts zum Thema gefunden habe.

                  Ich möchte z. B. beim hqwidget On/Off oder jqui-mfd-value-Socket beim "Mouseover" zusätzliche statische und ggf. dynamische Informationen anzeigen.

                  Ist das generell bei allen Widgets möglich? Gibt es Beispiele (z. B. Beispielprojekte), wo ich mir entsprechende Umsetzungen anschauen kann?

                  Danke und Gruß

                  GH

                  ioBroker auf ODROID-XU4 / Influx u. a. auf FUJITSU D3400-B, Celeron G3900, 16 GB RAM / CCU2 / Nuki

                  1 Reply Last reply
                  0
                  • kmxakK Offline
                    kmxakK Offline
                    kmxak
                    Most Active
                    wrote on last edited by
                    #9

                    Das sollte möglich sein.

                    Ist bestimmt machbar über css mouseover (hover)

                    Ich habe es gerade probiert scheiter aber leider daran.

                    Wenn ich den Css code eingebe und speicher und danach die Seite (Editor) neu lade ist der Css code verschwunden. Das sollte nicht so sein oder?

                    Gruß Alex

                    1 Reply Last reply
                    0
                    • HomoranH Do not disturb
                      HomoranH Do not disturb
                      Homoran
                      Global Moderator Administrators
                      wrote on last edited by
                      #10

                      Ich denke Bluefox würde gerne helfen wenn ihr euch der Widget-Entwicklung annehmen wolltet.

                      Alles was ihr macht muss er anschließend nicht mehr machen 😉

                      Wenn ihr daran ernsthaft interessiert seid, solltet ihr ihn mal anfragen.

                      Gruß

                      Rainer

                      kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

                      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                      der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                      1 Reply Last reply
                      0
                      • kmxakK Offline
                        kmxakK Offline
                        kmxak
                        Most Active
                        wrote on last edited by
                        #11

                        :lol: Ich helfe wo ich kann. Leider ist meine CSS Ahnung gegen null. HTML geht so. Müsste halt wissen warum mein CSS Code immer wieder weg ist. Unter Allgemein müsste ich ja dann eine neuen CSS Klasse angezeigt bekommen theoretisch. Tut sich aber nix.

                        Naja mit Widget selber hat es ja nicht direkt was zu tun. Wir wollen ja an vorhandene Widgets ein Hover Effekt hinzufügen wie ich es jetzt verstanden hab. Quasi so wie unter Instanzen auf das Farbsymbol die Maus halten um Detailinfos zu erhalten.

                        Gruß Alex

                        1 Reply Last reply
                        0
                        • greyhoundG Offline
                          greyhoundG Offline
                          greyhound
                          wrote on last edited by
                          #12

                          Bevor ich mich an die Entwicklung eines Widgets bzw. deren Erweiterung wage, möchte ich noch einiges mehr verstanden und gemacht haben. Z. B. CSS.

                          Einfache Korrekturvorschläge/Erweiterungen zu Adaptern habe ich schon getätigt und auch schon eine Idee für einen eigenen Adapter. Es kostet aber eben auch alles seine Zeit und da geht meine Bewunderung an Bluefox und den anderen, die sehr sehr viel Zeit in dieses Projekt investieren. Kriege da schon mal ein schlechtes Gewissen, aber es gibt im Leben leider nicht immer nur Hobby und Spass (zumindest in meinem nicht).

                          Zurück zum Mausüber - Hover-Effekt. Ich habe mir eine Menge Ideen und Lösungsansätze aus den Beispielprojekten und Skriptdiskussionen geholt. Und richtig, @kmxak:

                          Quasi so wie unter Instanzen auf das Farbsymbol die Maus halten um Detailinfos zu erhalten. ` , dass ist auch eine Inspiration, wie ich das gerne in meinem Projekt hätte. Wenn es so "einfach" perr CSS geht, dann würde sich ja vielleicht eine CSS-Skriptsammlung analog zu den JavaScript-Beispielen lohnen, ggf. mit Beispielen, wie es für die verschiedene Widget-Implementierungen umzusetzen wäre.

                          Wenn ich mir mit dem Chrome-Inspector das Status-Widget einer Instanz anschaue, sehe ich die "instance-id" und auch das meine Maus das Ereignis mit der Klasse "instance-state-hover" auslöst.

                          Mein Widget hat die id "w01008". Wie kann ich nun meinem Widget sagen, dass es beim Mouseover auche einen speziellen Text / Status anzeigt soll.

                          Ich habe verstanden, dass ich die unter dem Tab CSS definierte Klasse (welche u. U. eine vorhande Klasse überschreibt)

                          .hq-button-green-normal {

                          background: red !important;

                          box-shadow: inset 3px 2px 7px 0px #BB1111  !important;

                          border: 1px solid #aa1111 !important;

                          }

                          einem spezifischen Widget über die Eigenschaft "CSS-Klasse" zuweise bzw. in in diesem Fall über eine Style-Eigenschaft mit dem selben Namen "button-green-normal"

                          Was bedeutet dann

                          #w00236_button:hover{ /* der Button bei MouseOver */

                          border-color:red;

                          }

                          und wie wäre die entsprechende Klassendeklaration für mein hq-Widget "#w01008" ?

                          Wie kann ich die benötigten Informationen über die Chrome Dev-Tools ermitteln?

                          Oder gibt es nur den Weg "24 Tage mit CSS auf einer Insel"?

                          Hover for all! 😉

                          Bin dann leider über Ostern wieder offline.

                          ioBroker auf ODROID-XU4 / Influx u. a. auf FUJITSU D3400-B, Celeron G3900, 16 GB RAM / CCU2 / Nuki

                          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

                          591

                          Online

                          32.4k

                          Users

                          81.4k

                          Topics

                          1.3m

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

                          • Don't have an account? Register

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