svg.js: fix copy&paste, switch from cookie to indexedDB

git-svn-id: https://svn.fhem.de/fhem/trunk@8879 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/FHEM/98_SVG.pm

@@ -1591,7 +1591,7 @@ SVG_render($$$$$$$$$$)
   $hmin{x1y1}=$hmin{x1y2}, $hmax{x1y1}=$hmax{x1y2} if(!defined($hmin{x1y1}));
   $hmin{x1y2}=$hmin{x1y1}, $hmax{x1y2}=$hmax{x1y1} if(!defined($hmin{x1y2}));
 
-  my (%hstep,%htics,%axdrawn);
+  my (%hstep,%htics);
 
   #-- yrange handling for axes x1y1..x1y8
   for my $idx (0..7)  {
@@ -1615,16 +1615,15 @@ SVG_render($$$$$$$$$$)
     $htics{$a} = defined($conf{$yt}) ? $conf{$yt} : "";
 
     #-- Round values, compute a nice step  
-    ($hstep{$a}, $hmin{$a}, $hmax{$a}) = SVG_getSteps($conf{$yra},$hmin{$a},$hmax{$a});
+    ($hstep{$a}, $hmin{$a}, $hmax{$a}) =
-    $axdrawn{$a} = 0;
+        SVG_getSteps($conf{$yra},$hmin{$a},$hmax{$a});
 
-    #Log3 $name, 2, "Axis $a has interval [$hmin{$a},$hmax{$a}], step $hstep{$a}, tics $htics{$a}\n";
+    #Log3 $name, 2, "Axis $a has interval [$hmin{$a},$hmax{$a}],
+    # step $hstep{$a}, tics $htics{$a}\n";
   }
 
   #-- run through all axes for drawing (each only once !) 
   foreach my $a (sort keys %hmin) {
-    next if( $axdrawn{$a} );
-    $axdrawn{$a}=1;
 
     next if(!defined($hmin{$a})); # Bogus case
 

fhem/www/pgm2/defaultCommon.css

@@ -78,7 +78,7 @@ span.sort-item-delete-link {
 
 pre { white-space: pre-wrap; }
 svg { height:32px; width:32px; vertical-align:middle; margin:2px 0; }
-svg:not([fill]) { fill:#278727; }
+svg:not([fill]):not(.jssvg) { fill:#278727; }
 
 svg.on,svg.FS20_on { fill:orange; }
 

fhem/www/pgm2/svg.js

@@ -1,56 +1,44 @@
 "use strict";
 var svgNS = "http://www.w3.org/2000/svg";
-var svg_b64 ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 var svg_initialized={}, lastHidden;
+var svg_db, svg_dbtbl = "SVG_KEYVALUE", svg_pastedata;
 
-
-
-// Base64 encode the xy points (12 bit x, 12 bit y).
 function
-svg_compressPoints(pointList)
+svg_initDb(nextFn)
 {
-  var i, x, y, lx = -1, ly, ret = "";
+  if(window.indexedDB == undefined)
-  var pl_arr = pointList.replace(/^  */,'').split(/[, ]/);
+    return;
-  for(i = 0; i < pl_arr.length; i +=2) {
+  var dbreq = indexedDB.open("FHEM", 1)
-    x = parseInt(pl_arr[i]);
+  dbreq.onsuccess = function(op) { svg_db = op.target.result; nextFn() }
-    y = parseInt(pl_arr[i+1]);
+  dbreq.onerror   = function(op) { log("indexedDB.open Error: " + op.message); }
-    if(pl_arr.length > 500 && lx != -1 && x-lx < 2)    // Filter the data.
+  dbreq.onupgradeneeded = function(op) {
-      continue;
+    svg_db = op.target.result;
-    ret = ret+
+    svg_db.createObjectStore(svg_dbtbl, { keyPath:"key" });
-          svg_b64.charAt((x&0xfc0)>>6)+
+  };
-          svg_b64.charAt((x&0x3f))+
-          svg_b64.charAt((y&0xfc0)>>6)+
-          svg_b64.charAt((y&0x3f));
-    lx = x; ly = y;
-  }
-  return ret;
 }
 
 function
-svg_uncompressPoints(cmpData)
+svg_save(key, value)
 {
-  var i = 0, ret = "";
+  if(!svg_db)
-  while(i < cmpData.length) {
+    return;
-    var x = (svg_b64.indexOf(cmpData.charAt(i++))<<6)+
+  var os = svg_db.transaction([svg_dbtbl],"readwrite")
-             svg_b64.indexOf(cmpData.charAt(i++));
+                 .objectStore(svg_dbtbl);
-    var y = (svg_b64.indexOf(cmpData.charAt(i++))<<6)+
+  os.put({key:key, val:value});
-             svg_b64.indexOf(cmpData.charAt(i++));
-    ret += " "+x+","+y;
 }
-  return ret;
-}
-
 
 function
-svg_getcookie()
+svg_load(key, nextFn)
 {
-  var c = document.cookie;
+  if(!svg_db)
-  if(c == null)
+    return;
-    return [];
+  var req = svg_db.transaction([svg_dbtbl],"readonly")
-  var results = c.match('fhemweb=(.*?)(;|$)' );
+                 .objectStore(svg_dbtbl)
-  return (results ? unescape(results[1]).split(":") : []);
+                 .get(key);
+  req.onsuccess = function(e) { if(req.result) nextFn(req.result.val); }
 }
 
+
 function
 svg_prepareHash(el)
 {
@@ -83,7 +71,6 @@ sv_menu(evt, embed)
   var svg = $(label).closest("svg");
   var svgNode = $(svg).get(0);
   var lid = $(label).attr("line_id");
-  var data = svg_getcookie();
   var sel = $(svg).find("#"+lid);
   var selNode = $(sel).get(0);
   var tl = $(svg).find("#svg_title");
@@ -112,7 +99,7 @@ sv_menu(evt, embed)
       "Hide other lines",
       "Show all lines",
       selNode.showVal ? "Stop displaying values" : "Display plot values" ],
-    [undefined, data.length==0,
+    [undefined, svg_pastedata == undefined,
       !selNode.isHidden && (lines.length - hidden.length) == 1,
       !selNode.isHidden && (lines.length - hidden.length) == 1,
       hidden.length==0,
@@ -121,21 +108,26 @@ sv_menu(evt, embed)
 
       //////////////////////////////////// copy
       if(arg == 0) {
-        document.cookie="fhemweb="+
+        svg_pastedata = {
-              $(sel).attr("y_min")+":"+$(sel).attr("y_mul")+":"+
+          key:"svg_pastedata",
-              svg_compressPoints($(sel).attr(pn));
+          tag:sn, attr:pn,
+          y_min:$(sel).attr("y_min"),
+          y_mul:$(sel).attr("y_mul"),
+          datapoints:$(sel).attr(pn)
+        };
+        svg_save("svg_pastedata", svg_pastedata);
       }
 
       //////////////////////////////////// paste
       if(arg == 1) {
         var doc = $(svg).get(0).ownerDocument;
-        var o=doc.createElementNS(svgNS, "polyline");
+        var o=doc.createElementNS(svgNS, svg_pastedata.tag);
-        o.setAttribute("class", "pasted");
+        o.setAttribute("class", "SVGplot pasted");
-        o.setAttribute(pn, svg_uncompressPoints(data[2]));
+        o.setAttribute(svg_pastedata.attr, svg_pastedata.datapoints);
 
         var h  = parseFloat($(sel).attr("y_h"));
-        var ny_mul = parseFloat(data[1]);
+        var ny_mul = parseFloat(svg_pastedata.y_mul);
-        var ny_min = parseInt(data[0]);
+        var ny_min = parseInt(svg_pastedata.y_min);
         var y_mul  = parseFloat($(sel).attr("y_mul"));
         var y_min  = parseInt($(sel).attr("y_min"));
         var tr = 
@@ -331,6 +323,9 @@ svg_init(par)    // also called directly from perl, in race condition
 
 $(document).ready(function(){
   svg_init();                          // <embed><svg>
+  svg_initDb(function(){
+    svg_load("svg_pastedata", function(val) {svg_pastedata = val} );
+  });
   $("svg[id]").each(function(){        // <svg> (direct)
     if($(this).attr("id").indexOf("SVGPLOT") == 0)
       svg_init_one(undefined, this);