From 49f60702c82398abadb0bc28bf9a3b902b1deee7 Mon Sep 17 00:00:00 2001 From: deepikasatheesh Date: Thu, 4 Feb 2021 14:54:53 +0000 Subject: Refactored & enhanced code check-in RANSim Controller and RANSim GUI Issue-ID: INT-1849 Signed-off-by: deepikasatheesh Change-Id: I8f92d8eae6eb67708098ccd696dbfff0eaa5f87f --- .../RANSIM-GUI/src/main/webapp/ransimgrid.html | 158 +++------------------ 1 file changed, 20 insertions(+), 138 deletions(-) (limited to 'ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransimgrid.html') diff --git a/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransimgrid.html b/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransimgrid.html index bf097fd..f2ca56c 100644 --- a/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransimgrid.html +++ b/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransimgrid.html @@ -51,22 +51,34 @@ } .btn-group + + .button + + :not + + ( :last-child + + ) { border-bottom + + : + + none -; +; } .btn-group .button:hover { background-color: lightblue; @@ -91,59 +103,10 @@ function getCellTopology() { }; xmlhttp.open("GET", "http://ransimsvr:8081/ransim/api/GetTopology", true); xmlhttp.send(); - /* - var topologyJson = { - "gridSize": 10, - "cellTopology": [ - {"nodeId":55, "physicalCellId":"70", "gridX":1, "gridY":1, "confusion":true, "color":"#FF0000" }, - {"nodeId":58, "physicalCellId":"72", "gridX":1, "gridY":4 }, - {"nodeId":57, "physicalCellId":"73", "gridX":1, "gridY":3 }, - {"nodeId":56, "physicalCellId":"71", "gridX":1, "gridY":2 }, - {"nodeId":65, "physicalCellId":"70", "gridX":3, "gridY":2, "confusion":true, "color":"#FF0000" } - ]} - drawTopology(topologyJson); - */ - /* var topologyJson = {"gridSize":10, - "cellTopology":[ - {"nodeId":51,"physicalCellId":20,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":5,"gridY":1,"serverId":"ncserver1003"}, - {"nodeId":52,"physicalCellId":4,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":5,"gridY":2,"serverId":"ncserver1003"}, - {"nodeId":61,"physicalCellId":10,"pciCollisionDetected":true,"pciConfusionDetected":false,"gridX":6,"gridY":1,"serverId":"ncserver1004"}, - {"nodeId":62,"physicalCellId":5,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":6,"gridY":2,"serverId":"ncserver1004"}, - {"nodeId":63,"physicalCellId":6,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":6,"gridY":3,"serverId":"ncserver1004"}, - {"nodeId":68,"physicalCellId":9,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":6,"gridY":8,"serverId":"ncserver1004"}, - {"nodeId":71,"physicalCellId":2,"pciCollisionDetected":true,"pciConfusionDetected":false,"gridX":7,"gridY":1,"serverId":"ncserver1005"}, - {"nodeId":72,"physicalCellId":8,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":7,"gridY":2,"serverId":"ncserver1005"}, - {"nodeId":73,"physicalCellId":1,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":7,"gridY":3,"serverId":"ncserver1005"}, - {"nodeId":76,"physicalCellId":2,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":7,"gridY":6,"serverId":"ncserver1005"}, - {"nodeId":77,"physicalCellId":5,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":7,"gridY":7,"serverId":"ncserver1005"}, - {"nodeId":78,"physicalCellId":3,"pciCollisionDetected":false,"pciConfusionDetected":true,"gridX":7,"gridY":8,"serverId":"ncserver1005"}, - {"nodeId":79,"physicalCellId":4,"pciCollisionDetected":true,"pciConfusionDetected":false,"gridX":7,"gridY":9,"serverId":"ncserver1005"}, - {"nodeId":80,"physicalCellId":15,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":7,"gridY":10,"serverId":"ncserver1005"}, - {"nodeId":81,"physicalCellId":13,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":8,"gridY":1,"serverId":"ncserver1005"}, - {"nodeId":82,"physicalCellId":14,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":8,"gridY":2,"serverId":"ncserver1005"}, - {"nodeId":83,"physicalCellId":3,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":8,"gridY":3,"serverId":"ncserver1005"}, - {"nodeId":86,"physicalCellId":6,"pciCollisionDetected":true,"pciConfusionDetected":true,"gridX":8,"gridY":6,"serverId":"ncserver1006"}, - {"nodeId":87,"physicalCellId":4,"pciCollisionDetected":false,"pciConfusionDetected":true,"gridX":8,"gridY":7,"serverId":"ncserver1006"}, - {"nodeId":88,"physicalCellId":0,"pciCollisionDetected":false,"pciConfusionDetected":true,"gridX":8,"gridY":8,"serverId":"ncserver1006"}, - {"nodeId":89,"physicalCellId":1,"pciCollisionDetected":false,"pciConfusionDetected":true,"gridX":8,"gridY":9,"serverId":"ncserver1006"}, - {"nodeId":90,"physicalCellId":7,"pciCollisionDetected":false,"pciConfusionDetected":true,"gridX":8,"gridY":10,"serverId":"ncserver1006"}, - {"nodeId":91,"physicalCellId":11,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":9,"gridY":1,"serverId":"ncserver1006"}, - {"nodeId":96,"physicalCellId":5,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":9,"gridY":6,"serverId":"ncserver1006"}, - {"nodeId":97,"physicalCellId":1,"pciCollisionDetected":true,"pciConfusionDetected":false,"gridX":9,"gridY":7,"serverId":"ncserver1006"}, - {"nodeId":98,"physicalCellId":2,"pciCollisionDetected":false,"pciConfusionDetected":true,"gridX":9,"gridY":8,"serverId":"ncserver1006"}, - {"nodeId":99,"physicalCellId":3,"pciCollisionDetected":false,"pciConfusionDetected":true,"gridX":9,"gridY":9,"serverId":"ncserver1006"}, - {"nodeId":100,"physicalCellId":4,"pciCollisionDetected":false,"pciConfusionDetected":true,"gridX":9,"gridY":10,"serverId":"ncserver1007"}, - {"nodeId":107,"physicalCellId":8,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":10,"gridY":7,"serverId":"ncserver1007"}, - {"nodeId":108,"physicalCellId":9,"pciCollisionDetected":true,"pciConfusionDetected":true,"gridX":10,"gridY":8,"serverId":"ncserver1007"}, - {"nodeId":109,"physicalCellId":1,"pciCollisionDetected":false,"pciConfusionDetected":false,"gridX":10,"gridY":9,"serverId":"ncserver1007"} - ]} - drawTopology(topologyJson); */ - } function drawTopology(topoObj){ - //alert("topoObj"); var width = window.innerHeight; var height = window.innerHeight;//100; var myCanvas = document.getElementById("myCanvas"); @@ -155,41 +118,18 @@ function drawTopology(topoObj){ context.fillStyle = "#FFFFFF"; context.fillRect(0,0,width,height); - //var gridSize = 15; var gridSize = topoObj.gridSize; var rad=height/(2 * gridSize);//10; var gaps= rad*2; - // alert(rad); var widthCount = parseInt(width/gaps); var heightCount = parseInt(height/gaps); - //var aColors=["#43A9D1","#EFA63B","#EF7625","#5E4130","#EEE","#DDD"]; var aColors="#32CD32"; var aColorsLength = 1; var arr = new Array(); var a=1.5*rad; var b=0.86*rad; - - - /* for(var x=0; x { const pos = { x: e.clientX, @@ -237,20 +177,7 @@ function drawTopology(topoObj){ if (typeof topoObj.cellTopology[i].color != 'undefined') { confuColor = topoObj.cellTopology[i].color; } - //alert(nodeId+" "+physicalCellId+" "+col+" "+row+" "+confusion+" "+confuColor+" "); - - /*if (collision) { - if (confusion) { - context.fillStyle = "#FF1493"; - } else { - context.fillStyle = "#FF0000"; - } - - } else if (confusion){ - context.fillStyle = "#CCCC00"; - } else { - context.fillStyle = "#32CD32"; - }*/ + if (confusion) { context.fillStyle = confuColor; } else { @@ -259,24 +186,17 @@ function drawTopology(topoObj){ context.beginPath(); context.arc(rad+gaps*col,rad+gaps*row, rad/2, 0, Math.PI*2, true); - //alert(nodeId+" Circle X " + (rad+gaps*col) + " Y: "+ (rad+gaps*row)); context.strokeStyle = "black"; context.stroke(); context.closePath(); context.fill(); - /* context.beginPath(); - context.moveTo(rad+gaps*col, rad+gaps*row); - context.lineTo(rad+gaps*col,rad+gaps*row - rad/2); - context.strokeStyle = "black"; - context.stroke(); - context.closePath(); */ + context.font = "12px Comic Sans MS"; context.fillStyle = "white"; context.textAlign = "center"; context.fillText(physicalCellId, rad+gaps*col,rad+ gaps*row ); - //fillMultiLineText(context,nodeId, rad+gaps*col,rad+ gaps*row); } myCanvas.addEventListener('contextmenu', (e) => { @@ -293,23 +213,17 @@ function drawTopology(topoObj){ --row; var col = topoObj.cellTopology[i].gridY; --col; - //alert('click on circle: ' + topoObj.cellTopology[i].nodeId); - //alert(pos.x + " "+pos.y); document.getElementById("rmenu").className = "show"; document.getElementById('rmenu').style.top = pos.y+"px"; //or whatever document.getElementById('rmenu').style.left = pos.x+"px"; // or whatever var htmlText1 = '
'; htmlText1 += ''; - //htmlText1 += ''; htmlText1 += '
'; document.getElementById("rmenu").innerHTML = htmlText1; document.getElementById("showNeighbours").addEventListener("click", function(){ alert(topoObj.cellTopology[i].nodeId); - //alert(col); - //alert(i); - //change(topoObj,row,col); var formVal = { "nodeId": nodeVal } @@ -327,9 +241,7 @@ function drawTopology(topoObj){ xmlhttp.setRequestHeader('Content-Type', 'application/json') xmlhttp.send(dataObj); }); - /* document.getElementById("deleteNode").addEventListener("click", function(){ - deleteNode(nodeVal, cellVal); - }); */ + } } e.preventDefault(); @@ -350,9 +262,7 @@ function drawTopology(topoObj){ context.fillStyle = "#FFFFFF"; context.fillRect(0,0,width,height); - //var gridSize = 15; var gridSize = topoObj.gridSize; - //alert(gridSize); var rad=height/(2 * gridSize);//10; var gaps= rad*2; @@ -372,11 +282,6 @@ function drawTopology(topoObj){ context.textAlign = "center"; context.fillText(cellPhysicalCellId, rad+gaps*col,rad+ gaps*row ); - - - /* var res = $http.post('http://ransimsvr:8081/ransim/api/GetNeighborList', dataObj) - var neighbour = JSON.parse(res); */ - for (i in neighbour.neighborList) { var neighbourNodeId = neighbour.neighborList[i].nodeId; @@ -394,12 +299,7 @@ function drawTopology(topoObj){ confusion = neighbour.neighborList[i].pciConfusionDetected; } - /* var confuColor = aColors; - if (typeof neighbour.neighborList[i].color != 'undefined') { - confuColor = neighbour.neighborList[i].color; - } */ - //alert(nodeId+" "+physicalCellId+" "+col+" "+row+" "+confusion+" "+confuColor+" "); - + if (collision) { if (confusion) { context.fillStyle = "#FF1493"; @@ -415,7 +315,6 @@ function drawTopology(topoObj){ context.beginPath(); context.arc(rad+gaps*col,rad+gaps*row, rad/2, 0, Math.PI*2, true); - //alert(nodeId+" Circle X " + (rad+gaps*col) + " Y: "+ (rad+gaps*row)); context.strokeStyle = "black"; context.stroke(); context.closePath(); @@ -433,7 +332,6 @@ function drawTopology(topoObj){ context.fillStyle = "white"; context.textAlign = "center"; context.fillText(neighbourPhysicalCellId, rad+gaps*col,rad+ gaps*row ); - //fillMultiLineText(context,nodeId, rad+gaps*col,rad+ gaps*row); } @@ -454,24 +352,12 @@ function drawTopology(topoObj){ context.fillStyle = "#FFFFFF"; context.fillRect(0,0,width,height); - //var gridSize = 15; var gridSize = topoObj.gridSize; - //alert(gridSize); var rad=height/(2 * gridSize);//10; var gaps= rad*2; - // alert(rad); - - //var row = topoObj.cellTopology[i].gridX; - //--row; - //alert(topoObj.cellTopology[i].nodeId); - //var col = topoObj.cellTopology[i].gridY; - //--col; - //alert(col); - //alert(i); - //context.arc(rad+gaps*col,rad+ gaps*row, rad/2, 0, Math.PI*2, true); - //alert(rad+ gaps*row); + context.fillStyle = "#D3D3D3"; context.beginPath(); @@ -535,11 +421,7 @@ function drawTopology(topoObj){ document.getElementById("rmenu").className = "hide"; }); - /* - $(document).bind("click", function(event) { - document.getElementById("rmenu").className = "hide"; - }); - */ + function isIntersectDefault(point, row, col, rad, gaps) { var x = (rad+gaps*col); -- cgit 1.2.3-korg