Floorplan: PNGs mit transparentem Hintergrund => transparenten Bereich ignoriere

Begonnen von Rince, 14 Januar 2014, 09:44:40

Vorheriges Thema - Nächstes Thema

Rince

Hi,

eine Frage, bitte nicht köpfen:
Die Sache mit den individuellen Icons funktioniert wirklich gut.

Daraus erwächst ein neuer Wunsch:
Wenn ich ein Icon habe, das relativ groß ist.
=> zum Beispiel eines für mein Halogen-Seilsystem. Das geht in einem Raum von unten links nach rechts oben.
=> der durch das PNG abgedeckte Platz ist also der ganze Raum
=> egal wo man hinklickt man schaltet immer die Deckenbeleuchtung

Könnte man dem Floorplan beibringen, den transparenten Bereich von PNGs optional ignorieren? Also durch einen extra Parameter oder oder eine spezielle Kennzeichnung im Dateinamen?

Dann könnte man auch die Icons noch klicken, die quasi unter dem großen Icon liegen!

Optional muss es deshalb sein, weil viele Knöpfe mit transparentem Hintergrund haben, der klickbar bleiben muss.


PS:
Ich hab schon versucht, ein kleines Icon für 1 Lampe zu machen, und das Bild entsprechend zu multiplizieren. Das geht zwar prinzipiell, aber wird nicht mehr intuitiv, da nur das Originalbild letztlich klickbar ist.
Wer zu meinen Posts eine Frage schreibt und auf eine Antwort wartet, ist hiermit herzlich eingeladen mich per PN darauf aufmerksam zu machen. (Bitte mit Link zum betreffenden Thread)

rudolfkoenig

- Man hat im JS/HTML keine* Moeglichkeit festzustellen, wo/ob ein PNG durchsichtig ist. Sowas wird ueblicherweise durch imagemaps geloest, und das darf man per Hand erstellen. Selbst mit diese Methode werden mWn keine Bereiche unter dem Bild benachtchtigt.
- wenn das JS-Programm weiss, dass der Click nicht erwuenscht ist, muss es die Browserlogik nachbauen, und andere HTML-Element an dieser Position suchen, und fuer diese ein Click ausloesen.

-> Theoretisch geht sowas, fuer mich ist der Aufwand es einzubauen zu hoch.

*: Ich vermute mit canvas geht das, ist aber weder schnell, noch einfach.

UliM

Hi,
Idee: in HTML kann man angeben, welches Element weiter vorne/ weiter hinten liegt.
Hab das mal gefunden, weiß aber aus dem Kopf nicht, wie dieses Tag hieß.

Wenn man also ein Attribut spendiert, das den 'Layer' angibt, könnte dieser Layer mit in den html-Code.
Der treibende Aspekt wären also nicht die transparenten Bereiche, sondern dass die 'kleineren' devices auf den transparenten Bereiche des großen icons liegen und daher klickbar sind.

Um zutreten ob das so geht müsste jemand nen Schiwachse bauen, so wie im Wiki beschrieben.

Hab ich mich verständlich ausgedrückt? Meint ihr das könnte gehen?

Gruß Uli
RPi4/Raspbian, CUL V3 (ca. 30 HomeMatic-devices), LAN (HarmonyHub, alexa etc.).  Fördermitglied des FHEM e.V.

UliM

PS: vielleicht reicht es ja schon, wenn man fhem.cfg so umsortiert, dass das device mit dem großen png VOR den devices mit den kleineren icons steht und dadurch zuerst in den html-code wandert und mithin 'weiter hinten' im floorplan liegt?
PPS: Das html-tag, das ich meine, heisst "z-index": http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index
RPi4/Raspbian, CUL V3 (ca. 30 HomeMatic-devices), LAN (HarmonyHub, alexa etc.).  Fördermitglied des FHEM e.V.

rudolfkoenig

ZitatWenn man also ein Attribut spendiert, das den 'Layer' angibt, könnte dieser Layer mit in den html-Code.

Wird mir fuer FHEMWEB zu bunt, z-index soll man in einem eigenen css hinterlegen.

Rince

Gibt es eine Art Doku wo man lachlesen kann wie das Zusammenspiel zwischen Floorplan und FHEMWEB funktioniert?

Ich verstehe, das Rudolf von den Sonderwünschen etwas angefressen ist :)

Würde es mir gerne auch selbst ansehen.
Wer zu meinen Posts eine Frage schreibt und auf eine Antwort wartet, ist hiermit herzlich eingeladen mich per PN darauf aufmerksam zu machen. (Bitte mit Link zum betreffenden Thread)

UliM

Probier doch erstmal das mit der Reihenfolge in fhem.cfg, das könnte gehen.


Doku fhemweb/floorplan gibt's nicht, steht aber alles im Code.
Z-Index-Attribut müssteauch ohne Änderung fhemweb gehen.

Gruß Uli
RPi4/Raspbian, CUL V3 (ca. 30 HomeMatic-devices), LAN (HarmonyHub, alexa etc.).  Fördermitglied des FHEM e.V.

fiedel

Hallo Rince,

wie wärs denn, wenn du das große Icon "nicht klickbar" definierst und nur zur Zustandsanzeige nimmst. Dann setzt du an die Stellen, die klickbar sein sollen je ein transparentes Icon, welches die Lampe schaltet.

Gruß

Frank
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423

Rince

Klingt nicht unspannend die Idee. Mein Hirn zur Zeit durch zu viele Medikamente etwas langsam ;)
Wie meinst du "nicht klickbar" definieren?
Wer zu meinen Posts eine Frage schreibt und auf eine Antwort wartet, ist hiermit herzlich eingeladen mich per PN darauf aufmerksam zu machen. (Bitte mit Link zum betreffenden Thread)

fiedel

Hui, auch Norovirus???  ;D

ZitatWie meinst du "nicht klickbar" definieren?

Da musst du Medikamente absetzen und kreativ werden.  ;) Ich hab das genau so auch noch nicht gemacht. Aber mit devsateicon, normales icon, stateformat und userreadings sind ja die wildesten Sachen möglich. Ich hab die Transparenten Icons hauptsächlich im Floorplan als Links zu anderen Seiten. Aber ich wachse auch ständig am umsetzen meiner unmöglichen Ideen.  ;D

Gruß

Frank
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423