(GELÖST) DataType Link als INFOanzeige einstellen?

drhirn · 20 Februar 2018, 18:15:27

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:

Code Auswählen


<!DOCTYPE html>
<html>
<head>
....
    <link rel="stylesheet" href="fhem-tablet-ui-user.css" />
</head>

(der Pfad zur Datei wäre natürlich dementsprechend anzupassen)

misux · 20 Februar 2018, 19:08:28

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

misux · 21 Februar 2018, 10:00:09

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:

Code Auswählen

.roundborder-red {
    border: 2px solid red;
    border-radius: 17px;
}

.roundborder-grey {
    border: 2px solid grey;
    border-radius: 17px;
}

und so mein Index:

Code Auswählen

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

Code Auswählen

<link rel="stylesheet" href="/fhem/tablet/css/fhem-table-user.css" />

Wo hab ich denn nun einen Bock geschossen?

$:-\$

drhirn · 21 Februar 2018, 10:05:50

In der index.html.
Du musst die Widgets schon korrekt hin schreiben

Code Auswählen


<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

misux · 21 Februar 2018, 12:15:58

hammer wie lange ich den Fehler gesucht habe....

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

Code Auswählen

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

drhirn · 21 Februar 2018, 12:39:11

Ja, natürlich.
Zuerst muss das data-color="#aa6900" weg. Das ist falsch. Und dann ergänzt du einfach deinen style-Tag:

Code Auswählen

<div style="padding-top:30px !important; color:#aa6900;">TOR</div>

Edit: Zu spät gesehen wegen der Höhe.
Geht natürlich auch:

Code Auswählen

<div data-type="label" ... style="line-height: 4em;"></div>

misux · 21 Februar 2018, 14:25:17

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!

Code Auswählen

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

misux · 25 Februar 2018, 14:55:23

Hallöö, ich wieder!

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

Code Auswählen

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

Code Auswählen

.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;
}

drhirn · 25 Februar 2018, 18:26:00

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.

misux · 25 Februar 2018, 22:53:37

alles klaro! Danke!