diff --git a/css/processingMapper.css b/css/vizmapper.css similarity index 89% rename from css/processingMapper.css rename to css/vizmapper.css index 074c340..ddd0e1f 100644 --- a/css/processingMapper.css +++ b/css/vizmapper.css @@ -20,10 +20,10 @@ span { .graphColor { - background:rgb(207,207,207); + background:rgb(187,187,187); } .listColor { - background:rgb(80,80,80); + background:rgb(187,187,227); } .rawColor { background:rgb(220,220,220); @@ -329,35 +329,61 @@ span { font-size:18px; } - #addMappingForm { - background:white; + background:rgb(187,187,227); position:absolute; - width:600px; - height:200px; - top:300px; - left:340px; + width:350px; + height:600px; + top:100px; + left:10px; padding:10px; + line-height:180%; display:none; } +#exprInput { + position:absolute; + top:205px; + left:50px; +} #mappingFactorInput { position:absolute; - top:135px; - left:198px; + top:270px; + left:10px; } #mappingOffsetInput { position:absolute; - top:135px; - left:370px; + top:293px; + left:50px; +} +#mappingSourceMinInput { + position:absolute; + top:293px; + left:45px; +} +#mappingSourceMaxInput { + position:absolute; + top:293px; + left:230px; +} +#mappingDestMinInput { + position:absolute; + top:377px; + left:45px; +} +#mappingDestMaxInput { + position:absolute; + top:377px; + left:230px; } -#mappingTemplate { +.mappingTemplate { font-size:16px; font-family:monospace; } -#okMapping { +#updateConnection { position:absolute; text-align:center; padding-top:10px; + padding-bottom:10px; height:25px; width:100px; left:20px; @@ -365,10 +391,11 @@ span { background:black; color:white; } -#cancelMapping { +#removeConnection { position:absolute; text-align:center; padding-top:10px; + padding-bottom:10px; height:25px; width:100px; right:20px; diff --git a/html/vizmapper.html b/html/vizmapper.html index 014fd7e..0254005 100644 --- a/html/vizmapper.html +++ b/html/vizmapper.html @@ -4,7 +4,7 @@ webmapper - + @@ -26,24 +26,33 @@ 

 
-	
graph

-	
list

+	
view

+	
edit

 	
raw

 
 	

-		
adding new connection from

+		
connection from

 		

-		
output = 

+		
source = 

 		
to

-		
input = 

+		
destination = 

 		

-		
with following mapping

+		
expression

 		

-		
input = ( output *          	) + 

-		
-		
-		
OK

-		
CANCEL

+        

+        
source range

+        
min               max

+        

+        
dest range

+        
min               max

+        

+		
+		
+		
+		
+		
+		
UPDATE

+		
REMOVE

 	

 
 	

diff --git a/js/vizmapper.js b/js/vizmapper.js
index 1fce5f7..b314c1a 100644
--- a/js/vizmapper.js
+++ b/js/vizmapper.js
@@ -51,14 +51,7 @@
 //	src_name
 //	dest_name
 
-function testAlgo() {
-}
-
-var numberOfItemsPerPage = 1;
-var signalPagePointer = 0;
-var mappingPagePointer = 0;
-
-var connectionGlyphMap = [];
+var edgeGlyphMap = [];
 var nodeGlyphMap = {outputs:new Assoc(),inputs:new Assoc()};
 
 // output labels, input labels
@@ -92,70 +85,24 @@ var inputBranchTrace = [];
 var outputLabelTrace = ["output signals"];
 var inputLabelTrace = ["input signals"];
 
+var updateGraph = true;
+
 function globalP(p) {
 	p.mouseMoved = function() {
 		mouseX = p.mouseX;
 		mouseY = p.mouseY;
-
-        /*
-		// hover detection of connections
-		if ($('#graphTab').hasClass('active')) {
-			// check mouse position against where points are on the bezier equation
-			// B(t) = ((1-t)^3)*(P0) + (3*(1-t)^2)*(t)*(P1) + (3*(1-t)*t^2)*(P2) + (t^3)*(P3)
-			for (var i=0;ixs[0] &&
-					mouseYys[0]) {
-
-					var xLength = Math.abs(Math.round(mappingVizMap[0][i][1]-mappingVizMap[1][i][1]));
-					for (var j=0;jmicroX-3 &&
-								mouseYmicroY-3) {
-							hoverGlyphMap[2][i] = true;
-							break;
-						}
-						if (j == xLength-1) {
-							hoverGlyphMap[2][i] = false;
-						}
-					}
-
-				} else {
-					hoverGlyphMap[2][i] = false;
-				}
-				if (hoverGlyphMap[2][i]) {
-					for (var j=i+1;j 1) {
-        separationAngle = Math.PI/(count-1);
-    } else {
-        separationAngle = Math.PI/(count);
-    }
-
-    var layoutAngle;
-
-    var layoutX;
-    var layoutY;
-    var symbolWidth;
-    if (count <= 6) {
-        symbolWidth = 700/6;
-    } else {
-        symbolWidth = (700*Math.PI)/(2*( (Math.PI/Math.sin(Math.PI/(count-1))) + (Math.PI/2) ));
-    }
-    var layoutRadius = (700/2)-(symbolWidth/2);
-
-    for (var i=0;i 1) {
-            separationAngle2 = Math.PI/(count2-1);
-        } else {
-            separationAngle2 = Math.PI/(count2);
-        }
-
-        var layoutAngle2;
-
-        var layoutX2;
-        var layoutY2;
-        var symbolWidth2;
-        if (count2 < 6) {
-            symbolWidth2 = symbolWidth/6;
-        } else {
-            symbolWidth2 = (symbolWidth*Math.PI)/(2*( (Math.PI/Math.sin(Math.PI/(count2-1))) + (Math.PI/2) ));
-        }
-        var layoutRadius2 = (symbolWidth/2)-(symbolWidth2/2);
-
-        //var subNodes = [];
-        var subNodes = new Assoc();
-        for (var j=0;j 1) {
-        separationAngle = Math.PI/(count-1);
-    } else {
-        separationAngle = Math.PI/(count);
-    }
-
-    if (count <= 6) {
-        symbolWidth = 700/6;
-    } else {
-        symbolWidth = (700*Math.PI)/(2*( (Math.PI/Math.sin(Math.PI/(count-1))) + (Math.PI/2) ));
-    }
-    layoutRadius = (700/2)-(symbolWidth/2);
-
-    for (var i=0;i 1) {
-            separationAngle2 = Math.PI/(count2-1);
-        } else {
-            separationAngle2 = Math.PI/(count2);
-        }
+        } else if ($('#listTab').hasClass('active')) {
+            $('html').toggleClass('graphColor',false);
+            $('html').toggleClass('listColor',true);
+            $('html').toggleClass('rawColor',false);
 
-        var layoutAngle2;
+            p.background(207,207,207);
+            drawBackground();
+            updateNodeMouseState();
+            updateEdgeMouseState();
+            drawNodes();
+            drawEdges();
 
-        var layoutX2;
-        var layoutY2;
-        var symbolWidth2;
-        if (count2 <= 6) {
-            symbolWidth2 = symbolWidth/6;
         } else {
-            symbolWidth2 = (symbolWidth*Math.PI)/(2*( (Math.PI/Math.sin(Math.PI/(count2-1))) + (Math.PI/2) ));
-        }
-        var layoutRadius2 = (symbolWidth/2)-(symbolWidth2/2);
-
-        //var subNodes = [];
-        var subNodes = new Assoc();
-        for (var j=0;jxs[0] &&
+                mouseYys[0]) {
+            var xLength = Math.abs(Math.round(x1-x2));
+            for (var j=0;jmicroX-4 &&
+                        mouseYmicroY-4) {
+                    edgeGlyphMap.get(keys[i]).mouseOver = true;
+                    break;
+                }
+            }
+        }
+    }
+
+}
 
 function addConnection() {
     // add
@@ -496,101 +349,6 @@ function removeConnection() {
     updateActiveFilter();
 }
 
-
-
-function drawMouseFeedback() {
-    // mouse over connection glyph feedback
-    var thisX = 0;
-    var thisY = 0;
-    var thisWidth = 500;
-    var thisHeight = 75;
-    thisX = mouseX+20;
-    thisY = mouseY+20;
-    if (thisX+thisWidth>screenWidth) {
-        thisX = mouseX-20-thisWidth;
-    }
-    if (thisY+thisHeight>screenHeight) {
-        thisY = mouseY-20-thisHeight;
-    }
-
-/*
-    for (var i=0;iscreenWidth) {
-        thisX = mouseX-20-thisWidth+(thisWidth/2);
-        textX = mouseX-10-thisWidth;
-    }
-    if (thisY+thisHeight>screenHeight) {
-        thisY = mouseY-20-thisHeight+(thisHeight/2);
-        textY = mouseY-20-thisHeight;
-    }
-
-    // output mouseover feedback
-    var keys = nodeGlyphMap.outputs.keys();
-    for (var i=0;ithisX-thisRadius &&
-                mouseYthisY-thisRadius) {
+        if (nodeGlyphMap.outputs.get(keys[i]).mouseOver) {
             descendOutputTree(keys[i]);
+            if (selectionEnabled) {
+                nodeGlyphMap.outputs.get(keys[i]).selected = true;
+            }
         }
     }
 
     var keys = nodeGlyphMap.inputs.keys();
     for (var i=0;ithisX-thisRadius &&
-                mouseYthisY-thisRadius) {
+        if (nodeGlyphMap.inputs.get(keys[i]).mouseOver) {
             descendInputTree(keys[i]);
+            if (selectionEnabled) {
+                nodeGlyphMap.inputs.get(keys[i]).selected = true;
+            }
         }
     }
-    /*
-    for (var i=0;ithisX-thisRadius &&
-                mouseYthisY-thisRadius) {
-            descendInputTree(i);
-            //updateHoverGlyphMap();
+}
+
+function detectEdgeClick() {
+    var keys = edgeGlyphMap.keys();
+    for (var i=0;i");
             var exp2 = new RegExp(outputSet[j]+".*>");
             if (connectionKeys[i].match(exp1)) {
                 connectionOutputMatches.push(connectionKeys[i]); 
-                keyPairs.add(connectionKeys[i], {output:outputLevel[j],isOutputSubnode:false});
-            } else if (connectionKeys[i].match(exp2)) {
+                edgeGlyphMap.add(connectionKeys[i], {output:outputLevel[j],outputChild:outputSet[j],isOutputSubnode:false});
+            } else if (connectionKeys[i].match(exp2) && !signalsOnly) {
                 connectionOutputMatches.push(connectionKeys[i]); 
                 for (var k=0;k");
                     if (connectionKeys[i].match(exp3)) {
-                        keyPairs.add(connectionKeys[i], {output:outputLevel[j],outputChild:outputChildren[j][k].name,isOutputSubnode:true});
+                        edgeGlyphMap.add(connectionKeys[i], {output:outputLevel[j],outputChild:outputChildren[j][k].name,isOutputSubnode:true});
                     }
                 }
             }
@@ -1267,46 +1023,49 @@ function drawEdges() {
         for (var j=0;j"+inputSet[j]+".+");
             var exp2 = new RegExp(">"+inputSet[j]+".*");
-            if (connectionOutputMatches[i].match(exp1)) {
+            if (connectionOutputMatches[i].match(exp1) && !signalsOnly) {
                 connectionInputMatches.push(connectionKeys[i]); 
                 for (var k=0;k"+inputChildren[j][k].name+".*");
                     if (connectionOutputMatches[i].match(exp3)) {
-                        keyPairs.get(connectionOutputMatches[i]).input = inputLevel[j];
-                        keyPairs.get(connectionOutputMatches[i]).inputChild = inputChildren[j][k].name;
-                        keyPairs.get(connectionOutputMatches[i]).isInputSubnode = true;
+                        edgeGlyphMap.get(connectionOutputMatches[i]).input = inputLevel[j];
+                        edgeGlyphMap.get(connectionOutputMatches[i]).inputChild = inputChildren[j][k].name;
+                        edgeGlyphMap.get(connectionOutputMatches[i]).isInputSubnode = true;
                     }
                 }
             } else if (connectionOutputMatches[i].match(exp2)) {
                 connectionInputMatches.push(connectionOutputMatches[i]); 
-                keyPairs.get(connectionOutputMatches[i]).input = inputLevel[j];
-                keyPairs.get(connectionOutputMatches[i]).isInputSubnode = false;
+                edgeGlyphMap.get(connectionOutputMatches[i]).input = inputLevel[j];
+                edgeGlyphMap.get(connectionOutputMatches[i]).inputChild = inputSet[j];
+                edgeGlyphMap.get(connectionOutputMatches[i]).isInputSubnode = false;
             }
         }
     }
 
-    var keys = keyPairs.keys();
+    var keys = edgeGlyphMap.keys();
     var x1, y1, x2, y2;
     var cx1, cy1, cx2, cy2;
-    globalP.strokeWeight(3);
-    globalP.stroke(0);
-    globalP.noFill();
     for (var i=0;i numberOfItemsPerPage) {
-            globalP.textSize(textSize);
-            globalP.fill(200);
-            if (signalPagePointer != 0) {
-                globalP.triangle(0+horizontalOffset,100,
-                        300+horizontalOffset,100,
-                        150+horizontalOffset,70);
-            }
-            if (signalPagePointer+numberOfItemsPerPage < tables[0].length) {
-                globalP.triangle(0+horizontalOffset,750,
-                        300+horizontalOffset,750,
-                        150+horizontalOffset,780);
-
-                globalP.fill(10);
-                globalP.text(
-                        "showing "+(signalPagePointer+1)+"-"+(signalPagePointer+numberOfItemsPerPage)+" of "+tables[0].length+" signals",
-                        450, 85);
-            } else {
-                globalP.fill(10);
-                globalP.text(
-                        "showing "+(signalPagePointer+1)+"-"+tables[0].length+" of "+tables[0].length+" signals",
-                        450, 85);
-            }
-        } else {
-            globalP.textSize(textSize);
-            globalP.fill(10);
-            globalP.text(
-                    "showing "+1+"-"+tables[0].length+" of "+tables[0].length+" signals",
-                    450, 85);
-
-        }
+function drawEdges() {
 
-        var xPos = leftBound;
-        var yPos = topBound;
-
-        numberOfItemsPerPage = Math.ceil((screenHeight-80-topBound)/lineSpacing) + 1;
-
-        globalP.fill(200);
-        if (tables != null) {
-            for (var i=signalPagePointer;i screenHeight) {
-                    break;
-                } else {
-                    yPos += lineSpacing;
-                }
-            }
-        }
-    } else {
-        globalP.fill(0);
-        globalP.textSize(textSize);
-        globalP.textAlign(globalP.LEFT);
-        globalP.text("expression",leftBound,126);
-        globalP.text("output",leftBound+bigColumnSpacing,126);
-        globalP.text("input",leftBound+bigColumnSpacing+bigColumnSpacing,126);
-        globalP.fill(0);
-        //globalP.text("range",leftBound+bigColumnSpacing+(2*bigColumnSpacing),126);
-        //globalP.text("max",leftBound+bigColumnSpacing+(3*littleColumnSpacing),126);
-
-        if (tables[1].length > numberOfItemsPerPage) {
-            globalP.textSize(textSize);
-            globalP.fill(200);
-            if (mappingPagePointer != 0) {
-                globalP.triangle(0+horizontalOffset,100,
-                        300+horizontalOffset,100,
-                        150+horizontalOffset,70);
-            }
-            if (mappingPagePointer+numberOfItemsPerPage < tables[1].length) {
-                globalP.triangle(0+horizontalOffset,750,
-                        300+horizontalOffset,750,
-                        150+horizontalOffset,780);
-
-                globalP.fill(10);
-                globalP.text(
-                        "showing "+(mappingPagePointer+1)+"-"+(mappingPagePointer+numberOfItemsPerPage)+" of "+tables[1].length+" mappings",
-                        450, 85);
+    var keys = edgeGlyphMap.keys();
+    var x1, y1, x2, y2;
+    var cx1, cy1, cx2, cy2;
+    globalP.strokeWeight(3);
+    globalP.noFill();
+    for (var i=0;i screenHeight) {
-                    break;
-                } else {
-                    yPos += lineSpacing;
-                }
+                globalP.stroke(0);
             }
+            globalP.bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2);
         }
-        globalP.fill(255,0,0);
-        globalP.text(selectedOutput,
-                xPos+bigColumnSpacing,
-                yPos);
-        globalP.text(selectedInput,
-                xPos+bigColumnSpacing+bigColumnSpacing,
-                yPos);
     }
+
 }
 
 function drawRaw() {
@@ -1549,6 +1156,9 @@ function activateMappingsMode() {
 }
 
 function activateGraphMode() {
+    $('#addMappingForm').toggle(false);
+    $('#rawTab').toggle(false);
+
 	$('#globalCanvas').toggle(true);
     $('#signalsFile').toggle(false);
     $('#mappingsFile').toggle(false);
@@ -1568,8 +1178,13 @@ function activateGraphMode() {
 	//$('#executeButton').toggle(false);
 	$('#signalsTab').toggle(false);
 	$('#mappingsTab').toggle(false);
+
+    updateGraph = true;
 }
 function activateListMode() {
+    $('#addMappingForm').toggle(true);
+    $('#rawTab').toggle(false);
+
 	$('#globalCanvas').toggle(true);
     $('#signalsFile').toggle(false);
     $('#mappingsFile').toggle(false);
@@ -1587,8 +1202,10 @@ function activateListMode() {
 	//$('#executeInput').toggle(true);
 	//$('#executeText').toggle(true);
 	//$('#executeButton').toggle(true);
-	$('#signalsTab').toggle(true);
-	$('#mappingsTab').toggle(true);
+	//$('#signalsTab').toggle(true);
+	//$('#mappingsTab').toggle(true);
+
+    updateGraph = true;
 }
 function activateRawMode() {
 	$('#globalCanvas').toggle(false);
@@ -1745,55 +1362,21 @@ $(document).ready(function() {
 
 		$('#graphTab').click(function() {
 			activateGraphMode();
+            updateGraph = true;
 		});
 		$('#listTab').click(function() {
 			activateListMode();
-		});
-		$('#rawTab').click(function() {
-			activateRawMode();
-		});
-		$('#signalsTab').click(function() {
-			activateSignalsMode();
-		});
-		$('#mappingsTab').click(function() {
-			activateMappingsMode();
-		});
-		$('#executeButton').click(function() {
-			executeSymbols();
+            updateGraph = true;
 		});
 
-/*
-		$('#filterInput').keydown(function(event) {
-			if (event.which == '9') {
-				event.preventDefault();
-				activateListMode();
-			}
-		});
-		*/
 		$('#filterInput').keyup(function(event) {
 			event.preventDefault();
 			updateActiveFilter();
-            //updateLevelStructure();
-		});
-		/*
-		$('#executeInput').keydown(function(event) {
-			if (event.which == '9') {
-				event.preventDefault();
-				activateGraphMode();
-			}
+            updateGraph = true;
 		});
-		$('#executeInput').keyup(function(event) {
-			event.preventDefault();
-			if (event.which == '13') {
-				executeSymbols();
-			} else {
-				updateActiveExecution();
-			}
-		});
-		*/
 
-        //updateActiveFilter();
 		main();
+        activateListMode();
 });
 
 devices = new Assoc();
@@ -1805,62 +1388,67 @@ connections = new Assoc();
 function main()
 {
     command.register("all_devices", function(cmd, args) {
-        for (d in args)
+        for (d in args) {
+            updateGraph = true;
             devices.add(args[d].name, args[d]);
+        }
     });
     command.register("new_device", function(cmd, args) {
+        updateGraph = true;
         devices.add(args.name, args);
     });
     command.register("del_device", function(cmd, args) {
+        updateGraph = true;
         devices.remove(args.name);
     });
 
     command.register("all_signals", function(cmd, args) {
-        for (d in args)
+        for (d in args) {
+            updateGraph = true;
             signals.add(args[d].device_name+args[d].name, args[d]);
+        }
     });
     command.register("new_signal", function(cmd, args) {
-        signals.add(args.device_name+args.name, args);
+            updateGraph = true;
+            signals.add(args.device_name+args.name, args);
     });
     command.register("del_signal", function(cmd, args) {
-        signals.remove(args.device_name+args.name);
+            updateGraph = true;
+            signals.remove(args.device_name+args.name);
     });
 
     command.register("all_links", function(cmd, args) {
-        for (l in args)
-            links.add(args[l].src_name+'>'+args[l].dest_name,
-                      args[l]);
+            for (l in args) {
+            updateGraph = true;
+            links.add(args[l].src_name+'>'+args[l].dest_name, args[l]);
+            }
     });
     command.register("new_link", function(cmd, args) {
-        links.add(args.src_name+'>'+args.dest_name, args);
+            updateGraph = true;
+            links.add(args.src_name+'>'+args.dest_name, args);
     });
     command.register("del_link", function(cmd, args) {
-        links.remove(args.src_name+'>'+args.dest_name);
+            updateGraph = true;
+            links.remove(args.src_name+'>'+args.dest_name);
     });
 
     command.register("all_connections", function(cmd, args) {
-        for (d in args)
-            connections.add(args[d].src_name+'>'+args[d].dest_name,
-                            args[d]);
-        //update_display();
-        /*
-        for (d in args)
-            update_connection_properties_for(args[d],
-                                             get_selected(connections));
-            */
+            for (d in args) {
+            updateGraph = true;
+            connections.add(args[d].src_name+'>'+args[d].dest_name, args[d]);
+            }
     });
     command.register("new_connection", function(cmd, args) {
+        updateGraph = true;
         connections.add(args.src_name+'>'+args.dest_name, args);
-        //update_connection_properties_for(args, get_selected(connections));
     });
     command.register("mod_connection", function(cmd, args) {
+        updateGraph = true;
         connections.add(args.src_name+'>'+args.dest_name, args);
-        //update_connection_properties_for(args, get_selected(connections));
     });
     command.register("del_connection", function(cmd, args) {
-        //var conns = get_selected(connections);
+        updateGraph = true;
         connections.remove(args.src_name+'>'+args.dest_name);
-        //update_connection_properties_for(args, conns);
     });
 
 	command.start();
@@ -1906,37 +1494,6 @@ function updateActiveFilter() {
 	activeFilter = activeFilter.replace(/^\s*(.*?)\s*$/,"$1").toLowerCase();
 	highlightedFilter = activeFilter;
 
-
-
-	/*
-		debug matching
-	 */
-     /*
-	if (activeFilter.match(new RegExp("!\\w+(!\\w+|)*","ig")) == null) {
-		debugQuery = [""];
-	} else {
-		debugQuery = activeFilter.match(new RegExp("!\\w+(!\\w+|)*","ig"));
-
-		for (var i=0;i"+debugQuery[i]+"");
-
-			debugQuery[i] = debugQuery[i].match(new RegExp("\\w+","ig"));
-		}
-	}
-	debugMode = 0;
-	for (var i=0;i