diff --git a/fhem/CHANGED b/fhem/CHANGED
index ecbe7529e..e0f042837 100644
--- a/fhem/CHANGED
+++ b/fhem/CHANGED
@@ -1,5 +1,6 @@
# Add changes at the top of the list. Keep it in ASCII, and 80-char wide.
# Do not insert empty lines here, update check depends on it.
+ - feature: f18: implement dragging / dashboard
- change: 93_DbLog: V3.8.3, configCheck improved, execute cache only every
syncInterval/2 if cacheLimit reached, error-handling
improved
diff --git a/fhem/FHEM/01_FHEMWEB.pm b/fhem/FHEM/01_FHEMWEB.pm
index f417ad745..529e57651 100644
--- a/fhem/FHEM/01_FHEMWEB.pm
+++ b/fhem/FHEM/01_FHEMWEB.pm
@@ -2171,7 +2171,7 @@ FW_style($$)
"Own modules and helper files:\$MW_dir:^(.*sh|[0-9][0-9].*Util.*pm|".
".*cfg|.*\.holiday|myUtilsTemplate.pm|.*layout)\$\n".
"Gplot files:\$FW_gplotdir:^.*gplot\$\n".
- "Styles:\$FW_cssdir:^.*(css|svg)\$");
+ "Style files:\$FW_cssdir:^.*(css|svg)\$");
foreach my $l (split(/[\r\n]/, $efl)) {
my ($t, $v, $re) = split(":", $l, 3);
$v = eval $v;
diff --git a/fhem/FHEM/98_SVG.pm b/fhem/FHEM/98_SVG.pm
index 482939da7..18189adeb 100644
--- a/fhem/FHEM/98_SVG.pm
+++ b/fhem/FHEM/98_SVG.pm
@@ -175,20 +175,6 @@ SVG_Rename($$)
SVG_Set($hash, $new, "copyGplotFile"); # Forum #59786
}
-##################
-sub
-SVG_FwDetail($@)
-{
- my ($d, $text, $nobr)= @_;
- return "" if(AttrVal($d, "group", ""));
- my $alias= AttrVal($d, "alias", $d);
-
- my $ret = ($nobr ? "" : "
");
- $ret .= "$text " if($text);
- $ret .= FW_pH("detail=$d", $alias,0, "SVGlabel SVG_$d", 1,0) if(!$FW_subdir);
- $ret .= "
";
- return $ret;
-}
sub
@@ -246,10 +232,12 @@ SVG_FwFn($$$$)
if((!$pageHash || !$pageHash->{buttons}) &&
AttrVal($d, "fixedrange", "x") !~ m/^[ 0-9:-]*$/) {
+ $ret .= '
';
$ret .= SVG_zoomLink("zoom=-1", "Zoom-in", "zoom in");
$ret .= SVG_zoomLink("zoom=1", "Zoom-out","zoom out");
$ret .= SVG_zoomLink("off=-1", "Prev", "prev");
$ret .= SVG_zoomLink("off=1", "Next", "next");
+ $ret .= '
';
$pageHash->{buttons} = 1 if($pageHash);
$ret .= "
";
}
@@ -321,8 +309,13 @@ SVG_FwFn($$$$)
}
} else {
- $ret .= SVG_FwDetail($d, "", 1) if(!$FW_hiddenroom{detail});
-
+ if(!AttrVal($d, "group", "") && !$FW_subdir) {
+ my $alias = AttrVal($d, "alias", $d);
+ my $clAdd = "\" data-name=\"$d";
+ $clAdd .= "\" style=\"display:none;" if($FW_hiddenroom{detail});
+ $ret .= FW_pH("detail=$d", $alias, 0, "SVGlabel SVG_$d $clAdd", 1, 0);
+ $ret .= "
";
+ }
}
return $ret;
diff --git a/fhem/www/pgm2/f18.js b/fhem/www/pgm2/f18.js
index 0f816318c..3d98f84bb 100644
--- a/fhem/www/pgm2/f18.js
+++ b/fhem/www/pgm2/f18.js
@@ -1,8 +1,8 @@
"use strict";
FW_version["f18.js"] = "$Id$";
-// TODO: rewrite menu, dashboard, floorplan
-var f18_attr, f18_aCol, f18_sd, f18_isMobile, f18_icon={}, f18_move=false;
+// TODO: rewrite menu, floorplan
+var f18_attr, f18_aCol, f18_sd, f18_isMobile, f18_icon={}, f18_hasPos;
var f18_small = (screen.width < 480 || screen.height < 480);
$(window).resize(f18_resize);
@@ -103,9 +103,20 @@ f18_tables()
var ntr = $(el).closest("tr").next("tr");
isFixed ? $(ntr).show() : $(ntr).hide();
});
- f18_addMove(el, function(){ log("Hello") });
+ if(f18_attr.showDragger)
+ f18_addDragger(el);
+ f18_setPos(el);
});
+ $("div.SVGlabel").each(function(){
+ if(f18_attr.showDragger)
+ f18_addDragger(this);
+ f18_setPos(this);
+ });
+
+ if(f18_hasPos || f18_attr.showDragger)
+ $("div.pinHeader:not(.menu) div.pin").hide();
+
if(FW_urlParams.detail) {
$("div.makeTable > span").each(function(){
var el = this, grp = $(el).text();
@@ -132,15 +143,14 @@ f18_tables()
"");
};
- var addHider = function(name, desc, fn, lVarName)
+ var addHider = function(name, desc, fn)
{
addRow(name, desc, "");
$("table.f18colors tr.ar_"+name+" input")
- .prop("checked", lVarName ? window[lVarName] : f18_attr[name])
+ .prop("checked", f18_attr[name])
.click(function(){
var c = $(this).is(":checked");
- if(!lVarName)
- f18_setAttr(name, c);
+ f18_setAttr(name, c);
fn(c);
});
};
@@ -230,13 +240,14 @@ f18_tables()
$("body").toggleClass("rightMenu");
});
addHider("savePinChanges", "Save pin changes", function(){});
-
- /*
- addHider("hideMove", "Drag group", function(c){
- $("div.pinHeader div.move").css("display", c ? "block":"none");
- f18_move = c;
- }, "f18_move");
- */
+ addHider("showDragger", "Dragging active", function(c){
+ if(c) {
+ $("div.fileList").each(function(){ f18_addDragger(this) });
+ $("div.pinHeader:not(.menu) div.pin").hide();
+ } else {
+ $("div.pinHeader div.dragger").remove();
+ }
+ });
};
loadScript("pgm2/fhemweb_colorpicker.js", addColors);
@@ -251,8 +262,12 @@ f18_tables()
var ntr = $(el).next("table");
isFixed ? $(ntr).show() : $(ntr).hide();
});
- f18_addMove(el, function(){ log("Hello") });
+ if(f18_attr.showDragger)
+ f18_addDragger(el);
+ f18_setPos(el);
});
+ if(f18_hasPos || f18_attr.showDragger)
+ $("div.pinHeader:not(.menu) div.pin").hide();
}
}
@@ -278,7 +293,10 @@ f18_addPin(el, name, defVal, fn, hidePin)
.appendTo(el)
.css("background-image", "url('"+
(init ? f18_icon.pinIn : f18_icon.pinOut)+"')");
- $(el).addClass("col_header pinHeader "+name.replace(/[^A-Z0-9]/ig,'_'));
+ var f18_name = name.replace(/[^A-Z0-9]/ig,'_');
+ $(el)
+ .addClass("col_header pinHeader "+f18_name)
+ .attr("data-name", f18_name);
el = $(el).find("div.pin");
$(el)
.addClass(init ? "pinIn" : "")
@@ -296,16 +314,61 @@ f18_addPin(el, name, defVal, fn, hidePin)
}
function
-f18_addMove(el, fn)
+f18_addDragger(el)
{
- $("")
+ if(f18_small)
+ return;
+ var comp = $(el).hasClass("fileList") ? $(el).next("table") :
+ $(el).hasClass("SVGlabel") ? $(el).prev(".SVGplot") :
+ $(el).closest("tr").next().find(">td>table").first();
+
+ $("")
.appendTo(el)
- .css("background-image", "url('"+f18_icon.arrows+"')")
- .css("display", f18_move ? "block":"none");
- el = $(el).find("div.move");
- $(el)
- .css("cursor", "pointer")
- .click(fn);
+ .css({"cursor":"pointer",
+ "background-image":"url('"+f18_icon.arrows+"')"})
+ $(el).draggable({
+ drag:function(evt,ui){
+ $(comp).css({ left:ui.position.left, top:ui.position.top});
+ },
+ start:function(evt,ui){
+ $(comp).css({ position:"relative",
+ left:0, top:0, right:"auto", bottom:"auto" });
+ },
+ stop:function(evt,ui){
+ f18_setAttr("Pos."+$(el).attr("data-name"), ui.position);
+ },
+ });
+
+ $("")
+ .appendTo(el)
+ .css({"cursor":"pointer",
+ "background-image":"url('"+f18_icon.ban+"')"})
+ .click(function(){
+ $(el) .css({ left:0, top:0 });
+ $(comp).css({ left:0, top:0 });
+ delete(f18_attr["Pos."+$(el).attr("data-name")]);
+ f18_setAttr();
+ });
+}
+
+function
+f18_setPos(el)
+{
+ if(f18_small)
+ return;
+ var name = $(el).attr("data-name");
+ var pos = f18_attr["Pos."+name];
+ if(!pos)
+ return;
+
+ f18_hasPos = true;
+ var comp = $(el).hasClass("fileList") ? $(el).next("table") :
+ $(el).hasClass("SVGlabel") ? $(el).prev(".SVGplot") :
+ $(el).closest("tr").next().find(">td>table").first();
+ $(el).css({ position:"relative",
+ left:pos.left, top:pos.top, right:"auto", bottom:"auto" });
+ $(comp).css({ position:"relative",
+ left:pos.left, top:pos.top, right:"auto", bottom:"auto" });
}
function
@@ -448,3 +511,18 @@ f18_icon.pinIn=f18_svgPrefix+'d="M896 1088q66 0 128-15v655q0 26-19 45t-45 19h-12
f18_icon.bars=f18_svgPrefix+'d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/>';
f18_icon.arrows=f18_svgPrefix+'d="M1792 896q0 26-19 45l-256 256q-19 19-45 19t-45-19-19-45v-128h-384v384h128q26 0 45 19t19 45-19 45l-256 256q-19 19-45 19t-45-19l-256-256q-19-19-19-45t19-45 45-19h128v-384h-384v128q0 26-19 45t-45 19-45-19l-256-256q-19-19-19-45t19-45l256-256q19-19 45-19t45 19 19 45v128h384v-384h-128q-26 0-45-19t-19-45 19-45l256-256q19-19 45-19t45 19l256 256q19 19 19 45t-19 45-45 19h-128v384h384v-128q0-26 19-45t45-19 45 19l256 256q19 19 19 45z"/>';
+
+f18_icon.ban=f18_svgPrefix+'d="M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5t173.5-116.5 116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73t-198 199-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164-163.5-246-61-300 61-299.5 163.5-245.5 245-164 298.5-61 298.5 61 245 164 163.5 245.5 61 299.5z"/>';
+
+
+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011-2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ * jquery.ui.widget.js
+ * jquery.ui.mouse.js
+ */
+!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
diff --git a/fhem/www/pgm2/f18style.css b/fhem/www/pgm2/f18style.css
index 78faeddcb..beb52f74b 100644
--- a/fhem/www/pgm2/f18style.css
+++ b/fhem/www/pgm2/f18style.css
@@ -45,7 +45,7 @@ div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
select,input[type=submit] { cursor:pointer; }
-div.pin, div.move { float:right; width:1em; height:1em; margin-left:0.5em; }
+div.pin, div.dragger { float:right; width:1em; height:1em; margin-left:0.5em; }
div.pinHeader { height:1em; padding:2px; }
body.touch a { font-size: 20px; }
@@ -63,3 +63,5 @@ body.pinnedMenu #logo { left:10px; }
body.small.rightMenu #menuBtn { right:10px; left:auto; }
body.small.rightMenu #logo { right:52px; left:auto; }
body.small.rightMenu #hdr { left:10px; right:auto; }
+
+div.SVGlabel { display:inline-block; }
diff --git a/fhem/www/pgm2/fhemweb.js b/fhem/www/pgm2/fhemweb.js
index 21bf2c6d6..4ebf88472 100644
--- a/fhem/www/pgm2/fhemweb.js
+++ b/fhem/www/pgm2/fhemweb.js
@@ -457,7 +457,10 @@ FW_csrfRefresh(callback)
function
FW_cmd(arg, callback)
{
- log("FW_cmd:"+arg);
+ if(arg.length < 120)
+ log("FW_cmd:"+arg);
+ else
+ log("FW_cmd:"+arg.substr(0,120)+"...");
$.ajax({
url:addcsrf(arg)+'&fw_id='+$("body").attr('fw_id'),
method:'POST',