luci-app-bmx: Redesign Makefile. Split JS libraries. Clean package

Add luci-lib-jquery-1-4 and luci-lib-dracula packages. Remove unused library Curry.

Signed-off-by: Pau Escrich <p4u@dabax.net>

luci-app-bmx6/Makefile

@@ -20,7 +20,7 @@
 include $(TOPDIR)/rules.mk
 
 PKG_NAME:=luci-app-bmx6
-PKG_RELEASE:=3
+PKG_RELEASE:=4
 
 PKG_BUILD_DIR := $(BUILD_DIR)/$(PKG_NAME)
 PKG_LICENSE:=GPL-2.0+
@@ -32,14 +32,40 @@ define Package/luci-app-bmx6
   CATEGORY:=LuCI
   SUBMENU:=3. Applications
   TITLE:= bmx6 configuration, status and visualization module
-  DEPENDS:=+luci-lib-json +luci-mod-admin-full +luci-lib-httpclient +bmx6
+  DEPENDS:=+luci-lib-json +luci-mod-admin-full +luci-lib-httpclient +bmx6 +luci-lib-jquery-1-4 +luci-lib-dracula
   MAINTAINER:= Pau Escrich <p4u@dabax.net>
 endef
 
+define Package/luci-lib-jquery-1-4
+  SECTION:=luci
+  CATEGORY:=LuCI
+  TITLE:=LuCI - Lua Configuration Interface
+  MAINTAINER:=Gui Iribarren <gui@altermundi.net>
+  SUBMENU:=6. Libraries
+  TITLE:=jQuery 1.4 javascript library
+endef
+
+define Package/luci-lib-dracula
+  SECTION:=luci
+  CATEGORY:=LuCI
+  TITLE:=LuCI - Lua Configuration Interface
+  MAINTAINER:=Pau Escrich <p4u@dabax.net>
+  SUBMENU:=6. Libraries
+  TITLE:=dracula graph javascript library
+endef
+
 define Package/luci-app-bmx6/description
 	bmx6 web application (status and configuration) for LuCi web interface
 endef
 
+define Package/luci-lib-jquery-1-4/description
+	minified javascript jQuery 1.4 library
+endef
+
+define Package/luci-lib-dracula-graph/description
+	minified dracula javascript graph library
+endef
+
 define Package/luci-app-bmx6/conffiles
 	/etc/config/luci-bmx6
 endef
@@ -54,9 +80,20 @@ define Build/Compile
 endef
 
 define Package/luci-app-bmx6/install
-	$(CP) ./files/* $(1)/
+	$(CP) ./bmx6/* $(1)/
 	chmod 755 $(1)/www/cgi-bin/bmx6-info
 endef
 
-$(eval $(call BuildPackage,luci-app-bmx6))
+define Package/luci-lib-jquery-1-4/install
+	$(INSTALL_DIR) $(1)/www/luci-static/resources/jquery/
+	$(CP) ./jquery/* $(1)/www/luci-static/resources/jquery/
+endef
 
+define Package/luci-lib-dracula/install
+	$(INSTALL_DIR) $(1)/www/luci-static/resources/dracula
+	$(CP) ./dracula/* $(1)/www/luci-static/resources/dracula/
+endef
+
+$(eval $(call BuildPackage,luci-app-bmx6))
+$(eval $(call BuildPackage,luci-lib-jquery-1-4))
+$(eval $(call BuildPackage,luci-lib-dracula))

luci-app-bmx6/bmx6/usr/lib/lua/luci/view/bmx6/graph.htm

@@ -0,0 +1,49 @@
+<%#
+Copyright (C) 2011 Pau Escrich <pau@dabax.net>
+Contributors Jo-Philip
+
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation; either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along
+with this program; if not, write to the Free Software Foundation, Inc.,
+51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+The full GNU General Public License is included in this distribution in
+the file called "COPYING".
+-%>
+
+<%
+	luci.http.prepare_content("text/html")
+
+	local location = { unpack(luci.dispatcher.context.path) }
+	location[#location] = "topology"
+%>
+
+<%+header%>
+
+<button id="redraw" onclick="redraw();">&nbsp redraw &nbsp</button>
+
+<div id="wait" style="text-align: center">
+<br /><br />
+<img src="<%=resource%>/icons/loading.gif" />
+<%:Collecting data...%>
+
+</div>
+
+<div id="canvas" style="min-width:1024px; min-height:1024px"></div>
+
+<script type="text/javascript" src="<%=resource%>/jquery/jquery-1.4.js"></script>
+<script type="text/javascript" src="<%=resource%>/dracula/raphael-min.js"></script>
+<script type="text/javascript" src="<%=resource%>/dracula/dracula_graffle.js"></script>
+<script type="text/javascript" src="<%=resource%>/dracula/dracula_graph.js"></script>
+<script type="text/javascript" src="<%=resource%>/bmx6/js/bmx6-graph.js"></script>
+
+<%+footer%>

luci-app-bmx6/bmx6/www/luci-static/resources/bmx6/js/bmx6-graph.js

@@ -0,0 +1,234 @@
+var graph, canvas, layouter, renderer, divwait, nodes, announcements, nodesIndex, palette, localInfo;
+document.addEventListener( "DOMContentLoaded", init, false);
+
+/**
+ * Returns an index of nodes by name
+ */
+function createNodeIndex(nodes) {
+  var inode, index = {};
+
+  for (inode in nodes)
+    index[nodes[inode].name] = nodes[inode];
+
+  return index;
+}
+
+/**
+ * Updates to have announcements in nodes list
+ */
+function processNodeAnnouncements(nodes, announcements) {
+  var iannouncement, remoteNode, announcement;
+  nodesIndex = createNodeIndex(nodes);
+
+  for(iannouncement in announcements) {
+    announcement = announcements[iannouncement];
+    if (announcement.remoteName == '---' ) continue;
+    if (!( announcement.remoteName in nodesIndex )) {
+      newNode = {
+        name: announcement.remoteName,
+        links: []
+      };
+      nodes.push(newNode);
+      nodesIndex[newNode.name] = newNode;
+    };
+
+    remoteNode = nodesIndex[announcement.remoteName];
+    if (!( 'announcements' in remoteNode )) remoteNode.announcements = [];
+    remoteNode.announcements.push(announcement);
+  };
+}
+
+function init() {
+  palette = generatePalette(200);
+
+  graph = new Graph();
+  canvas = document.getElementById('canvas');
+  layouter = new Graph.Layout.Spring(graph);
+  renderer = new Graph.Renderer.Raphael(canvas.id, graph, canvas.offsetWidth, canvas.offsetHeight);
+
+  divwait = document.getElementById("wait");
+
+  XHR.get('/cgi-bin/luci/status/bmx6/topology', null, function(nodesRequest, nodesData) {
+    nodes = nodesData;
+
+    XHR.get('/cgi-bin/bmx6-info?$myself&', null, function(myselfRequest, myselfData) {
+      if (myselfData)
+        localAnnouncements = [
+          {remoteName: myselfData.myself.hostname, advNet: myselfData.myself.net4},
+          {remoteName: myselfData.myself.hostname, advNet: myselfData.myself.net6}
+        ];
+
+      XHR.get('/cgi-bin/bmx6-info?$tunnels=&', null, function(tunnelsRequest, tunnelsData) {
+        var iAnnouncement;
+
+        announcements = tunnelsData.tunnels;
+        for(iAnnouncement in localAnnouncements) {
+          announcements.push(localAnnouncements[iAnnouncement])
+        };
+
+        processNodeAnnouncements(nodes, announcements);
+
+        divwait.parentNode.removeChild(divwait);
+        draw(nodes);
+      });
+    });
+  });
+}
+
+function hashCode(str) {
+  var hash = 0;
+  if (str.length == 0) return hash;
+  for (i = 0; i < str.length; i++) {
+    char = str.charCodeAt(i);
+    hash = ((hash<<5)-hash)+char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return hash;
+}
+
+function generatePalette(size) {
+  var i, arr = [];
+  Raphael.getColor(); // just to remove the grey one
+  for(i = 0; i < size; i++) {
+    arr.push(Raphael.getColor())
+  }
+
+  return arr;
+}
+
+function getFillFromHash(hash) {
+  return palette[Math.abs(hash % palette.length)];
+}
+
+function hashAnnouncementsNames(announcementsNames) {
+  return hashCode(announcementsNames.sort().join('-'));
+}
+
+function getNodeAnnouncements(networkNode) {
+  return networkNode.announcements;
+}
+
+function nodeRenderer(raphael, node) {
+  var nodeFill, renderedNode, options;
+  options = {
+    'fill': 'announcements' in node.networkNode ? getFillFromHash(
+      hashAnnouncementsNames(
+        getNodeAnnouncements(node.networkNode).map(function(ann) {return ann.advNet;})
+      )
+    ) : '#bfbfbf',
+    'stroke-width': 1,
+
+  };
+
+  renderedNode = raphael.set();
+
+  renderedNode.push(raphael.ellipse(node.point[0], node.point[1], 30, 20).attr({"fill": options['fill'], "stroke-width": options['stroke-width']}));
+  renderedNode.push(raphael.text(node.point[0], node.point[1] + 30, node.networkNode.name).attr({}));
+
+  renderedNode.items.forEach(function(el) {
+    var announcements, tooltip = raphael.set();
+    tooltip.push(raphael.rect(-60, -60, 120, 60).attr({"fill": "#fec", "stroke-width": 1, r : "9px"}));
+
+    announcements = getNodeAnnouncements(node.networkNode);
+    if (announcements) {
+
+      announcements = announcements.map(function(ann) {return ann.advNet});
+      tooltip.push(raphael.text(0, -40, 'announcements\n' + announcements.join('\n')).attr({}));
+    };
+
+    el.tooltip(tooltip);
+  });
+
+  return renderedNode;
+}
+
+function genericNodeRenderer(raphael, node) {
+  var renderedNode;
+
+  renderedNode = raphael.set();
+
+  renderedNode.push(raphael.ellipse(node.point[0], node.point[1], 30, 20).attr({"fill": '#bfbfbf', "stroke-width": 1}));
+  renderedNode.push(raphael.text(node.point[0], node.point[1] + 30, node.networkNode.name).attr({}));
+
+  return renderedNode;
+}
+
+function redraw() {
+  layouter.layout();
+  renderer.draw();
+}
+
+function interpolateColor(minColor,maxColor,maxDepth,depth){
+
+  function d2h(d) {return d.toString(16);}
+  function h2d(h) {return parseInt(h,16);}
+
+  if(depth == 0){
+    return minColor;
+  }
+  if(depth == maxDepth){
+    return maxColor;
+  }
+
+  var color = "#";
+
+  for(var i=1; i <= 6; i+=2){
+    var minVal = new Number(h2d(minColor.substr(i,2)));
+    var maxVal = new Number(h2d(maxColor.substr(i,2)));
+    var nVal = minVal + (maxVal-minVal) * (depth/maxDepth);
+    var val = d2h(Math.floor(nVal));
+    while(val.length < 2){
+      val = "0"+val;
+    }
+    color += val;
+  }
+  return color;
+}
+function draw(nodes) {
+  var node, neighbourNode, seenKey, rxRate, txRate, seen, i, j, currentName, linkQuality;
+
+  seen = { };
+
+  for (i = 0; i < (nodes.length); i++) {
+    node = nodes[i];
+    graph.addNode(node.name, {
+      networkNode: node,
+      render: nodeRenderer
+    });
+  };
+
+  for (i = 0; i < (nodes.length); i++) {
+    node = nodes[i];
+
+    if (! node.name) continue;
+
+    currentName = node.name;
+
+    for (j = 0; j < (node.links.length); j++) {
+      neighbourNode = node.links[j];
+
+      graph.addNode(neighbourNode.name, {render: genericNodeRenderer, networkNode: neighbourNode});
+
+      seenKey = (node.name < neighbourNode.name) ? node.name + '|' + neighbourNode.name : neighbourNode.name + '|' + node.name;
+
+      rxRate = neighbourNode.rxRate;
+      txRate = neighbourNode.txRate;
+
+      if (!seen[seenKey] && rxRate > 0 && txRate > 0) {
+        linkQuality = ( rxRate + txRate ) / 2;
+
+        graph.addEdge(node.name, neighbourNode.name, {
+          'label': rxRate + '/' + txRate,
+          'directed': false,
+          'stroke': interpolateColor('FF0000','00FF00', 5, 5 * ( linkQuality - 1 )/100),
+          'fill': interpolateColor('FF0000','00FF00', 5, 5 * ( linkQuality - 1 )/100),
+          'label-style': { 'font-size': 8 }
+        });
+
+        seen[seenKey] = true;
+      }
+    }
+  }
+
+  redraw();
+}

luci-app-bmx6/dracula/dracula_graffle.js

@@ -0,0 +1 @@
+Raphael.fn.connection=function(a,b,c){var d=this,e={draw:function(){for(var f=a.getBBox(),g=b.getBBox(),h=0,i=0,j=[{x:f.x+f.width/2,y:f.y-h},{x:f.x+f.width/2,y:f.y+f.height+h},{x:f.x-h,y:f.y+f.height/2},{x:f.x+f.width+h,y:f.y+f.height/2},{x:g.x+g.width/2,y:g.y-i},{x:g.x+g.width/2,y:g.y+g.height+i},{x:g.x-i,y:g.y+g.height/2},{x:g.x+g.width+i,y:g.y+g.height/2}],k={},l=[],m=0;m<4;m++)for(var n=4;n<8;n++){var o=Math.abs(j[m].x-j[n].x),p=Math.abs(j[m].y-j[n].y);(m==n-4||(3!=m&&6!=n||j[m].x<j[n].x)&&(2!=m&&7!=n||j[m].x>j[n].x)&&(0!=m&&5!=n||j[m].y>j[n].y)&&(1!=m&&4!=n||j[m].y<j[n].y))&&(l.push(o+p),k[l[l.length-1].toFixed(3)]=[m,n])}var q=0==l.length?[0,4]:k[Math.min.apply(Math,l).toFixed(3)],r=j[q[0]].x,s=j[q[0]].y,t=j[q[1]].x,u=j[q[1]].y,o=Math.max(Math.abs(r-t)/2,10),p=Math.max(Math.abs(s-u)/2,10),v=[r,r,r-o,r+o][q[0]].toFixed(3),w=[s-p,s+p,s,s][q[0]].toFixed(3),x=[0,0,0,0,t,t,t-o,t+o][q[1]].toFixed(3),y=[0,0,0,0,s+p,s-p,u,u][q[1]].toFixed(3),z=["M",r.toFixed(3),s.toFixed(3),"C",v,w,x,y,t.toFixed(3),u.toFixed(3)].join(",");if(c&&c.directed){var A=Math.sqrt((u-y)*(u-y)+(t-x)*(t-x)),B=function(a,b){return-a*(b||5)/A},C=[{x:(B(t-x)+B(u-y)+t).toFixed(3),y:(B(u-y)+B(t-x)+u).toFixed(3)},{x:(B(t-x)-B(u-y)+t).toFixed(3),y:(B(u-y)-B(t-x)+u).toFixed(3)}];z=z+",M"+C[0].x+","+C[0].y+",L"+t+","+u+",L"+C[1].x+","+C[1].y}var D="attr";e.fg&&e.fg[D]({path:z})||(e.fg=d.path(z).attr({stroke:c&&c.stroke||"#000",fill:"none"}).toBack()),e.bg&&e.bg[D]({path:z})||c&&c.fill&&(e.bg=c.fill.split&&d.path(z).attr({stroke:c.fill.split("|")[0],fill:"none","stroke-width":c.fill.split("|")[1]||3}).toBack()),c&&c.label&&(e.label&&e.label.attr({x:(r+t)/2,y:(s+u)/2})||(e.label=d.text((r+t)/2,(s+u)/2,c.label).attr({fill:"#000","font-size":c["font-size"]||"12px"}))),c&&c.label&&c["label-style"]&&e.label&&e.label.attr(c["label-style"]),c&&c.callback&&c.callback(e)}};return e.draw(),e};

luci-app-bmx6/files/usr/lib/lua/luci/view/bmx6/graph.htm

@@ -1,110 +0,0 @@
-<%#
-Copyright (C) 2011 Pau Escrich <pau@dabax.net>
-Contributors Jo-Philip
-
-This program is free software; you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation; either version 2 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License along
-with this program; if not, write to the Free Software Foundation, Inc.,
-51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
-
-The full GNU General Public License is included in this distribution in
-the file called "COPYING".
--%>
-
-<%
-	luci.http.prepare_content("text/html")
-
-	local location = { unpack(luci.dispatcher.context.path) }
-	location[#location] = "topology"
-%>
-
-<%+header%>
-
-<script type="text/javascript" src="<%=resource%>/bmx6/js/raphael-min.js"></script>
-<script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graffle.js"></script>
-<script type="text/javascript" src="<%=resource%>/bmx6/js/jquery-1.4.2.min.js"></script>
-<script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graph.js"></script>
-
-<button id="redraw" onclick="redraw();">&nbsp redraw &nbsp</button>
-
-<div id="wait" style="text-align: center">
-<br /><br />
-<img src="<%=resource%>/icons/loading.gif" />
-<%:Collecting data...%>
-
-</div>
-
-<div id="canvas" style="min-width:800px; min-height:800px"></div>
-
-<script type="text/javascript">//<![CDATA[
-	var redraw;
-
-	XHR.get('<%=luci.dispatcher.build_url(unpack(location))%>', null,
-		function(x, data)
-		{
-			var g = new Graph();
-			var seen = { };
-
-			for (var i = 0; i < (data.length); i++)
-			{
-				// node->node
-				if (data[i].name)
-					{
-					for (var j = 0; j < (data[i].links.length); j++)
-						 {
-							var key = (data[i].name < data[i].links[j].name)
-							? data[i].name + '|' + data[i].links[j].name
-							: data[i].links[j].name + '|' + data[i].name;
-
-							var rxRate = data[i].links[j].rxRate;
-							var txRate = data[i].links[j].txRate;
-
-							if (!seen[key] && rxRate>0 && txRate>0)
-						 	{
-							 g.addEdge(data[i].name, data[i].links[j].name,
-							 	{ label: rxRate + '/' + txRate,
-								directed: false, stroke: '#aaaaaa', fill: '#ffffff',
-								'label-style': { 'font-size': 8 }});
-							 seen[key] = true;
-							 }
-						 }
-					}
-					//g.addEdge(data[i].router, data[i].neighbor,
-					//	{ label: data[i].label, directed: true, stroke: '#aaaaaa' });
-				// node->leaf
-				//else if (data[i].router && data[i].gateway)
-				//	g.addEdge(data[i].router, data[i].gateway,
-				//		{ label: 'leaf', stroke: '#cccccc' });
-			}
-
-			var canvas = document.getElementById('canvas');
-
-			var layouter = new Graph.Layout.Spring(g);
-			layouter.layout();
-			
-			var divwait = document.getElementById("wait");
-			divwait.parentNode.removeChild(divwait);
-
-			var renderer = new Graph.Renderer.Raphael(canvas.id, g, canvas.offsetWidth, canvas.offsetHeight);
-			renderer.draw();
-
-			redraw = function() {
-				layouter.layout();
-				renderer.draw();
-			}
-
-		}
-	);
-//]]></script>
-
-
-<%+footer%>

luci-app-bmx6/files/www/luci-static/resources/bmx6/js/Curry-1.0.1.js

@@ -1,29 +0,0 @@
-/**
- * Curry - Function currying
- * Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
- * Licensed under BSD (http://www.opensource.org/licenses/bsd-license.php)
- * Date: 10/4/2008
- *
- * @author Ariel Flesler
- * @version 1.0.1
- */
-
-function curry( fn ){
-	return function(){
-		var args = curry.args(arguments),
-			master = arguments.callee,
-			self = this;
-
-		return args.length >= fn.length ? fn.apply(self,args) :	function(){
-			return master.apply( self, args.concat(curry.args(arguments)) );
-		};
-	};
-};
-
-curry.args = function( args ){
-	return Array.prototype.slice.call(args);
-};
-
-Function.prototype.curry = function(){
-	return curry(this);
-};

luci-app-bmx6/files/www/luci-static/resources/bmx6/js/dracula_graffle.js

@@ -1,106 +0,0 @@
-/**
- * Originally grabbed from the official RaphaelJS Documentation
- * http://raphaeljs.com/graffle.html
- * Adopted (arrows) and commented by Philipp Strathausen http://blog.ameisenbar.de
- * Licenced under the MIT licence.
- */
-
-/**
- * Usage:
- * connect two shapes
- * parameters: 
- *      source shape [or connection for redrawing], 
- *      target shape,
- *      style with { fg : linecolor, bg : background color, directed: boolean }
- * returns:
- *      connection { draw = function() }
- */
-Raphael.fn.connection = function (obj1, obj2, style) {
-    var selfRef = this;
-    /* create and return new connection */
-    var edge = {/*
-        from : obj1,
-        to : obj2,
-        style : style,*/
-        draw : function() {
-            /* get bounding boxes of target and source */
-            var bb1 = obj1.getBBox();
-            var bb2 = obj2.getBBox();
-            var off1 = 0;
-            var off2 = 0;
-            /* coordinates for potential connection coordinates from/to the objects */
-            var p = [
-                {x: bb1.x + bb1.width / 2, y: bb1.y - off1},              /* NORTH 1 */
-                {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + off1}, /* SOUTH 1 */
-                {x: bb1.x - off1, y: bb1.y + bb1.height / 2},             /* WEST  1 */
-                {x: bb1.x + bb1.width + off1, y: bb1.y + bb1.height / 2}, /* EAST  1 */
-                {x: bb2.x + bb2.width / 2, y: bb2.y - off2},              /* NORTH 2 */
-                {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + off2}, /* SOUTH 2 */
-                {x: bb2.x - off2, y: bb2.y + bb2.height / 2},             /* WEST  2 */
-                {x: bb2.x + bb2.width + off2, y: bb2.y + bb2.height / 2}  /* EAST  2 */
-            ];
-            
-            /* distances between objects and according coordinates connection */
-            var d = {}, dis = [];
-
-            /*
-             * find out the best connection coordinates by trying all possible ways
-             */
-            /* loop the first object's connection coordinates */
-            for (var i = 0; i < 4; i++) {
-                /* loop the seond object's connection coordinates */
-                for (var j = 4; j < 8; j++) {
-                    var dx = Math.abs(p[i].x - p[j].x),
-                        dy = Math.abs(p[i].y - p[j].y);
-                    if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
-                        dis.push(dx + dy);
-                        d[dis[dis.length - 1].toFixed(3)] = [i, j];
-                    }
-                }
-            }
-            var res = dis.length == 0 ? [0, 4] : d[Math.min.apply(Math, dis).toFixed(3)];
-            /* bezier path */
-            var x1 = p[res[0]].x,
-                y1 = p[res[0]].y,
-                x4 = p[res[1]].x,
-                y4 = p[res[1]].y,
-                dx = Math.max(Math.abs(x1 - x4) / 2, 10),
-                dy = Math.max(Math.abs(y1 - y4) / 2, 10),
-                x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
-                y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
-                x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
-                y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
-            /* assemble path and arrow */
-            var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
-            /* arrow */
-            if(style && style.directed) {
-                /* magnitude, length of the last path vector */
-                var mag = Math.sqrt((y4 - y3) * (y4 - y3) + (x4 - x3) * (x4 - x3));
-                /* vector normalisation to specified length  */
-                var norm = function(x,l){return (-x*(l||5)/mag);};
-                /* calculate array coordinates (two lines orthogonal to the path vector) */
-                var arr = [
-                    {x:(norm(x4-x3)+norm(y4-y3)+x4).toFixed(3), y:(norm(y4-y3)+norm(x4-x3)+y4).toFixed(3)},
-                    {x:(norm(x4-x3)-norm(y4-y3)+x4).toFixed(3), y:(norm(y4-y3)-norm(x4-x3)+y4).toFixed(3)}
-                ];
-                path = path + ",M"+arr[0].x+","+arr[0].y+",L"+x4+","+y4+",L"+arr[1].x+","+arr[1].y; 
-            }
-            /* function to be used for moving existent path(s), e.g. animate() or attr() */
-            var move = "attr";
-            /* applying path(s) */
-            edge.fg && edge.fg[move]({path:path}) 
-                || (edge.fg = selfRef.path(path).attr({stroke: style && style.stroke || "#000", fill: "none"}).toBack());
-            edge.bg && edge.bg[move]({path:path})
-                || style && style.fill && (edge.bg = style.fill.split && selfRef.path(path).attr({stroke: style.fill.split("|")[0], fill: "none", "stroke-width": style.fill.split("|")[1] || 3}).toBack());
-            /* setting label */
-            style && style.label 
-                && (edge.label && edge.label.attr({x:(x1+x4)/2, y:(y1+y4)/2}) 
-                    || (edge.label = selfRef.text((x1+x4)/2, (y1+y4)/2, style.label).attr({fill: "#000", "font-size": style["font-size"] || "12px"})));
-            style && style.label && style["label-style"] && edge.label && edge.label.attr(style["label-style"]);
-            style && style.callback && style.callback(edge);
-        }
-    }
-    edge.draw();
-    return edge;
-};
-//Raphael.prototype.set.prototype.dodo=function(){console.log("works");};

luci-app-bmx6/files/www/luci-static/resources/bmx6/js/dracula_graph.js

@@ -1,527 +0,0 @@
-/*
- *  Dracula Graph Layout and Drawing Framework 0.0.3alpha
- *  (c) 2010 Philipp Strathausen <strathausen@gmail.com>, http://strathausen.eu
- *  Contributions by Jake Stothard <stothardj@gmail.com>.
- *
- *  based on the Graph JavaScript framework, version 0.0.1
- *  (c) 2006 Aslak Hellesoy <aslak.hellesoy@gmail.com>
- *  (c) 2006 Dave Hoover <dave.hoover@gmail.com>
- *
- *  Ported from Graph::Layouter::Spring in
- *    http://search.cpan.org/~pasky/Graph-Layderer-0.02/
- *  The algorithm is based on a spring-style layouter of a Java-based social
- *  network tracker PieSpy written by Paul Mutton <paul@jibble.org>.
- *
- *  This code is freely distributable under the MIT license. Commercial use is
- *  hereby granted without any cost or restriction.
- *
- *  Links:
- *
- *  Graph Dracula JavaScript Framework:
- *      http://graphdracula.net
- *
- /*--------------------------------------------------------------------------*/
-
-/*
- * Edge Factory
- */
-var AbstractEdge = function() {
-}
-AbstractEdge.prototype = {
-    hide: function() {
-        this.connection.fg.hide();
-        this.connection.bg && this.bg.connection.hide();
-    }
-};
-var EdgeFactory = function() {
-    this.template = new AbstractEdge();
-    this.template.style = new Object();
-    this.template.style.directed = false;
-    this.template.weight = 1;
-};
-EdgeFactory.prototype = {
-    build: function(source, target) {
-        var e = jQuery.extend(true, {}, this.template);
-        e.source = source;
-        e.target = target;
-        return e;
-    }
-};
-
-/*
- * Graph
- */
-var Graph = function() {
-    this.nodes = {};
-    this.edges = [];
-    this.snapshots = []; // previous graph states TODO to be implemented
-    this.edgeFactory = new EdgeFactory();
-};
-Graph.prototype = {
-    /* 
-     * add a node
-     * @id          the node's ID (string or number)
-     * @content     (optional, dictionary) can contain any information that is
-     *              being interpreted by the layout algorithm or the graph
-     *              representation
-     */
-    addNode: function(id, content) {
-        /* testing if node is already existing in the graph */
-        if(this.nodes[id] == undefined) {
-            this.nodes[id] = new Graph.Node(id, content);
-        }
-        return this.nodes[id];
-    },
-
-    addEdge: function(source, target, style) {
-        var s = this.addNode(source);
-        var t = this.addNode(target);
-        var edge = this.edgeFactory.build(s, t);
-        jQuery.extend(edge.style,style);
-        s.edges.push(edge);
-        this.edges.push(edge);
-        // NOTE: Even directed edges are added to both nodes.
-        t.edges.push(edge);
-    },
-    
-    /* TODO to be implemented
-     * Preserve a copy of the graph state (nodes, positions, ...)
-     * @comment     a comment describing the state
-     */
-    snapShot: function(comment) {
-        /* FIXME
-        var graph = new Graph();
-        graph.nodes = jQuery.extend(true, {}, this.nodes);
-        graph.edges = jQuery.extend(true, {}, this.edges);
-        this.snapshots.push({comment: comment, graph: graph});
-        */
-    },
-    removeNode: function(id) {
-        delete this.nodes[id];
-        for(var i = 0; i < this.edges.length; i++) {
-            if (this.edges[i].source.id == id || this.edges[i].target.id == id) {
-                this.edges.splice(i, 1);
-                i--;
-            }
-        }
-    }
-};
-
-/*
- * Node
- */
-Graph.Node = function(id, node){
-    node = node || {};
-    node.id = id;
-    node.edges = [];
-    node.hide = function() {
-        this.hidden = true;
-        this.shape && this.shape.hide(); /* FIXME this is representation specific code and should be elsewhere */
-        for(i in this.edges)
-            (this.edges[i].source.id == id || this.edges[i].target == id) && this.edges[i].hide && this.edges[i].hide();
-    };
-    node.show = function() {
-        this.hidden = false;
-        this.shape && this.shape.show();
-        for(i in this.edges)
-            (this.edges[i].source.id == id || this.edges[i].target == id) && this.edges[i].show && this.edges[i].show();
-    };
-    return node;
-};
-Graph.Node.prototype = {
-};
-
-/*
- * Renderer base class
- */
-Graph.Renderer = {};
-
-/*
- * Renderer implementation using RaphaelJS
- */
-Graph.Renderer.Raphael = function(element, graph, width, height) {
-    this.width = width || 400;
-    this.height = height || 400;
-    var selfRef = this;
-    this.r = Raphael(element, this.width, this.height);
-    this.radius = 40; /* max dimension of a node */
-    this.graph = graph;
-    this.mouse_in = false;
-
-    /* TODO default node rendering function */
-    if(!this.graph.render) {
-        this.graph.render = function() {
-            return;
-        }
-    }
-    
-    /*
-     * Dragging
-     */
-    this.isDrag = false;
-    this.dragger = function (e) {
-        this.dx = e.clientX;
-        this.dy = e.clientY;
-        selfRef.isDrag = this;
-        this.set && this.set.animate({"fill-opacity": .1}, 200) && this.set.toFront();
-        e.preventDefault && e.preventDefault();
-    };
-    
-    var d = document.getElementById(element);
-    d.onmousemove = function (e) {
-        e = e || window.event;
-        if (selfRef.isDrag) {
-            var bBox = selfRef.isDrag.set.getBBox();
-            // TODO round the coordinates here (eg. for proper image representation)
-            var newX = e.clientX - selfRef.isDrag.dx + (bBox.x + bBox.width / 2);
-            var newY = e.clientY - selfRef.isDrag.dy + (bBox.y + bBox.height / 2);
-            /* prevent shapes from being dragged out of the canvas */
-            var clientX = e.clientX - (newX < 20 ? newX - 20 : newX > selfRef.width - 20 ? newX - selfRef.width + 20 : 0);
-            var clientY = e.clientY - (newY < 20 ? newY - 20 : newY > selfRef.height - 20 ? newY - selfRef.height + 20 : 0);
-            selfRef.isDrag.set.translate(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
-            //            console.log(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
-            for (var i in selfRef.graph.edges) {
-                selfRef.graph.edges[i].connection && selfRef.graph.edges[i].connection.draw();
-            }
-            //selfRef.r.safari();
-            selfRef.isDrag.dx = clientX;
-            selfRef.isDrag.dy = clientY;
-        }
-    };
-    d.onmouseup = function () {
-        selfRef.isDrag && selfRef.isDrag.set.animate({"fill-opacity": .6}, 500);
-        selfRef.isDrag = false;
-    };
-    this.draw();
-};
-Graph.Renderer.Raphael.prototype = {
-    translate: function(point) {
-        return [
-            (point[0] - this.graph.layoutMinX) * this.factorX + this.radius,
-            (point[1] - this.graph.layoutMinY) * this.factorY + this.radius
-        ];
-    },
-
-    rotate: function(point, length, angle) {
-        var dx = length * Math.cos(angle);
-        var dy = length * Math.sin(angle);
-        return [point[0]+dx, point[1]+dy];
-    },
-
-    draw: function() {
-        this.factorX = (this.width - 2 * this.radius) / (this.graph.layoutMaxX - this.graph.layoutMinX);
-        this.factorY = (this.height - 2 * this.radius) / (this.graph.layoutMaxY - this.graph.layoutMinY);
-        for (i in this.graph.nodes) {
-            this.drawNode(this.graph.nodes[i]);
-        }
-        for (var i = 0; i < this.graph.edges.length; i++) {
-            this.drawEdge(this.graph.edges[i]);
-        }
-    },
-
-    drawNode: function(node) {
-        var point = this.translate([node.layoutPosX, node.layoutPosY]);
-        node.point = point;
-
-        /* if node has already been drawn, move the nodes */
-        if(node.shape) {
-            var oBBox = node.shape.getBBox();
-            var opoint = { x: oBBox.x + oBBox.width / 2, y: oBBox.y + oBBox.height / 2};
-            node.shape.translate(Math.round(point[0] - opoint.x), Math.round(point[1] - opoint.y));
-            this.r.safari();
-            return node;
-        }/* else, draw new nodes */
-
-        var shape;
-
-        /* if a node renderer function is provided by the user, then use it 
-           or the default render function instead */
-        if(!node.render) {
-            node.render = function(r, node) {
-                /* the default node drawing */
-                var color = Raphael.getColor();
-                var ellipse = r.ellipse(0, 0, 30, 20).attr({fill: color, stroke: color, "stroke-width": 2});
-                /* set DOM node ID */
-                ellipse.node.id = node.label || node.id;
-                shape = r.set().
-                    push(ellipse).
-                    push(r.text(0, 30, node.label || node.id));
-                return shape;
-            }
-        }
-        /* or check for an ajax representation of the nodes */
-        if(node.shapes) {
-            // TODO ajax representation evaluation
-        }
-
-        shape = node.render(this.r, node).hide();
-
-        shape.attr({"fill-opacity": .6});
-        /* re-reference to the node an element belongs to, needed for dragging all elements of a node */
-        shape.items.forEach(function(item){ item.set = shape; item.node.style.cursor = "move"; });
-        shape.mousedown(this.dragger);
-
-        var box = shape.getBBox();
-        shape.translate(Math.round(point[0]-(box.x+box.width/2)),Math.round(point[1]-(box.y+box.height/2)))
-        //console.log(box,point);
-        node.hidden || shape.show();
-        node.shape = shape;
-    },
-    drawEdge: function(edge) {
-        /* if this edge already exists the other way around and is undirected */
-        if(edge.backedge)
-            return;
-        if(edge.source.hidden || edge.target.hidden) {
-            edge.connection && edge.connection.fg.hide() | edge.connection.bg && edge.connection.bg.hide();
-            return;
-        }
-        /* if edge already has been drawn, only refresh the edge */
-        if(!edge.connection) {
-            edge.style && edge.style.callback && edge.style.callback(edge); // TODO move this somewhere else
-            edge.connection = this.r.connection(edge.source.shape, edge.target.shape, edge.style);
-            return;
-        }
-        //FIXME showing doesn't work well
-        edge.connection.fg.show();
-        edge.connection.bg && edge.connection.bg.show();
-        edge.connection.draw();
-    }
-};
-Graph.Layout = {};
-Graph.Layout.Spring = function(graph) {
-    this.graph = graph;
-    this.iterations = 500;
-    this.maxRepulsiveForceDistance = 6;
-    this.k = 2;
-    this.c = 0.01;
-    this.maxVertexMovement = 0.5;
-    this.layout();
-};
-Graph.Layout.Spring.prototype = {
-    layout: function() {
-        this.layoutPrepare();
-        for (var i = 0; i < this.iterations; i++) {
-            this.layoutIteration();
-        }
-        this.layoutCalcBounds();
-    },
-    
-    layoutPrepare: function() {
-        for (i in this.graph.nodes) {
-            var node = this.graph.nodes[i];
-            node.layoutPosX = 0;
-            node.layoutPosY = 0;
-            node.layoutForceX = 0;
-            node.layoutForceY = 0;
-        }
-        
-    },
-    
-    layoutCalcBounds: function() {
-        var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;
-
-        for (i in this.graph.nodes) {
-            var x = this.graph.nodes[i].layoutPosX;
-            var y = this.graph.nodes[i].layoutPosY;
-            
-            if(x > maxx) maxx = x;
-            if(x < minx) minx = x;
-            if(y > maxy) maxy = y;
-            if(y < miny) miny = y;
-        }
-
-        this.graph.layoutMinX = minx;
-        this.graph.layoutMaxX = maxx;
-        this.graph.layoutMinY = miny;
-        this.graph.layoutMaxY = maxy;
-    },
-    
-    layoutIteration: function() {
-        // Forces on nodes due to node-node repulsions
-
-        var prev = new Array();
-        for(var c in this.graph.nodes) {
-            var node1 = this.graph.nodes[c];
-            for (var d in prev) {
-                var node2 = this.graph.nodes[prev[d]];
-                this.layoutRepulsive(node1, node2);
-                
-            }
-            prev.push(c);
-        }
-        
-        // Forces on nodes due to edge attractions
-        for (var i = 0; i < this.graph.edges.length; i++) {
-            var edge = this.graph.edges[i];
-            this.layoutAttractive(edge);             
-        }
-        
-        // Move by the given force
-        for (i in this.graph.nodes) {
-            var node = this.graph.nodes[i];
-            var xmove = this.c * node.layoutForceX;
-            var ymove = this.c * node.layoutForceY;
-
-            var max = this.maxVertexMovement;
-            if(xmove > max) xmove = max;
-            if(xmove < -max) xmove = -max;
-            if(ymove > max) ymove = max;
-            if(ymove < -max) ymove = -max;
-            
-            node.layoutPosX += xmove;
-            node.layoutPosY += ymove;
-            node.layoutForceX = 0;
-            node.layoutForceY = 0;
-        }
-    },
-
-    layoutRepulsive: function(node1, node2) {
-        if (typeof node1 == 'undefined' || typeof node2 == 'undefined')
-            return;
-        var dx = node2.layoutPosX - node1.layoutPosX;
-        var dy = node2.layoutPosY - node1.layoutPosY;
-        var d2 = dx * dx + dy * dy;
-        if(d2 < 0.01) {
-            dx = 0.1 * Math.random() + 0.1;
-            dy = 0.1 * Math.random() + 0.1;
-            var d2 = dx * dx + dy * dy;
-        }
-        var d = Math.sqrt(d2);
-        if(d < this.maxRepulsiveForceDistance) {
-            var repulsiveForce = this.k * this.k / d;
-            node2.layoutForceX += repulsiveForce * dx / d;
-            node2.layoutForceY += repulsiveForce * dy / d;
-            node1.layoutForceX -= repulsiveForce * dx / d;
-            node1.layoutForceY -= repulsiveForce * dy / d;
-        }
-    },
-
-    layoutAttractive: function(edge) {
-        var node1 = edge.source;
-        var node2 = edge.target;
-        
-        var dx = node2.layoutPosX - node1.layoutPosX;
-        var dy = node2.layoutPosY - node1.layoutPosY;
-        var d2 = dx * dx + dy * dy;
-        if(d2 < 0.01) {
-            dx = 0.1 * Math.random() + 0.1;
-            dy = 0.1 * Math.random() + 0.1;
-            var d2 = dx * dx + dy * dy;
-        }
-        var d = Math.sqrt(d2);
-        if(d > this.maxRepulsiveForceDistance) {
-            d = this.maxRepulsiveForceDistance;
-            d2 = d * d;
-        }
-        var attractiveForce = (d2 - this.k * this.k) / this.k;
-        if(edge.attraction == undefined) edge.attraction = 1;
-        attractiveForce *= Math.log(edge.attraction) * 0.5 + 1;
-        
-        node2.layoutForceX -= attractiveForce * dx / d;
-        node2.layoutForceY -= attractiveForce * dy / d;
-        node1.layoutForceX += attractiveForce * dx / d;
-        node1.layoutForceY += attractiveForce * dy / d;
-    }
-};
-
-Graph.Layout.Ordered = function(graph, order) {
-    this.graph = graph;
-    this.order = order;
-    this.layout();
-};
-Graph.Layout.Ordered.prototype = {
-    layout: function() {
-        this.layoutPrepare();
-        this.layoutCalcBounds();
-    },
-    
-    layoutPrepare: function(order) {
-        for (i in this.graph.nodes) {
-            var node = this.graph.nodes[i];
-            node.layoutPosX = 0;
-            node.layoutPosY = 0;
-        }
-            var counter = 0;
-            for (i in this.order) {
-                var node = this.order[i];
-                node.layoutPosX = counter;
-                node.layoutPosY = Math.random();
-                counter++;
-            }
-    },
-    
-    layoutCalcBounds: function() {
-        var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;
-
-        for (i in this.graph.nodes) {
-            var x = this.graph.nodes[i].layoutPosX;
-            var y = this.graph.nodes[i].layoutPosY;
-            
-            if(x > maxx) maxx = x;
-            if(x < minx) minx = x;
-            if(y > maxy) maxy = y;
-            if(y < miny) miny = y;
-        }
-
-        this.graph.layoutMinX = minx;
-        this.graph.layoutMaxX = maxx;
-
-        this.graph.layoutMinY = miny;
-        this.graph.layoutMaxY = maxy;
-    }
-};
-
-/*
- * usefull JavaScript extensions, 
- */
-
-function log(a) {console.log&&console.log(a);}
-
-/*
- * Raphael Tooltip Plugin
- * - attaches an element as a tooltip to another element
- *
- * Usage example, adding a rectangle as a tooltip to a circle:
- *
- *      paper.circle(100,100,10).tooltip(paper.rect(0,0,20,30));
- *
- * If you want to use more shapes, you'll have to put them into a set.
- *
- */
-Raphael.el.tooltip = function (tp) {
-    this.tp = tp;
-    this.tp.o = {x: 0, y: 0};
-    this.tp.hide();
-    this.hover(
-        function(event){ 
-            this.mousemove(function(event){ 
-                this.tp.translate(event.clientX - 
-                                  this.tp.o.x,event.clientY - this.tp.o.y);
-                this.tp.o = {x: event.clientX, y: event.clientY};
-            });
-            this.tp.show().toFront();
-        }, 
-        function(event){
-            this.tp.hide();
-            this.unmousemove();
-        });
-    return this;
-};
-
-/* For IE */
-if (!Array.prototype.forEach)
-{
-  Array.prototype.forEach = function(fun /*, thisp*/)
-  {
-    var len = this.length;
-    if (typeof fun != "function")
-      throw new TypeError();
-
-    var thisp = arguments[1];
-    for (var i = 0; i < len; i++)
-    {
-      if (i in this)
-        fun.call(thisp, this[i], i, this);
-    }
-  };
-}