diff options
Diffstat (limited to 'ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/getdump.html')
-rw-r--r-- | ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/getdump.html | 598 |
1 files changed, 598 insertions, 0 deletions
diff --git a/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/getdump.html b/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/getdump.html new file mode 100644 index 0000000..b878d65 --- /dev/null +++ b/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/getdump.html @@ -0,0 +1,598 @@ +<!-- + * ============LICENSE_START======================================================= + * Ran Simulator Controller + * ================================================================================ + * Copyright (C) 2020 Wipro Limited. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + --> + +<!DOCTYPE html> +<html> + +<head> + <script src="angular.min.js"></script> + <style> + .show { + z-index: 1000; + position: absolute; + padding: 2px; + display: block; + margin: 0; + list-style-type: none; + list-style: none; + } + + .hide { + display: none; + } + + .btn-group .button { + background-color: LightGrey; + color: black; + border: 1px solid Black; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + cursor: pointer; + width: 100px; + display: block; + } + + .btn-group .button:not (:last-child) { + border-bottom: + + none; + + + } + + .btn-group .button:hover { + background-color: lightblue; + color: white; + } + </style> + <script> + function init() { + getCellTopology(); + } + + function getNeighborDumb(nodeId) { + var formVal = { + "nodeId": nodeId + } + var dataObj = JSON.stringify(formVal); + //console.log("Delete DataObj : " + dataObj); + var xmlhttp = new XMLHttpRequest(); + var toBeContinued = true; + var nbrsStr = ''; + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + //console.log("Response DataObj : " + this.responseText); + var nbrs = JSON.parse(this.responseText); + for( i in nbrs.cellsWithHO ) { + var nodeId = nbrs.cellsWithHO[i].nodeId; + if(i != 0) + nbrsStr += ', '; + nbrsStr += '{"nodeId":'+'"'+nodeId+'"'+',"blacklisted":"false"}' ; + } + //console.log("Response nbrsStr : " + nbrsStr); + toBeContinued = false; + } else if (this.readyState == 4 && this.status >= 200) { + toBeContinued = false; + } + }; + xmlhttp.open("POST", + "http://ransimsvr:8081/ransim/api/GetNeighborList", false); + xmlhttp.setRequestHeader('Content-Type', 'application/json') + xmlhttp.send(dataObj); + while(toBeContinued) { + setTimeout(function() { + var h = 0; + h++; + }, 1000); + } + return nbrsStr; + } + + function getCellTopology() { + + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + var topology = JSON.parse(this.responseText); + drawTopology(topology); + } + }; + xmlhttp.open("GET", + "http://ransimsvr:8081/ransim/api/GetTopology", true); + xmlhttp.send(); + + } + + + function drawTopology(topoObj) { + var width = window.innerHeight; + var height = window.innerHeight; + var myCanvas = document.getElementById("myCanvas"); + myCanvas.width = width; + myCanvas.height = height; + + var context = myCanvas.getContext("2d"); + context.clearRect(0, 0, width, height); + context.fillStyle = "#FFFFFF"; + context.fillRect(0, 0, width, height); + var gridSize = 45; + + var rad = height / (2 * gridSize); + var gaps = rad * 2; + var widthCount = parseInt(width / gaps); + var heightCount = parseInt(height / gaps); + var aColors = "#32CD32"; + var aColorsLength = 1; + var arr = new Array(); + /* for (var x = 0; x < gridSize; x++) { + arr[x] = new Array(); + for (var y = 0; y < gridSize; y++) { + + context.fillStyle = "#D3D3D3"; + + context.beginPath(); + + context.lineWidth = 5; + var a = 1.5 * rad; + var b = 0.86 * rad; + if (x % 2 == 0) { + context.moveTo((x + 1) * a + rad, (2 * y + 1) * b); + var s = 6; + for (var p = 1; p < s; p++) { + context.lineTo(((x + 1) * a) + (rad * Math.cos(p * + 2 * Math.PI / s)), (2 * y + 1) * b + ( + rad * Math.sin(p * 2 * Math.PI / s))); + } + } else { + + context.moveTo((x + 1) * a + rad, (2 * y + 2) * b); + var s = 6; + for (var p = 1; p < s; p++) { + context.lineTo(((x + 1) * a) + (rad * Math.cos(p * + 2 * Math.PI / s)), ((2 * y + 2) * b) + + ( + rad * Math.sin(p * 2 * Math.PI / s))); + } + } + context.strokeStyle = "black"; + context.stroke(); + + context.closePath(); + context.fill(); + arr[x][y] = (x + 1) + ":" + (y + 1); + } + } */ + + /* myCanvas.addEventListener('contextmenu', (e) => { + const pos = { + x: e.clientX, + y: e.clientY + }; + for (var x = 0; x < gridSize; x++) { + for (var y = 0; y < gridSize; y++) { + if (isIntersectDefault(pos, x, y, rad, gaps)) { + var val = arr[x][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="createNode">Create</button>'; + htmlText1 += '</div>'; + document.getElementById("rmenu").innerHTML = + htmlText1; + + document.getElementById("createNode").addEventListener( + "click", + function() { + createNode(val); + }); + e.preventDefault(); + return; + } + } + } + e.preventDefault(); + }); */ + + console.log('{ "cellList" :['); + var index = 0; + var pnfNum = 1000; + var pnfCount = 0; + for (i in topoObj.cellTopology) { + index++; + pnfCount++; + pnfNum = 1001 + (pnfCount/15) + var cellStr = ''; + var nodeId = topoObj.cellTopology[i].nodeId; + var physicalCellId = topoObj.cellTopology[i].physicalCellId; + var row = i/45; + + var col = i%45; + + + //function point2LatLng(row, col, map); + //console.log( translate_coordinates(row, row)); + + cellStr += ' "networkId" : "Network1", '; + cellStr += ' "nodeId" : "' + nodeId + '", '; + cellStr += ' "physicalCellId" : ' + physicalCellId + ', '; + cellStr += ' "pnfName" : "' + topoObj.cellTopology[i].serverId + '", '; + cellStr += ' "sectorNumber" : 0, '; + cellStr += ' "latitude" : "' + topoObj.cellTopology[i].latitude + '", '; + cellStr += ' "longitude" : "' + topoObj.cellTopology[i].longitude + '" '; + + var collision = topoObj.cellTopology[i].pciCollisionDetected; + if (typeof topoObj.cellTopology[i].pciCollisionDetected != 'undefined') { + collision = topoObj.cellTopology[i].pciCollisionDetected; + } + var confusion = topoObj.cellTopology[i].pciConfusionDetected; + if (typeof topoObj.cellTopology[i].pciConfusionDetected != 'undefined') { + confusion = topoObj.cellTopology[i].pciConfusionDetected; + } + + var confuColor = aColors; + 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 = "#FF0000"; + } else { + context.fillStyle = "#FF4500"; + } + + } else if (confusion){ + context.fillStyle = "#CCCC00"; + } else { + context.fillStyle = "#32CD32"; + } + + context.beginPath(); + context.lineWidth = 5; + var a = 1.5 * rad; + var b = 0.86 * rad; + if (col % 2 == 0) { + context.moveTo((col + 1) * a + rad, (2 * row + 1) * b); + var s = 6; + for (var p = 1; p < s; p++) { + context.lineTo(((col + 1) * a) + (rad * Math.cos(p * 2 * + Math.PI / s)), (2 * row + 1) * b + ( + rad * Math.sin(p * 2 * Math.PI / s))); + } + } else { + + context.moveTo((col + 1) * a + rad, (2 * row + 2) * b); + var s = 6; + for (var p = 1; p < s; p++) { + context.lineTo(((col + 1) * a) + (rad * Math.cos(p * 2 * + Math.PI / s)), ((2 * row + 2) * b) + ( + rad * Math.sin(p * 2 * Math.PI / s))); + } + } + context.strokeStyle = "black"; + context.stroke(); + //alert(nodeId+" Circle X " + (rad+gaps*col) + " Y: "+ (rad+gaps*row)); + context.closePath(); + context.fill(); + + context.font = "12px Comic Sans MS"; + context.fillStyle = "white"; + context.textAlign = "center"; + //fillMultiLineText(context,"cid:"+nodeId+"\npcid:"+physicalCellId, rad+gaps*col,rad+ gaps*row); + + if (col % 2 == 0) { + context.fillText("" + nodeId + "," + physicalCellId, (col +1) * a, rad + (2 * row + 1) * b); + + var xy2ll = translate_xyToLatLng( (col +1) * a, (2 * row +1) * b); + var slat=xy2ll.slat; + var slon=xy2ll.slon; + //cellStr += ' "latitude" : "' + slat + '", '; + //cellStr += ' "longitude" : "' + slon + '" '; + + //cellStr += ' "screenX" : "' + ((col + 1) * a) + '", '; + //cellStr += ' "screenY" : "' + (rad + (2 * row) * b) + '" '; + } else { + context.fillText("" + nodeId + "," + physicalCellId, (col +1) * a, (2 * row + 2) * b); + var xy2ll = translate_xyToLatLng( (col +1) * a, (2 * row + 2) * b); + var slat=xy2ll.slat; + var slon=xy2ll.slon; + //cellStr += ' "latitude" : "' + slat + '", '; + //cellStr += ' "longitude" : "' + slon + '" '; + //cellStr += ' "screenX" : "' + ((col + 1) * a) + '", '; + //cellStr += ' "screenY" : "' + ((2 * row + 2) * b) + '" '; + } + + var neighborStr = getNeighborDumb(nodeId); + + if(index==1) { + console.log(' { "cell" : { ' + cellStr + ' }, "neighbor":[' + neighborStr + '] }'); + } else { + console.log(', { "cell" : { ' + cellStr + ' }, "neighbor":[' + neighborStr + '] }'); + } + + } + console.log('] } '); + + myCanvas.addEventListener('click', (e) => { + const pos = { + x: e.clientX, + y: e.clientY + }; + alert('click1 e.clientX:'+e.clientX); + for (i in topoObj.cellTopology) { + if (isIntersect(pos, topoObj.cellTopology[i], rad, + gaps)) { + alert('click2 i:'+i); + var nodeVal = topoObj.cellTopology[i].nodeId; + var cellVal = topoObj.cellTopology[i].physicalCellId; + var networkId = topoObj.cellTopology[i].networkId; + var serverId = topoObj.cellTopology[i].serverId; + var htmlText1 = 'networkId:'+networkId +' serverId:'+serverId; + alert('click2 htmlText1:'+htmlText1); + document.getElementById("CellDetails").innerHTML = + htmlText1; + return; + + } + } + }); + + + myCanvas.addEventListener('contextmenu', (e) => { + const pos = { + x: e.clientX, + y: e.clientY + }; + for (i in topoObj.cellTopology) { + if (isIntersect(pos, topoObj.cellTopology[i], rad, + gaps)) { + var nodeVal = topoObj.cellTopology[i].nodeId; + var cellVal = topoObj.cellTopology[i].physicalCellId; + //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="modifyNode">Modify</button>'; + htmlText1 += + '<button class="button" id="deleteNode">Delete</button>'; + htmlText1 += '</div>'; + document.getElementById("rmenu").innerHTML = + htmlText1; + + document.getElementById("modifyNode").addEventListener( + "click", + function() { + modifyNode(nodeVal, cellVal); + }); + document.getElementById("deleteNode").addEventListener( + "click", + function() { + deleteNode(nodeVal, cellVal); + }); + e.preventDefault(); + return; + } + } + e.preventDefault(); + }); + } + + + function DEG_TO_RADIANS(x) + { + RADIANS = 57.2957795; + return (x/RADIANS); + } + function METERS_DEGLON(x) + { + with (Math) + { + var d2r=DEG_TO_RADIANS(x); + return((111415.13 * cos(d2r))- (94.55 * cos(3.0*d2r)) + (0.12 * cos(5.0*d2r))); + } + } + function METERS_DEGLAT(x) + { + with (Math) + { + var d2r=DEG_TO_RADIANS(x); + return(111132.09 - (566.05 * cos(2.0*d2r))+ (1.20 * cos(4.0*d2r)) - (0.002 * cos(6.0*d2r))); + } + } + + function translate_xyToLatLng(xx, yy) + { + + var xx,yy,r,ct,st,angle; + angle = 0; + + + /* X,Y to Lat/Lon Coordinate Translation */ + //pxpos_mtrs = porg.x; + //pypos_mtrs = porg.y; + //xx = x; + // yy = y; + r = Math.sqrt(xx*xx + yy*yy); + + if(r) + { + ct = xx/r; + st = yy/r; + xx = r * ( (ct * Math.cos(angle))+ (st * Math.sin(angle)) ); + yy = r * ( (st * Math.cos(angle))- (ct * Math.sin(angle)) ); + } + + var plon = xx/METERS_DEGLON(0); + var plat = yy/METERS_DEGLAT(0); + + var sll={}; + sll={slat:plat, slon:plon}; + return(sll); + + + + } + + + function translate_latLongToXY(lat, lon) + { + xx = (lon - 0)*METERS_DEGLON(0); + yy = (lat - 0)*METERS_DEGLAT(0); + + r = Math.sqrt(xx*xx + yy*yy); + + /* alert('LL_TO_XY: xx=' + xx + ' yy=' + yy + ' r=' + r); + return false;*/ + + if(r) + { + ct = xx/r; + st = yy/r; + xx = r * ( (ct * Math.cos(0)) + (st * Math.sin(0)) ); + yy = r * ( (st * Math.cos(0)) - (ct * Math.sin(0)) ); + } + //pxpos_mtrs = xx + porg.xoffset_mtrs; + //pypos_mtrs = yy + porg.yoffset_mtrs; + + var sxy={}; + sxy={x:xx, y:yy}; + + return(sxy); + } + + function createNode(cellInfo) { + var point = cellInfo.split(":"); + var gridX = point[0]; + var gridY = point[1]; + //alert("Cell X : "+gridX+" Y: "+ gridY); + window.childWin = window.open('createCell.html?gridX=' + gridX + + '&gridY=' + gridY, '', + 'menubar=no, locationbar=no, toolbar=no, width=600px, height=250px' + ); + window.intervalId = window.setInterval( + 'window.checkIfChildWindowIsClosed()', 5 * 1000); + } + + function modifyNode(cid, pcid) { + //alert("Modify CID "+cid + " PCID " + pcid); + window.childWin = window.open('modifyCell.html?cid=' + cid + + '&pcid=' + pcid, '', + 'menubar=no, locationbar=no, toolbar=no, width=600px, height=250px' + ); + window.intervalId = window.setInterval( + 'window.checkIfChildWindowIsClosed()', 5 * 1000); + } + + function deleteNode(cid, pcid) { + //alert("Delete CID "+cid + " PCID " + pcid); + window.childWin = window.open('deleteCell.html?cid=' + cid + + '&pcid=' + pcid, '', + 'menubar=no, locationbar=no, toolbar=no, width=600px, height=250px' + ); + window.intervalId = window.setInterval( + 'window.checkIfChildWindowIsClosed()', 5 * 1000); + } + + //add check function to window + window.checkIfChildWindowIsClosed = function() { + if (window.childWin.closed) { + window.clearInterval(window.intervalId); + location.reload(); + } + } + + document.addEventListener('click', function() { + document.getElementById("rmenu").className = "hide"; + }); + + function isIntersectDefault(point, row, col, rad, gaps) { + + var a = 1.5 * rad; + var b = 0.86 * rad; + + if (col % 2 == 0) { + + var x = (col + 1) * a; + var y = (2 * row + 1) * b; + } else { + + var x = (col + 1) * a; + var y = (2 * row + 2) * b; + } + + return Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2) < rad; + } + + function isIntersect(point, circle, rad, gaps) { + var row = circle.gridX; + --row; + var col = circle.gridY; + --col; + var a = 1.5 * rad; + var b = 0.86 * rad; + if (col % 2 == 0) { + + var x = (col + 1) * a; + var y = (2 * row + 1) * b; + } else { + + var x = (col + 1) * a; + var y = (2 * row + 2) * b; + } + + return Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2) < rad; + } + + function fillMultiLineText(context, textVal, x, y) { + context.fillText(textVal, x, y); + //For multiple lines + var lineHeight = context.measureText("M").width * 1.2; + var lines = textVal; + for (var i = 0; i < lines.length; ++i) { + context.fillText(lines[i], x, y); + y += lineHeight; + } + } + </script> +</head> + +<body onLoad="init();" style="margin: 0px"> + <div class="hide" id="rmenu"></div> + <canvas id="myCanvas" /> +</body> + +</html> |