diff --git a/src/components/EventLogs.vue b/src/components/EventLogs.vue index 4f3b444..c4746e2 100644 --- a/src/components/EventLogs.vue +++ b/src/components/EventLogs.vue @@ -31,7 +31,7 @@ const resetTimer = () => { Network.Logs.value = [] }) showLog.value = false - }, 4000) + }, 5000) } onUnmounted(() => { @@ -71,6 +71,6 @@ onUnmounted(() => { .log { font-family: 'Share Tech Mono', monospace; padding-right: 20px; - font-size: 0.82rem; + font-size: 0.88rem; } diff --git a/src/components/TopoEditToolbox.vue b/src/components/TopoEditToolbox.vue index bec7a38..7f8ad14 100644 --- a/src/components/TopoEditToolbox.vue +++ b/src/components/TopoEditToolbox.vue @@ -32,7 +32,7 @@ const addNode = () => { SignalUpdateTopology.value++ } const connect = () => { - Network.ConstructTopology() + Network.EstablishConnection() SignalUpdateTopology.value++ } const finishEdit = () => { diff --git a/src/core/network.ts b/src/core/network.ts index 5fc1259..0a48e4c 100644 --- a/src/core/network.ts +++ b/src/core/network.ts @@ -40,15 +40,6 @@ export class NetworkHub { this.Rand = new SeededRandom(this.Config.value.seed) this.kdTree = new KDTree() - // this.createNodes() - this.AddNode(NODE_TYPE.TSCH) - this.AddNode(NODE_TYPE.TSN) - this.AddNode(NODE_TYPE.FIVE_G_BS) - this.AddNode(NODE_TYPE.FIVE_G_UE) - this.AddNode(NODE_TYPE.END_SYSTEM_ROBOTIC_ARM) - this.AddNode(NODE_TYPE.END_SYSTEM_SENSOR) - this.AddNode(NODE_TYPE.END_SYSTEM_SERVER) - watch(this.ASN, () => { this.doneCnt = 0 this.PacketsCurrent.value = [] @@ -67,26 +58,50 @@ export class NetworkHub { }) } - AddNode(type: number) { - const n = { - id: this.Nodes.value.length, - type: type, - pos: [ - Math.floor(this.Rand.next() * this.Config.value.grid_size) - - this.Config.value.grid_size / 2, - Math.floor(this.Rand.next() * this.Config.value.grid_size) - this.Config.value.grid_size / 2 - ], - neighbors: [], - tx_cnt: 0, - rx_cnt: 0, - w: undefined + // handle control plane msg from each node + handleMsg = (msg: Message) => { + switch (msg.type) { + case MSG_TYPE.DONE: + if (++this.doneCnt == this.Nodes.value.length - 1) { + this.SlotDone.value = true + } + break + case MSG_TYPE.STAT: + break } - this.Nodes.value.push(n) + } - this.Logs.value.unshift(`New ${NODE_TYPE[type]} node: ID ${n.id}, position: [${n.pos}]`) + // forward physical layer pkt from each node + handlePkt = (pkt: Packet) => { + this.Nodes.value[pkt.mac_dst].w!.postMessage(pkt) + this.Packets.value.push(pkt) + this.PacketsCurrent.value.push(pkt) } - ConstructTopology() { + LoadTopology(name: string) { + for (let i = 1; i <= this.Config.value.num_nodes; i++) { + const n = { + id: this.Nodes.value.length, + type: [0, 1, 2, 3, 11, 12, 13][ + Math.floor((this.Rand.next() * Object.keys(NODE_TYPE).length) / 2) + ], + pos: [ + Math.floor(this.Rand.next() * this.Config.value.grid_size) - + this.Config.value.grid_size / 2, + Math.floor(this.Rand.next() * this.Config.value.grid_size) - + this.Config.value.grid_size / 2 + ], + neighbors: [], + tx_cnt: 0, + rx_cnt: 0, + w: undefined + } + this.Nodes.value.push(n) + } + this.Logs.value.unshift(`Loaded topology: {${name}}.`) + } + + EstablishConnection() { this.kdTree = new KDTree() this.Links.value = [] for (const n of this.Nodes.value) { @@ -152,27 +167,26 @@ export class NetworkHub { } } } - this.Logs.value.unshift('WebWorkers started') + this.Logs.value.unshift('Started WebWorkers') } - // handle control plane msg from each node - handleMsg = (msg: Message) => { - switch (msg.type) { - case MSG_TYPE.DONE: - if (++this.doneCnt == this.Nodes.value.length - 1) { - this.SlotDone.value = true - } - break - case MSG_TYPE.STAT: - break + AddNode(type: number) { + const n = { + id: this.Nodes.value.length, + type: type, + pos: [ + Math.floor(this.Rand.next() * this.Config.value.grid_size) - + this.Config.value.grid_size / 2, + Math.floor(this.Rand.next() * this.Config.value.grid_size) - this.Config.value.grid_size / 2 + ], + neighbors: [], + tx_cnt: 0, + rx_cnt: 0, + w: undefined } - } + this.Nodes.value.push(n) - // forward physical layer pkt from each node - handlePkt = (pkt: Packet) => { - this.Nodes.value[pkt.mac_dst].w!.postMessage(pkt) - this.Packets.value.push(pkt) - this.PacketsCurrent.value.push(pkt) + this.Logs.value.unshift(`New ${NODE_TYPE[type]} node: ID ${n.id}, position: [${n.pos}]`) } AddLink(v1: number, v2: number) { diff --git a/src/core/node_five_g_bs.ts b/src/core/node_five_g_bs.ts index 40262d3..ae5ec6f 100644 --- a/src/core/node_five_g_bs.ts +++ b/src/core/node_five_g_bs.ts @@ -1,13 +1,18 @@ import { Node } from './node' -import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload } from './typedefs' +import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs' class FiveGBS extends Node { constructor() { super() + this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler) this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler) this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler) } - + initMsgHandler = (msg: Message) => { + const payload: InitMsgPayload = msg.payload + this.id = payload.id + this.neighbors = payload.neighbors + } asnMsgHandler = (msg: Message) => { const payload: ASNMsgPayload = msg.payload this.ASN = payload.asn diff --git a/src/core/node_five_g_ue.ts b/src/core/node_five_g_ue.ts index 91c4525..ed4a20c 100644 --- a/src/core/node_five_g_ue.ts +++ b/src/core/node_five_g_ue.ts @@ -1,11 +1,17 @@ import { Node } from './node' -import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload } from './typedefs' +import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs' class FiveGUE extends Node { constructor() { super() + this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler) this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler) } + initMsgHandler = (msg: Message) => { + const payload: InitMsgPayload = msg.payload + this.id = payload.id + this.neighbors = payload.neighbors + } asnMsgHandler = (msg: Message) => { const payload: ASNMsgPayload = msg.payload this.ASN = payload.asn diff --git a/src/core/node_tsn.ts b/src/core/node_tsn.ts index 224e4d2..46ce14c 100644 --- a/src/core/node_tsn.ts +++ b/src/core/node_tsn.ts @@ -1,12 +1,25 @@ import { Node } from './node' -import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload } from './typedefs' +import { + PKT_TYPE, + type Message, + type Packet, + MSG_TYPE, + type ASNMsgPayload, + type InitMsgPayload +} from './typedefs' class TSNNode extends Node { constructor() { super() + this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler) this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler) this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler) } + initMsgHandler = (msg: Message) => { + const payload: InitMsgPayload = msg.payload + this.id = payload.id + this.neighbors = payload.neighbors + } asnMsgHandler = (msg: Message) => { const payload: ASNMsgPayload = msg.payload this.ASN = payload.asn diff --git a/src/hooks/useDrawTopology.ts b/src/hooks/useDrawTopology.ts index 3b754f7..202655a 100644 --- a/src/hooks/useDrawTopology.ts +++ b/src/hooks/useDrawTopology.ts @@ -15,7 +15,7 @@ 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' -export function useDrawTopology(dom: HTMLElement) { +export async function useDrawTopology(dom: HTMLElement) { const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000) camera.layers.enableAll() @@ -105,7 +105,7 @@ export function useDrawTopology(dom: HTMLElement) { texture.generateMipmaps = false const spriteMaterial = new THREE.SpriteMaterial({ map: texture, - depthTest: false, // add this line + depthTest: false, // add Network line transparent: true }) const sprite = new THREE.Sprite(spriteMaterial) @@ -117,29 +117,15 @@ export function useDrawTopology(dom: HTMLElement) { } const loadingManager = new THREE.LoadingManager() - loadingManager.onStart = function (url, itemsLoaded, itemsTotal) { - // console.log( - // 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' - // ) - Network.Logs.value.unshift( - 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' - ) - } loadingManager.onLoad = function () { // console.log('Loading complete!') - Network.Logs.value.unshift('Loading complete!') - } - - loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) { - // console.log( - // 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' - // ) - // Logs.value.unshift( 'Loading file: ' + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.') + Network.Logs.value[0] += '.' } const modelTemplates: { [type: number]: any } = {} const loadGLTFModels = async () => { + Network.Logs.value.unshift('Loading resources') const loader = new GLTFLoader(loadingManager) const loadModel = async ( type: number, @@ -191,13 +177,11 @@ export function useDrawTopology(dom: HTMLElement) { [0.004, 0.004, 0.004], -Math.PI / 2 ) + Network.Logs.value[0] += 'done!' } let drawnNodes: { [id: number]: any } = {} - const drawNodes = async () => { - if (Object.values(modelTemplates).length == 0) { - await loadGLTFModels() - } + const drawNodes = () => { for (const node of Network.Nodes.value) { if (node.id == 0 || drawnNodes[node.id] != undefined) continue drawNode(node) @@ -528,13 +512,20 @@ export function useDrawTopology(dom: HTMLElement) { stats.update() } - // main + // ###### main ####### setCamera() addLights() drawGround() + animate() + + await loadGLTFModels() + Network.LoadTopology('default-random') drawNodes() + Network.EstablishConnection() + Network.StartWebWorkers() + drawLinks() - animate() + // ################### watch(SignalUpdateTopology, () => { drawNodes() diff --git a/src/hooks/useStates.ts b/src/hooks/useStates.ts index 184c68e..df5b134 100644 --- a/src/hooks/useStates.ts +++ b/src/hooks/useStates.ts @@ -5,14 +5,13 @@ import { type Config } from '@/core/typedefs' import { NetworkHub } from '@/core/network' export const Network = new NetworkHub({ - seed: 17, - num_nodes: 15, + seed: 11, + num_nodes: 20, grid_size: 80, tx_range: 20 }) -export const Logs = ref([]) -export const SelectedNode = ref(1) +export const SelectedNode = ref(0) export const SignalResetCamera = ref(1) export const SignalShowSettings = ref(false) export const SignalShowSchedule = ref(false)