[{"id":"b3e07776.934738","type":"ui_template","z":"6014e012.9666a","group":"ef703e94.45e24","name":"tree scheme","order":0,"width":"0","height":"0","format":"\n<style>\t\n\t.node {\n\t\tcursor: pointer;\n\t}\n\n\t.node circle {\n\t  fill: #fff;\n\t  stroke: steelblue;\n\t  stroke-width: 3px;\n\t}\n\n\t.node text {\n\t  font: 12px sans-serif;\n\t  fill: #fff;\n\t}\n\n\t.link {\n\t  fill: none;\n\t  stroke: #ccc;\n\t  stroke-width: 2px;\n\t}\n</style>\n\n<script>\n(function(scope) {\n    console.dir(scope);\n    scope.$watch('msg', function(msg) {\n        console.dir(msg);\n    \n        // clear \n        d3.select(\"#Layout_map_SVG\").remove();\n        \n\t\tvar treeData = msg.payload.treeData;\n\t\tconfig = {\n          data: treeData[0],\n          width : 1920, //svgNode.parentNode.offsetWidth, // Width of the parent container\n          height : 1080, //svgNode.parentNode.offsetHeight, // Height of the parent container\n          dWidth : 180,\n          dHight : 80,\n          margin: { // Margins that we need within our SVG\n            top: 20,\n            right: 120,\n            bottom: 20,\n            left: 120\n          },\n        };\n        \n        // ************** Generate the tree diagram\t *****************\n        var dimentions = computeSvgSizeFromData(config),\n            height = dimentions.height,\n            width = dimentions.width;\n        console.dir(dimentions);\n        \n\t\tvar i = 0,\n\t\t\tduration = 750,\n\t\t\troot;\n\n\t\tvar tree = d3.layout.tree()\n\t\t\t.size([dimentions.height, dimentions.width]);\n\t\t\t\n\t\tvar diagonal = d3.svg.diagonal()\n\t\t\t.projection(function(d) { return [d.y, d.x]; });\n\n\t\tvar svg = d3.select(\"#Layout_map\").append(\"svg\")\n\t\t    .attr(\"id\",\"Layout_map_SVG\")\n\t\t\t.attr(\"width\", dimentions.width + config.margin.right + config.margin.left)\n\t\t\t.attr(\"height\", dimentions.height + config.margin.top + config.margin.bottom)\n\t\t    .append(\"g\")\n\t\t\t.attr(\"transform\", \"translate(\" + config.margin.left + \",\" \n\t\t\t\t\t\t\t\t\t\t\t+ config.margin.top + \")\");\n\n\t\troot = treeData[0];\n\t\troot.x0 = dimentions.height / 2;\n\t\troot.y0 = 0;\n        \n        function toggleAll(d) {\n            if (d.children) {\n                if (d.status == \"lime\") {\n                    d._children = d.children;\n                    d._children.forEach(toggleAll);\n                    d.children = null;\n                }\n            }\n        }\n\n        root.children.forEach(toggleAll);\n        \n\t\tupdate(root);\n\t\t\n\t\td3.select(self.frameElement).style(\"height\", \"500px\");\n\n        function computeSvgSizeFromData(config){\n\n          var tree = d3.layout.tree(),\n            nodes = tree.nodes(config.data);\n        \n          var maxTreeChildrenHeight = {},\n            maxTreeHeight = 0,\n            maxTreeDepth = 0,\n            minSvgWidth,\n            minSvgHeight;\n        \n          // Compute the max tree depth(node which is the lowest leaf) \n          nodes.forEach(function(d) { \n              if(d.depth>maxTreeDepth){\n                  maxTreeDepth = d.depth;\n              }\n        \n              if(!maxTreeChildrenHeight[d.depth]){\n                  maxTreeChildrenHeight[d.depth] = 0;\n              }\n        \n              maxTreeChildrenHeight[d.depth] = maxTreeChildrenHeight[d.depth]+1;\n              maxTreeHeight = maxTreeHeight > maxTreeChildrenHeight[d.depth] ? maxTreeHeight : maxTreeChildrenHeight[d.depth]\n          });\n        \n\n          // Since this is a horizontal tree, compute the width\n          // based upon the depth and the height based upon \n          // the number of nodes at a depth level\n          minSvgWidth = maxTreeDepth*config.dWidth > config.width ? config.width : (maxTreeDepth+1)*config.dWidth;\n          minSvgHeight = maxTreeHeight*config.dHight > config.height ? config.height : (maxTreeHeight+1)*config.dHight;\n        \n          return {\n            width: minSvgWidth,\n            height: minSvgHeight\n          };\n        }\n\n\t\tfunction update(source) {\n\t\t\t\n\t\t  // Compute the new tree layout.\n\t\t  var nodes = tree.nodes(root).reverse(),\n\t\t\t  links = tree.links(nodes);\n            \n\t\t  // Normalize for fixed-depth.\n\t\t  nodes.forEach(function(d) { d.y = d.depth * config.dWidth/*source.dWidth*/; });\n\n\t\t  // Update the nodes…\n\t\t  var node2 = svg.selectAll(\"g.node\")\n\t\t\t  .data(nodes, function(d) { return d.id || (d.id = ++i); });\n\n\t\t  // Enter any new nodes at the parent's previous position.\n\t\t  var nodeEnter = node2.enter().append(\"g\")\n\t\t\t  .attr(\"class\", \"node\")\n\t\t\t  .attr(\"transform\", function(d) { \n\t\t\t\t  return \"translate(\" + source.y0 + \",\" + source.x0 + \")\"; })\n\t\t\t  .on(\"click\", click);\n\n\t\t  nodeEnter.append(\"circle\")\n\t\t\t  .attr(\"r\", 1e-6)\n\t\t\t  .style(\"fill\", function(d) { return d.status; });\n\n\t\t  nodeEnter.append(\"text\")\n\t\t\t  .attr(\"x\", function(d) { \n\t\t\t\t  return d.children || d._children ? -13 : 13; })\n\t\t\t  .attr(\"dy\", \".35em\")\n\t\t\t  .attr(\"text-anchor\", function(d) { \n\t\t\t\t  return d.children || d._children ? \"end\" : \"start\"; })\n\t\t\t  .text(function(d) { return d.name; })\n\t\t\t  .style(\"fill-opacity\", 1e-6);\n\n\t\t  // Transition nodes to their new position.\n\t\t  var nodeUpdate = node2.transition()\n\t\t\t  .duration(duration)\n\t\t\t  .attr(\"transform\", function(d) { \n\t\t\t\t  return \"translate(\" + d.y + \",\" + d.x + \")\"; });\n\n\t\t  nodeUpdate.select(\"circle\")\n\t\t\t  .attr(\"r\", 10)\n\t\t\t  .style(\"fill\", function(d) { return d.status; });\n\n\t\t  nodeUpdate.select(\"text\")\n\t\t\t  .style(\"fill-opacity\", 1);\n\n\t\t  // Transition exiting nodes to the parent's new position.\n\t\t  var nodeExit = node2.exit().transition()\n\t\t\t  .duration(duration)\n\t\t\t  .attr(\"transform\", function(d) { \n\t\t\t\t  return \"translate(\" + source.y + \",\" + source.x + \")\"; })\n\t\t\t  .remove();\n\n\t\t  nodeExit.select(\"circle\")\n\t\t\t  .attr(\"r\", 1e-6);\n\n\t\t  nodeExit.select(\"text\")\n\t\t\t  .style(\"fill-opacity\", 1e-6);\n\n\t\t  // Update the links…\n\t\t  var link = svg.selectAll(\"path.link\")\n\t\t\t  .data(links, function(d) { return d.target.id; });\n\n\t\t  // Enter any new links at the parent's previous position.\n\t\t  link.enter().insert(\"path\", \"g\")\n\t\t\t  .attr(\"class\", \"link\")\n\t\t\t  .attr(\"d\", function(d) {\n\t\t\t\tvar o = {x: source.x0, y: source.y0};\n\t\t\t\treturn diagonal({source: o, target: o});\n\t\t\t  });\n\n\t\t  // Transition links to their new position.\n\t\t  link.transition()\n\t\t\t  .duration(duration)\n\t\t\t  .attr(\"d\", diagonal);\n\n\t\t  // Transition exiting nodes to the parent's new position.\n\t\t  link.exit().transition()\n\t\t\t  .duration(duration)\n\t\t\t  .attr(\"d\", function(d) {\n\t\t\t\tvar o = {x: source.x, y: source.y};\n\t\t\t\treturn diagonal({source: o, target: o});\n\t\t\t  })\n\t\t\t  .remove();\n\n\t\t  // Stash the old positions for transition.\n\t\t  nodes.forEach(function(d) {\n\t\t\td.x0 = d.x;\n\t\t\td.y0 = d.y;\n\t\t  });\n\t\t}\n\t\t\n\t\t// Toggle children on click.\n        function click(d) {\n          if (d.children) {\n        \td._children = d.children;\n        \td.children = null;\n        \td._status = d.status;\n        \td.status = \"lime\";\n          } else {\n        \td.children = d._children;\n        \td._children = null;\n        \tif (typeof d._status !== 'undefined')\n        \t    d.status = d._status;\n          }\n          update(d);\n        }\n        \n\t});\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":950,"y":2932,"wires":[[]]},{"id":"e2e6b879.e431d8","type":"function","z":"6014e012.9666a","name":"prepare tree data","func":"// data to read from cordinator eeprom\nvar numBonded = 4;\nvar numDiscovered = 3;\n//\t\t\t\t          0   1   2   3   4   5   6   7   8   9   10  11  12  13  14  15\nvar nodesBonded =       [ 0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  1,  1,  1,  1,  0 ];\nvar nodesDiscovered =   [ 0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  1,  1,  1,  0,  0 ];\nvar vrnArray = \t\t    [ 0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  1,  3,  2,  0,  0 ];\nvar nodesZone =         [ 0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  1,  2,  1,  0,  0 ];\nvar nodesParent = \t    [ 0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  1,  0,  0,  0 ];\n\nvar treeData = [\n\t{\n\t\t\"name\": \"Cordinator\",\n\t\t\"parent\": \"null\",\n\t\t\"status\": \"orange\",\n\t\t\"children\": [],\n\t\t\"zone\": 0\n\t}\n];\n\nvar index = 0;\nwhile( numBonded )\n{\n    index++;\n\tif( nodesBonded[index] == 1)\n\t{\n\t\tvar parent = \"\";\n\t\tvar status = \"\";\n\t\t\n\t\t// orphan\n\t\tif( nodesDiscovered[index] === 0 )\n\t\t{\n\t\t\tparent = \"null\";\n\t\t\tstatus = \"red\";\n\t\t}\n\t\t// first children\n\t\telse if(  nodesParent[index] === 0 )\n\t\t{\n\t\t\tparent = \"Cordinator\";\n\t\t\tstatus = \"green\";\n\t\t}\n\t\t// other children\n\t\telse\n\t\t{\n\t\t\tparent = \"ID \" + vrnArray.indexOf(nodesParent[index]).toString() + \", VRN \" + nodesParent[index].toString();\n\t\t\tstatus = \"green\";\n\t\t}\n\t\t\n\t\ttreeData.push( \n\t\t{\n\t\t\t\"name\": \"ID \" + index.toString() + \", VRN \" + vrnArray[index].toString(),\n\t\t\t\"parent\": parent,\n\t\t\t\"status\": status,\n\t\t\t\"children\": [],\n\t\t\t\"zone\": nodesZone[index],\n\t\t} );\n\t\tnumBonded--;\n\t}\n}\n\n// sort array by zone\ntreeData.sort(function(a,b) {return (a.zone > b.zone) ? 1 : ((b.zone > a.zone) ? -1 : 0);} );\n\n// arrange tree\nvar maxDepth = treeData[treeData.length-1].zone;\nwhile( treeData[treeData.length-1].zone !== 0 )\n{\n    var nodeChild = treeData.pop();\n    \n    // find and add as children to parent\n    var i = FindParent(treeData,nodeChild);\n\n    if( i != -1)\n        treeData[i].children.push(nodeChild);\n}\n\nglobal.set(\"treeData\", treeData);\nmsg.payload={\"treeData\": treeData,\n            \"maxDepth\": maxDepth};\n\nreturn msg;\n\nfunction FindParent(treeData, nodeChild) {\n    for( var i = treeData.length-1 ; i >= 0 ; i--)\n    {\n        var n = nodeChild.parent.localeCompare(treeData[i].name);\n        if((treeData[i].zone === (nodeChild.zone)-1) && (n===0))\n            return i;\n    }\n    return -1;\n}","outputs":1,"noerr":0,"x":741,"y":2851,"wires":[["3077e546.81d73a","b3e07776.934738"]]},{"id":"3077e546.81d73a","type":"debug","z":"6014e012.9666a","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":943,"y":2820,"wires":[]},{"id":"6a8815a2.c290dc","type":"inject","z":"6014e012.9666a","name":"","topic":"request tree","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":492,"y":2851,"wires":[["e2e6b879.e431d8"]]},{"id":"f022d5be.82bef8","type":"function","z":"6014e012.9666a","name":"prepare tree data","func":"// data to read from cordinator eeprom\nvar numBonded = 9;\nvar numDiscovered = 8;\n//\t\t\t\t          0   1   2   3   4   5   6   7   8   9   10  11  12  13  14  15\nvar nodesBonded =       [ 0,  1,  1,  1,  1,  1,  0,  0,  0,  0,  0,  1,  1,  1,  1,  0 ];\nvar nodesDiscovered =   [ 0,  1,  1,  1,  1,  1,  0,  0,  0,  0,  0,  1,  1,  1,  0,  0 ];\nvar vrnArray = \t\t    [ 0,  4,  5,  6,  7,  8,  0,  0,  0,  0,  0,  1,  3,  2,  0,  0 ];\nvar nodesZone =         [ 0,  1,  2,  3,  3,  4,  0,  0,  0,  0,  0,  1,  2,  1,  0,  0 ];\nvar nodesParent = \t    [ 0,  0,  4,  5,  5,  7,  0,  0,  0,  0,  0,  0,  1,  0,  0,  0 ];\n\nvar treeData = [\n\t{\n\t\t\"name\": \"Cordinator\",\n\t\t\"parent\": \"null\",\n\t\t\"status\": \"orange\",\n\t\t\"children\": [],\n\t\t\"zone\": 0\n\t}\n];\n\nvar index = 0;\nwhile( numBonded )\n{\n    index++;\n\tif( nodesBonded[index] == 1)\n\t{\n\t\tvar parent = \"\";\n\t\tvar status = \"\";\n\t\t\n\t\t// orphan\n\t\tif( nodesDiscovered[index] === 0 )\n\t\t{\n\t\t\tparent = \"null\";\n\t\t\tstatus = \"red\";\n\t\t}\n\t\t// first children\n\t\telse if(  nodesParent[index] === 0 )\n\t\t{\n\t\t\tparent = \"Cordinator\";\n\t\t\tstatus = \"green\";\n\t\t}\n\t\t// other children\n\t\telse\n\t\t{\n\t\t\tparent = \"ID \" + vrnArray.indexOf(nodesParent[index]).toString() + \", VRN \" + nodesParent[index].toString();\n\t\t\tstatus = \"green\";\n\t\t}\n\t\t\n\t\ttreeData.push( \n\t\t{\n\t\t\t\"name\": \"ID \" + index.toString() + \", VRN \" + vrnArray[index].toString(),\n\t\t\t\"parent\": parent,\n\t\t\t\"status\": status,\n\t\t\t\"children\": [],\n\t\t\t\"zone\": nodesZone[index],\n\t\t} );\n\t\tnumBonded--;\n\t}\n}\n\n// sort array by zone\ntreeData.sort(function(a,b) {return (a.zone > b.zone) ? 1 : ((b.zone > a.zone) ? -1 : 0);} );\n\n// arrange tree\nvar maxDepth = treeData[treeData.length-1].zone;\nwhile( treeData[treeData.length-1].zone !== 0 )\n{\n    var nodeChild = treeData.pop();\n    \n    // find and add as children to parent\n    var i = FindParent(treeData,nodeChild);\n\n    if( i != -1)\n        treeData[i].children.push(nodeChild);\n}\n\nglobal.set(\"treeData\", treeData);\nmsg.payload={\"treeData\": treeData,\n            \"maxDepth\": maxDepth};\n\nreturn msg;\n\nfunction FindParent(treeData, nodeChild) {\n    for( var i = treeData.length-1 ; i >= 0 ; i--)\n    {\n        var n = nodeChild.parent.localeCompare(treeData[i].name);\n        if((treeData[i].zone === (nodeChild.zone)-1) && (n===0))\n            return i;\n    }\n    return -1;\n}","outputs":1,"noerr":0,"x":741,"y":2909,"wires":[["3077e546.81d73a","b3e07776.934738"]]},{"id":"be939e26.b8f6c","type":"inject","z":"6014e012.9666a","name":"","topic":"request tree","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":492,"y":2909,"wires":[["f022d5be.82bef8"]]},{"id":"ef703e94.45e24","type":"ui_group","z":"","name":"map","tab":"e5ac23fa.f61fb","order":2,"disp":true,"width":"6","collapse":false},{"id":"e5ac23fa.f61fb","type":"ui_tab","z":"","name":"Layout","icon":"dashboard","order":2}]