Animierte SVG-Icons für responsiven Floorplan

[DerJens]

Hallo zusammen,

ich möchte die Gelegenheit nutzen und ein Modul von meinem FHEM Projekt, an dem ich gerade arbeite, wieder zurück ins Forum zu spielen. Ich habe mich hier von den vielen interessanten Projekten inspirieren lassen, daher gilt mein Dank an all die kreativen Köpfe, die hier schon (Teil-)Lösungen vorgestellt haben.

Worum geht es?
Ich möchte über ein Tablet, das an der Wand hängt, meine vielen tollen Aktoren bedienen können. Das soll nicht nur funktionieren sondern auch anschaulich sein. Über die Gestaltung von Benutzeroberflächen kann man sicherlich viel diskutieren, ich habe mich für einen angepassten LCARS Stil entschieden. Der Grund ist einfach, dass es große, bunte Schaltflächen sind, die man gut mit den Fingern trifft. Ein weiterer Vorteil ist, dass der Aufwand für die Erstellung ziemlich gering ist, da die Elemente aus Rechtecken mit abgerundeten Ecken bestehen, auf denen Text platziert ist. Eine Schaltfläche, die z.B. einen Rolladen hochfährt, soll bei Aktivierung blinken, bis der Rolladen oben ist - damit es beeindruckend aussieht.

Warum SVG?
Ich habe zunächst mit einem Bildbearbeitungsprogramm und animierten GIF Grafiken gearbeitet. Das funktioniert, allerdings ist der Prozess ziemlich aufwendig, wenn man mal was ändern will. Ich habe mich daher für eine Lösung auf SVG Basis entschieden. Der Vorteil ist, dass die Grafiken so mit einem Texteditor oder sogar mit nano via ssh Verbindung erstellt oder angepasst werden können. Außerdem eignet sich der LCARS Stil prächtig für eine Umsetung in SVG.

Beispiel
Ich zeige hier als Beispiel EINE Schaltfläche, die ein Rollo hochfährt. Wenn ich die Schaltfläche antippe, fängt sie an zu blinken, bis der Rolladen hochgefahren ist und der Aktor das Erreichen seiner Endposition meldet. Ich habe dafür einen Eltako FSB61 benutzt, den ich mit einem Raspberry Pi und einem TCM USB Modul steuere. Das sollte allerdings auch mit anderen Komponenten ähnlich funktionieren.

Dummy erstellen
Ich habe die Schaltfläche mit einem Dummy realisiert. Der Vorteil ist, dass ich hier experimentieren kann, OHNE den Aktor anpassen zu müssen.

Code Auswählen Erweitern

define EgWzVisOpen dummy
attr EgWzVisOpen devStateIcon static:lcars_open_v1:active active:lcars_open_v1a:static
attr EgWzVisOpen setList active static
Kurz erklärt: Der Dummy wird zunächst angelegt. Mit setList definiere ich mir zwei Zustände, die die Schaltfläche annehmen kann. Mit devStateIcon weise ich den Zuständen unterschiedliche Bilddateien zu. Ist der Zustand static, wird das Bild lcars_open_v1 angezeigt. Wird es aktiviert, wechselt das Bild auf lcars_open_v1a und vice versa.

SVG
Ich brauche zwei unterschiedliche Grafiken: eine normale Schaltfläche und eine zweite, die angezeigt wird wenn die erste Schaltfläche aktiviert hat.

lcars_open_v1.svg

Code Auswählen Erweitern

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="60px" width="120px">
<g>
<rect x ="00" y ="00" width ="120" height ="60" rx ="0" ry ="0" fill="#9999ff"/>
<text x="110" y="50"  text-anchor="end" font-size="36" font-family="lcars" fill="#000000">OPEN</text>
</g>
</svg>


lcars_open_v1a.svg

Code Auswählen Erweitern

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="60px" width="200px">
<g>
<rect x ="00" y ="00" width ="120" height ="60" rx ="0" ry ="0" fill="#000000">
<set id="s1" attributeName="fill" attributeType="CSS" to="#000000" begin="0s; s2.end" dur="1s" fill="freeze"/>
    <set id="s2" attributeName="fill" attributeType="CSS" to="#9999ff" begin="s1.end" dur="1s" fill="freeze"/>
      </rect>
<text x="110" y="50"  text-anchor="end" font-size="36" font-family="lcars" fill="#000000">OPEN
<set id="s3" attributeName="fill" attributeType="CSS" to="#9999ff" begin="0s; s2.end" dur="1s" fill="freeze"/>
    <set id="s4" attributeName="fill" attributeType="CSS" to="#000000" begin="s1.end" dur="1s" fill="freeze"/>

</text>
</g>
</svg>


Die beiden Dateien gehören ins Verzeihnis fhem/www/images/...

Webfonts
Laut Internetquellen ist die Schriftart von LCARS Helvetica UltraCompressed. Die kostet erstens Geld und ist zweitens nicht auf meinem Tablet installiert. Es gibt allerdings eine freie Schriftart LCARSGTJ3, die man mit dem Webfont Generator von Font Squirrel in eine Webschriftart konvertieren kann. Diese wird dann beim Aufruf des Floorplans via CSS nachgeladen und kann dann ist SVG Grafiken verwendet werden.

• LCARSGTJ3 laden
• Die .ttf durch den Webfont Generator schicken und eine .zip erhalten
• Die .eot, .woff, .ttf und .svg ins fhem/www/images/... kopieren

Dann habe ich die CSS Datei, die für den Floorplan zuständig ist, mit folgendem Code erweitert:

Code Auswählen Erweitern

@font-face {
    font-family: 'lcars';
    src: url('/fhem/images/default/lcarsgtj3-webfont.eot');
    src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),
         url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),
         url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
    font-weight: normal;
    font-style: normal;
}


FHEM
Die fertige Schaltfläche legt man jetzt mit attr EgWzVisOpen fp_EgWzFp1 220,710,0, auf einen Floorplan. Die Werte müssen natürlich angepasst werden. Jetzt sollte es funktionieren, dass man die Schaltfläche ativieren kann. Daraufhin sollte sie anfangen zu blinken, so lange, bin man sie erneut aktiviert.

Jetzt soll natürlich auch noch der Aktor bedient werden. Dafür habe ich zunächst das devStateIcon geändert:

Code Auswählen Erweitern

attr EgWzVisOpen devStateIcon static:lcars_open_v1:active active:lcars_open_v1a
Der Grund ist, dass ich die Schaltfläche ja aktivieren will und sie dann so lange blinken soll, bis der Rolladen oben ist.
Dafür brauche ich ein notify, dass auf die Aktivierung der Schaltfläche reagiert und ein weiteres notify, welches mir die Schaltfläche wieder zurücksetzt, wenn der Rolladen oben ist.

Code Auswählen Erweitern

define EgWzVisOpenNtfyActive notify EgWzVisOpen:active set EnO_sensor_XYZ up;; sleep 1;; attr EgWzVisOpenNtfyStatic disable 0

Kurz erklärt: Definiere ein notify, das auf die Aktivierung der Schaltfläche hört. Dann soll nämlich der FSB61 bitte den Rolladen hochfahren. Der Trick ist jetzt, ein weiteres, bislang deaktiviertes notify zu aktivieren, das dann auf eine Statusmeldung des Aktors hört und die Schaltfläche wieder auf static schaltet, damit das Blinken aufhört. Danach deaktiviert sich dieses notify selbst. Das sleep musste ich einbauen, sonst gab es Probleme mit dem Timing.

Code Auswählen Erweitern

define EgWzVisOpenNtfyStatic notify EnO_sensor_0183F15F set EgWzVisOpen static;; attr EgWzVisOpenNtfyStatic disable 1
attr EgWzVisOpenNtfyStatic disable 1


Weitere Arbeiten
Ich habe weitere Schaltflächen definiert, die bestimmte Aktionen auslösen. Für die Rolläden gibt es z.B. Zu, 25%, 50%, 75%, Auf und Stopp. Auch den Status kann man mit dem LCARS Zeichensatz prima einbinden. Verteilt auf unterschiedlichen, verknüpften Floorplans plane ich z.B. eine Raumkontrolle, wo ich alle Aktoren eines bestimmten Raums sehen und steuern kann und verschiedene Sammelansichten, z.B. Status aller Fenster im Haus. Bedient wird über  ebay 50€ 7 Zoll Android Tablets, die an der Wand hängen. Ich habe noch ein Bild als Beispiel von meinem Prototypen angehängt.

Viel Spaß & liebe Grüße
DerJens

[micomat]

sieht echt super aus LCARS fand ich schon immer klasse!

[Starkstrombastler]

COOL!  -  Wie kann man erkennen, wo die Rollos stehen?

[DerJens]

Freut mich, wenn es auch anderen gefällt!
@Starkstrombastler: Für den Status der Rolladen ist der Platz neben dem Namen (nach dem gelben Trennbalken) reserviert. Eine genaue Position bekomme ich vom Aktor nicht, daher muss ich aus den Readings irgendwelche sinnvollen Aussagen ableiten. Mir schwebt da "geöffnet", "geschlossen" und "positioniert" (für irgendwas zwischen auf und zu) vor.

[Tion]

Werd ich auf alle Fälle mal ausprobieren 

[Bubbles71]

Hallo Jens,

Danke für Deine Inspiration

Ich habe versuche nun auch, Buttons zu animieren. Auf dem PC funktioniert alles schön (google chrome, firefox), auf dem Andoid tablet mit Full Screen Browser "WebViewControll" jedoch nicht. Da laufen keine Animationen.

Wie hast Du das auf dem Tablet gelöst?

Hier ein Beispiel meiner Grafik:

Code Auswählen Erweitern

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="40px" width="180px">
        <g>
                <rect x="45" y="0" width="135" height="40" fill="#9999FF" />
                <path d="m23,00 c-30,00 -30,40 00,40 h17 v-40 z" fill="#FF9966">
                  <animate attributeName="opacity" attributeType="CSS" begin="0" dur="2" values="0.5;1;0.5" repeatCount="indefinite" />
                </path>
        </g>
                <text x="175" y="34"  text-anchor="end" font-size="22" font-family="lcars" fill="#000001">Neonleuchte links</text>

</svg>

LG,

Roland

[DerJens]

Ich habe auf dem Tablet WebViewControl nicht ausprobiert. Bei mir auf dem Tablet habe ich Chrome für Android installiert und die Startseite vom Floorplan als WebApp Icon auf den Desktop gelegt. Dann startet Chrome die Seite ohne Navigationselemente im Vollbild.

Ich habe mich allerdings bei meinem Prototypen mittlerweile auf SVG-Schaltflächen beschränkt, die bei Aktivierung nur einmal kurz Blinken und nicht auf ein Zurücksetzen durch ein Notify angewiesen sind. Der Grund dafür ist, dass ich viel Zeit und Notifys spare. Auch habe ich gemerkt, dass meine Raspberry Pi Performance etwas leidet, das kann allerdings auch andere Ursachen haben.

Ich habe für Interessierte noch ein Bildschirmfoto von einem halbwegs vollständigen Raum angehängt. Kurze Erklärung:

• Room Control oben sagt, dass ich in der Raumsteuerung bin. Geplant sind auch Sammelansichten für Temperaturen, Rolläden usw., die haben dann andere tolle Bezeichnungen.
• Klein daneben steht der Raum, in dem man sich gerade befindet.
• Immer sichtbar ist die HOME Schaltfläche auf der linken Seite und führt auf eine Art allgemeine Startseite.
• ROOM ist eine Art Untermenü und führt zu einer Auswahlseite, wo ich mich in andere Räume schalten kann.
• STOP ist eine Sonderfunktion, die sollte gut erreichbar platziert werden und stoppt den Rolladen.
• Diverse Statusmeldungen habe ich für die erste Version einfach untereinander platziert und liefern Informationen über diverse Sensoren wie Temperatur, Zustand der Fenster usw.
• LED schaltet den Aktor einer LED Lichtleiste im Raum.
• LIGHT ist für den Dimmaktor zuständig. Ich habe gemerkt, dass ich Aufdimmen und Abdimmen gar nicht benutze und deshalb die Prozent-Voreinstellungen definiert, die ich  - wie ich gemerkt habe - sehr häufig benutze.
• SHUTTER bedient den Rolladen, hier ebenfalls mit Voreinstellungen.
• Unten aktualisiert FHEM die Ihrzeit. Braucht man nicht, da Android ja oben die Urhzeit anzeigt. Ist aber praktisch, da man damit erkennen kann, ob die Oberfläche durch FHEMs Longpoll aktualisiert wird oder es Verbindungsprobleme gibt.

Rückfragen gerne hier im Forum, damit alle was davon haben

[igami]

Hallo Jens,

aktuell versuche ich mich auch an den SVG Icons für einen Floorplan, tue mich aber noch etwas schwer mit den Rundungen.
Könntest du die SVG-Config von der oberen linken Ecke posten?

Vielen Dank und

Grüße
Igami

[DerJens]

...aber gerne:

Code Auswählen Erweitern

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="120px" width="180px">
<g>
<rect x ="00" y ="00" width ="250" height ="250" rx ="90" ry ="90" fill="#9999ff"/>
<rect x ="150" y ="60" width ="60" height ="60" rx ="30" ry ="30" fill="#000000"/>
<rect x ="150" y ="90" width ="30" height ="31" rx ="0" ry ="0" fill="#000000"/>
</g>
</svg>


Ein blaues Grundelement mit der großen Rundung (90), darauf mit schwarzer Farbe die innere kleine Rundung (30) und den Übergang nach unten mit einem schwarzen Rechteck. Zudem wird noch der Bildausschnitt (120x180) festgelegt, damit werden die überflüssigen Bereiche verdeckt.

[Gunther]

Hallo Jens,

das sieht ja phantastisch aus.

Ich habe meine Tablets mit einer selbst gebastelten HTML-Oberfläche ausgestattet.
Der große Nachteil ist, dass ich nur statische Buttons habe und keine Zustände darstellen kann.

Daher habe ich nun doch wieder nach floorplans geschaut und bin auf Deine Lösung gestoßen.

Meine Fragen dazu: So rudimentär, wie ich den Floorplan kenne, ist ja immer eine Verlinkung in die FHEM-Konfiguration da. Mich interessiert, wie Du diese unterdrückst.
Bist Du bereit den Floorplan, wie im letzten Screenshot hier, der Allgemeinheit einmal zur verfügung zu stellen?

[DerJens]

Hallo Gunther,

gerne kann ich weitere Informationen zur Verfügung stellen. Ich verstehe allerdings deinen Satz mit der unterdrückten FHEM Konfiguration nicht, daher müsstest du mir entweder deine Frage etwas verständlicher machen oder mir sagen, was genau du sehen bzw. verstehen möchtest. 

[Gunther]

Hallo Jens,

ich meine damit das Eingabefenster von FHEM (Befehlszeile) und das FHEM-Zeichen oben rechts.
Würde mich freuen auf Deiner Arbeit aufsetzen zu können.

Viele Grüße
Gunther

[DerJens]

Ich habe dir mal ein Bildschirmfoto von der Floorplankonfiguration und der zugehörigen Objektliste für den Raum aus #6 angehängt. Hilft das irgendwie weiter?

[sam50]

Hi
Tolles Projekt. Leider komme ich gerade mit einigen Problemen nicht weiter. Vielleicht könntest du mir ja ein paat Tips geben.
1. Wie bekommst du den gesamten Bildschirm im Hintergrund auf schwarz
2. Bei mir erscheinen einige der menüs nicht oder sind unsichtbar (zB Headlin oder Menü1-links) Stehen die im Hintergrund ?

Sorry bin in dem Bereich absoluter Neuling.
mfh Peter

[DerJens]

Hallo Peter,

für den schwarzen Hintergrund habe ich den CSS angepasst:

Code Auswählen Erweitern

nano /opt/fhem/www/pgm2/touchpadfloorplanstyle.css
und dann

Code Auswählen Erweitern

body { background-color:#000000; }
hinterlegen.

Für deine zweiten Frage brauch ich etwas mehr Infos - Was genau erscheint nicht?
Mögliche Antworten:
- Du musst natürlich jedes Element auf dem Floorplan vorher definieren oder statisch auf ein Hintergrundbild zeichnen.
- Wenn sich Elemente überdecken, kann man im CSS die Reihenfolge der Ebenen mit dem z-index festlegen.
- Vielleicht ein set WEB rereadicons vergessen?

Liebe Grüße
DerJens