Hallo!
Ich bin hier am verzweifeln...
Ich habe im Fhem einen Sensor der TOR heisst und den zustand open/closed hat.
Wie zaubere ich die beiden Zustände in ein Widget der so aussieht wie ein normaler Link?
Das ist mein Link Symbol
<div style="padding-top:30px !important">
<div data-type="link"
data-color="#aa6900"
data-border-color="#aa6900"
data-get="Testschalter" >
class="round">TOR OFFEN</div>
</div>
Nun versuche ich das ein so aussehendes Symbol den Text "TOR OFFEN" in ROT bei zustand Sensor "open" und wenn das Tor "closed" ist dann soll der Text "TOR GESCHLOSSEN" in GRAU sein.
Gibt es so eine Möglichkeit?
Vielen Dank!
In dem du das Label Widget (https://wiki.fhem.de/wiki/FTUI_Widget_Label) nimmst.
Das funktioniert nicht... Sobald ich "Label" setze ist die Formatierung hin und es steht nur der reine weise Test "TOR Offen da... Kein Schöner Rahmen drum und keine Farbe... und die Zustandsänderung zeigt er mir leider auch nicht an...
Naja, du musst den Code schon noch anpassen. Nicht einfach nur "label" statt "link" hinschreiben ;)
Außerdem fehlt in deinem obigen Code das data-device.
Habe es soweit und die Data Substitution will auch nicht recht...
<div data-type="label" class="round"
data-color="#aa6900"
data-border-color="#aa6900"
data-device="Testschalter"
data-get="Testschalter"
data-substitution='["open","TOR GEÖFFNET","closed","TOR GESCHLOSSEN"]'>Testschalter</div>
</div>
so langsam komme ich weiter....
<div data-type="label" class="round"
data-color="#aa6900"
data-border-color="#aa6900"
data-device="Testschalter"
data-get="state"
data-substitution='["on","TOR GEÖFFNET","off","TOR GESCHLOSSEN"]'>Testschalter</div>
</div>
Soweit funktioniert es... aber wie bekomme ich den schönen Rahmen um den Text wie es bei einem Link ist? und wie ändere ich die Farben bei den beiden Zuständen?
Vielen Dank!
Mit
data-limits='["on","off"]'
data-colors='["red","green"]'
Bzgl. Rahmen musst du tricksen und auf CSS zurückgreifen. Das geht anders leider nicht.
Also so z.B.:
<div data-type="label" .... style="border: blue 2px solid; border-radius: 17px;">
WOW!
COOL! Das ist schon sehr cool!
Kann man auch die Farbe des Rahmens dem Zustand entsprechend setzen? Offen ROT geschlossen GRAU z.b.?
so sieht der code jetzt aus falls es jemand auch braucht:
<div data-type="label" class="round"
data-type="label" .... style="border: #aa6900 2px solid; border-radius: 17px;"
data-color="#aa6900"
data-border-color="#aa6900"
data-device="Testschalter"
data-get="state"
data-substitution='["on","TOR GEÖFFNET","off","TOR GESCHLOSSEN"]'
data-limits='["on","off"]'
data-colors='["yellow","grey"]'
</div>
Ja, ginge mit dem Classchanger Widget (https://wiki.fhem.de/wiki/FTUI_Widget_Classchanger).
Da müsstest du in einer eigenen CSS-Datei (die dann natürlich auch einzubinden wäre) zwei neue Klassen definieren:
.roundborder-red {
border: 2px solid red;
border-radius: 17px;
}
.roundborder-blue {
border: 2px solid blue;
border-radius: 17px;
}
Und dann bettest du dein Label-Widget in das Classchanger-Widget ein (voher aber die style="..."-Geschichte wieder löschen):
<div data-type="classchanger" data-device="Testschalter" data-on-class="roundborder-red" data-off-class="roundborder-blue">
<div data-type="label" ....></div>
</div>
Aber, das wird langsam so kompliziert, dass ich mich frage, ob es nicht sinnvoller wäre, die Darstellung zu überdenken und mit z.B. dem Symbol-Widget zu arbeiten.
5
Zitat von: misux am 20 Februar 2018, 10:51:16
Hallo!
Ich bin hier am verzweifeln...
Ich habe im Fhem einen Sensor der TOR heisst und den zustand open/closed hat.
Wie zaubere ich die beiden Zustände in ein Widget der so aussieht wie ein normaler Link?
Das ist mein Link Symbol
<div style="padding-top:30px !important">
<div data-type="link"
data-color="#aa6900"
data-border-color="#aa6900"
data-get="Testschalter" >
class="round">TOR OFFEN</div>
</div>
Nun versuche ich das ein so aussehendes Symbol den Text "TOR OFFEN" in ROT bei zustand Sensor "open" und wenn das Tor "closed" ist dann soll der Text "TOR GESCHLOSSEN" in GRAU sein.
Gibt es so eine Möglichkeit?
Vielen Dank!
Duef dt gucken
Gesendet von meinem SM-G935F mit Tapatalk
Wie soll ich denn das verstehen??? :o
Zitat von: Bischemer am 20 Februar 2018, 13:01:49
5Duef dt gucken
Gesendet von meinem SM-G935F mit Tapatalk
Ich glaub, das war keine Absicht ;)
Werde mich dann nahher an den Classchanger dran machen... bin gespannt ob ich das hinbekomme..
VIELEN DANK SCHON MAL!!!
Zitat von: drhirn am 20 Februar 2018, 12:59:11
Ja, ginge mit dem Classchanger Widget (https://wiki.fhem.de/wiki/FTUI_Widget_Classchanger).
Da müsstest du in einer eigenen CSS-Datei (die dann natürlich auch einzubinden wäre) zwei neue Klassen definieren:
.roundborder-red {
border: 2px solid red;
border-radius: 17px;
}
.roundborder-blue {
border: 2px solid blue;
border-radius: 17px;
}
Ähm... moment... meinst du das ich eine CSS Datei erstellen muss und diese irgendwo implementieren? ::) das würde wirklich zu weit gehen... Hab nämlich keine Ahnung wovon du redest :-X :-[
Wenn das so ist dann kann ich ja aufhören den obigen Code in meine html reinzuquetschen damit es funktioniert... weil bis jetzt klappt es noch nicht :-X
Ja, meinte ich. Ist aber kein Problem. Du erstellst einfach eine Text-Datei fhem-table-ui-user.css (oder wie auch immer du sie nennst) im Ordner .../www/tablet/css (oder wo auch immer du sie haben möchtest). Die soll genau den Inhalt von oben haben. Also die zwei CSS-Klassen.
Und dann bindest du sie in deine index.html ein.
Sieht dann z.B. so aus:
<!DOCTYPE html>
<html>
<head>
....
<link rel="stylesheet" href="fhem-tablet-ui-user.css" />
</head>
(der Pfad zur Datei wäre natürlich dementsprechend anzupassen)
okayy... oh mann ich werd hier noch zum programmierer ::)
Krass vielen Dank für deine Geduld und Hilfe! Das ist sehr viel wert!
Werde es morgen vormittag angehen, hab jetzt leider keine Zeit dafür...
Hmmm.l. irgendwo ist der Wurm drin...
Bekomme bei "on" nur einen Roten Strich oben im "Kästchen" und bei "off" ist nix zu sehen...
So sieht die css Datei aus:
.roundborder-red {
border: 2px solid red;
border-radius: 17px;
}
.roundborder-grey {
border: 2px solid grey;
border-radius: 17px;
}
und so mein Index:
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="classchanger"
data-device="Testschalter"
data-on-class="roundborder-red"
data-off-class="roundborder-grey"
data-type="label"
data-color="#aa6900"
data-border-color="#aa6900"
data-device="Testschalter"
data-get="state"
data-substitution='["on","TOR GEÖFFNET","off","TOR GESCHLOSSEN"]'
data-limits='["on","off"]'
data-colors='["#FF0000","grey"]'
</div>
</div></li>
Die CSS habe ich eingefügt dort wo auch schon die anderen Stylesheets drin sind... <link rel="stylesheet" href="/fhem/tablet/css/fhem-table-user.css" />
Wo hab ich denn nun einen Bock geschossen? :-[ :-\
In der index.html.
Du musst die Widgets schon korrekt hin schreiben ;)
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="classchanger"
data-device="Testschalter"
data-on-class="roundborder-red"
data-off-class="roundborder-grey">
<div data-type="label"
data-color="#aa6900"
data-border-color="#aa6900"
data-device="Testschalter"
data-get="state"
data-substitution='["on","TOR GEÖFFNET","off","TOR GESCHLOSSEN"]'
data-limits='["on","off"]'
data-colors='["#FF0000","grey"]'></div>
</div>
</li>
Edit: Jetzt hab ich's auch falsch gemacht ;)
Edit2: Uhhh, das war Beitrag Nr. 666 8)
:o hammer wie lange ich den Fehler gesucht habe.... :-X
Aber es ist getan! Und es ist klasse!!! Habe noch eine Frage: Kann man den gesammten Text den ich seperat als Text einfach dazuschreibe, wie im Code data-color="#aa6900">TOR< in eine andere Farbe ändert? Weil so funktioniert es nicht... Ich meine im Prinzip die "Beschreibung" der Widgets?
Und die Höhe des runden Rahmens, kann man die etwas höher wählen? Im moment ist der Text darin sehr gequetcht...
Hier mein Fast fertiger Code...
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
<div style="padding-top:30px !important"
data-color="#aa6900">TOR</div>
<div style="padding-top:20px !important">
<div data-type="classchanger"
data-device="Testschalter"
data-on-class="roundborder-red"
data-off-class="roundborder-grey">
<div data-type="label"
data-color="#aa6900"
data-border-color="#aa6900"
data-device="Testschalter"
data-get="state"
data-substitution='["on","GEÖFFNET","off","GESCHLOSSEN"]'
data-limits='["on","off"]'
data-colors='["#FF0000","grey"]'></div>
</div>
Und der Grund für den ganzen Aufwand liegt natürlich am WAF (Woman acceptance factor). Es soll sehr schlicht sein und alles aufeinander abgestimmt und vor allem nicht stören wenn es immer an ist und NUR auffallen wenn eine Störung oder Alarm entsteht... ::) Was man nicht tut für die Frauen...
Ja, natürlich.
Zuerst muss das data-color="#aa6900" weg. Das ist falsch. Und dann ergänzt du einfach deinen style-Tag:
<div style="padding-top:30px !important; color:#aa6900;">TOR</div>
Edit: Zu spät gesehen wegen der Höhe.
Geht natürlich auch:
<div data-type="label" ... style="line-height: 4em;"></div>
;D ;D ;D ;D
DAS IST SUUPER!!!
VIELEN DANK FÜR DEINE MÜHE UND GEDULD!!!
Hier der komplette und fertige Code so wie es auch der Frau gefällt!
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1" class=bg-transparent>
<div style="padding-top:30px !important; color:#aa6900;">TOR</div>
<div style="padding-top:20px !important">
<div data-type="classchanger"
data-device="Testschalter"
data-on-class="roundborder-red"
data-off-class="roundborder-grey">
<div data-type="label"
style="line-height: 2em;"
data-color="#aa6900"
data-border-color="#aa6900"
data-device="Testschalter"
data-get="state"
data-substitution='["on","GEÖFFNET","off","GESCHLOSSEN"]'
data-limits='["on","off"]'
data-colors='["#FF0000","grey"]'></div>
</div>
</li>
Hallöö, ich wieder! ;D
Ich habe mit dem Code mehrere Fenstersensoren verbunden. Diese haben 4 Zustände: on, off, dimup, dimdown. diese sollen Tür auf/zu, Batterie schwach und Sabotage signalisieren... Mit dem Text passt alles nur bekomme ich den runden Rahmen nicht andersfarbig hin...
Iet es nicht möglich mehr als 2 Zustände bei dem Rahmen zu vergeben???
Bei Batterie und Sabotage bleibt der Rahmen grau...
Vielen Dank für die Hilfe!
hier der Code und die Css
<li data-row="5" data-col="1" data-sizex="1" data-sizey="1" class=bg-transparent>
<div style="padding-top:30px !important; color:#aa6900;">Terrassent r</div>
<div style="padding-top:20px !important">
<div data-type="classchanger"
data-device="TerrassenTuer"
data-on-class="roundborder-green"
data-off-class="roundborder-grey"
data-dimdown-class="roundborder-yellow"
data-dimup-class="roundborder-#FF0000">
<div data-type="label"
style="line-height: 2em;"
data-device="TerrassenTuer"
data-get="state"
data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
data-limits='["on","off","dimdown","dimup"]'
data-colors='["green","grey","yellow","#FF0000"]'></div>
</div>
</li>
.roundborder-red {
border: 3px solid red;
border-radius: 17px;
}
.roundborder-grey {
border: 3px solid grey;
border-radius: 17px;
}
.roundborder-green {
border: 3px solid green;
border-radius: 17px;
}
.roundborder-yellow {
border: 3px solid yellow;
border-radius: 17px;
}
.roundborder-#FF0000 {
border: 3px solid #FF0000;
border-radius: 17px;
}
Nein. Das Classchanger-Widget kennt nur die beiden Zustände. Wenn du mehr brauchst, nimm ein anderes Widget. Symbol hätte ich eh schon mal vorgeschlagen. Sieht dann halt anders aus.
alles klaro! Danke!