00_ZWDongle: neighbor map fixes (Forum #54574)

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

fhem/FHEM/00_ZWDongle.pm

@@ -141,6 +141,7 @@ ZWDongle_Define($$)
   return $ret;
 }
 
+#####################################
 sub
 ZWDongle_fhemwebFn($$$$)
 {
@@ -150,7 +151,7 @@ ZWDongle_fhemwebFn($$$$)
   my $np = AttrVal($d,'neighborListPos','360,430');
 
   return
-  "<div id='ZWDongleNr'><a href='#'>Show neighbor list</a></div>".
+  "<div id='ZWDongleNr'><a href='#'>Show neighbor map</a></div>".
   "<div id='ZWDongleNrSVG'></div>".
   "<script type='text/javascript' src='$js'></script>".
   '<script type="text/javascript">'.<<"JSEND"
@@ -159,12 +160,37 @@ ZWDongle_fhemwebFn($$$$)
         .css({cursor:"pointer"})
         .click(function(e){
           e.preventDefault();
-          zw_nr('$d', '$np');
+          zw_nl('ZWDongle_nlData("$d")');
         });
     });
   </script>
 JSEND
 }
+
+sub
+ZWDongle_nlData($)
+{
+  my ($d) = @_;
+  my @a = devspec2array("TYPE=ZWave,FILTER=IODev=$d");
+  my (@dn, %nb, @ret);
+
+  for my $e (@a) {
+    my $nl = ReadingsVal($e, "neighborList", ""); $nl =~ s/,/ /g;
+    my $pos = AttrVal($e, "neighborListPos", "");
+    push @dn, $e if($nl =~ m/\b$d\b/);
+    $nl = '"'.join('","',split(" ", $nl)).'"' if($nl);
+    push @ret, "\"$e\":{\"txt\":\"$e\",\"pos\":[$pos],".
+                       "\"class\":\"zwBox\",\"neighbors\":[$nl] }";
+    $nb{$e} = $nl;
+  }
+  my $pos = AttrVal($d, "neighborListPos", "");
+  my $nl = (@dn ? '"'.join('","',@dn).'"' : '');
+  push @ret, "\"$d\":{\"txt\":\"$d\", \"pos\":[$pos],".
+                     "\"class\":\"zwDongle\",\"neighbors\":[$nl] }";
+  return "{ \"saveFn\":\"attr {1} neighborListPos {2}\",".
+           "\"el\":{".join(",",@ret)."} }";
+}
+
 #####################################
 sub
 ZWDongle_Undef($$)

fhem/www/pgm2/brightstyle.css

@@ -107,3 +107,10 @@ div#svgmarker {
 }
 
 div.detLink { display:inline-block; margin-right:0.5em; }
+
+.zwBox { stroke:#333333; stroke-width:2px; fill:#eeeeee; }
+.zwDongle { stroke:red; stroke-width:2px; fill:#eeeeee; }
+.zwMargin { stroke:#333333; stroke-width:1px; fill:none; }
+.zwLine { stroke:#333333; stroke-width:1px; }
+.zwArrowHead { fill:#333333; stroke-width:1px; }
+svg.zw_nr { height:auto; width:auto; margin:0; }

fhem/www/pgm2/darkCommon.css

@@ -19,3 +19,4 @@ div.detLink { display:inline-block; margin-right:0.5em; }
 .zwMargin { stroke:#fff; stroke-width:1px; fill:none; }
 .zwLine { stroke:#fff; stroke-width:1px; }
 .zwArrowHead { fill:#fff; stroke-width:1px; }
+svg.zw_nr { height:auto; width:auto; margin:0; }

fhem/www/pgm2/defaultCommon.css

@@ -79,7 +79,7 @@ span.sort-item-delete-link {
 .set .set { margin-bottom:2px; margin-top:3px; }             /* timepicker */
 
 pre { white-space: pre-wrap; }
-svg:not(.zw_nr) { height:32px; width:32px; vertical-align:middle; margin:2px 0;}
+svg { height:32px; width:32px; vertical-align:middle; margin:2px 0;}
 svg:not([fill]):not(.jssvg) { fill:#278727; }
 
 svg.on,svg.FS20_on { fill:orange!important; }
@@ -138,3 +138,4 @@ select [value^=l8] { color: yellow; }
 .zwMargin { stroke:#278727; stroke-width:1px; fill:none; }
 .zwLine { stroke:#278727; stroke-width:1px; }
 .zwArrowHead { fill:#278727; stroke-width:1px; }
+svg.zw_nr { height:auto; width:auto; margin:0; }

fhem/www/pgm2/ios6Common.css

@@ -255,3 +255,4 @@ div#svgmarker {
 .zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; }
 .zwLine { stroke:#c0c0c0; stroke-width:1px; }
 .zwArrowHead { fill:#c0c0c0; stroke-width:1px; }
+svg.zw_nr { height:auto; width:auto; margin:0; }

fhem/www/pgm2/ios7Common.css

@@ -34,3 +34,4 @@ div#svgmarker {
 .zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; }
 .zwLine { stroke:#c0c0c0; stroke-width:1px; }
 .zwArrowHead { fill:#147bff; stroke-width:1px; }
+svg.zw_nr { height:auto; width:auto; margin:0; }

fhem/www/pgm2/zwave_neighborlist.js

@@ -2,15 +2,14 @@ var zw_visible;
 var svgns = 'xmlns="http://www.w3.org/2000/svg"';
 
 function
-zw_nr(dongle, dpos)
+zw_nl(fhemFn)
 {
-  log("ZWNR called for "+dongle+": "+zw_visible);
+  log("ZWNL called with "+fhemFn);
   zw_visible = !zw_visible;
   var txt = (zw_visible ? 'Hide' : 'Show');
 
-  var width=720,height=480;
+  var width=960,height=480;
-  $('#ZWDongleNr')
+  $('#ZWDongleNr').html('<a href="#">'+txt+' neighbor map</a>');
-        .html('<a href="#">'+txt+' neighbor list</a>');
 
   if(!zw_visible) {
     $("#ZWDongleNrSVG")
@@ -19,49 +18,32 @@ zw_nr(dongle, dpos)
     return;
   }
 
-  var h={}, ldev, xpos=20, ypos=20; 
+  FW_cmd(FW_root+"?cmd={"+fhemFn+"}&XHR=1", function(r){
-  var dp = dpos.split(",");
+    var xpos=20, ypos=20, fnRet = JSON.parse(r);
 
-  h[dongle] = { txt:dongle, pos:[ parseInt(dp[0]), parseInt(dp[1]) ], lines:[], 
+    var cnt=0;
-                width:40, height:30, class:'zwDongle', neighbors:[] };
+    for(var elName in fnRet.el) {
-
+      var el = fnRet.el[elName];
-  var cmd = FW_root+"?cmd=list ZWaveSubDevice=no,FILTER=IODev="+dongle+
+      el.lines = [];
-                            " neighborList timeToAck neighborListPos&XHR=1";
+      el.width = el.height = 30;
-  FW_cmd(cmd, function(r){
+      if(!el.pos.length) {
-    console.log(r);
+        el.pos = [xpos, ypos];
-    var la = r.split("\n");
-    for(var i1=0; i1<la.length; i1++) {
-      var cols = la[i1].split(/ +/);
-      if(cols[0] != '')
-        ldev = cols[0];
-      if(cols[1] == 'neighborListPos') {
-        var p = cols[2].split(",");
-        h[ldev].pos = [ parseInt(p[0]), parseInt(p[1]) ];
-
-      } else if(cols[3] == 'timeToAck') {
-        // h[ldev].txt += ' ('+cols[4]+')';
-
-      } else if(cols[3] == 'neighborList') {
-        cols.splice(0,4);
-        for(var i2=0; i2<cols.length; i2++)
-          if(cols[i2] == dongle)
-            h[dongle].neighbors.push(ldev);
-        h[ldev] = { txt:ldev, neighbors:cols,pos:[xpos,ypos], lines:[],
-                    width:40, height:30, class:'zwBox' };
         xpos += 150;
-        if(xpos >= width) {
+        if(xpos+150 >= width)
-          xpos = 20; ypos += 50;
+          xpos = 20, ypos += 50;
       }
-
+      cnt++;
     }
-    }
+    if(height < cnt*35)
-    zw_draw(h, width, height);
+      height = cnt*35;
+    zw_draw(fnRet, width, height);
   });
 }
 
 function
-zw_draw(h, width, height)
+zw_draw(fnRet, width, height)
 {
+  var h = fnRet.el;
   var svg = '<svg '+svgns+' style="width:'+width+';height:'+height+'" '+
                   'class="zw_nr" viewBox="0 0 '+width+' '+height+'">';
   svg += '<defs>'+
@@ -105,8 +87,9 @@ zw_draw(h, width, height)
   .draggable()
   .bind('mouseup', function(e) {
     var name = $(e.target).parent().attr("data-name");
-    FW_cmd(FW_root+"?cmd=attr "+name+" neighborListPos "+
+    if(fnRet.saveFn)
-                h[name].pos[0]+","+h[name].pos[1]+"&XHR=1");
+      FW_cmd(FW_root+"?cmd="+sprintf(fnRet.saveFn, name, 
+                                h[name].pos[0]+","+h[name].pos[1])+"&XHR=1");
   })
   .bind('mousedown', function(e) {
     o = h[$(e.target).parent().attr("data-name")];
@@ -193,6 +176,18 @@ zw_adjustLines(h, name)
   }
 }
 
+/////////////////////////////////////
+// fmt contains {1}, {2}, ...
+function
+sprintf() {
+  var formatted = arguments[0];
+  for (var i = 1; i < arguments.length; i++) {
+    var regexp = new RegExp('\\{'+i+'\\}', 'gi');
+    formatted = formatted.replace(regexp, arguments[i]);
+  }
+  return formatted;
+};
+
 
 /*!
  * jQuery UI Touch Punch 0.2.3