wisplite/BLE-mesh-sim
1
0
Fork 0
mirror of https://github.com/wisplite/BLE-mesh-sim.git synced 2026-10-30 13:32:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

dark mode and improved network coloring

Browse Source
This commit is contained in:
wisplite
2025-09-08 17:43:06 -05:00
parent e7469ac081
commit 9f7b05294c
6 changed files with 256 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
script.js
+35 -3
View File
@@ -100,16 +100,21 @@ var onEdgeEngine = new CompleteNodeOnEdgeEngine(network, nodes, dotNodes, edges,
onEdgeEngine.createEdgesTable();
onEdgeEngine.initMovement();
onEdgeEngine.setArrivalCallback(({ from, to, dot }) => {
var ttl = parseInt(dot.id.split('-')[2]);
if (document.getElementById('showTTL').checked) {
edges.update({id: `${from}->${to}`, color: {color: smoothColorTransition('#eb4034', '#40eb34', 0, TTL, ttl+1), highlight: smoothColorTransition('#eb4034', '#40eb34', 0, TTL, ttl+1)}});
} else {
edges.update({id: `${from}->${to}`, color: {color: '#2b7ce9', highlight: '#2b7ce9'}});
}
if (nodeTable[to].packetCache.includes(dot.id.split('-')[0])) {
return;
}
// update color of receiving node for visualization
nodeTable[to].packetCache.push(dot.id.split('-')[0]);
var packetId = dot.id.split('-')[0];
var ttl = parseInt(dot.id.split('-')[2]);
ttl--;
if (document.getElementById('showTTL').checked) {
nodes.update({id: to, color: {background: smoothColorTransition('#eb4034', '#40eb34', 0, TTL, ttl)}});
nodes.update({id: to, color: {background: smoothColorTransition('#eb4034', '#40eb34', 0, TTL, ttl)}});
} else {
nodes.update({id: to, color: {background: '#97c2fc'}});
}
@@ -127,6 +132,9 @@ onEdgeEngine.setArrivalCallback(({ from, to, dot }) => {
shape: dot.shape,
size: dot.size,
color: dot.color,
font: {
color: document.getElementById('darkMode').checked ? '#e0e0e0' : '#000'
}
};
onEdgeEngine.createDotNode(movingNode, to, neighbor);
}
@@ -155,6 +163,7 @@ const markNeighborsAsFailed = (nodeId, from, packetId, visited = new Set()) => {
continue;
}
nodes.update({id: neighbor, color: {background: 'white'}});
edges.update({id: `${nodeId}->${neighbor}`, color: {color: 'white', highlight: '#97c2fc'}});
markNeighborsAsFailed(neighbor, nodeId, packetId, visited);
}
}
@@ -465,6 +474,9 @@ document.getElementById('sendPacket').addEventListener('click', function() {
background: 'white',
border: 'black'
},
font: {
color: document.getElementById('darkMode').checked ? '#e0e0e0' : '#000'
}
};
onEdgeEngine.createDotNode(movingNode, selectedNode, connection);
nodeTable[selectedNode].packetCache.push(packetId);
@@ -476,6 +488,10 @@ document.getElementById('resetTTLColors').addEventListener('click', function() {
for (let node of nodes.get()) {
nodes.update({id: node.id, color: {background: '#97c2fc'}});
}
for (let edge of edges.get()) {
edges.update({id: edge.id, color: {color: '#2b7ce9', highlight: '#2b7ce9'}});
}
});
document.getElementById('updateInterval').addEventListener('change', function() {
@@ -543,4 +559,20 @@ document.getElementById('createRandomGraphConfirm').addEventListener('click', fu
}
}, 10);
document.getElementById('randomGraphModal').style.display = 'none';
});
});
document.getElementById('darkMode').addEventListener('change', function() {
if (this.checked) {
document.getElementById('styleSheet').href = 'style-dark.css';
} else {
document.getElementById('styleSheet').href = 'style.css';
}
});
window.onload = function() {
if (document.getElementById('darkMode').checked) {
document.getElementById('styleSheet').href = 'style-dark.css';
} else {
document.getElementById('styleSheet').href = 'style.css';
}
}