From 51304bd1a341d79f0a0f8522d898436620f62c0b Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Mon, 5 Jul 2010 10:03:55 +0000
Subject: [PATCH] Copy & Paste graph

git-svn-id: https://svn.fhem.de/fhem/trunk/fhem@645 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 webfrontend/pgm2/01_FHEMWEB.pm |   3 +
 webfrontend/pgm2/98_SVG.pm     |  20 ++++--
 webfrontend/pgm2/svg.js        | 116 +++++++++++++++++++++++++++++++--
 webfrontend/pgm2/svg_style.css |   3 +
 4 files changed, 133 insertions(+), 9 deletions(-)
diff --git a/webfrontend/pgm2/01_FHEMWEB.pm b/webfrontend/pgm2/01_FHEMWEB.pm
index 210942988..fad324229 100755
--- a/webfrontend/pgm2/01_FHEMWEB.pm
+++ b/webfrontend/pgm2/01_FHEMWEB.pm
@@ -359,6 +359,7 @@ FW_AnswerCall($)
   my $stylecss = ($__ss ? "style_smallscreen.css" : "style.css");
   pO "<link href=\"$__ME/$stylecss\" rel=\"stylesheet\"/>";
   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\">";
 
   if($__cmdret) {
@@ -899,6 +900,7 @@ FW_logWrapper($)
       my ($w, $h) = split(",", FW_getAttr($d,"plotsize",$__plotsize));
       pO "<embed src=\"$arg\" type=\"image/svg+xml\"" .
                     "width=\"$w\" height=\"$h\" name=\"$d\"/>\n";
+
     } else {
       pO "<img src=\"$arg\"/>";
     }
@@ -1507,6 +1509,7 @@ FW_showWeblink($$$)
         my ($w, $h) = split(",", FW_getAttr($d,"plotsize",$__plotsize));
         pO "<embed src=\"$arg\" type=\"image/svg+xml\"" .
               "width=\"$w\" height=\"$h\" name=\"$d\"/>\n";
+
       } else {
         pO "<img src=\"$arg\"/>";
       }
diff --git a/webfrontend/pgm2/98_SVG.pm b/webfrontend/pgm2/98_SVG.pm
index 1ac2f6856..797f4485e 100755
--- a/webfrontend/pgm2/98_SVG.pm
+++ b/webfrontend/pgm2/98_SVG.pm
@@ -51,15 +51,16 @@ SVG_render($$$$$$)
   my ($ow,$oh) = split(",", $ps);       # Original width
   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-stylesheet href=\"$__ME/svg_style.css\" type=\"text/css\"?>";
   pO "<!DOCTYPE svg>";
   pO "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" ".
         "xmlns:xlink=\"http://www.w3.org/1999/xlink\" " .
         ">";
-  pO "<script type=\"text/ecmascript\" ".
-        "xlink:href=\"$__ME/svg.js\"/>";
+  #pO "<script type=\"text/ecmascript\" xlink:href=\"$__ME/svg.js\"/>";
+
+  
 
   # Rectangle
   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\" " .
         "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} : "");
   $t =~ s/"//g;
   ($off1,$off2) = (3*$th/4, $oh/2);
@@ -98,6 +107,7 @@ SVG_render($$$$$$)
   ($off1,$off2) = ($ow-$x-$th, $y+$th);
 
 
+
   for my $i (0..int(@ltitle)-1) {
     my $j = $i+1;
     my $t = $ltitle[$i];
@@ -107,7 +117,7 @@ SVG_render($$$$$$)
         $data{"min$j"}, $data{"max$j"}, $data{"currval$j"});
     }
     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>";
     $off2 += $th;
   }
@@ -326,7 +336,7 @@ SVG_render($$$$$$)
     my $js_helpers = "id=\"line_$idx\" decimals=\"$dec\" ".
           "x_off=\"$fromsec\" x_min=\"$x\" x_mul=\"$tmul\" ".
           "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);
     if($type[$idx] eq "points" ) {
diff --git a/webfrontend/pgm2/svg.js b/webfrontend/pgm2/svg.js
index a21915988..aad8410dc 100644
--- a/webfrontend/pgm2/svg.js
+++ b/webfrontend/pgm2/svg.js
@@ -1,16 +1,118 @@
+var xmlns="http://www.w3.org/2000/svg";
 var old_title;
 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
 svg_labelselect(evt)
 {
-  var sel = document.getElementById(evt.target.getAttribute("line_id"));
-  var tl  = document.getElementById("svg_title");
+  var d = evt.target.ownerDocument;
+  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) {
     sel.setAttribute("stroke-width", 1);
     old_sel = null;
     tl.firstChild.nodeValue = old_title;
+    cp.firstChild.nodeValue = " ";
+    ps.firstChild.nodeValue = " ";
 
   } else {
     if(old_sel == null)
@@ -19,7 +121,12 @@ svg_labelselect(evt)
       old_sel.setAttribute("stroke-width", 1);
     sel.setAttribute("stroke-width", 3);
     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
 svg_click(evt)
 {
+  var d = evt.target.ownerDocument;
   var t=evt.target;
   var y_mul = parseFloat(t.getAttribute("y_mul"));
   var y_h   = parseFloat(t.getAttribute("y_h"));
@@ -41,6 +149,6 @@ svg_click(evt)
   var ts = (d.getHours() < 10 ? '0' : '') + d.getHours() + ":"+
            (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+")";
 }
diff --git a/webfrontend/pgm2/svg_style.css b/webfrontend/pgm2/svg_style.css
index 3f80426fe..8684ccf64 100644
--- a/webfrontend/pgm2/svg_style.css
+++ b/webfrontend/pgm2/svg_style.css
@@ -1,5 +1,7 @@
 text { font-family:Times; font-size:12px; }
 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; }
 
@@ -17,3 +19,4 @@ polyline { stroke:black; fill:none; }
 .l6 { stroke:olive;   } text.l6 { stroke:none; fill:olive; }
 .l7 { stroke:gray;    } text.l7 { stroke:none; fill:gray; }
 .l8 { stroke:yellow;  } text.l8 { stroke:none; fill:yellow; }
+.pasted { stroke-dasharray:1,1; stroke:black; }
