Merge pull request #2 from hexuustc/ui-ws-handle

UI ws handle
hexuustc · May 10, 2023 · 09e82ee · 09e82ee
2 parents cb9fc92 + 9d19ba9
commit 09e82ee
Show file tree

Hide file tree

Showing 11 changed files with 12,861 additions and 41,723 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -10,5 +10,6 @@ module.exports = {
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-unused-vars": "off",
   },
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "node-sass": "^5.0.0",
     "nouislider": "14.6.0",
     "sass-loader": "^10.1.1",
+    "tiny-emitter": "^2.1.0",
     "v-click-outside": "^3.1.2",
     "vue": "3.0.5",
     "vue-router": "4.0.1",

diff --git a/public/index.html b/public/index.html
@@ -18,15 +18,24 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>img/brand/favicon.png" type="image/png">
-    <title>Vue Argon Dashboard - Free Dashboard for Vue.js & Bootstrap 4</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link
+      rel="icon"
+      href="<%= BASE_URL %>img/brand/favicon.png"
+      type="image/png"
+    />
+    <title>FPGAOL | USTC</title>
+    <script src="/jszip.min.js"></script>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/public/jszip.min.js b/public/jszip.min.js
diff --git a/src/App.vue b/src/App.vue
@@ -2,4 +2,9 @@
   <div id="app">
     <router-view />
   </div>
-</template>
+</template>
+
+<script setup>
+import initWebsocket from "./components/websocket/websocket";
+initWebsocket();
+</script>
diff --git a/src/components/websocket/event_bus.js b/src/components/websocket/event_bus.js
@@ -0,0 +1,3 @@
+import emitter from "tiny-emitter/instance";
+
+export default emitter;
diff --git a/src/components/websocket/websocket.js b/src/components/websocket/websocket.js
@@ -0,0 +1,91 @@
+import emitter from "./event_bus.js";
+
+let DEBUG_MODE = true;
+let DEBUG_WS_SERVER = "202.38.79.96:12148";
+
+let notifySocket;
+let PI_SERVER_ADDRESS = window.location.host;
+
+export default function initWebsocket() {
+  if (DEBUG_MODE) {
+    notifySocket = new WebSocket("ws://" + DEBUG_WS_SERVER + "/ws/");
+  } else {
+    notifySocket = new WebSocket("ws://" + PI_SERVER_ADDRESS + "/ws/");
+  }
+  notifySocket.onmessage = function (e) {
+    const data = JSON.parse(e.data);
+    //console.log("receive message:", data);
+    const type = data["type"];
+    const idx = data["idx"];
+    let payload = data["payload"];
+    if (type == "LED") {
+      emitter.emit("led-recv", idx, payload);
+    } else if (type == "UART") {
+      emitter.emit("term-recv", payload);
+    } else if (type == "HEXPLAY") {
+      payload = parseInt(payload);
+      emitter.emit("hexplay-recv", idx, payload);
+    } else if (type == "WF") {
+      // document.getElementById("download").innerHTML = "Download";
+      // $("#download").attr("href", "./waveform.vcd");
+    } else if (type == "XDC") {
+      emitter.emit("dispatch-xdc", payload);
+    }
+  };
+}
+
+function sendJson(json) {
+  console.log(json);
+  notifySocket.send(json);
+}
+
+function sendStartNotify(json) {
+  var data = JSON.parse(json);
+  var id = data["id"];
+  if (id == -2) {
+    notifySocket.send(json);
+  } else {
+    console.log("sendStartNotify: wrong id!");
+  }
+}
+
+function sendStopNotify() {
+  notifySocket.send(
+    JSON.stringify({
+      id: -1,
+    })
+  );
+}
+
+emitter.on("stop-notify", function () {
+  sendStopNotify();
+});
+
+emitter.on("submit-json", function (init_json) {
+  setTimeout(function () {
+    sendStartNotify(init_json);
+  }, 1000);
+});
+
+emitter.on("term-send", function (val) {
+  sendJson(
+    JSON.stringify({
+      id: -3,
+      type: "UART",
+      idx: 0,
+      payload: val,
+    })
+  );
+});
+
+emitter.on("sw-change", function (idx, val) {
+  console.log("SW", idx, val);
+  sendJson(
+    JSON.stringify({
+      id: -3,
+      type: "BTN",
+      idx: idx,
+      payload: val,
+    })
+  );
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import emitter from "tiny-emitter/instance";

		export default emitter;