clean icons

src/components/MenuBar.vue

@@ -6,7 +6,7 @@ import {
   SignalEditTopology,
   SignalResetCamera
 } from '@/hooks/useStates'
-import { Setting, DataAnalysis, Edit, Camera, Operation } from '@element-plus/icons-vue'
+import { DataAnalysis, Edit, Camera, Operation } from '@element-plus/icons-vue'
 import IconCube from './icons/IconCube.vue'
 
 onKeyStroke('Escape', () => {

src/components/NodeStats.vue

@@ -1,19 +1,31 @@
 <script setup lang="ts">
-import rpi4 from '@/assets/rpi4.png'
 import sensortag from '@/assets/sensortag.png'
+import tsn_switch from '@/assets/tsn_switch.png'
 import { Network, SelectedNode } from '@/hooks/useStates'
 import { NODE_TYPE, NODE_TYPE_DISPLAY_NAME } from '@/core/typedefs'
+import { Picture } from '@element-plus/icons-vue'
+
+const images: { [type: number]: string } = {
+  [NODE_TYPE.TSCH]: sensortag,
+  [NODE_TYPE.TSN]: tsn_switch
+}
 </script>
 
 <template>
   <el-card class="card" v-if="SelectedNode > 0 && Network.Nodes.value[SelectedNode] != undefined">
     <el-row :gutter="30">
       <el-col :span="11" align="center">
-        <img :src="SelectedNode == 1 ? rpi4 : sensortag" />
+        <el-image class="image" :src="images[Network.Nodes.value[SelectedNode].type]">
+          <template #error>
+            <div class="image">
+              <el-icon><Picture /></el-icon>
+            </div>
+          </template>
+        </el-image>
       </el-col>
-      <el-col :span="13">
-        <span style="font-weight: 600; font-size: 0.9rem">
-          {{ NODE_TYPE_DISPLAY_NAME[NODE_TYPE[Network.Nodes.value[SelectedNode].type]] }}-{{ SelectedNode }}
+      <el-col :span="10">
+        <span class="stats">
+          {{ NODE_TYPE_DISPLAY_NAME[Network.Nodes.value[SelectedNode].type] }}-{{ SelectedNode }}
         </span>
         <br />
         - TX: {{ Network.Nodes.value[SelectedNode].tx_cnt }} , RX: {{ Network.Nodes.value[SelectedNode].rx_cnt }}<br />
@@ -29,7 +41,12 @@ import { NODE_TYPE, NODE_TYPE_DISPLAY_NAME } from '@/core/typedefs'
   /* width: 380px; */
   font-size: 0.82rem;
 }
-.card img {
-  height: 100px;
+.image {
+  height: 110px;
+  font-size: 36px;
+}
+.stats {
+  font-weight: 600;
+  font-size: 0.9rem;
 }
 </style>

src/components/PacketSniffer.vue

@@ -1,9 +1,7 @@
 <script setup lang="tsx">
-import ChannelChart from '@/components/ChannelChart.vue'
-
 import { ref, watch, nextTick } from 'vue'
 import { Network } from '@/hooks/useStates'
-import { PKT_TYPE, PROTOCOL_TYPE, type Packet } from '@/core/typedefs'
+import { PKT_TYPE, type Packet } from '@/core/typedefs'
 
 import { Filter } from '@element-plus/icons-vue'
 

src/core/typedefs.ts

@@ -22,17 +22,17 @@ export enum NODE_TYPE {
 }
 
 export const NODE_TYPE_DISPLAY_NAME = <{ [name: string]: string }>{
-  TSCH: 'TSCH Node',
-  TSN: 'TSN Bridge',
-  FIVE_G_GNB: '5G gNB',
-  FIVE_G_UE: '5G UE',
-  END_SYSTEM_SERVER: 'Edge Server',
-  END_SYSTEM_SENSOR_CAMERA: 'Camera',
-  END_SYSTEM_SENSOR_TEMP: 'Temperature Sensor',
-  END_SYSTEM_SENSOR_PRESSURE: 'Pressure Sensor',
-  END_SYSTEM_SENSOR_HUMIDITY: 'Humidity Sensor',
-  END_SYSTEM_ACTUATOR_ROBOTIC_ARM: 'Robotic Arm',
-  END_SYSTEM_ACTUATOR_PNEUMATIC: 'Pneumatic Actuator'
+  [NODE_TYPE.TSCH]: 'TSCH Node',
+  [NODE_TYPE.TSN]: 'TSN Bridge',
+  [NODE_TYPE.FIVE_G_GNB]: '5G gNB',
+  [NODE_TYPE.FIVE_G_UE]: '5G UE',
+  [NODE_TYPE.END_SYSTEM_SERVER]: 'Edge Server',
+  [NODE_TYPE.END_SYSTEM_SENSOR_CAMERA]: 'Camera',
+  [NODE_TYPE.END_SYSTEM_SENSOR_TEMP]: 'Temperature Sensor',
+  [NODE_TYPE.END_SYSTEM_SENSOR_PRESSURE]: 'Pressure Sensor',
+  [NODE_TYPE.END_SYSTEM_SENSOR_HUMIDITY]: 'Humidity Sensor',
+  [NODE_TYPE.END_SYSTEM_ACTUATOR_ROBOTIC_ARM]: 'Robotic Arm',
+  [NODE_TYPE.END_SYSTEM_ACTUATOR_PNEUMATIC]: 'Pneumatic Actuator'
 }
 
 export interface Node {

src/hooks/useDrawTopology.ts

@@ -194,7 +194,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_DISPLAY_NAME[NODE_TYPE[node.type]]}-${node.id}`)
+    const label = createLabel(`${NODE_TYPE_DISPLAY_NAME[node.type]}-${node.id}`)
     label.position.set(model.position.x, size.y + 1, model.position.z) // Adjust the position as needed
     if (node.type == NODE_TYPE.TSN) {
       label.position.y = size.y + 3

src/views/HomeView.vue

@@ -3,7 +3,7 @@ import MenuBar from '@/components/MenuBar.vue'
 import ControlPanel from '@/components/ControlPanel.vue'
 import Topology from '@/components/NetworkTopology.vue'
 import PacketSniffer from '@/components/PacketSniffer.vue'
-// import ScheduleTable from '@/components/ScheduleTable.vue'
+import ScheduleTable from '@/components/ScheduleTable.vue'
 import NodeStats from '@/components/NodeStats.vue'
 import MiniMap from '@/components/MiniMap.vue'
 import SettingsPanel from '@/components/SettingsPanel.vue'
@@ -29,9 +29,9 @@ import EventLogs from '@/components/EventLogs.vue'
   <MiniMap style="position: absolute; bottom: 16px; left: 16px; z-index: 999" />
   <FlowsPanelVue style="position: absolute; bottom: 480px; right: 16px; width: 380px; z-index: 999" />
   <PacketSniffer style="position: absolute; bottom: 16px; right: 16px; width: 380px; z-index: 999" />
-  <!-- <transition name="el-zoom-in-center">
+  <transition name="el-zoom-in-center">
     <ScheduleTable
       style="position: absolute; left: 16px; top: 48px; min-width: 336px; width: 32%; z-index: 999"
     />
-  </transition> -->
+  </transition>
 </template>