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

[sam50]

Hi
Ich habe jetzt das Problem wenn ich ein Rechteck als Rahmen benutze und meine Buttons darauf platziere liegen dann meine Buttons hinter dem Rechteck und lassen sich nicht mehr bedienen.

Als Floorplan nutze ich nun fogenden

/* Author: svenson08*/
body { background-color: white;}

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

Ich habe nun meinen schwarzen Hintergrund.
Ich teste das mal weiter und melde mich wenn ich weitere Fragen habe.

[DerJens]

Du kannst jedes Element auf dem Floorplan im CSS über einen DIV-Tag erreichen. Eine Änderung auf der z-Ebene machst du dann via z-index.
Beispiel:

Code Auswählen Erweitern

#div-EgKzi2VisTemperatureProxy {z-index: 1}
Elemente mit höherem Wert überdecken dabei Elemente mit niedrigerem.

Den Namen findest du z.B. in Chrome über einen Rechtsklick auf ein Element und dann "Element untersuchen".

[sam50]

Hallo Miteinander
Habe es geschafft !!! 
Dank Eurer Hilfe ist es mir gelungen eine Handy Webseite für meine Familie zu gestalten.
Vielen Dank nochmal für Eure Unterstützung !!!!!
Habe ein Bild der jetzigen Seite angehängt

[RalphGrad]

Hallo Der Jens,

ich hab eine Frage an Dich.
In deinem Post #12 hast Du die Bilder, wahrscheinlich svg, in den ..leftmenu.. .
Wie hast Du die Bilder angeordnet, und wie bindest Du diese in Floorplan ein?

Ich hab deinen animierten Button nachgebaut, aber hab noch Probleme damit.
Im IE stimmt die richtige Größe, das blinken funktioniert nicht.
in Firefox und Chrome funktioniert das blinken, aber die Größe stimmt nicht, und es wird auch kein Text angezeigt.

Ich wünsche Dir schöne Weihnachten und hoffe Du kannst mit helfen.

Viele Grüße

Ralph

[hotwebnet]

Hallo, ich möchte gerne ein WEBapp Icon auf meinem Android Pad erstellen............bekomme es aber leider nicht hin.........ich komme zwar zur Internetseite mit dem Link aber nicht im Full Bild.........

Ich habe es so gemacht............
bin im Chrome bis zum floorplan gegangen.......dann oben rechts auf die drei punkte.........
und nun zur startbildschirm hinzufügen.....
nun habe ich ein icon auf dem desktop........wenn ich es starte geht er zum floorplan aber nicht im vollmodus.........

[DerJens]

Damit der Browser im Vollbild startet, muss bei Android

Code Auswählen Erweitern

<meta name="mobile-web-app-capable" content="yes"/> und bei Apple

Code Auswählen Erweitern

<meta name="apple-mobile-web-app-capable" content="yes"/> gesetzt werden.
Ein weiterer Eintrag verhindert, dass man (versehentlich) das sorgfältig auf den Touchscreen angepasste Menü via Geste in der Größe ändern kann:

Code Auswählen Erweitern

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

Ich kann mich nur gerade nicht mehr erinnern, wo ich das in FHEM eingestellt habe. Ich hatte das glaube ich irgendwo in den Code gehackt, hatte aber auch schon eine offizielle Einstellung dafür im FHEM-Frontend entdeckt.

[hotwebnet]

Danke für die Antwort, es wäre natürlich super wenn du mir sagen könntest wo ich den Code hinschreiben muss
Denn in der fhem.cfg wird das doch nicht geschrieben oder

[DerJens]

Bei mir schaut 95_FLOORPLAN.pm, Zeile 371+ so aus:

Code Auswählen Erweitern

  # Enable WebApp
  if($FW_tp || $FW_ss) {
    FW_pO "<link rel=\"apple-touch-icon-precomposed\" href=\"" . FW_IconURL("fhemicon") . "\"/>";
    FW_pO "<meta name=\"apple-mobile-web-app-capable\" content=\"yes\"/>";
    FW_pO "<meta name=\"mobile-web-app-capable\" content=\"yes\"/>";
    if($FW_ss) {
      FW_pO "<meta name=\"viewport\" content=\"width=320\"/>";
    } elsif($FW_tp) {
      FW_pO "<meta name=\"viewport\" content=\"".$FP_viewport."\"/>";
    }
  }


Nachtrag:
Hab's gefunden, den Viewport kann man in JEDEM Floorplan mit dem Attribut fp_viewport setzen.

[kasslerks]

Hallo Jens

Ich versuche mich jetzt seit ca 2 std an einem Floorplan. Hab es soweit verstanden nur wie bekomme ich die einzielen  Bilder in den Floorplan?

So wie es bei dir aus Poste 12 ist

EgKzi2VisLeftMenu?

[mele]

Hallo zusammen,

toll, dass es diesen Thread gibt. Großen Dank an DerJens.

Ich probiere zur Zeit den Teil aus Beitrag #1 aus, also einen SVG-Button auf neuem Floorplan.

Grundsätzlich fünktioniert es: Der Button wird in Chrome teilweise (das ist das problem) angezeigt. Betätige ich diesen, blinkt er und das funktioniert auch Geräte übergreifend.

Was nicht funktionier? Der Button wird nur im Internetexplorer ganz (120px*60px) angezeigt. In Chrome leider nur ca. 40px*40px. Im Seitenquelltext aus Chrome steht 120px*60px. Siehe Anänge.

Weiss hier jemand Rat? Ich will ungern den Browser an die programmierung anpassen müssen.

Gleiches schlechte Verhalten mit WebViewControl.

fhem.cfg

Code Auswählen Erweitern


define Web1 FLOORPLAN
attr Web1 fp_arrange 0
attr Web1 fp_noMenu 1
attr Web1 room Floorplan

define EgWzVisOpen dummy
attr EgWzVisOpen devStateIcon static:lcars_open_v1:active active:lcars_open_v1a:static
attr EgWzVisOpen fp_Web1 220,710,0,
attr EgWzVisOpen room Floorplan
attr EgWzVisOpen setList active static


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>


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>




Vielen herlichen Dank vorab!!!

Manuel

[DerJens]

Schau mal, welcher Stylesheet bei dir aktiv ist. Ich sehe, dass du auf Port 8083 arbeitest, da KÖNNTE der defaultCommon.css, der auch die "normale" FHEM-Oberfläche beeinflusst, aktiv sein.

Entferne mal die Größenangaben bei svg (~Zeile 56) in der defaultCommon.css.

[mele]

Schau mal, welcher Stylesheet bei dir aktiv ist. Ich sehe, dass du auf Port 8083 arbeitest, da KÖNNTE der defaultCommon.css, der auch die "normale" FHEM-Oberfläche beeinflusst, aktiv sein.

Entferne mal die Größenangaben bei svg (~Zeile 56) in der defaultCommon.css.

Vielen Dank. Ich habe das ganze jetzt mit einem separaten Port für das Tablet umgesetzt.

Dein Hinweis, dass ich auf Port 8083 arbeite, war also der richtige Hinweis.

Die Veränderung werde ich wahrscheinlich auch auf Post 8083 vornehmen, da bei den Dummies die SVGs auch nur klein angezeigt werden.

Vielen Dank. Jetzt muss ich mich mal an dem Rest versuchen.

VG
Manuel

[mele]

So, ich möchte gern weiter probieren. Die Schriftart funktioniert zwar noch nicht, aber ich habe beschlossen erst einmal die Funktion/Designmöglichkeiten auszuloten. Dazu habe ich (erstmal ) noch zwei Fragen:

1. Ich schließe mich kasslerks' Frage an: Die bekommt man z.B. das SVG mit dem Schriftzug "Kira's Room" in den Floorplan. Ist das ein fixes Hitergrungbild, was um die SVGs ergänzt wird?
2. Wie machst Du die Raumsteuerung bzw. Verlinkung???

Also Beispiel: Wie blendest Du den Home-Button ein bzw. wie funktioniert die entsprechende Verlinkung?

VG
Manuel

[DerJens]

Hallo!

Die Bildüberschrift ist ein komplettes SVG-Element, welches ich über das Modul weblink als htmlCode eingebunden habe. Im DEF-Block steht dann:

Code Auswählen Erweitern

htmlCode <svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="60" width="1010"><g>
<rect x ="120" y ="00" width ="500" height ="60" rx ="0" ry ="0" fill="rgb(153,153,255)"/>
<text x="610" y="50"  text-anchor="end" font-size="36" font-family="lcars" fill="rgb(0,0,0)">Kinderzimmer Kira</text>
<text x="940" y="55"  text-anchor="end" font-size="68" font-family="lcars" fill="rgb(255,204,153)">Raumsteuerung</text>
<rect x ="950" y ="00" width ="60" height ="60" rx ="30" ry ="30" fill="rgb(153,153,255)"/>
<rect x ="950" y ="00" width ="30" height ="60" rx ="0" ry ="0" fill="rgb(153,153,255)"/>
<rect x ="950" y ="00" width ="10" height ="60" rx ="0" ry ="0" fill="rgb(0,0,0)"/>
</g>
</svg>
Dieses Element sollte sofort nach der Erstellung auf den Floorplan gebracht werden, da es sonst keine direkte Zugriffsmöglichkeit mehr auf der Weboberfläche von FHEM gibt, außer eben über den Floorplan oder über den direkten Namen (wenn man ihn denn kennt) via fhem:8083/fhem?detail=<Name>.

Die Schaltfläche Rooms - jetzt Räume, ich hab eingedeutscht - ist auch ein weblink mit folgendem htmlCode:

Code Auswählen Erweitern

htmlCode <a href="/fhem/floorplan/HhRoomSelectFp1"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="130px" width="150px"><g>
<rect x ="00" y ="00" width ="150" height ="130" rx ="0" ry ="0" fill="rgb(153,153,255)"/>
<text x="140" y="120"  text-anchor="end" font-size="36" font-family="lcars" fill="rgb(0,0,0)">RÄUME</text>
</g></svg></a>

Viel Erfolg!

[mele]

@DerJens: vielen Dank schon mal bis hierhin.

Langsam aber sicher komme ich voran. Aktuell kämpfe ich damit, die Link-Unterstreichung weg zu bekommen.

Würdest Du mir den Code des Home-Buttons zur Verfügung stellen?

Vielen Dank!

[DerJens]

Versuchs mal mit einem

Code Auswählen Erweitern

a { text-decoration:none;}
in deinem Stylesheet...

[mele]

Versuchs mal mit einem

Code Auswählen Erweitern

a { text-decoration:none;}
in deinem Stylesheet...

Das wars, vielen Dank.

Da wäre ich nie drauf gekommen. Analog üblicher Hyperlinks habe ich die ganze Zeit versucht, das in dem SVG-Teil unterzubringen.

[mele]

Guten Morgen DerJens,

wenn ich langsam nerve, dann schreib das bitte. Du bist aktuell Derjenige, den ich wegen der Verwendung von SVGs im Floorplan finde.

Ich komme ganz gut voran und werde mein Ergebnis auch gerne am Ende zeigen.

Im Moment hadere ich mit überlappenden SVGs. Ich habe etwas von z-index gelesen und ausprobiert, leider ohne Erfolg.

Kannst Du hierzu Auskunft geben?

VG und großen Dank,
Manuel

[DerJens]

Hallo,

für jedes Element auf dem Floorplan findest du ein div, die haben dann den Namen div-<Name aus FHEM>. Das kannst du sehen, wenn du z.B. im Chrome Browser auf das Element einen RechtsKlick machst und dann "Element untersuchen" auswählst.

Im Stylesheet legst du dann ein entsprechenden Eintrag an, z.B.

Code Auswählen Erweitern

#div-EgWziPShutter {z-index: 1}

[mele]

SUPER, klappt.

DANKE!

[DerJens]

...bin auf dein Ergebnis gespannt! 

[newby]

Hallo,
ich habe das gleiche Problem wie in diesem Beitrag beschrieben mit dem Firefox, leider hat das entfernen der Größenangaben in der defaultCommon.css keinen Erfolg gebracht.

Ursprung:
svg { height:32px; width:32px; fill:#278727; vertical-align:middle; margin:2px 0; }

geändert:
svg { fill:#278727; vertical-align:middle; margin:2px 0; }

Hat jemand noch ne Idee?

Schau mal, welcher Stylesheet bei dir aktiv ist. Ich sehe, dass du auf Port 8083 arbeitest, da KÖNNTE der defaultCommon.css, der auch die "normale" FHEM-Oberfläche beeinflusst, aktiv sein.

Entferne mal die Größenangaben bei svg (~Zeile 56) in der defaultCommon.css.

Gruß
Sven

[tiroso]

Wenn du einen besonderen Style angibst konnte es darin stehen.
Am besten kontrollierst du mal alle .css dateien nach so einem Eintrag.
Es gibt ja noch *style.css oder andere included css Files.
Oder falls es um den Floorplan geht steht es in dem seperaten *floorplan.css
Wenn dort der Eintrag fehlt kannst du ihn dir seperat reinkopieren. Dort wird die DefaultCommon.css glaub ich nichz included

[newby]

Hallo tiroso,

die Lösung liegt manchmal so nah das es schon fast peinlich ist.
Habe den Eintrag in der darkfloorplanstyle.css entfernt und siehe da es wird alles angezeigt.
Hatte mich ein wenig in daran festgebissen das es im IE angezeigt wird und im Firefox nicht.

Danke dir für den wertvollen Tipp.

Jetzt kann ich durchstarten und mir die Oberfläche zurecht basteln.

Gruß
Sven

[newby]

Moin,

habe mal etwas weiter basteln können.
Bin nun an dem Punkt angelangt wo ich gerne die Daten der Sensoren per ReadingsProxy einbinden möchte.
Habe da aber wieder ein kleines Style Problem.
Wie kann man z.B bei der Temperatur das °C mit in die Anzeige bringen?

VG

Sven

[DerJens]

Setz mal stateFormat auf:

Code Auswählen Erweitern

state °C

[newby]

Danke das wars.

Es nimmt langsam Formen an

[msfox]

Leider klapp es bei mir nicht richtig - zunächst das einfachste die Frames als WEBLINK:
Ich haben den Code für das Frame incl. der Schriftart für LCARS wie beschrieben übernommen. Der Kopf mit Text wird auch angezeigt, jedoch ist die Schrift noch "Times New Roman". Daher die Frage: Wohin müssen die jeweiligen Dateien (css,svg,"Schriftdateien"...)?

Ich habe mal eine statische HMTL-Seite incl. der CSS-Datei, welche die font-family "lcars" definiert, erstellt. Dort gebe ich dann einfach einen Text mit <font face="lcars">test</font> aus. Dieser wird in lcars dargstellt. D.h. die Konvertierung der TTF-Datei hat schonmal geklappt. Das SVG-Bild wird auch angezeigt, jedoch mit der falschen Schriftart. D.h. SVG scheint hier nicht auf die CSS-Datei zu zugreifen.

EDIT:
Ich kann über den Browser auf folgende Dateien / Verzeichnisse:
fhem:8083/fhem/images/default/lcarsgtj3-webfont.eot
http://fhem:8083/fhem/css/floorplanstyle_lcars.css

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

http://fhem:8083/fhem/floorplan/LCARS_EG
http://fhem:8083/fhem/icons/head1.svg

Code Auswählen Erweitern


    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="60" width="1010">
        <g>
            <rect x="120" y="00" width="500" height="60" rx="0" ry="0" fill="rgb(153,153,255)"></rect>
            <text x="610" y="50" text-anchor="end" font-size="36" font-family="lcars" fill="rgb(0,0,0)">
                Kinderzimmer Kira
            </text>
            <text x="940" y="55" text-anchor="end" font-size="68" font-family="lcars" fill="rgb(255,204,153)">
                Raumsteuerung
            </text>
            <rect x="950" y="00" width="60" height="60" rx="30" ry="30" fill="rgb(153,153,255)"></rect>
            <rect x="950" y="00" width="30" height="60" rx="0" ry="0" fill="rgb(153,153,255)"></rect>
            <rect x="950" y="00" width="10" height="60" rx="0" ry="0" fill="rgb(0,0,0)"></rect>
        </g>
    </svg>

Bild wird jedoch mit falscher Schriftart angezeigt.

EDIT:
Folgendes geht auch nicht (Bild ja/Text falsch):

Code Auswählen Erweitern


define head1 weblink htmlCode <object data="/fhem/icons/head1.svg" type="image/svg+xml"></object>
attr head1 fp_LCARS_EG 100,100

Wenn ich ohne FHEM-web-Server eine SVG-Datei via OBJECT lade. Dann wird auch die richtige Schriftart geladen.
Ich habe mich mal noch unter http://www.mediaevent.de/svg-in-html-seiten/ etwas belesen. Wenn man SVG als IMG-Tag einbindet geht der Zugriff zur CSS-Datei nicht.
Was aber ging:
Wenn ich ohne FHEM-web-Server eine SVG-Datei via IFRAME lade. Dann wird auch die richtige Schriftart geladen. Die Einbindung als IFRAME über FHEM - Bild ja/Text falsch.

EDIT:
folgendes geht, macht ich aber nicht sehr glücklich, weil ich so in jeder SVG-Datei die CSS-Definition für die Schrift vornehmen muss

Code Auswählen Erweitern


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="60" width="1010">
<style type="text/css">
@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;
}
</style>
<g>
<rect x ="120" y ="00" width ="500" height ="60" rx ="0" ry ="0" fill="rgb(153,153,255)"/>
<text x="610" y="50"  text-anchor="end" font-size="36" font-family="lcars" fill="rgb(0,0,0)">Kinderzimmer Kira</text>
<text x="940" y="55"  text-anchor="end" font-size="68" font-family="lcars" fill="rgb(255,204,153)">Raumsteuerung</text>
<rect x ="950" y ="00" width ="60" height ="60" rx ="30" ry ="30" fill="rgb(153,153,255)"/>
<rect x ="950" y ="00" width ="30" height ="60" rx ="0" ry ="0" fill="rgb(153,153,255)"/>
<rect x ="950" y ="00" width ="10" height ="60" rx ="0" ry ="0" fill="rgb(0,0,0)"/>
</g>
</svg>

Aber nur, wenn:

Code Auswählen Erweitern


define head1 weblink htmlCode <object data="/fhem/icons/head1.svg" type="image/svg+xml"></object>

Nehme ich einen IMG-Tag, passt die Schriftart wieder nicht. Nur...wenn ich Browser via rechte Maustasten das Bild einzeln anzeigen lasse, stimmt die Schriftart

[msfox]

GELÖST:

Die Definition der Schriftart in der CSS-Datei wird in der SVG-Datei nur dann verwendet, wenn der SVG-Code direkt in der Webseite eingebettet wird. Dies ist der Fall wenn man das SVG-File z.B. an ein Device bindet:

Code Auswählen Erweitern


attr HMW_LC_Sw2_DR_LEQ0116953_04 devStateIcon off:lcars/switch_off:on on:lcars/switch_on:off

switch_off und switch_on sind diese Fall SVG-Dateien, welche im Verzeichnis www\images\default\lcars liegen.

Die definierte Schriftart im CSS zieht nicht, wenn man die SVG-Datei über einen Tag (z.B. IMG oder OBJECT) einbindet. In diesem Fall muss die Schriftart innerhalb der SVG-Datei über das STYLE-Tag definiert werden.

Code Auswählen Erweitern


define Menue_OG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_OG"><object data="/fhem/icons/lcars/menue_OG.svg" type="image/svg+xml"></object></a>' }

dann muss im SVG stehen:

Code Auswählen Erweitern


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

Die Logik wird dann erkennbar, wenn man im IE oder Firefox F12 drückt und sich den Seitenaufbau anschaut...

[ringidigiding]

Hallo,
der Thread ist zwar schon etwas älter, da aber im Wiki darauf verwiesen wird, hätte ich eine Frage zur Darstellung von variablen Werten im LCARS floorplan, mit der LCARS Schrift. In allen bisherigen Beispielen wurde der Text in der svg Datei fest hinterlegt. In den Posts von DerJens (6 und 12) sieht man andeutungsweise, wie variable Werte in der LCARS Schrift ausgegeben werden. Wahrscheinlich verwendet er dafür readingsProxy. Ich vermute mal, dass man trotzdem noch eine svg Datei für die einzelnen Elemente braucht. Wenn jemand einen Code Schnipsel posten könnte, wie so etwas realisiert wird, wäre das super.
Schönen Tach noch