first commit

README.md

@@ -0,0 +1,7 @@
+# BLE-mesh SIM
+
+This is a simulation of a BLE-mesh network. It uses the [vis-network](https://visjs.github.io/vis-network/docs/network/) library to visualize the network.
+
+Currently this is not an accurate simulation of my BLE-mesh project. The goal is to finalize this simulation so that I can use it to test things like connection heuristics and ensure that network formation is optimal. I might also use this to test building routing algorithms to see how they perform under different network topologies.
+
+You should be able to run this simulation by opening the `index.html` file in your browser, there's no fancy stack or anything, just pure HTML, CSS, and JavaScript.

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>BLE-mesh SIM</title>
+        <script type="text/javascript" src="vis-network.min.js"></script>
+        <script type="text/javascript" src="simhelper.js"></script>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div id="simContainer"></div>
+        <div id="controlContainer">
+            <button id="addNode" class="controlButton">Add Node</button>
+        </div>
+        <script type="text/javascript" src="script.js"></script>
+    </body>
+</html>

script.js

@@ -0,0 +1,74 @@
+var UPDATE_INTERVAL = 10;
+var CONNECTION_DISTANCE = 250;
+
+var nodes = new vis.DataSet([
+]);
+
+var edges = new vis.DataSet([
+]);
+
+var container = document.getElementById('simContainer');
+
+var data = {
+    nodes: nodes,
+    edges: edges,
+};
+
+var options = {
+    nodes: {
+        shape: 'box',
+        physics: false,
+    },
+    edges: {
+        physics: true,
+        smooth: {
+            enabled: false,
+        },
+        arrows: {
+            to: {
+                enabled: true,
+                scaleFactor: 0.5,
+            }
+        },
+    },
+    physics: {
+        enabled: true,
+    }
+};
+
+var network = new vis.Network(container, data, options);
+
+// main event loop
+function main() {
+    currentNodes = network.getPositions();
+    currentNodesKeys = Object.keys(currentNodes);
+    for (let node1 of currentNodesKeys) {
+        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)) {
+                        edges.add({
+                            id: edgeId,
+                            from: node1,
+                            to: node2,
+                            smooth: { enabled: true, type: 'curvedCW', roundness: 0.1 }
+                        });
+                    }
+                } else if (distance >= CONNECTION_DISTANCE) {
+                    edges.remove(edgeId);
+                }
+            }
+        }
+    }
+    setTimeout(main, UPDATE_INTERVAL);
+}
+main();
+
+document.getElementById('addNode').addEventListener('click', function() {
+    const nodeId = generateRealisticLabel();
+    nodes.add({id: nodeId, label: nodeId});
+});

simhelper.js

@@ -0,0 +1,7 @@
+function generateRealisticLabel() {
+    return crypto.randomUUID().substring(0, 8);
+}
+
+function calculateDistance(node1, node2) {
+    return Math.sqrt((node1.x - node2.x) ** 2 + (node1.y - node2.y) ** 2);
+}

style.css

@@ -0,0 +1,36 @@
+#simContainer {
+    width: 80%;
+    height: 90%;
+    margin: 0 auto;
+    border: 1px solid #000;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#controlContainer {
+    width: 80%;
+    height: 10%;
+    margin: 0 auto;
+    border: 1px solid #000;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.controlButton {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+html, body {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}