Drag&Drop im Floorplan im fp_arrange Modus

UliM · 31 Januar 2015, 01:27:43

Hi Markus,
habs mal eingebaut, funktioniert wunderbar mit den von Dir zuletzt angehängten js-scripts. Vielen vielen Dank dafür.

Was ich bezgl. Usability gewöhnungsbedürftig finde, ist im arrange-Menü den cursor im Feld "left" zu platzieren und dann das device mit den cursortasten für hoch/runter nach links und rechts zu bewegen. Da fänd ich die linke und rechte cursortaste eingängiger, aber das ist Kleinkram, es funktioniert auch so wie's jetzt ist prima.

Den Effekt von floorplan_click.js hab ich nicht beobachten/finden können. Wenn es das macht, was ich vermute, würd ich ein Attribut zum (de)aktivieren spendieren, damit das Schalten weiterhin funktioniert, wenn jemand devices sehr dich beieinander anordnet - oder erwartest Du da keine Probleme?

Die überflüssige <body>-Definition hab ich gefunden und erstmal auskommentiert. cordova wird bei mir nicht geladen, in den scripts die ich in "meinem" html finde sind alle script-loads korrekt mit Anführungszeichen versehen. Kannst Du in Deiner Installation noch mal schauen, woher das wohl kommt?

Anbei meine floorplan.pm. Könntest Du bitte auch damit noch einmal testen. Wenn alles ok ist, würd ich noch den commandref-Text sowie das floorplan.pdf anpassen, im floorplan.pm aufräumen und alles einchecken.

Gruß,
Uli

PS: In dieser Version sind auch copy, rename, delete drin, die die global userattr mitbehandeln. Dazu brauchts in copy.pm einen zusätzlichen Aufruf, siehe http://forum.fhem.de/index.php/topic,32759.0.html

DerJens · 02 Februar 2015, 22:55:10

So, kleine Rückmeldung von mir:
Ich habe jetzt von mehreren Räumen den Floorplan mit deiner tollen Erweiterung umgestaltet. Das war bislang eine ziemlich langwierige Angelegenheit, jetzt ordne ich so eine Floorplan mit 50+ Elementen in wenigen Minuten neu an UND es macht sogar Spaß. Dabei muss ich sagen, dass ich noch häufig umbaue und optimiere auf dem Weg zu einer sinnvollen und hilfreichen Visualisierung/Steuerung im LCARS Stil für's 7 Zoll Tablet-an-der-Wand-häng-Format.
Folgende Punkte sind mir aufgefallen:

Die Erweiterung ist genial und spart mir unheimlich viel Zeit!
Das Einrasten (Snapping) verhält sich bei Chrome und Safari teilweise unterschiedlich. Manchmal bekomme ich bei Chrome nicht ein Element genau in die Mitte auf ein anderes Element positioniert, was beim Safari dann problemlos geht.
Bislang ungelöste Probleme habe ich, wenn ich einen state in Textform auf dem Floorplan bringe. Der liegt ja dann in einem Div/Tabellen-Konstrukt und dieses Konstrukt ist bei mir immer größer als der Text darin. Das ist nicht weiter schlimm, da man es nicht sieht ABER wenn man im 10x10 Raster verschiebt lässt sich der Text nie genau ausrichten, da ich oben immer noch 4 Pixel Rand habe. Ich musste mir hier mit margin-top: -4px im CSS helfen.
Gewöhnungsbedürftig ist, dass eine Verschiebung gleich gespeichert wird. Das spart super Zeit, allerdings gibt es für versehentlich verschobene Elemente kein Undo.

UliM · 02 Februar 2015, 23:17:07

Hi,
jupp, sehe ich ebenso.
Bezgl Raster bin ich immer mehr der Meinung, dass sich d&d ebenso verhalten sollte, wie für cursor up/down, also zB:
- ohne zusätzl. Taste Raster 1x1 (kein Raster)
- mit Shift: 10x10
- zB mit ctrl: 3x3
Wichtig scheint mir, dass ohen zusätzl. shift/ctrl-Taste das Raster 1x1 anliegt. Anderenfalls befürchte ich viele Forums-Freds, die besagen, dass man widgets nicht an die gewünschte Stelle schieben kann (weil nicht jeder die Doku so weit liest, dass er/sie wüsste, dass die Nutzung von shift/ctrl was am Verhalten ändert).

Meinungen?

Gruß, Uli

Kakaomonster · 03 Februar 2015, 12:28:04

Zitat von: mluckey am 27 Januar 2015, 22:53:44
Hi,

...

Ich hänge auch die floorplan_click.js an, die die "klickbare" Fläche eines Widgets erhöht (hilft mir auf meinem 7'' Display).

Außerdem anbei mein passendes CSS und ein Screenshot für die Interessierten : )

Hallo Markus,

Dein Dash Floorplan gfällt ir richtig gut, wie hast Du den eingebunden? Über Floorplan oder das Dashboard? Würde den für das 7" auch gerne genau so haben.

Zurück zum Fred

Hammer geile Erleichterung mit dem drag n drop. Habe mir meinen rechten Arm verletzt und kann nur noch mit links arbeiten, die modifikation erleichtert mir dies ungemein, da ich kaum an die Tasten muss was doch schon anstrengend genug ist.... Super ... vielen Dank
Grüsse, Ralf

_Markus_ · 03 Februar 2015, 22:26:08

Guten Abend zusammen,

danke, werde eure Anmerkungen umsetzen, bin allerdings die Woche unterwegs, daher vermutlich erst am Wochenende.

Raster 1x1 als Standard klingt sinnvoll. Hatte auch schon drüber nachgedacht bei gedrückter Shift Taste nur horizontale bzw vertikale Verschiebung zuzulassen, wie etwa in PowerPoint.

Auch das Hinzufügen und Entfernen von Widgets könnte ggf mit JS erleichtert werden. Gibt es aktuell irgendwelche Pläne in diese Richtung? Automatisches Speichern o.ä. könnte man dann auch über Checkboxen aktivierten und deaktivieren.

@Ralf: Jep, floorplan. Hänge die tage mal noch ein anderes, freundlicheres Design (Css) an. Das von Screenshot hast du ja schon. Meld dich einfach wenn du Hilfe brauchst.

VG
Markus

UliM · 04 Februar 2015, 19:24:41

Hallo Markus,

Zitat von: mluckey am 03 Februar 2015, 22:26:08
daher vermutlich erst am Wochenende.

Kein Stress

Zitat von: mluckey am 03 Februar 2015, 22:26:08
Raster 1x1 als Standard klingt sinnvoll. Hatte auch schon drüber nachgedacht bei gedrückter Shift Taste nur horizontale bzw vertikale Verschiebung zuzulassen, wie etwa in PowerPoint.

Auch ne Variante. Ob Raster oder nur horizontal/vertikal praktischer ist, kommt m.E. darauf an, was der jeweilige Anwender so macht, kann man schwer vorhersagen. Aber konsistentes Verhalten find ich immer gut, daher fänd ichs gut wenn Schrittweiten bei d&d und per cursortasten gleichartig ist bezgl. Kombination mit zusätzlich gedrückter Taste. Orientierung an etablierten Standards (zB Powerpoint bzw Windows) find ich auch gut. Your choice

Zitat von: mluckey am 03 Februar 2015, 22:26:08
Auch das Hinzufügen und Entfernen von Widgets könnte ggf mit JS erleichtert werden. Gibt es aktuell irgendwelche Pläne in diese Richtung?

Nein, bisher nicht. Wenn Dir dazu was Nettes einfällt - gern, weiß nicht wie groß da der Optimierungsbedarf ist - lasse mich gern überraschen.

Zitat von: mluckey am 03 Februar 2015, 22:26:08
Automatisches Speichern o.ä. könnte man dann auch über Checkboxen aktivierten und deaktivieren.

Kann man tun. Aber persistent wird's ja eh erst nach einem expliziten SAVE nach fhem.cfg, daher ist das m.E. nice to have.

Anbei meine aktuellste lokale floorplan.pm, wäre prima wenn Du auf der aufsetzen könntest. Aktivierung floorplan_click.js ist da ohne Attribut drin - könnten da Nebeneffekte auftreten, so dass man das über Attribut deaktivierbar machen können müsste? (siehe mein vorheriger fred).

LG, Uli

MiWe58 · 08 Februar 2015, 14:43:36

Hallo,

eine sehr schöne Erweiterung zu fhem ist das Floorplan-Modul. Ich arbeite mich gerade ein und mache alles nach dem pdf- Dokument. Nachdem ich gesehen habe, dass diverse Updates der floorplan.pm vorliegen habe ich gerade eben das fhem-Update durchgeführt, bei dem auch eine neue floorplan.pm geladen wurde. Nach dem "shutdown restart" kann ich leider weiterhin keine Icons per Drag & Drop verschieben. Das bedeutet, dass die verschobenen Positionen nicht in die Konfiguration übernommen werden.

Liegt das Problem auf meiner Seite?
Was sollte ich versuchen?

Ich benutze Firefox und IE

Guuß
Michael

justme1968 · 08 Februar 2015, 14:47:00

die version mit dem drag&drop ist noch nicht eingecheckt. du musst das file oben aus dem posting verwenden.

gruss
andre

UliM · 08 Februar 2015, 14:57:44

Hi,
richtig. in der per update verteilten Version geht
-device im arrange-Menū auswãhlen
- dann an der gewūnschten Position klicken (!), geht such mehrfach
- schließlich auf den attr-button klicken

Wenn Du d&d testen willst, brauchst Du aus diesem fred hier die jeweils letzten Versionen von floorplan.pm, floorplan_drag.js und floorplan_click.js

Gruß Uki

kud · 11 Februar 2015, 09:08:52

Tolle Geschichte

Habe mal die 3 Dateien gespeichert. Klappt super mit dem verschieben.
Jedoch eine Frage. Wie binde ich diese Kachelanzeige ein (ein paar Kommentare
davor von mluckey) ?
Das heisst jedes Objekt ist immer so und so groß ?

Danke und Gruss
Kai-Uwe

UliM · 14 Februar 2015, 13:32:44

Hi,
hab's nun eingecheckt - und aus meinen älteren posts die angehängten Programmdateien gelöscht.
http://forum.fhem.de/index.php/topic,33781.0.html
Gruß, Uli

_Markus_ · 14 Februar 2015, 21:18:50

Guten Abend zusammen,

sry für die lange Ruhe...
Anbei eine neue Version der floorplan_drag.js. Darin ist das Grid nun 1x1, mit Shift 10x10 und mit Strg wird das Snap deaktiviert. Das war nach vielen Versuchen die für mich intuitivste Variante.

Ich musste noch ein paar kleinere Anpassungen machen, da ich Devicenamen mit "." (Punkt) nutze und diese mit CSS Selektoren kollidieren.

Ich habe auch die neue Tastenbelegung "Rechts/Links" für das verschieben mittels Cursor-Tasten getestet. Allerdings habe ich davon wieder Abstand genommen, da ich festgestellt habe, dass man Rechts und Links zum Navigieren im Feld benötigt ; )

@Uli: Die floorplan_click.js sollten wir wieder rausnehmen aus der floorplan.pm, da es sich hierbei eher um ein konkretes Theme für den Floorplan handelt (siehe nächstes Post). Ich konnte in deinen letzten Posts leider deine floorplan.pm nicht mehr angehängt sehen, daher hänge ich jetzt auch keine an um Auseinanderlaufen zu vermeiden. Wenn du mir deine schickst, mache ich nochmal einen finalen Check.

VG
Markus

_Markus_ · 14 Februar 2015, 21:29:24

Theming
In einigen Posts zuvor wurde die floorplan_click.js bzw das genutzte Theme/Layout/CSS angesprochen. Ich würde dazu tendieren, die floorplan_click.js als spezielles Theme zu verstehen und daher über das Attribut "Javascripts" einzubinden, wie auch die css. Die floorplan_click.js macht

Erweiterung des Click-Radius: Es muss nicht genau auf das Icon geklickt werden, sondern auch klicken auf die darum liegende Table ist erlaubt. Das Event wird dann runter propagiert.
Es werden ja nach Device-Status (an/aus) verschiedene CSS Styles zugewiesen.

Anbei die floorplan_click.js die über das Javascripts Attribut zugewiesen wird. Dazu die js in das Verzeichnis www/pgm2/ legen und dem Attribut Javascripts mit "pgm2/floorplan_click.js" zuweisen. Ebenfalls anbei die passende CSS Datei, die dafür sorgt, dass alle Devices die gleiche Größe haben. Diese wird über das Attribut stylesheet mit "dash_floorplanstyle.css" zugewiesen und liegt ebenfalls im Ordner www/pgm2/. Außerdem anbei ein Screenshot von meinem Dashboard mit ebendiesem Style.

Ich würde eine Sammlung von Styles in einem separaten Fred befürworten, in dem CSS, JS und Screenshot pro Post angehängt werden.

UliM · 14 Februar 2015, 22:26:46

Hi Markus,
welcome back

Just heute hab ich alles eingecheckt. Meine akzuellste floorplan.pm gibt's daher im SVn.
Wenn die von Dir trad angehängte Version des floorplan_drag verteilt werden soll, check sie nach nem Test einfach ein - oder wenn ich das machen soll, sag einfach bescheid.

Deine Ausführungen zu click.js hab ich nicht verstanden, v.a. nicht den Zusammenhang mit stylesheets...?

LG Uli

UliM · 15 Februar 2015, 08:54:06

Zitat von: mluckey am 14 Februar 2015, 21:29:24
Ich würde eine Sammlung von Styles in einem separaten Fred befürworten, in dem CSS, JS und Screenshot pro Post angehängt werden.

Jupp, prima

Zitat von: mluckey am 14 Februar 2015, 21:29:24
Ich musste noch ein paar kleinere Anpassungen machen, da ich Devicenamen mit "." (Punkt) nutze und diese mit CSS Selektoren kollidieren.

Hab grad mal kurz Deine neue floorplan_drag mit der nun eingcheckten verglichen: Ich hab ebenfalls grid-Werte angepasst (wobei mit der Maus ctrlKey derzeit keinen Effekt hat, weiss nicht warum). Ich wäre DIr dankbar, wenn auch Du den Vergleich dieser beiden Versionen anschauen könntest, dann entscheidest wie's aussehen soll und mir ne aktualisierte Version von floorplan_drag schickst, ok?
Siehe auch http://forum.fhem.de/index.php/topic,33781.0.html - ggf müsste ich dort wie auch im Einrichtungsleitfaden.pdf anpassen.

Bin heut den ganzen Tag unterwegs und erst am Abend wieder am Rechner.

Gruß, Uli