Animierte SVG-Icons für responsiven Floorplan

Begonnen von DerJens, 01 September 2014, 00:02:08

Vorheriges Thema - Nächstes Thema

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:
#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 <meta name="mobile-web-app-capable" content="yes"/> und bei Apple <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:
<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

#22
Bei mir schaut 95_FLOORPLAN.pm, Zeile 371+ so aus:
  # 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
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
<?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
<?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
FHEM auf NUC/Proxmox (Rpi 2 / Rpi Zero W mit FHEM2FHEM, RFHEM)
Homematic/LaCrosse/PCA301/Shelly, Rollladen, Batterieaktor + Relais zur Schaltung Garagentor (Promatic 2), Xiaomi FlowerSens, Bewässerungssteuerung Garten und Gewächshaus, Weatherman und Landroid

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

Zitat von: DerJens am 27 Februar 2015, 13:59:14
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
FHEM auf NUC/Proxmox (Rpi 2 / Rpi Zero W mit FHEM2FHEM, RFHEM)
Homematic/LaCrosse/PCA301/Shelly, Rollladen, Batterieaktor + Relais zur Schaltung Garagentor (Promatic 2), Xiaomi FlowerSens, Bewässerungssteuerung Garten und Gewächshaus, Weatherman und Landroid

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
FHEM auf NUC/Proxmox (Rpi 2 / Rpi Zero W mit FHEM2FHEM, RFHEM)
Homematic/LaCrosse/PCA301/Shelly, Rollladen, Batterieaktor + Relais zur Schaltung Garagentor (Promatic 2), Xiaomi FlowerSens, Bewässerungssteuerung Garten und Gewächshaus, Weatherman und Landroid

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:
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:
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!
FHEM auf NUC/Proxmox (Rpi 2 / Rpi Zero W mit FHEM2FHEM, RFHEM)
Homematic/LaCrosse/PCA301/Shelly, Rollladen, Batterieaktor + Relais zur Schaltung Garagentor (Promatic 2), Xiaomi FlowerSens, Bewässerungssteuerung Garten und Gewächshaus, Weatherman und Landroid