(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