Drag&Drop im Floorplan im fp_arrange Modus

[_Markus_]

Hallo,

beim Einrichten meines Floorplans (als Dashboard, also nicht auf einem Grundriss) hatte ich das Bedürfnis die Devices per Drag&Drop zu verschieben, statt jedesmal eines der Devices aus der Dropdown auszuwählen, zu setzen und dann mit dem "attr" Button zu bestätigen.

Dazu habe ich das draggable-Feature von jQuery genutzt. Nach jedem Drag-Vorgang wird das FP-Attribut des Devices neu gesetzt.

Dazu habe ich folgende Datei angelegt: $FW_ME/pgm2/floorplan_drag.js

Code Auswählen Erweitern


$(document).ready(function($){

        $( ".fp_device_div" ).draggable({
                grid: [10,10],
                snap: true,
                snapTolerance: 8,
                stop: function( event, ui) {

                        var device = ui.helper.context.id.replace(/div-/,"");
                        var X = ui.position.left;
                        var Y = ui.position.top;
                        var style = ui.helper.context.getAttribute("fp_style", "");
                        var text = ui.helper.context.getAttribute("fp_text", "");
                        var text2 = ui.helper.context.getAttribute("fp_text2", "");
                        var fp_name = ui.helper.context.getAttribute("fp_name", "");
                        var cmd = "attr " + device + " fp_" + fp_name + " " + Y + "," + X + "," + style + "," + text + "," + text2;
                        FW_cmd('/fhem/floorplan/'+fp_name+'?XHR=1&cmd='+cmd)

                }
        });

});


Ich benötigte einige Attribute im HTML Dom um den fhem Command zusammen zu bauen. Daher waren auch einige Anpassungen am Floorplan-Modul notwendig. Hier der Diff:

Code Auswählen Erweitern


>:/opt/fhem/FHEM# diff 95_FLOORPLAN_ORIG.pm 95_FLOORPLAN.pm

403c403
<                 "src=\"$FW_ME/js/$h->{SCRIPT}\"></script>";
---
>                 "src=\"$FW_ME$h->{SCRIPT}\"></script>";
485c485
<               FW_pO "\n<div style=\"position:absolute; top:".$top."px; left:".$left."px;\" id=\"div-$d\">";
---
>               FW_pO "\n<div fp_style=\"$style\" fp_text=\"$text\" fp_text2=\"$text2\" fp_name=\"$FP_name\" class=\"fp_device_div\" style=\"position:absolute; top:".$top."px; left:".$left."px;\" id=\"div-$d\">";
654a655,658
>
>       my $jsTemplate = '<script type="text/javascript" src="%s"></script>';
>       FW_pO sprintf($jsTemplate, "$FW_ME/pgm2/floorplan_drag.js");
>


Die erste Anpassung stellt sicher, dass die jQuery-Libraries auch wirklich geladen werden. Bei mir war das mit dem "/js/" im Pfad nicht der Fall.
Die zweite Anpassung setzt die zusätzlichen Attribute, die ich für den fhem-Command benötige (s.o.).
Die dritte Anpassung sorgt dafür, dass die oben gezeigte floorplan_drag.js im fp_arrange Modus eingebunden wird.

Mein Dashboard habe ich übrigens mit einem schönen Hintergrund und der folgenden Änderung im standard floorplan CSS laufen:

Code Auswählen Erweitern

table.fp_dash {
    background-color: rgba(255, 255, 255, 0.5);
    height: 80px;
    padding: 7px;
    width: 80px;
}


Da ich recht neu in der Materie bin, bin ich an eurer Meinung interessiert. Geht das ganze eleganter? Insb: Ginge das ganze auch update-sicher? (Falls nicht wäre es vlt eine Änderung am trunk wert?)

Vielen Dank!
Grüße
Markus

[UliM]

Hallo Markus,
saugut, vielen Dank!
Devices per klick anzuordnen ging schon, aber drag&drop ist natürlich noch viel besser

Zeitlich überscheneidet sich das mit der Umstellung von fhemweb und js durch Rudi. Das wird vermutlich auch Auswirkungen auf floorplan haben. Das würde ich gern erstmal stabilisieren, bevor ich Deinen patch sehr gern aufnehme.

Kannst Du derweil bitte damit testen und sicherstellen, dass es keine unerwünschten Nebeneffelkte hat.
Auch müsste ja sinnvollerweise position-by-click aus floorplan.pm ausgebaut werden, denn beides braucht's nicht, oder?

LG, Uli

[justme1968]

sehr geil. die idee hatte ich auch schon.

ich habe hier: http://forum.fhem.de/index.php/topic,31293.msg243580.html#msg243580 einen patch gepostet der den jQuery/javascript im floorplan wieder auf den gleichen stand wie fhemweb bringt und noch ein paar dinge repariert.

vielleicht magst du mal schauen wie sich das mit deinen änderungen verträgt bzw. den teil aus meinem patch übernehmen wenn es geht und deine änderungen dort dazu bauen.

gruss
  andre

[UliM]

Hi,
hab's jetzt engebaut auf Basis der an fhemweb.js angepassten Version von Rudi.

- floorplan_drag.js angelegt wie oben gepostet
- floorplan.pm angepasst - mit folgenden weiteren Änderungen:

• das Arrange-Menü hat nun keine Felder mehr zur Eingabe der Koordinaten - um zu vermeiden, dass der user für ein device erst das arrange-menü öffnet, dann dassselbe device per drag&drop verschiebt und danach im arrange-Menü den attr-button klickt - in den Koordinatenfeldern stehen ja dann noch die alten Koordinaten, das drag&drop-Ergebnis würde also wieder übergebügelt.
• Drag&Drop ist nur dann aktiviert, wenn der arrange-mode eingeschaltet ist (um zu vermeiden, dass man auf seinem floorplan ein device verschiebt, das man eigentlich nur schalten wollte)
• Das bisherige arrangeByMouseclick hab ich rausgenommen

Für Tests wäre ich dankbar, die entspr. Dateien sind angehängt. floorplan.pm ist noch eine unaufgeräumte aber funktionsfähige Version, mach ich dann vor dem einchecken. Zielordner sind
www/pgm2/floorplan_drag.js
FHEM/95_FLOORPLAN.pm

Freue mich auf Testergebnisse, würde das dann alsbald einchecken.
Vielen Dank auf jeden Fall an Markus!

Gruß, Uli

[mbenker]

Hallo,

so habe es mal kurz getestet und funktioniert soweit ganz gut.
Habe einige Icons mal verschoben und auch einige readinggroups.

(wie gesagt nur kurzer Test)

Ich habe allerdings das Gefühl (wie gesagt nur Gefühl) das das Raster noch etwas grob ist.
Kann man das noch etwas feiner einstellen ?

Markus

[UliM]

Ich habe allerdings das Gefühl (wie gesagt nur Gefühl) das das Raster noch etwas grob ist.
Kann man das noch etwas feiner einstellen ?

Hi,
danke für's Testen
Raster: wenn ich das richtig sehe, ist das in floorplan_drag.js in Zeile 4 auf 10x10 px gesetzt.
Pass es doch dort mal auf einen niedrigeren Wert an (5,5?). Als Ausrichtungshilfe ist das sicher gut, kann aber wohl auch stören.
Welchen Wert schlägst Du vor?
Gruß, Uli

[mbenker]

So habe mit den Werten mal rumgespielt.
Und ich für meinen Teil finde 3,3 recht gut. Damit lässt sich es sehr flüssig und gut platzieren.
Besonders wenn man Überschriften entsprechend platzieren will (StarTrek Floorplan als Beispiel)..

5,5 war zwar schon besser aber mit 3,3 bin ich sehr zufrieden

[Mr.Heat]

Erstmal danke dafür!
Es sollte auf jeden Fall noch eine einfache Möglichkeit geben, pixelgenau Positionen anzugeben; wenn das nur per drag&drop geht wird das sonst zur Qual. Wie wäre es, wenn beim Verschieben per d&d beim verschobenen Element die Position x/y direkt dabei angezeigt wird und während des Verschiebens (also Maustaste gedrückt) mit den Pfeiltasten pixelgenau positioniert werden kann?

[UliM]

Wie wäre es, wenn beim Verschieben per d&d beim verschobenen Element die Position x/y direkt dabei angezeigt wird und während des Verschiebens (also Maustaste gedrückt) mit den Pfeiltasten pixelgenau positioniert werden kann?

Das wäre bestimmt toll, hab aber keine Ahnung wie man das hinkriegt..

Aber 2 workarounds kann ich vorschlagen 
1. Beim Positionieren per Ctrl+Mausrad die Zoomstufe im Browser erhöhen, dann sieht man besser.
2. Wenn man irgendwas unbedingt pixelgenau auf derselben Zeile/Spalte haben will wie ein anderes device, kann man immer noch manuell das Attribut auf dem device anpassen.

Ich fänds auch schön, wenn die Positionsfelder top/left im arrange-Menü bleiben könnten - dazu müsste aber der Wert in diesen Feldern aktualisiert werden, sofern der Anwender genau dieses device der d&d verschiebt. Und auch hier weiss ich nicht, wie das geht...

Über patches freu ich mich aber immer 

Gruß, Uli

[mbenker]

Hallo Uli,

folgende Fehler habe ich gerade im Log gefunden :

PERL WARNING: Missing argument in sprintf at ./FHEM/95_FLOORPLAN.pm line 432.
PERL WARNING: Use of uninitialized value $text2 in concatenation (.) or string at ./FHEM/95_FLOORPLAN.pm line 519.

[_Markus_]

Ich schreibe die Woche mal einen Patch mit euren Wünschen.

Du schriebst von zeitlichen Überschneidungen mit der Umstellung von Rudi. Wie sieht es damit aus? Was ist geplant?

[UliM]

Hi,
ja wunderbar
Bei Rudis Umstellungen dürfte floorplan kaum mehr betroffen sein, es kann hier also weitergehen.
Wär gut wenn Du auf Basis der oben angehängten floorplan.pm weitermachen könntest.
Gruß aus Dänemark,
Uli

[_Markus_]

Hi,

anbei eine aktualisierte Version der 95_FLOORPLAN.pm mit den folgenden Änderungen:

• Drag&Drop standardmäßig im Raster 10:10
• Bei bedrückter Shift-Taste wird das Raster 3:3 genutzt
• Bei gedrückter Strg-Taste wird das Raster 1:1 genutzt (also kein Raster)
• Aktuelle Koordinaten werden direkt in den Feldern Top/Left aktualisiert (ich habe die Felder wieder aktiviert)
• Die Koordinaten können auch in den Feldern direkt geändert werden, das Widget verschiebt sich dann auch direkt (WYSIWYG) wenn man das Feld verlässt
• Wenn man in den Top/Left Feldern die Pfeiltasten Hoch/Runter drückt, wird der enthaltene Wert erhöht/verringert und das Widget verschoben (bestätigt werden muss durch Klick auf "attr")
• Wenn man Shift+Hoch/Runter drückt, ändern sich die Werte in 10er-Schritten
• Cursor "Move" bei Drag&Drop

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 : )

Würde mich über Feedback freuen!

@Uli, btw: Die Version, die ich von dir genutzt habe hat noch zwei kleine Fehler (wenn ein Widget ausgewählt wurde):
<script attr='/fhem/pgm2/cordova-2.3.0.js">  <-- Öffnendes einfaches Anführungszeichen, schließendes doppeltes.
mehrere <body>-Tags

VG
Markus

[UliM]

Hi Markus,
vielen Dank - das klingt ja klasse.
Werd mich am WE mal hinsetzen, das einbauen, testen und vsl. auch einchecken.
Gespannte Grüße,
Uli

[DerJens]

Hallo Markus,

eine extrem sinnvolle und zeitsparende Erweiterung hast du da gebaut, vielen Dank. Ich arbeite mich gerade ein...