Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Alleskoenner widget

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    Alleskoenner widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      mickyboys last edited by

      Hallo,

      Es gibt superviele funktionstuechtige Widgets. Leider sind viele von ihnen sehr limitiert mit fest vorgeschriebenen Bildern, etc. Ich moechte gerne selbst entscheiden wie es am Ende ausehen soll.

      Als Beispiel, es gibt ein ctrl increment widget, genau was ich brauche, aber leider nur als viereckigen Button. Kann es nicht transparent stellen um mein eigenes png zu nehmen.

      Deshalb, gibt es leere Widgets mit vielen Funktionen oder wisst ihr wie man die vorhandenen so aendert das man Spielraum hat?

      Danke,

      1 Reply Last reply Reply Quote 0
      • arteck
        arteck Developer Most Active last edited by

        das geht alles… wo ist das Problem ??

        1 Reply Last reply Reply Quote 0
        • M
          mickyboys last edited by

          @arteck:

          das geht alles… wo ist das Problem ?? `

          Hallo,

          Das ist schoen, Danke fuer deine detailierte Antwort :?

          Hast du auch etwas genaueres - Ich habe leider nichts passendes gefunden…

          Danke

          1 Reply Last reply Reply Quote 0
          • arteck
            arteck Developer Most Active last edited by

            Beschreibe mal dein Problem genauer.. was willst du erreichen ??

            1 Reply Last reply Reply Quote 0
            • Jey Cee
              Jey Cee Developer last edited by

              Ich denke er hat es schon genau genug beschrieben. Die vorhandenen Widgets entsprechen nicht dem aussehen das er sich wünscht und das lässt sich in bis nicht einfach anpassen.

              Er könnte jetzt im Quellcode rum basteln was beim nächsten update verloren geht oder ein eigenes widget auf der Grundlage bauen.

              Oder er versucht es mit einer user CSS.

              Gesendet von meinem m8 mit Tapatalk

              1 Reply Last reply Reply Quote 0
              • Homoran
                Homoran Global Moderator Administrators last edited by

                Wenn ich es aber richtig verstanden habe, will er mit EINEM Widget auch alle möglichen Funktionen steuern können

                • on/off

                • Level

                • button

                …..

                also alles, wofür bisher verschiedene Widgets gebraucht wurden.

                nur das Design lässt sich bei einigen ändern und wenn es nur ein eigenes icon ist.

                Gruß

                Rainer

                1 Reply Last reply Reply Quote 0
                • arteck
                  arteck Developer Most Active last edited by

                  @Homoran:

                  Wenn ich es aber richtig verstanden habe, will er mit EINEM Widget auch alle möglichen Funktionen steuern können

                  • on/off

                  • Level

                  • button

                  …..

                  also alles, wofür bisher verschiedene Widgets gebraucht wurden.

                  nur das Design lässt sich bei einigen ändern und wenn es nur ein eigenes icon ist.

                  Gruß

                  Rainer `

                  genau das habe ich auch Verstanden.. aber .. warum ein Widget für ALLES ?? bissel unsinnig ..

                  ansonsten kann man alles über javascript und css regeln..

                  also nochmal was hast du vor ??

                  1 Reply Last reply Reply Quote 0
                  • M
                    mickyboys last edited by

                    Moin,

                    Da ich noch recht neu bin kenn ich nicht alle Widgets, aber alle die ich getestet habe erlauben mir nicht das Design nach meinen Wuenschen zu aendern.

                    Im Anhang mal ein Screenshot von dem Design. Es ist sehr nahe dem Busch Jaeger Design - ich finde das einfach super, deshalb habe ich es mir nachgebaut.

                    Auf dem Bild zum Beispiel moechte ich das die Zeichen Plus/Minus animiert sind. Wie bei einigen anderen Widgets im STIL Aenderungseffekt.

                    Die Widgets mit dem STIL wiederum koennen kein Increment um per Druck schrittweise die Werte zu veraendern.

                    Und so zieht sich das durch die gesamte Palette.

                    Sliders sind sehr limitiert, kann nicht das Design aendern (ausser Farbe)

                    Danke fuer euren Support…

                    1 Reply Last reply Reply Quote 0
                    • arteck
                      arteck Developer Most Active last edited by

                      ahh na also…

                      es würde gehen .bis auf die slider meine ich.. du musst mit 2 ebenen arbeiten.. also musst dich trennen von einem widget .. sonder 2 widgets überlagern .. also ein image für das eigentliche Design und das was drüber liegt ist z.b.: das + wo du draufklickst.. fettisch

                      1 Reply Last reply Reply Quote 0
                      • M
                        mickyboys last edited by

                        Klingt das nicht falsch nur weil es in den jetzigen Widgets nicht umgesetzt wurde?

                        Es muss doch moeglich sein ein Widget mit Increment Funktion ueber was auch immer (CSS, SCRIPT, etc.) das animieren beizubringen?

                        Oder noch besser aus einem Template einfach die Dinge die man braucht raussuchen und als Widget kompilieren lassen - bin ich wirklich soweit von der Realitaet enternt?

                        1 Reply Last reply Reply Quote 0
                        • P
                          Pman last edited by

                          Also du müsstest schon konkreter werden, wie du dir die Animation vorstellst, damit dir geholfen werden kann. Grundsätzlich sind die Widgets ja auch nur so etwas wie vorgefertigte Knöpfe, die einem passen können oder eben nicht. Natürlich kann nicht jeder spezielle Wunsch als Widget umgesetzt werden, sonst gäbe wahrscheinlich allein 100 increment-Widgets. Genau deswegen gibt es ja auch den CSS und Script Tab, womit man dann jedes noch so kleine Detail ändern kann.

                          Schönes Design übrigens.

                          Nur mal so als Idee:

                          .ui-button:active {
                            background-color: #ff0000;
                            transition:all 0.1s ease;
                          }
                          
                          .ui-button:not(:active) {
                            background-color: transparent;
                            transition:all 1s ease;
                          }
                          

                          Farben und Animation kannst du natürlich beliebig anpassen. Man muss ja CSS nicht neu erfinden, wenn es schon eins gibt.

                          1 Reply Last reply Reply Quote 0
                          • htrecksler
                            htrecksler Forum Testing last edited by

                            Ich häng mich mal ein, weil ich das mit dem Anpassen über CSS sehr interessant finde.

                            Allerdings fehlt mir der Einstieg um damit zu arbeiten.

                            Wo genau muss der Code dann geschrieben werden?

                            Wenn ich ihn bei markiertem Widget einfach in den Reiter CSS kopiere ändert sich dadurch garnichts. Muss im Kopf auf "Global" oder "Projekt" gestellt werden? Ich wäre für ein ganz einfach Beispiel dankbar.

                            Schönes Wochenende

                            1 Reply Last reply Reply Quote 0
                            • M
                              mickyboys last edited by

                              Gibt es eine leicht zu verstehende Uebersicht der moeglichen Befehle im CSS Bereich?

                              Zum Beispiel, woher weisst du das ui.Button richtig waere, sprich woher kennst du den Namen? Und wo finde ich Namen der anderen Widgets sodass CSS auch nur auf den angesprochen wird?

                              Fragen ueber Fragen…

                              Danke,

                              1 Reply Last reply Reply Quote 0
                              • htrecksler
                                htrecksler Forum Testing last edited by

                                https://www.w3schools.com/css/default.asp

                                Hier schau ich immer nach. Davon gibt es aber noch mehrere Seiten.

                                Aber das…
                                > woher weisst du das ui.Button richtig waere, sprich woher kennst du den Namen? Und wo finde ich Namen der anderen Widgets sodass CSS auch nur auf den angesprochen wird?
                                ist auch genau mein Problem 🙂

                                1 Reply Last reply Reply Quote 0
                                • M
                                  mickyboys last edited by

                                  Hi,

                                  Ich habe zumindestens eine Moeglichkeit gefunden, keine Ahnung ob dies so der Standart ist.

                                  Egal welches Widget du benutzt. Gebe ihm wenn du mit CSS etwas aendern willst einen Namen unter Widget Generell CSS Klasse. z.b. <u>Increment</u>

                                  Gebe unter CSS ein Projekt an und schreib in das leere Feld den Namen den du vorher in der CSS Klasse vergeben hattest.

                                  Nun sollten alle Aenderungen sich nur noch auf diese eine CSS Klasse beziehen. Natuerlich sollte dein Code mit <u>.Increment</u> anfangen.

                                  .Increment {
                                      background: transparent;
                                  }
                                  .Increment {
                                      border: transparent;
                                  }
                                  
                                  
                                  1 Reply Last reply Reply Quote 0
                                  • P
                                    Pman last edited by

                                    Genau so machst du es, wenn du gezielt ein oder mehrere Widgets ändern willst.

                                    Um ansonsten an die Klassen (in CSS mit "." davor) oder IDs (in CSS mit "#" davor) zu kommen, kann man die Debug-Tools der Browser verwenden.

                                    In Chrome wäre das: Rechtsklick auf ein Element-><u>Untersuchen</u>

                                    Das sieht dann in etwa so aus und man die Klassen / IDs usw. ablesen:
                                    422_chrome.png

                                    1 Reply Last reply Reply Quote 0
                                    • H
                                      Harry-IO-HM last edited by

                                      Ich will das Thema noch einmal aufwärmen.

                                      Mir geht es genau so - es gibt sehr sehr viele Widgets - einige mit vielen Konfigurationsmöglichkeiten und andere mit wenig.

                                      So z.B. hqwidgets On/Off - tolle Möglichkeit, unter der Kategorie "Stil" einen Änderungseffekt auszuwählen. Damit hat man bei einer Push-Button-Aktion ein schönes User-Feedback. Ich will ja wissen, ob ich mit meinem fetten Daumen die Taste getroffen habe oder nicht 😉

                                      Wie kann man diesen Änderungseffekt - ohne ein zweites Widget drunterzulegen- zum Beispiel beim Increment-Widget umsetzen?

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post

                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      708
                                      Online

                                      32.1k
                                      Users

                                      80.7k
                                      Topics

                                      1.3m
                                      Posts

                                      7
                                      17
                                      4075
                                      Loading More Posts
                                      • Oldest to Newest
                                      • Newest to Oldest
                                      • Most Votes
                                      Reply
                                      • Reply as topic
                                      Log in to reply
                                      Community
                                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                      The ioBroker Community 2014-2023
                                      logo