mirror of
https://github.com/bettercap/bettercap
synced 2025-08-19 21:13:18 -07:00
new: node context shows on click on the graphpage
This commit is contained in:
Simone Margaritelli
parent
93b7e7f2ed
commit
71ac5bb264
1 changed files with 114 additions and 78 deletions
192
graphpage.html
192
graphpage.html
|
|
@ -2,26 +2,31 @@
|
||||||
<style> body {
|
<style> body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
} </style>
|
} </style>
|
||||||
|
<script src="//unpkg.com/jquery"></script>
|
||||||
<script src="//unpkg.com/3d-force-graph"></script>
|
<script src="//unpkg.com/3d-force-graph"></script>
|
||||||
<script src="//unpkg.com/three"></script>
|
<script src="//unpkg.com/three"></script>
|
||||||
<script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script>
|
<script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script>
|
||||||
<script src="//unpkg.com/three-spritetext"></script>
|
<script src="//unpkg.com/three-spritetext"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.node-label {
|
.node-div {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
padding: 1px 4px;
|
padding: 1px 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.node-data-div {
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="3d-graph"></div>
|
<div id="3d-graph"></div>
|
||||||
|
|
||||||
<script>
|
<script id="vars">
|
||||||
const typeNodeColors = {
|
const typeNodeColors = {
|
||||||
'ble_server': '#0066ff',
|
'ble_server': '#0066ff',
|
||||||
|
|
||||||
|
|
@ -44,8 +49,102 @@
|
||||||
'gateway': '#006600'
|
'gateway': '#006600'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var targetNode = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="functions">
|
||||||
|
function renderNodeHTML(node) {
|
||||||
|
const nodeDiv = document.createElement('div');
|
||||||
|
switch (node.type) {
|
||||||
|
case 'ssid':
|
||||||
|
nodeDiv.innerHTML = `<small>${node.entity}</small>`
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'access_point':
|
||||||
|
var ap = node.entity;
|
||||||
|
nodeDiv.innerHTML = `
|
||||||
|
<center>
|
||||||
|
<b>${ap.hostname}</b> (${ap.encryption})
|
||||||
|
<br/>
|
||||||
|
${ap.mac}
|
||||||
|
${ap.vendor? '<br/>(' + ap.vendor + ')' : ''}
|
||||||
|
${ap.wps.length? '<br/>' + JSON.stringify(ap.wps) : ''}
|
||||||
|
</center>`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'station':
|
||||||
|
var sta = node.entity;
|
||||||
|
nodeDiv.innerHTML = `
|
||||||
|
<center>
|
||||||
|
${sta.mac}
|
||||||
|
${sta.vendor? '<br/>(' + sta.vendor + ')' : ''}
|
||||||
|
</center>`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ble_server':
|
||||||
|
var dev = node.entity;
|
||||||
|
nodeDiv.innerHTML = `
|
||||||
|
<center>
|
||||||
|
${dev.mac}
|
||||||
|
${dev.vendor? '<br/>(' + dev.vendor + ')' : ''}
|
||||||
|
</center>`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'endpoint':
|
||||||
|
var ip = node.entity;
|
||||||
|
nodeDiv.innerHTML = `
|
||||||
|
<center>
|
||||||
|
${ip.hostname? '<b>' + ip.hostname + '</b><br/>' : ''}
|
||||||
|
${ip.ipv4? ip.ipv4 + '<br/>' : ''}
|
||||||
|
${ip.ipv6? ip.ipv6 + '<br/>' : ''}
|
||||||
|
<br/>
|
||||||
|
${ip.mac}
|
||||||
|
${ip.vendor? '<br/>(' + ip.vendor + ')' : ''}
|
||||||
|
${ip.meta.values.length? '<br/>' + JSON.stringify(ip.meta.values) : ''}
|
||||||
|
</center>`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'gateway':
|
||||||
|
var ip = node.entity;
|
||||||
|
nodeDiv.innerHTML = `
|
||||||
|
<center>
|
||||||
|
${ip.hostname? '<b>' + ip.hostname + '</b><br/>' : ''}
|
||||||
|
${ip.ipv4? ip.ipv4 + '<br/>' : ''}
|
||||||
|
${ip.ipv6? ip.ipv6 + '<br/>' : ''}
|
||||||
|
<br/>
|
||||||
|
${ip.mac}
|
||||||
|
${ip.vendor? '<br/>(' + ip.vendor + ')' : ''}
|
||||||
|
${ip.meta.values.length? '<br/>' + JSON.stringify(ip.meta.values) : ''}
|
||||||
|
</center>`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
nodeDiv.innerHTML = `<b>${node.id}</b>`
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeDiv.style.color = typeColors[node.type];
|
||||||
|
nodeDiv.className = 'node-div';
|
||||||
|
|
||||||
|
const dataDiv = document.createElement('div');
|
||||||
|
|
||||||
|
dataDiv.id = 'datadiv_' + node.id;
|
||||||
|
dataDiv.className = 'node-data-div';
|
||||||
|
dataDiv.style.visibility = 'hidden';
|
||||||
|
dataDiv.style.display = 'none';
|
||||||
|
|
||||||
|
dataDiv.innerHTML = '<br/><pre>' + node.type + ' ' + JSON.stringify(node.entity, null, 2) + '</pre>';
|
||||||
|
|
||||||
|
nodeDiv.appendChild(dataDiv);
|
||||||
|
|
||||||
|
return new THREE.CSS2DObject(nodeDiv);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="graph">
|
||||||
|
|
||||||
const Graph = ForceGraph3D({
|
const Graph = ForceGraph3D({
|
||||||
extraRenderers: [new THREE.CSS2DRenderer()]
|
extraRenderers: [new THREE.CSS2DRenderer()],
|
||||||
|
controlType: 'orbit'
|
||||||
})
|
})
|
||||||
(document.getElementById('3d-graph'))
|
(document.getElementById('3d-graph'))
|
||||||
.jsonUrl('bettergraph.json')
|
.jsonUrl('bettergraph.json')
|
||||||
|
|
@ -68,83 +167,20 @@
|
||||||
Object.assign(sprite.position, middlePos);
|
Object.assign(sprite.position, middlePos);
|
||||||
})
|
})
|
||||||
*/
|
*/
|
||||||
.nodeThreeObject(node => {
|
.nodeThreeObject(renderNodeHTML)
|
||||||
const nodeEl = document.createElement('div');
|
|
||||||
|
|
||||||
switch (node.type) {
|
|
||||||
case 'ssid':
|
|
||||||
nodeEl.innerHTML = `<small>${node.entity}</small>`
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'access_point':
|
|
||||||
var ap = node.entity;
|
|
||||||
nodeEl.innerHTML = `
|
|
||||||
<center>
|
|
||||||
<b>${ap.hostname}</b> (${ap.encryption})
|
|
||||||
<br/>
|
|
||||||
${ap.mac}
|
|
||||||
${ap.vendor? '<br/>(' + ap.vendor + ')' : ''}
|
|
||||||
${ap.wps.length? '<br/>' + JSON.stringify(ap.wps) : ''}
|
|
||||||
</center>`;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'station':
|
|
||||||
var sta = node.entity;
|
|
||||||
nodeEl.innerHTML = `
|
|
||||||
<center>
|
|
||||||
${sta.mac}
|
|
||||||
${sta.vendor? '<br/>(' + sta.vendor + ')' : ''}
|
|
||||||
</center>`;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'ble_server':
|
|
||||||
var dev = node.entity;
|
|
||||||
nodeEl.innerHTML = `
|
|
||||||
<center>
|
|
||||||
${dev.mac}
|
|
||||||
${dev.vendor? '<br/>(' + dev.vendor + ')' : ''}
|
|
||||||
</center>`;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'endpoint':
|
|
||||||
var ip = node.entity;
|
|
||||||
nodeEl.innerHTML = `
|
|
||||||
<center>
|
|
||||||
${ip.hostname? '<b>' + ip.hostname + '</b><br/>' : ''}
|
|
||||||
${ip.ipv4? ip.ipv4 + '<br/>' : ''}
|
|
||||||
${ip.ipv6? ip.ipv6 + '<br/>' : ''}
|
|
||||||
<br/>
|
|
||||||
${ip.mac}
|
|
||||||
${ip.vendor? '<br/>(' + ip.vendor + ')' : ''}
|
|
||||||
${ip.meta.values.length? '<br/>' + JSON.stringify(ip.meta.values) : ''}
|
|
||||||
</center>`;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'gateway':
|
|
||||||
var ip = node.entity;
|
|
||||||
nodeEl.innerHTML = `
|
|
||||||
<center>
|
|
||||||
${ip.hostname? '<b>' + ip.hostname + '</b><br/>' : ''}
|
|
||||||
${ip.ipv4? ip.ipv4 + '<br/>' : ''}
|
|
||||||
${ip.ipv6? ip.ipv6 + '<br/>' : ''}
|
|
||||||
<br/>
|
|
||||||
${ip.mac}
|
|
||||||
${ip.vendor? '<br/>(' + ip.vendor + ')' : ''}
|
|
||||||
${ip.meta.values.length? '<br/>' + JSON.stringify(ip.meta.values) : ''}
|
|
||||||
</center>`;
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
nodeEl.innerHTML = `<b>${node.id}</b>`
|
|
||||||
}
|
|
||||||
|
|
||||||
nodeEl.style.color = typeColors[node.type];
|
|
||||||
nodeEl.className = 'node-label';
|
|
||||||
|
|
||||||
return new THREE.CSS2DObject(nodeEl);
|
|
||||||
})
|
|
||||||
.nodeThreeObjectExtend(true)
|
.nodeThreeObjectExtend(true)
|
||||||
.onNodeClick(node => {
|
.onNodeClick(node => {
|
||||||
|
if( targetNode != null ) {
|
||||||
|
const prev = document.getElementById('datadiv_' + targetNode.id);
|
||||||
|
prev.style.visibility = 'hidden';
|
||||||
|
prev.style.display = 'none';
|
||||||
|
}
|
||||||
|
targetNode = node;
|
||||||
|
|
||||||
|
const curr = document.getElementById('datadiv_' + targetNode.id);
|
||||||
|
curr.style.visibility = 'visible';
|
||||||
|
curr.style.display = 'block';
|
||||||
|
|
||||||
// Aim at node from outside it
|
// Aim at node from outside it
|
||||||
const distance = 40;
|
const distance = 40;
|
||||||
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
|
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue