From 2f72f4cca04a47754de05a86f1ed714782841f85 Mon Sep 17 00:00:00 2001
From: AmyangXYZ <amyang.xyz@gmail.com>
Date: Sat, 6 Jan 2024 11:06:36 -0500
Subject: [PATCH] improve log and link/packet curve

---
 public/topologies/example.json | 21 ++++++++++
 src/components/NodeStats.vue   |  4 +-
 src/core/network.ts            | 42 +++++++++++--------
 src/core/typedefs.ts           | 10 +++++
 src/hooks/useDrawTopology.ts   | 75 +++++++++++++++++-----------------
 src/hooks/useStates.ts         |  2 +-
 6 files changed, 97 insertions(+), 57 deletions(-)
 create mode 100644 public/topologies/example.json

diff --git a/public/topologies/example.json b/public/topologies/example.json
new file mode 100644
index 0000000..e3722bc
--- /dev/null
+++ b/public/topologies/example.json
@@ -0,0 +1,21 @@
+{
+    "name": "example",
+    "nodes": [
+        {
+            "id": 1,
+            "type": 2,
+            "pos": [
+                0,
+                0
+            ]
+        },
+        {
+            "id": 1,
+            "type": 2,
+            "pos": [
+                0,
+                0
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/components/NodeStats.vue b/src/components/NodeStats.vue
index 0a3c36d..88feeb6 100644
--- a/src/components/NodeStats.vue
+++ b/src/components/NodeStats.vue
@@ -2,7 +2,7 @@
 import rpi4 from '@/assets/rpi4.png'
 import sensortag from '@/assets/sensortag.png'
 import { Network, SelectedNode } from '@/hooks/useStates'
-import { NODE_TYPE } from '@/core/typedefs'
+import { NODE_TYPE, NODE_TYPE_DISPLAY_NAME } from '@/core/typedefs'
 </script>
 
 <template>
@@ -13,7 +13,7 @@ import { NODE_TYPE } from '@/core/typedefs'
       </el-col>
       <el-col :span="13">
         <span style="font-weight: 600; font-size: 0.9rem">
-          {{ NODE_TYPE[Network.Nodes.value[SelectedNode].type] }}-{{ SelectedNode }}
+          {{ NODE_TYPE_DISPLAY_NAME[NODE_TYPE[Network.Nodes.value[SelectedNode].type]] }}-{{ SelectedNode }}
         </span>
         <br />
         - TX: {{ Network.Nodes.value[SelectedNode].tx_cnt }} , RX:
diff --git a/src/core/network.ts b/src/core/network.ts
index 0a48e4c..60d2e83 100644
--- a/src/core/network.ts
+++ b/src/core/network.ts
@@ -41,17 +41,19 @@ export class NetworkHub {
     this.kdTree = new KDTree()
 
     watch(this.ASN, () => {
-      this.doneCnt = 0
-      this.PacketsCurrent.value = []
-
-      if (this.Nodes.value.length > 1) {
-        for (const n of this.Nodes.value) {
-          if (n.w != undefined) {
-            n.w.postMessage(<Packet>{
-              type: MSG_TYPE.ASN,
-              id: n.id,
-              payload: <ASNMsgPayload>{ asn: this.ASN.value }
-            })
+      if (this.ASN.value > 0) {
+        this.doneCnt = 0
+        this.PacketsCurrent.value = []
+
+        if (this.Nodes.value.length > 1) {
+          for (const n of this.Nodes.value) {
+            if (n.w != undefined) {
+              n.w.postMessage(<Packet>{
+                type: MSG_TYPE.ASN,
+                id: n.id,
+                payload: <ASNMsgPayload>{ asn: this.ASN.value }
+              })
+            }
           }
         }
       }
@@ -77,7 +79,7 @@ export class NetworkHub {
     this.Packets.value.push(pkt)
     this.PacketsCurrent.value.push(pkt)
   }
-
+  clearNodes() {}
   LoadTopology(name: string) {
     for (let i = 1; i <= this.Config.value.num_nodes; i++) {
       const n = <Node>{
@@ -123,7 +125,7 @@ export class NetworkHub {
       })
     }
 
-    this.Logs.value.unshift(`Established ${Object.keys(this.Links.value).length} links`)
+    this.Logs.value.unshift(`Established ${Object.keys(this.Links.value).length} links.`)
   }
 
   StartWebWorkers() {
@@ -167,7 +169,7 @@ export class NetworkHub {
         }
       }
     }
-    this.Logs.value.unshift('Started WebWorkers')
+    this.Logs.value.unshift('Started WebWorkers.')
   }
 
   AddNode(type: number) {
@@ -186,7 +188,7 @@ export class NetworkHub {
     }
     this.Nodes.value.push(n)
 
-    this.Logs.value.unshift(`New ${NODE_TYPE[type]} node: ID ${n.id}, position: [${n.pos}]`)
+    this.Logs.value.unshift(`New ${NODE_TYPE[type]} node: ID:${n.id}, position-:[${n.pos}].`)
   }
 
   AddLink(v1: number, v2: number) {
@@ -212,7 +214,9 @@ export class NetworkHub {
   }
 
   Run = () => {
-    this.Step()
+    this.Logs.value.unshift('Emulation started.')
+    this.ASN.value++
+    this.SlotDone.value = false
     this.Running.value = true
     this.asnTimer = setInterval(() => {
       this.ASN.value++
@@ -220,16 +224,22 @@ export class NetworkHub {
     }, this.SlotDuration.value)
   }
   Step = () => {
+    this.Logs.value.unshift('ASN increased by one.')
     this.ASN.value++
     this.SlotDone.value = false
   }
   Pause = () => {
+    this.Logs.value.unshift('Emulation paused.')
     this.Running.value = false
     clearInterval(this.asnTimer)
   }
   Reset = () => {
+    this.Logs.value.unshift('Emulation reset.')
     this.Running.value = false
     clearInterval(this.asnTimer)
     this.SignalReset.value++
+    this.Packets.value = []
+    this.PacketsCurrent.value = []
+    this.ASN.value = 0
   }
 }
diff --git a/src/core/typedefs.ts b/src/core/typedefs.ts
index 2fa8e93..4aa9862 100644
--- a/src/core/typedefs.ts
+++ b/src/core/typedefs.ts
@@ -17,6 +17,16 @@ export enum NODE_TYPE {
   END_SYSTEM_ROBOTIC_ARM
 }
 
+export const NODE_TYPE_DISPLAY_NAME = <{ [name: string]: string }>{
+  TSCH: 'TSCH Node',
+  TSN: 'TSN Bridge',
+  FIVE_G_BS: '5G gNB',
+  FIVE_G_UE: '5G UE',
+  END_SYSTEM_SERVER: 'Edge Server',
+  END_SYSTEM_SENSOR: 'Sensor',
+  END_SYSTEM_ROBOTIC_ARM: 'Robotic Arm'
+}
+
 export interface Node {
   id: number
   type: number
diff --git a/src/hooks/useDrawTopology.ts b/src/hooks/useDrawTopology.ts
index 202655a..c456cca 100644
--- a/src/hooks/useDrawTopology.ts
+++ b/src/hooks/useDrawTopology.ts
@@ -13,7 +13,15 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { DragControls } from 'three/examples/jsm/controls/DragControls.js'
 import Stats from 'three/examples/jsm/libs/stats.module'
 import * as TWEEN from '@tweenjs/tween.js'
-import { type Node, NODE_TYPE, ADDR, type Packet, type Link, LINK_TYPE } from '@/core/typedefs'
+import {
+  type Node,
+  NODE_TYPE,
+  ADDR,
+  type Packet,
+  type Link,
+  LINK_TYPE,
+  NODE_TYPE_DISPLAY_NAME
+} from '@/core/typedefs'
 
 export async function useDrawTopology(dom: HTMLElement) {
   const scene = new THREE.Scene()
@@ -177,7 +185,7 @@ export async function useDrawTopology(dom: HTMLElement) {
       [0.004, 0.004, 0.004],
       -Math.PI / 2
     )
-    Network.Logs.value[0] += 'done!'
+    Network.Logs.value[0] += 'done.'
   }
 
   let drawnNodes: { [id: number]: any } = {}
@@ -205,8 +213,7 @@ export async function useDrawTopology(dom: HTMLElement) {
     const box = new THREE.Box3().setFromObject(model)
     const size = new THREE.Vector3()
     box.getSize(size)
-
-    const label = createLabel(`${NODE_TYPE[node.type]}-${node.id}`)
+    const label = createLabel(`${NODE_TYPE_DISPLAY_NAME[NODE_TYPE[node.type]]}-${node.id}`)
     label.position.set(model.position.x, size.y + 1, model.position.z) // Adjust the position as needed
     scene.add(label)
 
@@ -255,22 +262,19 @@ export async function useDrawTopology(dom: HTMLElement) {
     }
   }
   const drawLink = (l: Link) => {
-    const p1 = new THREE.Vector3(
-      Network.Nodes.value[l.v1].pos[0],
-      1.6,
-      Network.Nodes.value[l.v1].pos[1]
-    )
+    const srcModel = drawnNodes[l.v1].model
+    const srcBox = new THREE.Box3().setFromObject(srcModel)
+    const srcSize = new THREE.Vector3()
+    srcBox.getSize(srcSize)
 
-    const p3 = new THREE.Vector3(
-      Network.Nodes.value[l.v2].pos[0],
-      1.6,
-      Network.Nodes.value[l.v2].pos[1]
-    )
+    const dstModel = drawnNodes[l.v2].model
+    const dstBox = new THREE.Box3().setFromObject(dstModel)
+    const dstSize = new THREE.Vector3()
+    dstBox.getSize(dstSize)
 
-    const x2 = (p1.x + p3.x) / 2
-    const z2 = (p1.z + p3.z) / 2
-    const h = 5
-    const p2 = new THREE.Vector3(x2, h, z2)
+    const p1 = new THREE.Vector3(srcModel.position.x, srcSize.y * 0.7, srcModel.position.z)
+    const p3 = new THREE.Vector3(dstModel.position.x, dstSize.y * 0.7, dstModel.position.z)
+    const p2 = new THREE.Vector3((p1.x + p3.x) / 2, (srcSize.y + dstSize.y) / 2, (p1.z + p3.z) / 2)
 
     const curve = new THREE.QuadraticBezierCurve3(p1, p2, p3)
     const points = curve.getPoints(64)
@@ -355,24 +359,22 @@ export async function useDrawTopology(dom: HTMLElement) {
       vertexColors: true
     })
 
+    const srcModel = drawnNodes[pkt.mac_src].model
+    const srcBox = new THREE.Box3().setFromObject(srcModel)
+    const srcSize = new THREE.Vector3()
+    srcBox.getSize(srcSize)
+
+    const dstModel = drawnNodes[pkt.mac_dst].model
+    const dstBox = new THREE.Box3().setFromObject(dstModel)
+    const dstSize = new THREE.Vector3()
+    dstBox.getSize(dstSize)
+
     const mesh = new THREE.Points(geometry, material)
     scene.add(mesh)
-    const p1 = new THREE.Vector3(
-      Network.Nodes.value[pkt.mac_src].pos[0],
-      1.6,
-      Network.Nodes.value[pkt.mac_src].pos[1]
-    )
-
-    const p3 = new THREE.Vector3(
-      Network.Nodes.value[pkt.mac_dst].pos[0],
-      1.6,
-      Network.Nodes.value[pkt.mac_dst].pos[1]
-    )
 
-    const x2 = (p1.x + p3.x) / 2
-    const z2 = (p1.z + p3.z) / 2
-    const h = 5
-    const p2 = new THREE.Vector3(x2, h, z2)
+    const p1 = new THREE.Vector3(srcModel.position.x, srcSize.y * 0.7, srcModel.position.z)
+    const p3 = new THREE.Vector3(dstModel.position.x, dstSize.y * 0.7, dstModel.position.z)
+    const p2 = new THREE.Vector3((p1.x + p3.x) / 2, (srcSize.y + dstSize.y) / 2, (p1.z + p3.z) / 2)
 
     drawnUnicastPackets[pkt.uid] = {
       mesh,
@@ -401,12 +403,8 @@ export async function useDrawTopology(dom: HTMLElement) {
       side: THREE.DoubleSide
     })
     const mesh = new THREE.Mesh(geometry, material)
+    mesh.position.copy(drawnNodes[pkt.mac_src].model.position)
     mesh.rotation.x = Math.PI / 2
-    mesh.position.set(
-      Network.Nodes.value[pkt.mac_src].pos[0],
-      0.5,
-      Network.Nodes.value[pkt.mac_src].pos[1]
-    )
     scene.add(mesh)
     drawnBeaconPackets[pkt.uid] = { mesh, uid: pkt.uid, mac_src: pkt.mac_dst, mac_dst: pkt.mac_dst }
   }
@@ -545,6 +543,7 @@ export async function useDrawTopology(dom: HTMLElement) {
     clearLinks()
     clearPackets()
     drawNodes()
+    drawLinks()
   })
   watch(SignalResetCamera, () => {
     animateCameraPosition({ x: 0, y: 70, z: 80 }, 1000)
diff --git a/src/hooks/useStates.ts b/src/hooks/useStates.ts
index df5b134..dd5befd 100644
--- a/src/hooks/useStates.ts
+++ b/src/hooks/useStates.ts
@@ -5,7 +5,7 @@ import { type Config } from '@/core/typedefs'
 import { NetworkHub } from '@/core/network'
 
 export const Network = new NetworkHub(<Config>{
-  seed: 11,
+  seed: 1111,
   num_nodes: 20,
   grid_size: 80,
   tx_range: 20