Skip to content
  • Home
  • 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

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Hqwidgets - Status Entwicklung, Motion Detector, Mouseover, hover, Text anzeigen mit CSS

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    23
    1
    1.3k

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.5k

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.
  • 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

                      435

                      Online

                      32.5k

                      Benutzer

                      81.7k

                      Themen

                      1.3m

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

                      • Du hast noch kein Konto? Registrieren

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