aboutsummaryrefslogtreecommitdiffstats
path: root/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransimgrid.html
diff options
context:
space:
mode:
Diffstat (limited to 'ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransimgrid.html')
-rw-r--r--ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransimgrid.html158
1 files changed, 20 insertions, 138 deletions
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<gridSize;x++) {
- arr[x]=new Array();
- for(var y=0; y<gridSize;y++) {
- context.fillStyle = "#D3D3D3";
- context.beginPath();
-
- context.arc(rad+gaps*x,rad+ gaps*y, rad, 0, Math.PI*2, true);
- context.closePath();
- context.fill();
- arr[x][y] = (x+1) + ":" + (y+1);
-
- context.font = "12px Comic Sans MS";
- context.fillStyle = "white";
- context.textAlign = "center";
- fillMultiLineText(context,"X:"+y+"\nY:"+x, rad+gaps*x,rad+ gaps*y);
-
- }
- } */
-
+
myCanvas.addEventListener('contextmenu', (e) => {
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 = '<div class="btn-group">';
htmlText1 += '<button class="button" id="showNeighbours">showNeighbours</button>';
- //htmlText1 += '<button class="button" id="deleteNode">Delete</button>';
htmlText1 += '</div>';
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);