adding 5G

src/hooks/useDrawTopology.ts

@@ -8,7 +8,7 @@ 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 { NODE_TYPE } from '@/networks/common'
+import { NODE_TYPE, NetworkType } from '@/networks/common'
 
 export function useDrawTopology(dom: HTMLElement) {
   const scene = new THREE.Scene()
@@ -110,9 +110,19 @@ export function useDrawTopology(dom: HTMLElement) {
 
   let drawnNodes: any = []
   const drawNodes = () => {
-    drawTSCHNodes()
-    // draw5GTower()
-    drawTSNNodes()
+    switch (Network.Type) {
+      case NetworkType.TSCH:
+        drawTSCHNodes()
+        break
+      case NetworkType.TSN:
+        drawTSNNodes()
+        break
+      case NetworkType.FiveG:
+        drawFiveGBS()
+        drawFiveGUE()
+        break
+    }
+
     drawEndSystems()
   }
   const clearNodes = () => {
@@ -259,7 +269,11 @@ export function useDrawTopology(dom: HTMLElement) {
     })
   }
 
-  const draw5GTower = () => {
+  const drawFiveGBS = () => {
+    if (Network.Nodes.value.length == 0) {
+      return
+    }
+    const node = Network.Nodes.value[0]
     // GLTF Loader
     const loader = new GLTFLoader()
     loader.load('/models/5_five_g_tower/scene.gltf', function (gltf: any) {
@@ -274,19 +288,19 @@ export function useDrawTopology(dom: HTMLElement) {
           object.castShadow = true // enable shadow casting
           object.receiveShadow = true
           object.material.color = new THREE.Color('#666')
-          object.userData.type = 'FiveG'
-          object.userData.node_id = 1
+          object.userData.type = NODE_TYPE[node.type]
+          object.userData.node_id = 0
         }
       })
-      model.position.x = -10
-      model.position.z = -10
+      model.position.x = node.pos[0]
+      model.position.z = node.pos[1]
       scene.add(model)
 
       const box = new THREE.Box3().setFromObject(model)
       const size = new THREE.Vector3()
       box.getSize(size)
 
-      const label = createLabel(`5G-Tower-1`)
+      const label = createLabel(`5G-BS-1`)
       label.position.set(model.position.x, size.y + 1, model.position.z) // Adjust the position as needed
       scene.add(label)
 
@@ -296,23 +310,95 @@ export function useDrawTopology(dom: HTMLElement) {
       )
       dragBox.geometry.translate(0, size.y / 2, 0)
       dragBox.position.copy(modelGroup.position)
-      dragBox.userData.type = 'FiveG'
-      dragBox.userData.node_id = '1'
+      dragBox.userData.type = NODE_TYPE[node.type]
+      dragBox.userData.node_id = node.id
       scene.add(dragBox)
       objectsToDrag.push(dragBox)
 
       const boxHelper = new THREE.BoxHelper(dragBox, 'skyblue')
       boxHelper.visible = false
       boxHelper.castShadow = false
       scene.add(boxHelper)
-      drawnNodes['5G-1'] = { model, label, modelGroup, dragBox, boxHelper }
+      drawnNodes[`${NODE_TYPE[node.type]}-${node.id}`] = {
+        model,
+        label,
+        modelGroup,
+        dragBox,
+        boxHelper
+      }
     })
   }
 
-  const drawEndSystems = ()=>{
-
+  const drawFiveGUE = () => {
+    // GLTF Loader
+    const loader = new GLTFLoader()
+    loader.load('/models/wi-fi_router/scene.gltf', function (gltf: any) {
+      const modelTemplate = gltf.scene
+
+      modelTemplate.scale.set(1.6, 1.6, 1.6)
+      modelTemplate.rotation.y = -Math.PI / 2
+      modelTemplate.traverse(function (object: any) {
+        if (object.isMesh) {
+          object.castShadow = true // enable shadow casting
+          object.receiveShadow = true
+          object.material.color = new THREE.Color('#999')
+        }
+      })
+
+      const box = new THREE.Box3().setFromObject(modelTemplate)
+      const size = new THREE.Vector3()
+      box.getSize(size)
+
+      for (const node of Network.Nodes.value) {
+        if (node.id == 0 || node.type != NODE_TYPE.FiveGUE) continue
+        let modelGroup: any = {}
+
+        const model = modelTemplate.clone()
+        model.position.x = node.pos[0]
+        model.position.z = node.pos[1]
+        model.position.y = 0
+        modelGroup = model
+        model.traverse(function (object: any) {
+          if (object.isMesh) {
+            object.userData.type = NODE_TYPE[node.type]
+            object.userData.node_id = node.id
+          }
+        })
+        scene.add(model)
+
+        const label = createLabel(`UE-${node.id}`)
+        label.position.set(model.position.x, 3.5, model.position.z) // Adjust the position as needed
+        scene.add(label)
+
+        const dragBox = new THREE.Mesh(
+          new THREE.BoxGeometry(size.x, size.y, size.z),
+          new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 })
+        )
+        dragBox.geometry.translate(0, size.y / 2, 0)
+        dragBox.position.copy(model.position)
+        dragBox.userData.type = NODE_TYPE[node.type]
+        dragBox.userData.node_id = node.id
+        dragBox.castShadow = false
+        scene.add(dragBox)
+        objectsToDrag.push(dragBox)
+
+        const boxHelper = new THREE.BoxHelper(dragBox, 'skyblue')
+        boxHelper.visible = false
+        boxHelper.castShadow = false
+        scene.add(boxHelper)
+        drawnNodes[`${NODE_TYPE[node.type]}-${node.id}`] = {
+          model,
+          label,
+          modelGroup,
+          dragBox,
+          boxHelper
+        }
+      }
+    })
   }
 
+  const drawEndSystems = () => {}
+
   let drawnLinks: any = {}
   const drawLinks = () => {
     for (const n of Network.Nodes.value) {

src/hooks/useStates.ts

@@ -5,8 +5,11 @@ import { ref } from 'vue'
 // import { TSCHNetwork } from '@/networks/TSCH/network'
 // export const Network = new TSCHNetwork()
 
-import { TSNNetwork } from '@/networks/TSN/network'
-export const Network = new TSNNetwork()
+// import { TSNNetwork } from '@/networks/TSN/network'
+// export const Network = new TSNNetwork()
+
+import { FiveGNetwork } from '@/networks/5G/network'
+export const Network = new FiveGNetwork()
 
 export const SelectedNode = ref(1)
 export const MiniMapMode = ref('scatter')

src/networks/5G/network.ts

@@ -1,4 +1,121 @@
-export class FiveGNetwork {
-  id: number = 33
-  constructor() {}
+import { ref } from 'vue'
+import { Network, NetworkType, NODE_TYPE } from '../common'
+import type { ScheduleConfig, FiveGNodeMeta } from './typedefs'
+import { SeededRandom } from '@/hooks/useSeed'
+
+export class FiveGNetwork extends Network {
+  constructor() {
+    super()
+    this.Type = NetworkType.FiveG
+    // this.Schedule = ref<Cell[][]>([])
+    this.SchConfig = ref<ScheduleConfig>({
+      num_slots: 40
+    })
+    this.createNodes()
+  }
+  createNodes = () => {
+    this.Nodes = ref<FiveGNodeMeta[]>([])
+    const rand = new SeededRandom(this.TopoConfig.value.seed)
+
+    // clear old nodes and webworkers
+    if (this.Nodes.value.length > 1) {
+      for (const n of this.Nodes.value) {
+        if (n.w != undefined) {
+          n.w.terminate()
+        }
+      }
+    }
+    this.Nodes.value = [
+      <FiveGNodeMeta>{
+        id: 0,
+        type: NODE_TYPE.FiveGBS,
+        pos: [0, 0],
+        neighbors: [],
+        queueLen: 0,
+        tx_cnt: 0,
+        rx_cnt: 0,
+        w: undefined
+      }
+    ]
+
+    for (let i = 1; i <= this.TopoConfig.value.num_nodes; i++) {
+      const n = <FiveGNodeMeta>{
+        id: i,
+        type: NODE_TYPE.FiveGUE,
+        pos: [
+          Math.floor(rand.next() * this.TopoConfig.value.grid_size) -
+            this.TopoConfig.value.grid_size / 2,
+          Math.floor(rand.next() * this.TopoConfig.value.grid_size) -
+            this.TopoConfig.value.grid_size / 2
+        ],
+        neighbors: [],
+        tx_cnt: 0,
+        rx_cnt: 0,
+        w: new Worker(new URL('@/networks/5G/node.ts', import.meta.url), { type: 'module' })
+      }
+      // send init msg
+      // n.w!.postMessage(<Message>{
+      //   type: MSG_TYPES.INIT,
+      //   payload: <INIT_MSG_PAYLOAD>{
+      //     id: n.id,
+      //     pos: toRaw(n.pos),
+      //     sch_config: toRaw(this.SchConfig.value)
+      //   }
+      // })
+      // handle msg/pkt from nodes
+      // n.w!.onmessage = (e: any) => {
+      //   if ('ch' in e.data == false) {
+      //     const msg: Message = e.data
+      //     if (this.msgHandlers[msg.type] != undefined) {
+      //       this.msgHandlers[msg.type](msg)
+      //     } else {
+      //       console.log('!! undefined message type:', msg.type)
+      //     }
+      //   } else {
+      //     const pkt: Packet = e.data
+      //     // check channel interference, only one packet can be transmitted on each channel in a slot
+      //     if (
+      //       this.PacketsCurrent.value.filter((p) => p.ch == pkt.ch).length == 0 ||
+      //       pkt.type == PKT_TYPES.ACK
+      //     ) {
+      //       // must use this format for the detailedView function of el-table-v2
+      //       pkt.id = this.Packets.value.length
+      //       pkt.children = [
+      //         {
+      //           id: `${this.Packets.value.length}-detail-content`,
+      //           detail: JSON.stringify(pkt.payload).replace(/"/g, '')
+      //         }
+      //       ]
+
+      //       this.Packets.value.push(pkt)
+      //       this.PacketsCurrent.value.push(pkt)
+
+      //       if (pkt.dst == ADDR.BROADCAST) {
+      //         for (const nn of this.Nodes.value) {
+      //           // check if in tx_range
+      //           const distance = Math.sqrt(
+      //             Math.pow(n.pos[0] - nn.pos[0], 2) + Math.pow(n.pos[1] - nn.pos[1], 2)
+      //           )
+      //           if (nn.id > 0 && nn.id != n.id && distance <= this.TopoConfig.value.tx_range) {
+      //             nn.w!.postMessage(pkt)
+      //           }
+      //         }
+      //       } else {
+      //         const nn = this.Nodes.value[pkt.dst]
+      //         if (nn != undefined) {
+      //           // check if in tx_range
+      //           const distance = Math.sqrt(
+      //             Math.pow(n.pos[0] - nn.pos[0], 2) + Math.pow(n.pos[1] - nn.pos[1], 2)
+      //           )
+      //           if (distance <= this.TopoConfig.value.tx_range) {
+      //             nn.w!.postMessage(pkt)
+      //           }
+      //         }
+      //       }
+      //     }
+      //   }
+      // }
+      this.Nodes.value.push(n)
+    }
+  }
 }

src/networks/5G/node.ts

@@ -0,0 +1,11 @@
+class FiveGNode {
+  id: number = 0
+  ports: { [p: number]: number } = {}
+  constructor() {}
+
+  Run() {
+    // console.log(this.id)
+  }
+}
+
+new FiveGNode().Run()

src/networks/5G/typedefs.ts

@@ -0,0 +1,7 @@
+import type { NodeMeta } from '../common'
+
+export interface ScheduleConfig {
+  num_slots: number
+}
+
+export interface FiveGNodeMeta extends NodeMeta {}

src/networks/TSCH/network.ts

@@ -9,7 +9,7 @@ import type {
 } from './typedefs'
 import { ADDR, MSG_TYPES, PKT_TYPES, CELL_TYPES } from './typedefs'
 import { SeededRandom } from '@/hooks/useSeed'
-import { Network, NODE_TYPE } from '../common'
+import { Network, NetworkType, NODE_TYPE } from '../common'
 import type { Packet, Message, MsgHandler } from '../common'
 
 export class TSCHNetwork extends Network {
@@ -20,6 +20,7 @@ export class TSCHNetwork extends Network {
 
   constructor() {
     super()
+    this.Type = NetworkType.TSCH
     this.SlotDuration.value = 500
     this.Schedule = ref<Cell[][]>([])
     this.SchConfig = ref<ScheduleConfig>({

src/networks/TSN/network.ts

@@ -1,11 +1,12 @@
 import { ref } from 'vue'
-import { Network, NODE_TYPE } from '../common'
+import { Network, NetworkType, NODE_TYPE } from '../common'
 import type { ScheduleConfig, TSNNodeMeta } from './typedefs'
 import { SeededRandom } from '@/hooks/useSeed'
 
 export class TSNNetwork extends Network {
   constructor() {
     super()
+    this.Type = NetworkType.TSN
     // this.Schedule = ref<Cell[][]>([])
     this.SchConfig = ref<ScheduleConfig>({
       num_slots: 40
@@ -27,7 +28,7 @@ export class TSNNetwork extends Network {
     this.Nodes.value = [
       <TSNNodeMeta>{
         id: 0,
-        type: NODE_TYPE.TSCH,
+        type: NODE_TYPE.TSN,
         pos: [0, 0],
         neighbors: [],
         queueLen: 0,