webCmd - ich möchte einen button

[wkarl]

Hallo in die Runde,

definiert man ein

Code Auswählen Erweitern

attr <whatever> webCmd test01:test02
sieht das ähnlich wie im ersten screenshot aus. Nicht so richtig intuitiv (WAF).
Jetzt habe ich dies folgend ergänzt

Code Auswählen Erweitern

attr <whatever> webCmd <button>test01</button>:test02
Es wird nun ein Button dargestellt, allerdings ist der Text sehr klein. Ein Versich mit style zu beeinflussen, scheitert vermutlich am ':' in den Formatierungsanweisungen.
Hat jemand eine Idee?

ciao walter

[rudolfkoenig]

Du kannst table#TYPE=XXX div.col3 im .css nach belieben umgestalten.

[Elektrolurch]

Hallo,

ich bin erstaunt:

attr <whatever> webCmd <button>test01</button>:test02

Ich wusste nicht, dass da auch html-Code geht. In der commandref steht dazu auch nichts.

Ich bin da mit html nicht so firm, aber was müsste ich machen, um statt eines html-Standard-Buttons ein klickbares Ikon zu bekommen?

Gruß

Elektrolurch

[rudolfkoenig]

Ich wusste nicht, dass da auch html-Code geht.

Geht auch nicht, es schaut nur so aus.

[wkarl]

Habe es jetzt soweit verstanden.
Dank dem Hinweis von Rudi, etwas googeln und den Entwicklertools von Chrome.

Testweise steht jetzt in style.css

Code Auswählen Erweitern

table#TYPE_Buero_TempProfil div.col3 { display:block;text-align:center;border-style:ridge;border-width:medium; }
table#TYPE_Buero_TempProfil div.col3:hover { color:grey;background-color:blue;}
Sieht dann wie im screenshot aus. Nicht so ganz sexy, aber wir haben ja gleich Wochenende. Allein color:grey scheint sich nicht auszuwirken.

Dann noch eine Frage, wird style.css beim update überschrieben? Wenn ja, gibt es ausser ein backup zu haben eine Alternative?

Danke und ciao
walter

[Mitch]

Ich bin da mit html nicht so firm, aber was müsste ich machen, um statt eines html-Standard-Buttons ein klickbares Ikon zu bekommen?

Gruß

Elektrolurch

Mit devStateIcon

z.B.

Code Auswählen Erweitern

attr <Device> devStateIcon An:icon Aus:icon

[rudolfkoenig]

wird style.css beim update überschrieben?

Ja.

Als Loesung empfehle ich ein eigenes style (z.Bsp.: mydarkstyle.css), und als erste Zeile ein

@import url("darkstyle.css");

Das geht leider wg. einer FHEMWEB Eigenheit fuer das default style.css nicht, hier muss man die komplette style.css kopieren. Ist aber nicht so gross, da das meiste in defaultCommon.css gemacht wird. Achtung: die neue Datei muss in style.css enden, sonst taucht es nicht in der select style list auf.

P.S. grey vs. gray?

[wkarl]

P.S. grey vs. gray?

Beiss => Tisch 

in mydarkstyle.css ist dann auch defaultCommon.css zu laden?

[Elektrolurch]

Zitat:
attr <Device> devStateIcon An:icon Aus:icon

Das kenne ich. Es geht darum, mehrere icons zu haben.

Dafür wäre ev. eine Erweiterung von setList (wie um slider oder Menüs) ev. sinnvoll:

setList einfahren:icon,<iconname1> ausfahren:icon,<icon2>
icon1 und icon2 sind Namen von icons.

"icon" ist das Schlüsselwort (wie slider)

Dann hätte man mit

webCmd einfahren:ausfahren

Zwei icons (statt zweier Links), die "einfahren" und "ausfahren" (bspw.) an das device senden.

Wäre meiner Meinung nach sinnvoll für alles, was mehrere Zustände haben kann.

Gruß

Elektrolurch

[Mitch]

Aber genau das macht doch devStateIcon?

Ich habe z.B. zwei Icons für meine Markise. Eines für Rein und eines für Raus. beide sind klickbar.

[wkarl]

Hallo Elektrolurch,

da wirst Du aktuell um readingsGroup nicht herumkommen. Ich habe mir ähnliches für meine Rollläden gebastelt. Für jeden Rollladen von links nach rechts: Rollladen öffnen, Rollladen auf 20%, Rollladen auf 80%, Rollladen schließen, Rollladen stop.

Code Auswählen Erweitern

define Rollladen readingsGroup <%fts_shutter_updown@darkblue>,<Status>,<>,<>,<>,<>,<>,<>,<>,<>,<>,<> (Badezimmer_RL|Wohnzimmer_RL_(Teich|Terasse)):state,<>,<%fts_shutter_00@grey>,<>,<%fts_shutter_20@grey>,<>,<%fts_shutter_70@grey>,<>,<%fts_shutter_100@grey>,<>,<%rc_RED@red>
attr Rollladen commands { 'Rollladen.fts_shutter_00@grey' => 'set $DEVICE off', 'Rollladen.fts_shutter_20@grey' => 'set $DEVICE pct 80', 'Rollladen.fts_shutter_70@grey' => 'set $DEVICE pct 30', 'Rollladen.fts_shutter_100@grey' => 'set $DEVICE on', 'Rollladen.rc_RED@red' => 'set $DEVICE stop' }
attr Rollladen fp_H_DV_RolloMarkiseDeko 200,150,0,
attr Rollladen mapping { 'Badezimmer_RL' => 'Badezimmer', 'Wohnzimmer_RL_Teich' => 'Wohnzimmer_Teich', 'Wohnzimmer_RL_Terasse' => 'Wohnzimmer_Terasse' }
attr Rollladen nameStyle style=color:darkblue;;font-weight:bold;;text-align:center
attr Rollladen notime 1
attr Rollladen room HausGarten,Z-HA-FloorPlans
attr Rollladen valueFormat { 'state' => "%.0f %%" }


ciao walter

[Elektrolurch]

Hallo Walter,

mit readingsGroup gehts natürlich. Danke für das Beispiel. Ich habe aber 6 Räume mit Rolladen und müsste dann für jeden Raum eine rg definieren.
Einfacher wäre eine Erweiterung des Attributes webCmd. Leider, oder ich habe da was übersehen, kann das ja keine icons, sondern nur Links und über setList textField, colorpicker und Menüs.

Eigentlich ist für eine Erweiterung von setList um "icon" in der fhemweb ja alles vorhanden (devStateIcon). Man müsste die Teile nur zusammelnsammeln... Aber leider blicke ich da mangels Kommentare noch nicht so ganz durch.

Gruß

Elektrolurch

[wkarl]

Hallo Elektrolurch,

nach über zwei Jahren fhem und mit dem Kennenlernen von readingsGroup wollte ich auch zuerst raumbasiert alles darstellen. Letztendlich finde ich für mich die Gerätetypbasierende Darstellung optimaler. Es gibt für jedes Geschoss eine Übersicht der Heizkörper und Fussbodenheizung. Eine Übersicht aller Rollläden, Markisen, DekoLichter, Gartenbeleuchtung. Und eine Übersicht aller kritischen Alarme wie Temperaturen der Gefriertruhen, Wassermelder im Keller, etc - dies ist die Home-Page. Alles mit Floorplan und readingsGroup.
Die erste GUI Variante, die nicht von meinen Mädchens mit einem Blick des Mitleids abgelehnt wurde

ciao walter

[wkarl]

Hallo,

jetzt habe ich mich mal länger mit CSS gespielt und habe für mich ein zufriedenstellendes Ergebnis.

Code Auswählen Erweitern

table#TYPE_Buero_TempProfil div.col3 {
    display:block;
    text-align:center;
    border-style:ridge;
    border-color:gray;
    border-radius:3px;
    border-width:2px;
    background-color:white;
    width:90%;
    height:110%;
    }

table#TYPE_Buero_TempProfil div.col3:hover {
    background-color:lightgray;
    }


Das Problem, dass ich jetzt noch habe es gibt TempProfile für weitere Räume. Google sagt man kann regex auch mit CSS verwenden. Mit den Beispielen, die ich gefunden habe konnte ich bisher keine Lösung finden.
Wie bekomme ich es hin, dass die settings für alle table#... gelten, die auf TempProfil enden?

Danke und ciao
walter

[fiedel]

Hi Walter,

jetzt habe ich mich mal länger mit CSS gespielt

wie hast du das gemacht? Mein Weg geht immer über "F12" (Firebug oder Chrome Entwicklertool). Damit kannst du sehr gut die CSS- Zusammenhänge erkennen und Änderungen gefahrlos vortesten. Eine kleine Anleitung dazu habe ich vor längerer Zeit mal hier im Forum gepostet.

Gruß

Frank

[rudolfkoenig]

Code Auswählen Erweitern

table[id$=TempProfil] div.col3 {
...
Neben $= (Attribut muss so enden), gibts auch ^= (Anfang), *= (irgendwo vorhanden), = (genau).
Danke fuer die Frage, habe was dazugelernt

[rudolfkoenig]

Um das Styling einfacher zu machen, gibt es ab sofort ein CssFiles Attribut, um die eigenen Styles einzufuegen:

Code Auswählen Erweitern

attr WEB CssFiles pgm2/mystyle.css

Damit entfaellt das Kopieren / @include der "original" .css Dateien, wie ich es vorher beschrieben habe.

[wkarl]

Hallo Frank,

'spielen' bedeutet bei mir mit Chrome Developer tools. Aber wie prüfe ich hier den Selector?

ciao walter

[wkarl]

Danke Martin,

für den Hinweis und für das neue Attribut. Mit

Code Auswählen Erweitern

table[id$=TempProfil] div.col3 {
    display:block;
    text-align:center;
    border-style:ridge;
    border-color:gray;
    border-radius:3px;
    border-width:2px;
    background-color:white;
    width:90%;
    height:110%;
    }

table[id$=TempProfil] div.col3:hover {
    background-color:lightgray;
    }

werden die links nun als Buttons angezeigt.

ciao walter