98_SVG.pm: implement plotEmbed=2 (Forum #106646)

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

fhem/FHEM/01_FHEMWEB.pm

@@ -186,7 +186,7 @@ FHEMWEB_Initialize($)
     ploteditor:always,onClick,never
     plotfork:1,0
     plotmode:gnuplot-scroll,gnuplot-scroll-svg,SVG
-    plotEmbed:0,1
+    plotEmbed:2,1,0
     plotsize
     plotWeekStartDay:0,1,2,3,4,5,6
     nrAxis
@@ -548,7 +548,8 @@ FW_Read($$)
 
   $arg = "" if(!defined($arg));
   Log3 $FW_wname, 4, "$name $method $arg; BUFLEN:".length($hash->{BUF});
-  my $pf = AttrVal($FW_wname, "plotfork", 0);
+  my $pf = AttrVal($FW_wname, "plotfork", undef);
+  $pf = 1 if(!defined($pf) && AttrVal($FW_wname, "plotEmbed", 0) == 2);
   if($pf) {   # 0 disables
     # Process SVG rendering as a parallel process
     my $p = $data{FWEXT};
@@ -3953,9 +3954,11 @@ FW_show($$)
 
     <a name="plotEmbed"></a>
     <li>plotEmbed<br>
-        If set (to 1), SVG plots will be rendered as part of &lt;embed&gt;
+        If set to 1, SVG plots will be rendered as part of &lt;embed&gt;
         tags, as in the past this was the only way to display SVG.  Setting
         plotEmbed to 0 (the default) will render SVG in-place.<br>
+        Setting plotEmbed to 2 will load the SVG via JavaScript, in order to
+        enable parallelization without the embed tag.
     </li><br>
 
     <a name="plotfork"></a>
@@ -4690,11 +4693,13 @@ FW_show($$)
         </li><br>
 
     <a name="plotEmbed"></a>
-    <li>plotEmbed 0<br>
+    <li>plotEmbed<br>
-        Falls gesetzt (auf 1), dann werden SVG Grafiken mit &lt;embed&gt; Tags
+        Falls 1, dann werden SVG Grafiken mit &lt;embed&gt; Tags
         gerendert, da auf &auml;lteren Browsern das die einzige
         M&ouml;glichkeit war, SVG dastellen zu k&ouml;nnen. Falls 0 (die
         Voreinstellung), dann werden die SVG Grafiken "in-place" gezeichnet.
+        Falls 2, dann werden die Grafiken per JavaScript nachgeladen, um eine
+        Parallelisierung auch ohne embed Tags zu erm&ouml;glichen.
     </li><br>
 
     <a name="plotfork"></a>

fhem/FHEM/98_SVG.pm

@@ -49,6 +49,9 @@ sub SVG_getControlPoints($);
 sub SVG_calcControlPoints($$$$$$);
 
 my %SVG_devs;       # hash of from/to entries per device
+my $SVG_hdr = 'version="1.1" xmlns="http://www.w3.org/2000/svg" '.
+              'xmlns:xlink="http://www.w3.org/1999/xlink" '.
+              'data-origin="FHEM"';
 
 
 #####################################
@@ -185,7 +188,7 @@ SVG_getplotsize($)
 }
 
 sub
-SVG_isEmbed($)
+SVG_embed()
 {
   return AttrVal($FW_wname, "plotEmbed", 0);
 }
@@ -238,10 +241,16 @@ SVG_FwFn($$$$)
   if($pm eq "SVG") {
     $ret .= "<div class=\"SVGplot SVG_$d\">";
 
-    if(SVG_isEmbed($FW_wname)) {
+    my $embed = SVG_embed();
+    if($embed) {
       my ($w, $h) = split(",", SVG_getplotsize($d));
-      $ret .= "<embed src=\"$arg\" type=\"image/svg+xml\" " .
+      if($embed == 1) {
-            "width=\"$w\" height=\"$h\" name=\"$d\"/>\n";
+        $ret .= "<embed src='$arg' type='image/svg+xml' " .
+              "width='$w' height='$h' name='$d'/>\n";
+      } else {
+        $ret .= "<svg $SVG_hdr class='plotembed_2' data-src='$arg' ".
+                  "data-dev='$d' style='width:${w}px; height:${h}px'></svg>\n";
+      }
 
     } else {
       my $oret=$FW_RET; $FW_RET="";
@@ -1081,9 +1090,9 @@ SVG_doShowLog($$$$;$)
 
     if($pm && $pm =~ m/SVG/) { # FW_fatal for SVG:
       $FW_RETTYPE = "image/svg+xml";
-      FW_pO '<svg xmlns="http://www.w3.org/2000/svg">';
+      FW_pO "<svg $SVG_hdr>";
-      FW_pO '<text x="20" y="20">'.$msg.'</text>';
+      FW_pO "<text x='20' y='20'>$msg</text>";
-      FW_pO '</svg>';
+      FW_pO "</svg>";
       return ($FW_RETTYPE, $FW_RET);
 
     } else {
@@ -1389,15 +1398,14 @@ SVG_render($$$$$$$$$$)
 
   ######################
   # SVG Header
-  my $svghdr = 'version="1.1" xmlns="http://www.w3.org/2000/svg" '.
+  my $svghdr = "$SVG_hdr id='SVGPLOT_$name' $filter";
-               'xmlns:xlink="http://www.w3.org/1999/xlink" '.
+  my $style =  "style='width:${ow}px; height:${oh}px;'";
-               "id='SVGPLOT_$name' $filter data-origin='FHEM'";
   if(!$noHeader) {
     SVG_pO '<?xml version="1.0" encoding="UTF-8"?>';
     SVG_pO '<!DOCTYPE svg>';
-    SVG_pO "<svg $svghdr width=\"${ow}px\" height=\"${oh}px\">";
+    SVG_pO "<svg $svghdr width='${ow}px' height='${oh}px' $style>";
   } else {
-    SVG_pO "<svg $svghdr style='width:${ow}px; height:${oh}px;'>";
+    SVG_pO "<svg $svghdr $style>";
   }
 
   my $prf = AttrVal($parent_name, "stylesheetPrefix", "");
@@ -2218,10 +2226,13 @@ SVG_render($$$$$$$$$$)
     $txtoff2 += $th;
   }
 
-  my $fnName = SVG_isEmbed($FW_wname) ? "parent.window.svg_init" : "svg_init";
+  my $embed = SVG_embed();
-
+  if($embed != 2) {
-  SVG_pO "<script type='text/javascript'>if(typeof $fnName == 'function') ".
+    my $fnName = $embed ? "parent.window.svg_init" : "svg_init";
+    SVG_pO "<script type='text/javascript'>if(typeof $fnName == 'function') ".
                 "$fnName('SVGPLOT_$name')</script>";
+  }
+
   SVG_pO "</svg>";
   return $SVG_RET;
 }

fhem/www/pgm2/f18.js

@@ -66,7 +66,6 @@ $(document).ready(function(){
   });
   f18_menu();
   f18_tables();
-  f18_svgSetCols();
   if(typeof svgCallback != "undefined")
     svgCallback.f18 = f18_svgSetCols;
   $("[data-name]").each(function(){ f18_setPos(this) });
@@ -798,7 +797,7 @@ f18_svgSetCols(svg)
 {
   function col(n) { return f18_getAttr("cols."+n, true) };
 
-  if(!svg || !svg.getAttribute("data-origin"))
+  if(!svg || !$(svg).attr("data-origin"))
     return;
 
   var style = $(svg).find("> style").first();

fhem/www/pgm2/svg.js

@@ -421,6 +421,19 @@ svg_init(par)    // also called directly from perl, in race condition
       return;
     svg_init_one(e, sTag);
   });
+
+  if(par)
+    return;
+
+  $("svg.plotembed_2[data-src]").each(function(){
+    var svgThis = this;
+    var src = $(this).attr("data-src");
+    var dev = FW_escapeSelector($(this).attr("data-dev"));
+    FW_cmd(src, function(data){
+      $(svgThis).replaceWith(data.substr(data.indexOf('<svg')));
+      svg_init_one(undefined, $("svg#SVGPLOT_"+dev));
+   });
+  });
 }
 
 $(document).ready(function(){