Public/fhem-mirror
1
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-05-04 22:19:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Copy & Paste graph

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk/fhem@645 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2010-07-05 10:03:55 +00:00
parent 9715e0bc80
commit 51304bd1a3
4 changed files with 133 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webfrontend/pgm2/01_FHEMWEB.pm
View File

@ -359,6 +359,7 @@ FW_AnswerCall($)
my $stylecss = ($__ss ? "style_smallscreen.css" : "style.css"); my $stylecss = ($__ss ? "style_smallscreen.css" : "style.css");
pO "<link href=\"$__ME/$stylecss\" rel=\"stylesheet\"/>"; pO "<link href=\"$__ME/$stylecss\" rel=\"stylesheet\"/>";
pO "<meta name=\"viewport\" content=\"width=device-width\"/>" if($__ss); pO "<meta name=\"viewport\" content=\"width=device-width\"/>" if($__ss);
pO "<script type=\"text/javascript\" src=\"$__ME/svg.js\"></script>";
pO "</head>\n<body name=\"$t\">"; pO "</head>\n<body name=\"$t\">";
if($__cmdret) { if($__cmdret) {
@ -899,6 +900,7 @@ FW_logWrapper($)
my ($w, $h) = split(",", FW_getAttr($d,"plotsize",$__plotsize)); my ($w, $h) = split(",", FW_getAttr($d,"plotsize",$__plotsize));
pO "<embed src=\"$arg\" type=\"image/svg+xml\"" . pO "<embed src=\"$arg\" type=\"image/svg+xml\"" .
"width=\"$w\" height=\"$h\" name=\"$d\"/>\n"; "width=\"$w\" height=\"$h\" name=\"$d\"/>\n";
} else { } else {
pO "<img src=\"$arg\"/>"; pO "<img src=\"$arg\"/>";
} }
@ -1507,6 +1509,7 @@ FW_showWeblink($$$)
my ($w, $h) = split(",", FW_getAttr($d,"plotsize",$__plotsize)); my ($w, $h) = split(",", FW_getAttr($d,"plotsize",$__plotsize));
pO "<embed src=\"$arg\" type=\"image/svg+xml\"" . pO "<embed src=\"$arg\" type=\"image/svg+xml\"" .
"width=\"$w\" height=\"$h\" name=\"$d\"/>\n"; "width=\"$w\" height=\"$h\" name=\"$d\"/>\n";
} else { } else {
pO "<img src=\"$arg\"/>"; pO "<img src=\"$arg\"/>";
} }

20
webfrontend/pgm2/98_SVG.pm
View File

@ -51,15 +51,16 @@ SVG_render($$$$$$)
my ($ow,$oh) = split(",", $ps); # Original width my ($ow,$oh) = split(",", $ps); # Original width
my ($w, $h) = ($ow-2*$x, $oh-2*$y); # Rect size my ($w, $h) = ($ow-2*$x, $oh-2*$y); # Rect size
# Html Header # Html Header
pO "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; pO "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
pO "<?xml-stylesheet href=\"$__ME/svg_style.css\" type=\"text/css\"?>"; pO "<?xml-stylesheet href=\"$__ME/svg_style.css\" type=\"text/css\"?>";
pO "<!DOCTYPE svg>"; pO "<!DOCTYPE svg>";
pO "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" ". pO "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" ".
"xmlns:xlink=\"http://www.w3.org/1999/xlink\" " . "xmlns:xlink=\"http://www.w3.org/1999/xlink\" " .
">"; ">";
pO "<script type=\"text/ecmascript\" ". #pO "<script type=\"text/ecmascript\" xlink:href=\"$__ME/svg.js\"/>";
"xlink:href=\"$__ME/svg.js\"/>";
# Rectangle # Rectangle
pO "<rect x=\"$x\" y=\"$y\" width =\"$w\" height =\"$h\" ". pO "<rect x=\"$x\" y=\"$y\" width =\"$w\" height =\"$h\" ".
@ -72,6 +73,14 @@ SVG_render($$$$$$)
pO "<text id=\"svg_title\" x=\"$off1\" y=\"$off2\" " . pO "<text id=\"svg_title\" x=\"$off1\" y=\"$off2\" " .
"class=\"title\" text-anchor=\"middle\">$title</text>"; "class=\"title\" text-anchor=\"middle\">$title</text>";
pO "<text id=\"svg_paste\" x=\"" . ($ow-$x) . "\" y=\"$off2\" " .
"onclick=\"parent.svg_paste(evt)\" " .
"class=\"paste\" text-anchor=\"end\"> </text>";
pO "<text id=\"svg_copy\" x=\"" . ($ow-2*$x) . "\" y=\"$off2\" " .
"onclick=\"parent.svg_copy(evt)\" " .
"class=\"copy\" text-anchor=\"end\"> </text>";
my $t = ($conf{ylabel} ? $conf{ylabel} : ""); my $t = ($conf{ylabel} ? $conf{ylabel} : "");
$t =~ s/"//g; $t =~ s/"//g;
($off1,$off2) = (3*$th/4, $oh/2); ($off1,$off2) = (3*$th/4, $oh/2);
@ -98,6 +107,7 @@ SVG_render($$$$$$)
($off1,$off2) = ($ow-$x-$th, $y+$th); ($off1,$off2) = ($ow-$x-$th, $y+$th);
for my $i (0..int(@ltitle)-1) { for my $i (0..int(@ltitle)-1) {
my $j = $i+1; my $j = $i+1;
my $t = $ltitle[$i]; my $t = $ltitle[$i];
@ -107,7 +117,7 @@ SVG_render($$$$$$)
$data{"min$j"}, $data{"max$j"}, $data{"currval$j"}); $data{"min$j"}, $data{"max$j"}, $data{"currval$j"});
} }
pO "<text title=\"$desc\" ". pO "<text title=\"$desc\" ".
"onclick=\"svg_labelselect(evt)\" line_id=\"line_$i\" " . "onclick=\"parent.svg_labelselect(evt)\" line_id=\"line_$i\" " .
"x=\"$off1\" y=\"$off2\" text-anchor=\"end\" class=\"l$i\">$t</text>"; "x=\"$off1\" y=\"$off2\" text-anchor=\"end\" class=\"l$i\">$t</text>";
$off2 += $th; $off2 += $th;
} }
@ -326,7 +336,7 @@ SVG_render($$$$$$)
my $js_helpers = "id=\"line_$idx\" decimals=\"$dec\" ". my $js_helpers = "id=\"line_$idx\" decimals=\"$dec\" ".
"x_off=\"$fromsec\" x_min=\"$x\" x_mul=\"$tmul\" ". "x_off=\"$fromsec\" x_min=\"$x\" x_mul=\"$tmul\" ".
"y_h=\"$yh\" y_min=\"$min\" y_mul=\"$hmul\" title=\"$tl\" ". "y_h=\"$yh\" y_min=\"$min\" y_mul=\"$hmul\" title=\"$tl\" ".
"onclick=\"svg_click(evt)\""; "onclick=\"parent.svg_click(evt)\"";
my ($lx, $ly) = (-1,-1); my ($lx, $ly) = (-1,-1);
if($type[$idx] eq "points" ) { if($type[$idx] eq "points" ) {

116
webfrontend/pgm2/svg.js
View File

@ -1,16 +1,118 @@
var xmlns="http://www.w3.org/2000/svg";
var old_title; var old_title;
var old_sel; var old_sel;
var svgdoc;
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
// Base64 encode the xy points (12 bit x, 12 bit y).
function
compressPoints(pointList)
{
var i, x, y, lx = -1, ly, ret = "";
var pl_arr = pointList.split(" ");
for(i = 0; i < pl_arr.length; i++) {
var xy = pl_arr[i].split(",");
x = parseInt(xy[0]);
y = parseInt(xy[1]);
if(pl_arr.length > 500 && lx != -1 && x-lx < 2) // Filter the data.
continue;
ret = ret+
b64.charAt((x&0xfc0)>>6)+
b64.charAt((x&0x3f))+
b64.charAt((y&0xfc0)>>6)+
b64.charAt((y&0x3f));
lx = x; ly = y;
}
return ret;
}
function
uncompressPoints(cmpData)
{
var i = 0, ret = "";
while(i < cmpData.length) {
var x = (b64.indexOf(cmpData.charAt(i++))<<6)+
b64.indexOf(cmpData.charAt(i++));
var y = (b64.indexOf(cmpData.charAt(i++))<<6)+
b64.indexOf(cmpData.charAt(i++));
ret += " "+x+","+y;
}
return ret;
}
function
get_cookie(name)
{
var c = parent.document.cookie;
if(c == null)
return "";
var results = c.match("fw_"+escape(name)+'=(.*?)(;|$)' );
return (results ? unescape(results[1]) : "");
}
function
set_cookie(name, value)
{
name = "fw_"+escape(name);
parent.document.cookie=name+"="+escape(value);
}
function
svg_copy(evt)
{
var d = evt.target.ownerDocument;
var cp = d.getElementById("svg_copy");
cp.firstChild.nodeValue = " ";
set_cookie(old_sel.getAttribute("title"),
old_sel.getAttribute("y_min")+":"+
old_sel.getAttribute("y_mul")+":"+
compressPoints(old_sel.getAttribute("points")));
}
function
svg_paste(evt)
{
var d = evt.target.ownerDocument;
var ps = d.getElementById("svg_paste");
ps.firstChild.nodeValue = " ";
var o=d.createElementNS(xmlns, "polyline");
o.setAttribute("class", "pasted");
var data = get_cookie(old_sel.getAttribute("title")).split(":", 3);
o.setAttribute("points", uncompressPoints(data[2]));
var h = parseFloat(old_sel.getAttribute("y_h"));
var ny_mul = parseFloat(data[1]);
var ny_min = parseInt(data[0]);
var y_mul = parseFloat(old_sel.getAttribute("y_mul"));
var y_min = parseInt(old_sel.getAttribute("y_min"));
var tr =
"translate(0,"+ (h/y_mul+y_min-h/ny_mul-ny_min)*y_mul +") "+
"scale(1, "+ (y_mul/ny_mul) +") ";
o.setAttribute("transform", tr);
d.documentElement.appendChild(o);
}
function function
svg_labelselect(evt) svg_labelselect(evt)
{ {
var sel = document.getElementById(evt.target.getAttribute("line_id")); var d = evt.target.ownerDocument;
var tl = document.getElementById("svg_title"); var sel = d.getElementById(evt.target.getAttribute("line_id"));
var tl = d.getElementById("svg_title");
var cp = d.getElementById("svg_copy");
var ps = d.getElementById("svg_paste");
if(old_sel == sel) { if(old_sel == sel) {
sel.setAttribute("stroke-width", 1); sel.setAttribute("stroke-width", 1);
old_sel = null; old_sel = null;
tl.firstChild.nodeValue = old_title; tl.firstChild.nodeValue = old_title;
cp.firstChild.nodeValue = " ";
ps.firstChild.nodeValue = " ";
} else { } else {
if(old_sel == null) if(old_sel == null)
@ -19,7 +121,12 @@ svg_labelselect(evt)
old_sel.setAttribute("stroke-width", 1); old_sel.setAttribute("stroke-width", 1);
sel.setAttribute("stroke-width", 3); sel.setAttribute("stroke-width", 3);
old_sel = sel; old_sel = sel;
tl.firstChild.nodeValue = evt.target.getAttribute("title"); if(sel.getAttribute("points") != null) {
tl.firstChild.nodeValue = evt.target.getAttribute("title");
cp.firstChild.nodeValue = "Copy";
ps.firstChild.nodeValue = (
get_cookie(sel.getAttribute("title"))==""?" ":"Paste");
}
} }
} }
@ -27,6 +134,7 @@ svg_labelselect(evt)
function function
svg_click(evt) svg_click(evt)
{ {
var d = evt.target.ownerDocument;
var t=evt.target; var t=evt.target;
var y_mul = parseFloat(t.getAttribute("y_mul")); var y_mul = parseFloat(t.getAttribute("y_mul"));
var y_h = parseFloat(t.getAttribute("y_h")); var y_h = parseFloat(t.getAttribute("y_h"));
@ -41,6 +149,6 @@ svg_click(evt)
var ts = (d.getHours() < 10 ? '0' : '') + d.getHours() + ":"+ var ts = (d.getHours() < 10 ? '0' : '') + d.getHours() + ":"+
(d.getMinutes() < 10 ? '0' : '') + d.getMinutes(); (d.getMinutes() < 10 ? '0' : '') + d.getMinutes();
var tl = document.getElementById('svg_title'); var tl = d.getElementById('svg_title');
tl.firstChild.nodeValue = t.getAttribute("title")+": "+y_org+" ("+ts+")"; tl.firstChild.nodeValue = t.getAttribute("title")+": "+y_org+" ("+ts+")";
} }

3
webfrontend/pgm2/svg_style.css
View File

@ -1,5 +1,7 @@
text { font-family:Times; font-size:12px; } text { font-family:Times; font-size:12px; }
text.title { font-size:16px; } text.title { font-size:16px; }
text.copy { font-size:16px; stroke:none; fill:blue; }
text.paste { font-size:16px; stroke:none; fill:blue; }
rect.border { stroke:black; stroke-width:1px; fill:none; } rect.border { stroke:black; stroke-width:1px; fill:none; }
@ -17,3 +19,4 @@ polyline { stroke:black; fill:none; }
.l6 { stroke:olive; } text.l6 { stroke:none; fill:olive; } .l6 { stroke:olive; } text.l6 { stroke:none; fill:olive; }
.l7 { stroke:gray; } text.l7 { stroke:none; fill:gray; } .l7 { stroke:gray; } text.l7 { stroke:none; fill:gray; }
.l8 { stroke:yellow; } text.l8 { stroke:none; fill:yellow; } .l8 { stroke:yellow; } text.l8 { stroke:none; fill:yellow; }
.pasted { stroke-dasharray:1,1; stroke:black; }