Skip to content
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker 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.2k

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
12 Beiträge 4 Kommentatoren 2.4k Aufrufe
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • A Offline
    A Offline
    andyb
    schrieb am zuletzt editiert von
    #2

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

    1 Antwort Letzte Antwort
    0
    • HomoranH Nicht stören
      HomoranH Nicht stören
      Homoran
      Global Moderator Administrators
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      0
      • greyhoundG Offline
        greyhoundG Offline
        greyhound
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        0
        • greyhoundG Offline
          greyhoundG Offline
          greyhound
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          0
          • kmxakK Offline
            kmxakK Offline
            kmxak
            Most Active
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            0
            • HomoranH Nicht stören
              HomoranH Nicht stören
              Homoran
              Global Moderator Administrators
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              0
              • greyhoundG Offline
                greyhoundG Offline
                greyhound
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                0
                • kmxakK Offline
                  kmxakK Offline
                  kmxak
                  Most Active
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  0
                  • HomoranH Nicht stören
                    HomoranH Nicht stören
                    Homoran
                    Global Moderator Administrators
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    0
                    • kmxakK Offline
                      kmxakK Offline
                      kmxak
                      Most Active
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • greyhoundG Offline
                        greyhoundG Offline
                        greyhound
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        0
                        Antworten
                        • In einem neuen Thema antworten
                        Anmelden zum Antworten
                        • Älteste zuerst
                        • Neuste zuerst
                        • Meiste Stimmen


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        746

                        Online

                        32.4k

                        Benutzer

                        81.4k

                        Themen

                        1.3m

                        Beiträge
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                        ioBroker Community 2014-2025
                        logo
                        • Anmelden

                        • Du hast noch kein Konto? Registrieren

                        • Anmelden oder registrieren, um zu suchen
                        • Erster Beitrag
                          Letzter Beitrag
                        0
                        • Aktuell
                        • Tags
                        • Ungelesen 0
                        • Kategorien
                        • Unreplied
                        • Beliebt
                        • GitHub
                        • Docu
                        • Hilfe