(GELÖST) DataType Link als INFOanzeige einstellen?

[misux]

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

Code Auswählen Erweitern

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

[drhirn]

In dem du das Label Widget nimmst.

[misux]

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

[drhirn]

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.

[misux]

Habe es soweit und die Data Substitution will auch nicht recht...

Code Auswählen Erweitern

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


[misux]

so langsam komme ich weiter....

Code Auswählen Erweitern

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

[drhirn]

Mit

Code Auswählen Erweitern


data-limits='["on","off"]'
data-colors='["red","green"]'


Bzgl. Rahmen musst du tricksen und auf CSS zurückgreifen. Das geht anders leider nicht.

[drhirn]

Also so z.B.:

Code Auswählen Erweitern

<div data-type="label" .... style="border: blue 2px solid; border-radius: 17px;">

[misux]

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:

Code Auswählen Erweitern

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


[drhirn]

Ja, ginge mit dem Classchanger Widget.
Da müsstest du in einer eigenen CSS-Datei (die dann natürlich auch einzubinden wäre) zwei neue Klassen definieren:

Code Auswählen Erweitern


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

Code Auswählen Erweitern


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

[Bischemer]

5

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

Code Auswählen Erweitern

<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

[misux]

Wie soll ich denn das verstehen??? 

5Duef dt gucken

Gesendet von meinem SM-G935F mit Tapatalk

[drhirn]

Ich glaub, das war keine Absicht

[misux]

Werde mich dann nahher an den Classchanger dran machen... bin gespannt ob ich das hinbekomme..

VIELEN DANK SCHON MAL!!!

[misux]

Ja, ginge mit dem Classchanger Widget.
Da müsstest du in einer eigenen CSS-Datei (die dann natürlich auch einzubinden wäre) zwei neue Klassen definieren:

Code Auswählen Erweitern


.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

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 

[drhirn]

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 Erweitern


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

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]

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 Erweitern

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

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

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

Wo hab ich denn nun einen Bock geschossen? 

[drhirn]

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

Code Auswählen Erweitern


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

  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 Erweitern

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

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 Erweitern

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

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

[misux]

 

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 Erweitern

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

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 Erweitern

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

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

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]

alles klaro! Danke!