add nice visualizations and did some work to make connection decisions more accurate

index.html

@@ -11,8 +11,14 @@
     <body>
         <div id="simContainer"></div>
         <div id="controlContainer">
+            <div id="controlButtons">
                 <button id="addNode" class="controlButton">Add Node</button>
             </div>
+            <div id="simToggles">
+                <input type="checkbox" id="showRanges" class="simToggle">
+                <label for="showRanges">Show Ranges</label>
+            </div>
+        </div>
         <script type="text/javascript" src="script.js"></script>
     </body>
 </html>

script.js

@@ -7,6 +7,8 @@ var nodes = new vis.DataSet([
 var edges = new vis.DataSet([
 ]);
 
+var nodeTable = {};
+
 var container = document.getElementById('simContainer');
 
 var data = {
@@ -37,32 +39,138 @@ var options = {
 };
 
 var network = new vis.Network(container, data, options);
+let selectedNode = null;
+
+network.on('selectNode', function(properties) {
+    if (document.getElementById('showRanges').checked) {
+        selectedNode = properties.nodes[0];
+        const centerPoint = network.getPosition(properties.nodes[0]);
+        const centerPointDOM = network.canvasToDOM({x: centerPoint.x, y: centerPoint.y});
+        const edgePointDOM = network.canvasToDOM({x: centerPoint.x + CONNECTION_DISTANCE, y: centerPoint.y});
+        const radius = Math.abs(edgePointDOM.x - centerPointDOM.x);
+        const rangeVis = document.createElement('div');
+        rangeVis.style.position = 'absolute';
+        rangeVis.style.top = (centerPointDOM.y - radius) + 'px';
+        rangeVis.style.left = (centerPointDOM.x - radius) + 'px';
+        rangeVis.style.width = radius * 2 + 'px';
+        rangeVis.style.height = radius * 2 + 'px';
+        rangeVis.classList.add('rangeVis');
+        document.getElementById('simContainer').appendChild(rangeVis);
+    }
+});
+
+network.on('dragging', function(properties) {
+    if (document.getElementById('showRanges').checked) {
+        if (selectedNode != null) {
+            if (properties.nodes.length > 0) {
+                selectedNode = properties.nodes[0];
+            }
+            const centerPoint = network.getPosition(selectedNode);
+            const centerPointDOM = network.canvasToDOM({x: centerPoint.x, y: centerPoint.y});
+            const edgePointDOM = network.canvasToDOM({x: centerPoint.x + CONNECTION_DISTANCE, y: centerPoint.y});
+            const radius = Math.abs(edgePointDOM.x - centerPointDOM.x);
+            const rangeVis = document.querySelector('.rangeVis');
+            if (rangeVis) {
+                rangeVis.style.top = (centerPointDOM.y - radius) + 'px';
+                rangeVis.style.left = (centerPointDOM.x - radius) + 'px';
+                rangeVis.style.width = radius * 2 + 'px';
+                rangeVis.style.height = radius * 2 + 'px';
+            } else {
+                const rangeVis = document.createElement('div');
+                rangeVis.style.position = 'absolute';
+                rangeVis.style.top = (centerPointDOM.y - radius) + 'px';
+                rangeVis.style.left = (centerPointDOM.x - radius) + 'px';
+                rangeVis.style.width = radius * 2 + 'px';
+                rangeVis.style.height = radius * 2 + 'px';
+                rangeVis.classList.add('rangeVis');
+                document.getElementById('simContainer').appendChild(rangeVis);
+            }
+        } else if (properties.nodes.length > 0) {
+            selectedNode = properties.nodes[0];
+            const centerPoint = network.getPosition(selectedNode);
+            const centerPointDOM = network.canvasToDOM({x: centerPoint.x, y: centerPoint.y});
+            const edgePointDOM = network.canvasToDOM({x: centerPoint.x + CONNECTION_DISTANCE, y: centerPoint.y});
+            const radius = Math.abs(edgePointDOM.x - centerPointDOM.x);
+            const rangeVis = document.querySelector('.rangeVis');
+            if (rangeVis) {
+                rangeVis.style.top = (centerPointDOM.y - radius) + 'px';
+                rangeVis.style.left = (centerPointDOM.x - radius) + 'px';
+                rangeVis.style.width = radius * 2 + 'px';
+                rangeVis.style.height = radius * 2 + 'px';
+            }
+        }
+    }
+});
+
+network.on('zoom', function(properties) {
+    if (document.getElementById('showRanges').checked) {
+        if (selectedNode) {
+            const centerPoint = network.getPosition(selectedNode);
+            const centerPointDOM = network.canvasToDOM({x: centerPoint.x, y: centerPoint.y});
+            const edgePointDOM = network.canvasToDOM({x: centerPoint.x + CONNECTION_DISTANCE, y: centerPoint.y});
+            const radius = Math.abs(edgePointDOM.x - centerPointDOM.x);
+            const rangeVis = document.querySelector('.rangeVis');
+            if (rangeVis) {
+                rangeVis.style.top = (centerPointDOM.y - radius) + 'px';
+                rangeVis.style.left = (centerPointDOM.x - radius) + 'px';
+                rangeVis.style.width = radius * 2 + 'px';
+                rangeVis.style.height = radius * 2 + 'px';
+            }
+        }
+    }
+});
+
+network.on('deselectNode', function(properties) {
+    selectedNode = null;
+    if (document.getElementById('showRanges').checked) {
+        const rangeVis = document.querySelector('.rangeVis');
+        if (rangeVis) {
+            rangeVis.remove();
+        }
+    }
+});
 
 // main event loop
 function main() {
     currentNodes = network.getPositions();
     currentNodesKeys = Object.keys(currentNodes);
     for (let node1 of currentNodesKeys) {
+        neighbors = [];
         for (let node2 of currentNodesKeys) {
             if (node1 !== node2) {
                 const node1data = currentNodes[node1];
                 const node2data = currentNodes[node2];
                 const distance = calculateDistance(node1data, node2data);
-                const edgeId = `${node1}->${node2}`;
                 if (distance < CONNECTION_DISTANCE) {
-                    if (!edges.get(edgeId)) {
+                    neighbors.push({'node': node2, 'distance': distanceToRSSI(distance), });
-                        edges.add({
+                } else {
-                            id: edgeId,
+                    edges.remove(`${node1}->${node2}`);
-                            from: node1,
+                    nodeTable[node1].connections.splice(nodeTable[node1].connections.indexOf(node2), 1);
-                            to: node2,
-                            smooth: { enabled: true, type: 'curvedCW', roundness: 0.1 }
-                        });
-                    }
-                } else if (distance >= CONNECTION_DISTANCE) {
-                    edges.remove(edgeId);
                 }
             }
         }
+        const scores = [];
+        for (let neighbor of neighbors) {
+            let connectionScore = 0;
+            connectionScore += (100 + neighbor.distance);
+            connectionScore += 100/nodeTable[neighbor.node].connections.length;
+            if (nodeTable[neighbor.node].connections.length == 0) {
+                connectionScore += 100;
+            }
+            if (nodeTable[neighbor.node].connections.length > 3) {
+                continue;
+            }
+            scores.push({'node': neighbor.node, 'score': connectionScore});
+        }
+        scores.sort((a, b) => b.score - a.score);
+        top3 = scores.slice(0, 3);
+        for (let score of top3) {
+            if (nodeTable[node1].connections.includes(score.node)) {
+                continue;
+            }
+            nodeTable[node1].connections.push(score.node);
+            connectNodes(node1, score.node);
+        }
     }
     setTimeout(main, UPDATE_INTERVAL);
 }
@@ -71,4 +179,5 @@ main();
 document.getElementById('addNode').addEventListener('click', function() {
     const nodeId = generateRealisticLabel();
     nodes.add({id: nodeId, label: nodeId});
+    nodeTable[nodeId] = {'connections': []};
 });

simhelper.js

@@ -5,3 +5,20 @@ function generateRealisticLabel() {
 function calculateDistance(node1, node2) {
     return Math.sqrt((node1.x - node2.x) ** 2 + (node1.y - node2.y) ** 2);
 }
+
+function connectNodes(node1, node2) {
+    if (edges.get(`${node1}->${node2}`)) {
+        return;
+    }
+    const edgeId = `${node1}->${node2}`;
+    edges.add({
+        id: edgeId,
+        from: node1,
+        to: node2,
+        smooth: { enabled: true, type: 'curvedCW', roundness: 0.1 }
+    });
+}
+
+function distanceToRSSI(distance) {
+    return -10 - 26 * Math.log10(distance);
+}

style.css

@@ -3,11 +3,10 @@
     height: 90%;
     margin: 0 auto;
     border: 1px solid #000;
-    padding: 10px;
     box-sizing: border-box;
-    display: flex;
+    position: relative;
-    justify-content: center;
+    padding: 0;
-    align-items: center;
+    overflow: hidden;
 }
 
 #controlContainer {
@@ -15,9 +14,11 @@
     height: 10%;
     margin: 0 auto;
     border: 1px solid #000;
-    padding: 10px;
+    padding: 5px;
     box-sizing: border-box;
     display: flex;
+    gap: 5px;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
 }
@@ -34,3 +35,27 @@ html, body {
     padding: 0;
     box-sizing: border-box;
 }
+
+.rangeVis {
+    position: absolute;
+    border: 1px solid black;
+    border-radius: 50%;
+    z-index: 1000;
+    opacity: 0.2;
+    background-color: red;
+    pointer-events: none;
+}
+
+#controlButtons {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    gap: 10px;
+}
+
+#simToggles {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 1;
+    gap: 10px;
+}