Animierte SVG-Icons für responsiven Floorplan

[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