New FHEM Tablet UI

[setstate]

Hallo jual,

toll was du gezaubert hast und hier auch so ausführlich erklärst!!!
Ich hoffe, ich darf den Code auch bei Github als Example zentral für alle ablegen ...

Aber setreadings geht auch zu machen: mit data-cmd
data-cmd steht default auf set wenn man es nicht explizit angibt. Man kann es aber auch überschreiben mit data-cmd="setreading" oder data-cmd="trigger"

[jual]

Danke für den Hinweis zu data-cmd. Den Test damit hatte ich irgendwie völlig vergessen und mir war aus der ersten "Doku" zu select nicht ganz klar, dass die auch für select funktioniert.

Natürlich kannst du den Code gerne als Beispiel verwenden.

[Brockmann]

Hierbei handelt es sich um eine Seite, auf der meinei Sonos Player und die TV Anlage gesteuert werden können.

Ich frage mich nur, was ist die "Playliste Nachbarn"?

Death Metal in voller Lautstärke? 

[Sky]

Hallo ,
ich bekomme einfach die Anordnung nicht in einer Reihe



<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
        <header>Anwesend</header>
    <div class="container">
        <div class="left">
               
            <div data-type="symbol" data-device="Rosi"
                data-icon="fa-user"
                data-on-color="orange"
                data-get-on="present"
                data-get-off="absent"
                class="narrow"></div>
             <div data-type="label" class="narrow darker small">Rosi</div>
       </div>
      <div class="center">
         <div data-type="symbol" data-device="Alina"
                data-icon="fa-user"
                data-on-color="orange"
                data-get-on="present"
                data-get-off="absent"
                class="narrow"></div>
             <div data-type="label" class="narrow darker small">Alina</div>
         </div>
       <div class="right">
            
            <div data-type="symbol" data-device="Wolf"
                data-icon="fa-user"
                data-on-color="orange"
                data-get-on="present"
                data-get-off="absent"
                class="narrow"></div>
            <div data-type="label" class="narrow darker small">Wolf</div>
      </div>
    </div>
</li>

[miot]

Hallo sky.

Zur Info: Es gibt keine Klasse 'center' und center geht auch nicht mit float.
Versuch's damit:

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<header>Anwesend</header>
    <div class="container inline">
            <div data-type="symbol" data-device="Rosi"
                data-icon="fa-user"
                data-on-color="orange"
                data-get-on="present"
                data-get-off="absent"
                class="narrow"></div>
             <div data-type="label" class="narrow darker small">Rosi</div>
</div>

<div class="container inline">
         <div data-type="symbol" data-device="Alina"
                data-icon="fa-user"
                data-on-color="orange"
                data-get-on="present"
                data-get-off="absent"
                class="narrow"></div>
             <div data-type="label" class="narrow darker small">Alina</div>
</div>
<div class="container inline">
            <div data-type="symbol" data-device="Wolf"
                data-icon="fa-user"
                data-on-color="orange"
                data-get-on="present"
                data-get-off="absent"
                class="narrow"></div>
            <div data-type="label" class="narrow darker small">Wolf</div>
    </div>
</li>



[setstate]

Class 'center' gibt es nicht im css file. Du kannst aber auch drei Mal 'left' benutzen, dann hängen alle hintereinander.
Oder auch nur 'cell' müsste gehen.

[Sky]

Danke,
werde es heute Abend ausprobieren

[Phil__]

Hallo,

1.)
Gibt es nur die Font Awesome Icons oder auch andere?
Bzw. wie kann man weitere Icons nutzen?

2.) Kann ich einen Text/label durch ein beliebiges Bild ersetzen. Denke da bei den Benzinpreisen den Namen "Shell" durch das Shell logo zu ersetzen?

Viele Grüße

[setstate]

Hallo Phil__,
Zu1.: weitere IconFont sind in Planung. Ich weiß nur noch nicht genau welcher die meisten sinnvollen Erweiterungen bringt. Hier gibt es einige interessante: http://www.weloveiconfonts.com
Zu2.: Schau mal in der Readme bei Image Widget, damit kann man Bilder oder Icons anzeigen lassen.

[setstate]

@jual,
Bei deiner Sonos Seite sind mir die Anzeigen für die aktuellen Titel noch aufgefallen. Willst du die noch anderes machen? Den Status braucht man ja nicht in dieser Zeile. Man könnte da mit RegEx arbeiten und nur den interessanten Teil für die Anzeige rausfiltern.

[Wegwerf]

Als erstes muss ich echt sagen, das ist die Interfacelösung die FHEM fehlte. Geniale Arbeit!

@setstate
Wie wäre es wenn man mit  https://icomoon.io/app/ per Upload aus den ganzen bereits in FHEM vorhandenen SVGs (openautomation, fhemSVG) einfach einen eigenen Font baut und diesen einbindet? Dadurch sollten doch etliche Iconwünsche erschlagen werden.

[Phil__]

Als erstes muss ich echt sagen, das ist die Interfacelösung die FHEM fehlte. Geniale Arbeit!

@setstate
Wie wäre es wenn man mit  https://icomoon.io/app/ per Upload aus den ganzen bereits in FHEM vorhandenen SVGs (openautomation, fhemSVG) einfach einen eigenen Font baut und diesen einbindet? Dadurch sollten doch etliche Iconwünsche erschlagen werden.

Genau das war auch mein Gedanke!
Denn bis jetzt vermisse ich so ziemlich alle Icons der Typischen Hausautomation die in Fhem (Fhem, Openautomation) vorhanden sind!

@setstate: Das ist wirklich das genialsten Fhem Frontend und es ermöglicht unendlich Möglichkeiten!
Ist das mit den Icons umsetzbar?

Grüsse

[setstate]

Hallo ihr Icon-Sucher.
Technisch ist das bestimmt machbar und vllt. findet sich auch jemand der einige SVG Images konvertiert, aber ich habe definitiv keine Zeit dazu, bzw. ich möchte mir die Zeit dazu nicht nehmen, da ich definitiv nicht vorhabe, diese infantilen Strichzeichnungen auf meinen Wandtablet zu nutzen . (Sorry für meine harsche Antwort, aber bei mir zieht sich da immer irgendein Geschmacksnerv zusammen)  Oder von welchen Icons sprecht ihr? Diese hier, die man links sieht? http://fhem.de/SmartVisu.png
Die fertigen free IcoMoon Icons, die ich gesehen habe, kann ich gerne einbinden, die passen besser vom Stil her.  Ich glaube auch nicht, dass jeder Raum sein detailiertes, determiniertes Symbol braucht. Minimalistisch abstrakt ist öfters übersichtlicher.  Fertige Fonts binde  ich aber gerne noch ein, wenn sie als Icon Font vorliegen, das ist schnell gemacht.

[chris1284]

anbei das openautomation font-pakage. classprefix ist "oa-" gewählt
ich hoffe es ist alles richtig

[chris1284]

und fhem svg
classprefix ist "fs-" gewählt