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

                            790
                            Online

                            32.1k
                            Users

                            80.7k
                            Topics

                            1.3m
                            Posts

                            7
                            17
                            4080
                            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