Button der Farbe ändert

bergjet

@oliverio Ich kann den Lösungsweg mit CSS nicht einschlagen, weil ich davon keine Ahnung habe.

Thomas Braun

Guckstu:
https://wiki.selfhtml.org/wiki/CSS
http://www.ich-lerne-css.de/Style/Examples/011/firstcss/

Homoran

@bergjet sagte in Button der Farbe ändert:

Das Problem ist, dass bei mir nicht ersichtlich ist, ob der Button gedrückt wurde.

wenn der Button den Zustand des DP anzeigt, und du ein boolsches Widget dafür nimmst, ändert sich bei korrekter Konfiguration die Farbe und/oder das icon

OliverIO

@bergjet

Eigentlich habe ich die Lösung oben schon fast komplett beschrieben.
Zum Zeitpunkt meiner Antwort waren noch ein paar Fragen offen die leider noch nicht beantwortet wurden

Ich müsste wissen für was für Widget du dich entschieden hast und welche Farbe die Knopf Schaltflächen beim drücken haben soll

Dann bekommst du fast copy Paste fähig eine Lösung

BananaJoe

@bergjet so etwas?

Habe ich mehrfach mit einem Inventwo-Widget (jedes andere Switch-Widget geht auch) + einem Blockly gelöst:

Das Blockly triggert auf einen eigenen Datenpunkt für den Button,
setzt wenn dieser auf auf Wahr wechselt zunächst mit Verzögerung - hier 750ms - den Status wieder auf Falsch und führt die eigentliche Aktion durch

Der Vorteil ist das man die "Aufblitzzeit" anpassen kann, am besten mit einer Variablen so das man die schnell für alles ändern kann. Mir persönlich waren die 750ms am liebsten.

bergjet

@bananajoe sagte in Button der Farbe ändert:

so etwas?

Ja, so sollte es aussehen. Ist halt etwas aufwendig.

bergjet

@oliverio Ich verwende das Widget Button State.
Am Mac Bildschirm wird mir das so wiedergegeben wie es sein soll. Es ist deutlich zu sehen, wann der Button gedrückt ist (er verändert seine Farbe). Am iPhone und am Tablet ist das nicht zu sehen.
Also:
Button State
sendet true an einen selbst erstellten Datenpunkt
Farbe in Ruhe blau
Farbe gedrückt grün (es genügt, wenn die Farbe für 500ms grün aufleuchtet)

Homoran

@bergjet sagte in Button der Farbe ändert:

es genügt, wenn die Farbe für 500ms grün aufleuchtet

das ist ganz etwas anderes als

@bergjet sagte in Button der Farbe ändert:

Farbe in Ruhe blau
Farbe gedrückt grün

Dieses ist das Standardverhalten
wobei mir
@bergjet sagte in Button der Farbe ändert:

Button State

nichts sagt. Aber es scheint ja auch bei dir zu funktionieren

@bergjet sagte in Button der Farbe ändert:

Am Mac Bildschirm wird mir das so wiedergegeben wie es sein soll.

für ersteres wurden dir mehrere Möglichkeiten genannt.

Warum kommen immer neue Informationen?
So etwas gehört in den Eröffnungspost mit allen Fakten und "Beweisen".

Ständiges Nachbessern -oft erst auf Nachfrage- ist nicht wirklich hilfreich!

ich glaube den folgenden Link habe ich dir schon mal gepostet
https://forum.iobroker.net/topic/51555/hinweise-für-gute-forenbeiträge/1

Bitte lesen und in Zukunft befolgen!

OliverIO

@bergjet sagte in Button der Farbe ändert:

@oliverio Ich verwende das Widget Button State.
Am Mac Bildschirm wird mir das so wiedergegeben wie es sein soll. Es ist deutlich zu sehen, wann der Button gedrückt ist (er verändert seine Farbe). Am iPhone und am Tablet ist das nicht zu sehen.
Also:
Button State
sendet true an einen selbst erstellten Datenpunkt
Farbe in Ruhe blau
Farbe gedrückt grün (es genügt, wenn die Farbe für 500ms grün aufleuchtet)

Das widget war etwas zickig, da schon relativ viel für das design vordefiniert ist
das w00001 musst du durch die widgetnummer deines widgets ersetzen
die farben blue, green für hintergrund und white für die textfarbe kannst du beliebig auch mit der #000000 farbnotation ersetzen. den code findest du bspw über dieses tool heraus
https://www.rapidtables.com/web/color/color-picker.html

#w00001 button.ui-state-default {
    background-color: blue;
    background-image: none;
    color: white;
}
#w00001 button:active.ui-state-default {
    background-color: green;
    background-image: none;
    color: white;
}

die anforderung mit 500ms nachleuchten lässt sich mit reinem css nicht umsetzen, da benötigt man noch javascript code dazu.
ich schau mal ob ich dir da auch was bastle

OliverIO

@bergjet

hier noch die Lösung mit der Zeitverzögerung

prüfen ob du die funktion waitforelement bereits im javascript reiter verwendest. wenn ja, dann nicht hinzufügen

function waitForElement(parent, elementPath, wid, widgetName, callBack, counter = 0, debug = false) {
        if (counter < 100) {
 
            setTimeout(function () {
                if (parent.find(elementPath).length > 0) {
                    if (debug) console.log(`[${widgetName} ${wid}] it took ${counter}ms to wait for the element '${elementPath}'`);
                    callBack();
                } else {
                    if (debug) console.log(`[${widgetName} ${wid}] wait for element '${elementPath}'`);
                    counter++
                    waitForElement(parent, elementPath, wid, widgetName, callBack, counter, debug);
                }
            }, 1);
        } else {
           if (debug) console.warn(`[${widgetName} ${wid}] stop waiting after ${counter} retries`);
            callBack();
        }
    }

dann das folgende ebenfalls im javascript reiter hinzufügen.
am besten ganz unten und eine leerzeile lassen

waitForElement($('body'),'#w00001', 'dummy', 'dummy', function () {

    $("#w00001 button").on("click", function(){
        if(!$("#w00001 button").hasClass("anim")) {
            $(this).addClass("anim");
            setTimeout('$("#w00001 button").removeClass("anim");', 500);
        }
    });

 }, 0, true);

wie gehabt w00001 mit der widget id austauschen.
wenn man die zeit vergrößern möchte, dann im javascript die zahl 500 (=500ms = 0.5 sekunden) erhöhen.

leider muss man das für jeden knopf wiederholen, da man aufgrund des aufbaus von vis. das ändert dort aber sicherlich niemand mehr

im css reiter muss man folgendes eintragen

 #w00001 button.ui-button {
    background-color: blue;
    background-image: none;
    color: white;
}
 #w00001 .anim.ui-state-default {
    background-color: green !important;
    background-image: none !important;
    color: white;
}

achja, da die clicks im edit mode von vis nicht funktionieren, läuft das nur im runtime mode

bergjet

@oliverio Danke vielmals. Funktioniert hervorragend und hat den Vorteil, ich kann das für meine bestehenden Buttons leicht anpassen.
Die Zeitverzögerung brauche ich nicht wirklich, trotzdem danke.
Die Farben sind nun auch am iPhone und iPad in der Vis-Runtime Ansicht zu sehen und man kann erkennen, wenn der Button gedrückt wird.
Für 3 Buttons füge ich das 3 mal hinzu, wobei ich jeweils die ID des betreffenden Buttons eingebe?

OliverIO

@bergjet
ja, zur vereinfachung kannst du es auch so machen.
weitere widgets einfach mit komma getrennt hinzufügen.
die beiden einträge in der 2.css klasse kann man auch streichen.

#w00001 button.ui-state-default, 
#w00002 button.ui-state-default
{
    background-color: blue;
    background-image: none;
    color: white;
}
#w00001 button:active.ui-state-default,
#w00002 button:active.ui-state-default
{
    background-color: green;
}

Codierknecht

@oliverio
Man könnte das Ganze auch für eine ganz bestimmte CSS-Klasse definieren und dann allen Buttons in der Vis die sich so verhalten sollen diese Klasse verpassen.
Das sollte sogar mit Multiselect gehen.

OliverIO

@codierknecht
Leider nein. Wenn du eine Lösung findest super.
https://github.com/ioBroker/ioBroker.vis/issues/696

Das hatte ich versucht und deswegen auch geschrieben das das Widget zickig ist. Eigentlich ist es vis und die Art wie die css klassen für eine view individualisiert werden

oweitman created this issue in ioBroker/ioBroker.vis

closed vis, css and the specifity of css classes #696

Codierknecht

@oliverio
Also bei mir funzt das wie erwartet.
Einstellung am Button:

Und schon wechselt der beim Klick fein seine Farbe.
Oder habe ich das falsch verstanden?

button-click.mp4

OliverIO

@codierknecht

und wie sieht dein css aus?
das setzen der css klasse funktioniert bei mir auch.
aber bei button state kommt die regel nicht durch, da sie durch andere regeln überpriorisiert werden.

mach bitte mal komplettes beispiel wenn es bei dir funktioniert

Codierknecht

@oliverio
Ups, hätte ich ja auch gleich mal dazupacken können - sorry.

.vis-button button.ui-state-default {
    background-color: blue;
    background-image: none;
    color: white;
}


.vis-button button.ui-state-default:active {
    background-color: green;
    color: red;
}

2023-04-07-main.zip

Codierknecht

@oliverio sagte in Button der Farbe ändert:

aber bei button state kommt die regel nicht durch, da sie durch andere regeln überpriorisiert werden.

Kannst Du das nicht mit !important erzwingen?

OliverIO

@codierknecht

ne klappt nicht.
markiert habe ich das button element.
du siehst die css regel (unterer roter rahmen) wird durch eine regel von vis/jqui (oberer roter rahmen) überschrieben, da diese einen id enthält (also mit #visview_test) und deine regel nur einen klassennamen. id hat prio über klassennamen.

wie sieht das bei dir aus? du hast ja kein important verwendet?

mit important funktioniert es. hm hab ich wohl in der kombination nicht probiert.

dennoch wäre es besser wenn vis bei den css regeln sich nicht auf den id des containers, sondern nur auf einen css-namen des containers beziehen würde. dann hätte man die chance mit normalen regeln das design zu beeinflussen

Codierknecht

@oliverio sagte in Button der Farbe ändert:

wie sieht das bei dir aus? du hast ja kein important verwendet?

Nö - ist ja nur meine Testkiste - da ist nix weiter drauf.

ID sticht Klasse - stimmt.
Aber wenn's dann mit !important läuft ... um so besser

NEWS