Mercurial > hg > Members > nobuyasu > html > graphViewer

changeset 2:e90546bb87e4 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
mofidied traverseDisplay
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Wed, 20 Mar 2013 02:36:11 +0900
parents a3fdabc0613e
children d006eeb10183
files css/viewer_form.css index.html
diffstat 2 files changed, 69 insertions(+), 21 deletions(-) [+]
line wrap: on
line diff
--- a/css/viewer_form.css	Wed Mar 20 01:13:37 2013 +0900
+++ b/css/viewer_form.css	Wed Mar 20 02:36:11 2013 +0900
@@ -1,8 +1,5 @@
 div.graphMainCss { 
     background-color:#555;
-    background:-moz-linear-gradient(top,#fff,#ccf);
-<!--    background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccf));
--->
 }
 div.header {
     position:absolute;
@@ -77,4 +74,22 @@
     left: 10px;
     top: 10px;
 }
-
+span.button{
+        background:#eee;
+	background:-moz-linear-gradient(top,#fff,#ddf);
+	background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddf));
+	border:1px solid gray;
+	border-radius:4px;
+	text-align:center;
+	cursor:default;
+}
+span.button:hover{
+	background:#bbb;
+	background:-moz-linear-gradient(top,#ccc,#aac);
+	background:-webkit-gradient(linear,left top,left bottom,from(#ccc),to(#aac));
+}
+span.button:active{
+	background:#bbb;
+	background:-moz-linear-gradient(top,#bbb,#88b);
+	background:-webkit-gradient(linear,left top,left bottom,from(#bbb),to(#88b));
+}
--- a/index.html	Wed Mar 20 01:13:37 2013 +0900
+++ b/index.html	Wed Mar 20 02:36:11 2013 +0900
@@ -15,21 +15,25 @@
 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script>
 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-all-min.js"></script>
 
-<div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'>
-    <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div>
+<div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'>
+    <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.7;'></div>
     <div id="closeTraverseDisplay" style='position:absolute; right:5; top:-3; z-index:10; color:white;' onclick="$('#traverseDisplay').css('visibility','hidden');" onmouseover="$('#closeTraverseDisplay').css('color','yellow');" onmouseout="$('#closeTraverseDisplay').css('color','white')" >CLOSE</div>
     <div style='position:absolute; width:90%; height:90%;'>
 	<div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'>
 	    <div id="traverseDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
-    Traverse
+    Traverse 
 	    </div>
+	    <label id="direction_in" style='position:absolute; left:0px; top:30px;' ><input type='checkbox' checked value='in'/>IN</label>
+            <label id="direction_out" style='position:absolute; left:50px; top:30px;'><input type='checkbox' checked value='out'/>OUT</label>   
+
 	    <div id="taverseDisplayBody" style='position:absolute; left:20px; top:40px;'>
 	    </div>
 	</div>
     </div>
+    <span class='button display' style='position:absolute; width:100; left:75; bottom:5; opacity:1;'>traverse</span>
 </div>
 
-<div id="miniDisplay" style='position:fixed; left:0; bottom:0; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'>
+<div id="miniDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:visible;'>
     <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div>
     <div id="closeMiniDisplay" style='position:absolute; right:5; top:-3; z-index:10; color:white;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','yellow');" onmouseout="$('#closeMiniDisplay').css('color','white')" >CLOSE</div>
     <div style='position:absolute; width:90%; height:90%;'>
@@ -37,6 +41,7 @@
 	    <div id="miniDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
 	    </div>
 	    <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'>
+		Please click any node.
 	    </div>
 	</div>
     </div>
@@ -57,13 +62,6 @@
     }
 }
 
-function loadConsensus(id) {
-    function onload(json) {
-	var title = json.hogehoge ? json.hogehoge : "title";
-	document.title = title;
-    }
-}
-
 function loadUserList() {
     $.ajax({
 	url:BASE_URL + "/users/all",
@@ -151,8 +149,32 @@
     }
     writeMiniDisplay(jsonObj.property.title, str);
 }
-function writeEdgeInfotraverseDisplay(edgeInfo) {
+
+function createDirectionView() {
+
+}
+
+function createTraverseView() {
+    
+}
+
+function writeEdgeInfotraverseDisplay(node) {
+    var id = node.property.id;
+    var edgeInfo = node.edgeInfo;
     var str = "";
+    var info = {};
+    for (var i=0; i<edgeInfo.length; i++) {
+	var kind = edgeInfo[i].kind;
+	var dir = edgeInfo[i].direction;
+	var num = edgeInfo[i].num;
+	info[kind][dir] = num;
+    }
+    
+    
+}
+
+function createTraverseDisplayInfo(info) {
+    
     
 }
 
@@ -170,17 +192,28 @@
 	left: rootLeft,
 	top: rootTop
     });
+    var heightStr = $('#traverseDisplay').css('height').split('px')[0];
+    var height = parseInt(heightStr);
+    $('#miniDisplay').css( {
+	left: rootLeft,
+	top: rootTop + height + 50
+    });
 }
 
 function createLabelStr(value) {
     return "<label class='relation'><input class='relation_input' type='checkbox' checked value='"+value+"'>"+value+"</label>";
 }
 
-function showMiniDisplay(jsonInfo) {
+function showMiniDisplay(node) {
     $("#miniDisplay").css("visibility", "visible");
     $("#traverseDisplay").css("visibility", "visible");
-    writeJSONDataToMiniDisplay(jsonInfo)
-    writeEdgeInfotraverseDisplay(jsonInfo.EdgeInfo)
+    writeJSONDataToMiniDisplay(node);
+    if (node.edgeInfo) {
+	if (!node.traverse) {
+	    writeEdgeInfotraverseDisplay(node);
+	}
+	showEdgeInfoTraverseDisplay(node);
+    }
 }
 
 var nodeNum = 0;
@@ -190,7 +223,7 @@
 var offsetTop = parseInt(miniD.height.split('px')[0]);
 function calcNewNodePosition() {
     var position = {};
-    position = {x: nodeNum*OFFSET + offsetLeft, y: nodeNum*OFFSET + offsetTop/2};
+    position = {x: nodeNum*OFFSET + offsetLeft, y: nodeNum*OFFSET + offsetTop / 3};
     nodeNum++;
     return position;
 }
@@ -427,7 +460,7 @@
     jsPlumb.draggable($('.graphNode'));
 }
 
-var BASE_THETA = -40;
+var BASE_THETA = -30;
 var BASE_ANGLE = 180;
 var BASE_DISTANCE = 180;
 function calcChildNodePosition(parent, num) {