00_ZWDongle.pm: add some SVG for neighborList (Forum #54574)

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

fhem/FHEM/00_ZWDongle.pm

@@ -6,6 +6,7 @@ use strict;
 use warnings;
 use Time::HiRes qw(gettimeofday);
 use ZWLib;
+use vars qw($FW_ME);
 
 sub ZWDongle_Parse($$$);
 sub ZWDongle_Read($@);
@@ -88,7 +89,8 @@ ZWDongle_Initialize($)
   $hash->{AttrFn}  = "ZWDongle_Attr";
   $hash->{UndefFn} = "ZWDongle_Undef";
   $hash->{AttrList}= "do_not_notify:1,0 dummy:1,0 model:ZWDongle disable:0,1 ".
-                     "homeId networkKey";
+                     "homeId networkKey neighborListPos";
+  $hash->{FW_detailFn} = "ZWDongle_fhemwebFn";
 }
 
 #####################################
@@ -139,6 +141,30 @@ ZWDongle_Define($$)
   return $ret;
 }
 
+sub
+ZWDongle_fhemwebFn($$$$)
+{
+  my ($FW_wname, $d, $room, $pageHash) = @_; # pageHash is set for summaryFn.
+
+  my $js = "$FW_ME/pgm2/zwave_neighborlist.js";
+  my $np = AttrVal($d,'neighborListPos','360,430');
+
+  return
+  "<div id='ZWDongleNr'><a href='#'>Show neighbor list</a></div>".
+  "<div id='ZWDongleNrSVG'></div>".
+  "<script type='text/javascript' src='$js'></script>".
+  '<script type="text/javascript">'.<<"JSEND"
+    \$(document).ready(function() {
+      \$("div#ZWDongleNr")
+        .css({cursor:"pointer"})
+        .click(function(e){
+          e.preventDefault();
+          zw_nr('$d', '$np');
+        });
+    });
+  </script>
+JSEND
+}
 #####################################
 sub
 ZWDongle_Undef($$)

fhem/FHEM/10_ZWave.pm

@@ -580,6 +580,7 @@ ZWave_Initialize($)
     showtime:1,0
     vclasses
     zwaveRoute
+    neighborListPos
   );
   use warnings 'qw';
   $hash->{AttrList} = join(" ", @attrList)." ".$readingFnAttributes;
@@ -642,6 +643,7 @@ ZWave_Define($$)
   return "define $name: wrong id ($id): need a number"
                    if( ($id !~ m/^\d+$/i) );
 
+  $hash->{ZWaveSubDevice} = ($id > 255 ? "yes" : "no");
   $id = sprintf("%0*x", ($id > 255 ? 4 : 2), $id);
   $hash->{homeId} = $homeId;
   $hash->{nodeIdHex} = $id;

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 { height:32px; width:32px; vertical-align:middle; margin:2px 0; }
+svg:not(.zw_nr) { 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; }
@@ -132,3 +132,7 @@ select [value^=l5] { color: black; }
 select [value^=l6] { color: olive; }
 select [value^=l7] { color: gray; }
 select [value^=l8] { color: yellow; }
+
+.zwBox { stroke:#278727; stroke-width:2px; fill:#F0F0D8; }
+.zwMargin { stroke:#278727; stroke-width:1px; fill:none; }
+.zwLine { stroke:#278727; stroke-width:1px; }

fhem/www/pgm2/zwave_neighborlist.js

@@ -0,0 +1,167 @@
+var zw_visible;
+var svgns = 'xmlns="http://www.w3.org/2000/svg"';
+
+function
+zw_nr(dev, dpos)
+{
+  log("ZWNR called for "+dev+": "+zw_visible);
+  zw_visible = !zw_visible;
+  var txt = (zw_visible ? 'Hide' : 'Show');
+
+  var width=720,height=480;
+  $('#ZWDongleNr')
+        .html('<a href="#">'+txt+' neighbor list</a>');
+
+  if(!zw_visible) {
+    $("#ZWDongleNrSVG")
+        .css({width:0, height:0})
+        .html('');
+    return;
+  }
+
+  var h={}, ldev, xpos=20, ypos=20; 
+  var dp = dpos.split(",");
+        
+  h[dev] = { txt:dev, pos:[ parseInt(dp[0]), parseInt(dp[1]) ], lines:[], 
+             width:40, height:30 };
+
+  var cmd = FW_root+"?cmd=list ZWaveSubDevice=no,FILTER=IODev="+dev+
+                            " neighborList timeToAck neighborListPos&XHR=1";
+  FW_cmd(cmd, function(r){
+    console.log(r);
+    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);
+        h[ldev] = { txt:ldev, neighbors:cols,pos:[xpos,ypos], lines:[],
+                    width:40, height:30 };
+        xpos += 150;
+        if(xpos >= width) {
+          xpos = 20; ypos += 50;
+        }
+
+      }
+    }
+    zw_draw(h, width, height);
+  });
+}
+
+function
+zw_draw(h, width, height)
+{
+  var svg = '<svg '+svgns+' style="width:'+width+';height:'+height+'" '+
+                  'class="zw_nr" viewBox="0 0 '+width+' '+height+'">';
+  svg += '<rect class="zwMargin" x="1" y="1" width="'+
+                (width-1)+'" height="'+(height-1)+'"/>';
+  var ld={};
+
+  for(var o in h) {
+    if(h[o].txt && h[o].neighbors)
+      for(var i1=0; i1<h[o].neighbors.length; i1++)
+        svg += zw_drawline(ld, h, o, h[o].neighbors[i1]);
+  }
+  for(var o in h)
+    if(h[o].txt)
+      svg += zw_drawbox(h[o]);
+
+  svg += '</svg>';
+
+  var ox, oy, o;
+  $("#ZWDongleNrSVG")
+    .css({width:width, height:height})
+    .html(svg);
+
+  $("svg g").each(function(){
+    var w = $(this).find("text").width();
+    $(this).find("rect").attr("width",w+10);
+    $(this).css("cursor", "pointer");
+    var name = $(this).attr("data-name");
+    h[name].width = w+10;
+    zw_adjustLines(h, name);
+  })
+  .draggable()
+  .bind('mouseup', function(e) {
+    var name = $(e.target).parent().attr("data-name");
+    FW_cmd(FW_root+"?cmd=attr "+name+" neighborListPos "+
+                h[name].pos[0]+","+h[name].pos[1]+"&XHR=1");
+  })
+  .bind('mousedown', function(e) {
+    o = h[$(e.target).parent().attr("data-name")];
+    ox = o.pos[0]; oy = o.pos[1];
+  })
+  .bind('drag', function(e, ui) {
+    var rect = $(e.target).find("rect"),
+        text = $(e.target).find("text"),
+        p = ui.position; op = ui.originalPosition;
+    o.pos[0] = ox + (p.left-op.left);
+    o.pos[1] = oy + (p.top -op.top);
+    $(rect).attr("x", o.pos[0]); $(rect).attr("y", o.pos[1]);
+    $(text).attr("x", o.pos[0]+5); $(text).attr("y", o.pos[1]+20);
+    zw_adjustLines(h, o.txt);
+  });
+}
+
+function
+zw_drawbox(o)
+{
+  var s = '<g data-name="'+o.txt+'">'+
+            '<rect x="'+o.pos[0]+'" y="'+o.pos[1]+'" rx="5" ry="5" '+
+                'width="'+o.width+'" height="'+o.height+'" class="zwBox"/>';
+  s += '<text x="'+(o.pos[0]+5)+'" y="'+(o.pos[1]+20)+'">'+o.txt+'</text></g>';
+  return s;
+}
+
+function
+zw_drawline(ld, h, o, n)
+{
+  if(n < o) {
+    var t = n; n = o; o = t;
+  }
+  var cl = o+"-"+n;
+  if(ld[cl] || !h[o] || !h[n])
+    return;
+  ld[cl] = 1;
+  h[o].lines.push(cl);
+  h[n].lines.push(cl);
+  var fr = zw_calcPos(h[o], h[n]);
+  var to = zw_calcPos(h[n], h[o]);
+  return '<line class="zwLine" data-name="'+cl+
+               '" x1="'+fr.x+'" y1="'+fr.y+
+               '" x2="'+to.x+'" y2="'+to.y+'"/>';
+}
+
+function
+zw_calcPos(o, n)
+{
+  return { x: o.pos[0]+o.width/2, y: o.pos[1]+o.height/2 };
+}
+
+function
+zw_adjustLines(h, name)
+{
+  var la = h[name].lines;
+  for(var i1=0; i1< la.length; i1++) {
+    var se = la[i1].split('-');
+    if(la[i1].indexOf(name) == 0) {     // we are the from line
+      var p = zw_calcPos(h[se[0]], h[se[1]]);
+      $("svg line[data-name="+la[i1]+"]")
+        .attr("x1", p.x)
+        .attr("y1", p.y);
+    } else {
+      var p = zw_calcPos(h[se[1]], h[se[0]]);
+      $("svg line[data-name="+la[i1]+"]")
+        .attr("x2", p.x)
+        .attr("y2", p.y);
+    }
+  }
+}