kerms
/
wireless-esp32-tools-web-host
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(fullscreen, UI), reformat code 

- add ws binary message communication (not stable)
- reformat ws: move ws text/bin packing code to msgRouter
- reformat api: centralize module ID
This commit is contained in:
kerms 2024-05-20 10:03:25 +08:00
parent 275f3ac859
commit c2b8f6ba09
12 changed files with 204 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -1 +1,3 @@
# 允斯调试器的内嵌网页版上位机
# 允斯无线透传器的内嵌网页版上位机

2
set_env.sh
View File

@ -1,3 +1,3 @@
#!/bin/bash
export VITE_APP_GIT_TAG=$(git describe --tags)
export VITE_APP_GIT_TAG=$(git describe --tags | cut -d'-' -f1,2)
export VITE_APP_LAST_COMMIT=$(git log -1 --format=%cd)

12
src/App.vue
View File

@ -40,7 +40,7 @@ onMounted(() => {
logHelloMessage();
let host = "";
if (isDevMode()) {
host = import.meta.env.VITE_DEVICE_HOST_NAME;
host = import.meta.env.VITE_DEVICE_HOST_NAME || "dap.local";
} else {
host = window.location.host
}
@ -55,8 +55,10 @@ onUnmounted(() => {
</script>
<template>
<header>
<nav-bar/>
</header>
<RouterView/>
<div class="flex flex-col h-screen">
<header>
<nav-bar/>
</header>
<RouterView/>
</div>
</template>

13
src/api/apiWifi.ts
View File

@ -1,6 +1,5 @@
import {type ApiJsonMsg, sendJsonMsg} from '@/api'
import {type ApiJsonMsg, sendJsonMsg, WtModuleID} from '@/api'
export const WifiModuleID = 1;
export enum WifiCmd {
UNKNOWN = 0,
WIFI_API_JSON_STA_GET_AP_INFO,
@ -17,7 +16,7 @@ interface WifiMsgOut extends ApiJsonMsg {
export function wifi_get_scan_list() {
const msg : WifiMsgOut = {
module: WifiModuleID,
module: WtModuleID.WIFI,
cmd: WifiCmd.WIFI_API_JSON_GET_SCAN,
}
sendJsonMsg(msg);
@ -25,7 +24,7 @@ export function wifi_get_scan_list() {
export function wifi_sta_get_ap_info() {
const msg : WifiMsgOut = {
module: WifiModuleID,
module: WtModuleID.WIFI,
cmd: WifiCmd.WIFI_API_JSON_STA_GET_AP_INFO,
}
sendJsonMsg(msg);
@ -33,7 +32,7 @@ export function wifi_sta_get_ap_info() {
export function wifi_ap_get_info() {
const msg : WifiMsgOut = {
module: WifiModuleID,
module: WtModuleID.WIFI,
cmd: WifiCmd.WIFI_API_JSON_AP_GET_INFO,
}
sendJsonMsg(msg);
@ -41,7 +40,7 @@ export function wifi_ap_get_info() {
export function wifi_connect_to(ssid: string, password: string) {
const msg: WifiMsgOut = {
module: WifiModuleID,
module: WtModuleID.WIFI,
cmd: WifiCmd.WIFI_API_JSON_CONNECT,
ssid: ssid,
password: password,
@ -59,6 +58,6 @@ export interface WifiInfo extends ApiJsonMsg {
wifiLogo?: string;
}
export interface WifiList {
export interface WifiList extends ApiJsonMsg {
scan_list: Array<WifiInfo>;
}

52
src/api/binDataDef.ts Normal file
View File

@ -0,0 +1,52 @@
import type {WtModuleID} from "@/api/index";
export enum WtDataType {
RESERVED = 0x00,
/* primitive type */
EVENT = 0x02,
ROUTE_HDR = 0x03,
RAW_BROADCAST = 0x04,
/* broadcast data */
CMD_BROADCAST = 0x11,
/* targeted data */
RAW = 0x20,
CMD = 0x21,
RESPONSE = 0x22,
/* standard protocols */
PROTOBUF = 0x40,
JSON = 0x41,
MQTT = 0x42,
}
export interface ApiBinaryMsg {
data_type: WtDataType,
module: WtModuleID,
sub_mod: number,
payload: Uint8Array;
}
export function decodeHeader(arrayBuffer: ArrayBuffer) : ApiBinaryMsg {
// Create a DataView to access the data in the ArrayBuffer
const dataView = new DataView(arrayBuffer);
// Extract the data_type from the first byte
const data_type = dataView.getUint8(0) as WtDataType;
// Extract the module_id and sub_id from the next bytes
const module = dataView.getUint8(1);
const sub_mod = dataView.getUint8(2);
const payload = new Uint8Array(arrayBuffer.slice(4));
// Constructing the header object
return {
data_type,
module,
sub_mod,
payload,
};
}

27
src/api/index.ts
View File

@ -1,4 +1,5 @@
import {getWebsocketService} from "@/composables/websocket/websocketService";
import type {ApiBinaryMsg} from "@/api/binDataDef";
export interface ApiJsonMsg {
module: number;
@ -26,18 +27,34 @@ export interface ControlMsg {
export interface ServerMsg {
type: "json" | "binary"
data: ApiJsonMsg | object;
data: string | ArrayBuffer;
}
export enum WtModuleID {
WIFI = 1,
DATA_FLOW = 2,
UART = 4,
}
export function sendJsonMsg(apiJsonMsg: ApiJsonMsg) {
const msg: ServerMsg = {
type: "json",
data: apiJsonMsg,
data: JSON.stringify(apiJsonMsg),
};
getWebsocketService().send(msg);
// toServer.postMessage(msg);
}
export function sendBinMsg(msg: ApiJsonMsg) {
// toServer.postMessage(JSON.stringify(msg));
export function sendBinMsg(binMsg: ApiBinaryMsg) {
const buffer = new Uint8Array(4 + binMsg.payload.length);
buffer[0] = binMsg.data_type;
buffer[1] = binMsg.module;
buffer[2] = binMsg.sub_mod;
buffer[3] = 0; // Reserved byte
buffer.set(binMsg.payload, 4); // Append payload after header
const msg: ServerMsg = {
type: "binary",
data: buffer,
};
getWebsocketService().send(msg);
}

7
src/assets/page.css
View File

@ -1,5 +1,5 @@
.text-layout {
@apply m-auto max-w-2xl min-w-min px-2
@apply mx-auto max-w-2xl w-full sm:min-w-[640px] px-2
}
.page-title {
@ -14,3 +14,8 @@
@apply text-blue-600 font-bold;
cursor: default;
}
.el-checkbox:hover {
background-color: var(--el-color-primary-light-9);
border-color: var(--el-color-primary-light-8);
}

24
src/composables/websocket/websocketWrapper.ts
View File

@ -80,26 +80,13 @@ class OneTimeWebsocket implements IWebsocket {
return
const msg: ServerMsg = {
data: {},
data: ev.data,
type: "json",
}
if (typeof ev.data === "string") {
try {
msg.data = JSON.parse(ev.data) as ApiJsonMsg;
if ((msg.data as ApiJsonMsg).cmd === undefined ||
(msg.data as ApiJsonMsg).module === undefined
){
console.log("Server msg has no cmd or module");
return;
}
} catch (e) {
console.log(e);
return;
}
msg.type = "json"
} else {
msg.type = "binary";
msg.data = ev.data;
console.log(typeof ev.data);
}
this.msgCallback(msg);
}
@ -150,11 +137,8 @@ class OneTimeWebsocket implements IWebsocket {
if (isDevMode()) {
console.log('WebSocket proxies data ', msg);
}
if (msg.type === "binary") {
// this.socket.send(msg.data);
} else if (msg.type === "json") {
this.socket.send(JSON.stringify(msg.data));
}
this.socket.send(msg.data);
}
clear() {

42
src/router/msgRouter.ts
View File

@ -1,9 +1,11 @@
import type {ApiJsonMsg, ControlMsg, ServerMsg} from "@/api";
import {isDevMode} from "@/composables/buildMode";
import {type ApiBinaryMsg, decodeHeader} from "@/api/binDataDef";
export interface IModuleCallback {
ctrlCallback: (msg: ControlMsg) => void;
serverMsgCallback: (msg: ServerMsg) => void;
serverJsonMsgCallback: (msg: ApiJsonMsg) => void;
serverBinMsgCallback: (msg: ApiBinaryMsg) => void;
}
const moduleMap = new Map<number, IModuleCallback>();
@ -22,19 +24,47 @@ export function unregisterModule(moduleId: number) {
}
export function routeModuleServerMsg(msg: ServerMsg) {
if (msg.type == "json") {
const module = (msg.data as ApiJsonMsg).module;
if (msg.type === "json") {
let jsonMsg: ApiJsonMsg;
try {
jsonMsg = JSON.parse(msg.data as string) as ApiJsonMsg;
if (jsonMsg.cmd === undefined ||
jsonMsg.module === undefined
){
console.log("Server msg has no cmd or module", msg.data);
return;
}
} catch (e) {
console.log(e);
return;
}
const module = jsonMsg.module;
const moduleHandler = moduleMap.get(module);
if (moduleHandler) {
moduleHandler.serverMsgCallback(msg);
moduleHandler.serverJsonMsgCallback(jsonMsg);
} else {
if (isDevMode()) {
console.log("routeModuleServerMsg module not loaded", module);
}
}
} else {
if (isDevMode()) {
console.log("routeModuleServerMsg ignored:", msg);
const arr = msg.data as ArrayBuffer;
if (arr.byteLength < 4) {
if (isDevMode()) {
console.log("binary message too short");
}
return;
}
const binaryMsg = decodeHeader(msg.data as ArrayBuffer);
const moduleHandler = moduleMap.get(binaryMsg.module);
if (moduleHandler) {
moduleHandler.serverBinMsgCallback(binaryMsg);
} else {
if (isDevMode()) {
console.log("routeModuleServerMsg ignored:", msg, binaryMsg);
}
}
}
}

24
src/views/About.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
const version = import.meta.env.VITE_APP_GIT_TAG;
const compileTime = import.meta.env.VITE_APP_LAST_COMMIT;
const version = import.meta.env.VITE_APP_GIT_TAG || "v0.0.0";
const compileTime = import.meta.env.VITE_APP_LAST_COMMIT || "1970-00-00";
</script>
<template>
@ -17,23 +17,23 @@ const compileTime = import.meta.env.VITE_APP_LAST_COMMIT;
</el-descriptions>
<el-descriptions title="鸣谢" border :column="1" class="mt-5 description-style">
<el-descriptions-item label="vuejs"><a href="https://github.com/vuejs/vue/blob/main/LICENSE">MIT</a>
<el-descriptions-item label="vuejs"><a target="_blank" href="https://github.com/vuejs/vue/blob/main/LICENSE">MIT</a>
</el-descriptions-item>
<el-descriptions-item label="typescript"><a
href="https://github.com/microsoft/TypeScript/blob/main/LICENSE.txt">Apache 2.0</a></el-descriptions-item>
<el-descriptions-item label="vite"><a href="https://github.com/vitejs/vite/blob/main/LICENSE">MIT</a>
<el-descriptions-item label="vite"><a target="_blank" href="https://github.com/vitejs/vite/blob/main/LICENSE">MIT</a>
</el-descriptions-item>
<el-descriptions-item label="tailwindcss"><a
href="https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE">MIT</a></el-descriptions-item>
<el-descriptions-item label="element-plus"><a
href="https://github.com/element-plus/element-plus/blob/dev/LICENSE">MIT</a></el-descriptions-item>
<el-descriptions-item label="pinia"><a href="https://github.com/vuejs/pinia/blob/v2/LICENSE">MIT</a>
<el-descriptions-item label="pinia"><a target="_blank" href="https://github.com/vuejs/pinia/blob/v2/LICENSE">MIT</a>
</el-descriptions-item>
<el-descriptions-item label="mitt"><a href="https://github.com/developit/mitt/blob/main/LICENSE">MIT</a>
<el-descriptions-item label="mitt"><a target="_blank" href="https://github.com/developit/mitt/blob/main/LICENSE">MIT</a>
</el-descriptions-item>
<el-descriptions-item label="vue-router"><a
href="https://github.com/vuejs/vue-router/blob/dev/LICENSE">MIT</a></el-descriptions-item>
<el-descriptions-item label="vue-i18n"><a href="https://github.com/kazupon/vue-i18n?tab=MIT-1-ov-file#readme">MIT</a>
<el-descriptions-item label="vue-i18n"><a target="_blank" href="https://github.com/kazupon/vue-i18n?tab=MIT-1-ov-file#readme">MIT</a>
</el-descriptions-item>
<el-descriptions-item label="lightningcss"><a
href="https://github.com/parcel-bundler/lightningcss/blob/master/LICENSE">MPL-2.0 license</a>
@ -42,12 +42,12 @@ const compileTime = import.meta.env.VITE_APP_LAST_COMMIT;
</el-collapse-item>
<el-collapse-item title="关于下位机">
<el-descriptions border :column="1" class="mt-5 description-style">
<el-descriptions-item label="官网"><a href="https://yunsi.studio/wireless-proxy">允斯工作室</a></el-descriptions-item>
<el-descriptions-item label="官网"><a target="_blank" href="https://yunsi.studio/wireless-proxy">允斯工作室</a></el-descriptions-item>
<el-descriptions-item label="版本">-</el-descriptions-item>
</el-descriptions>
<el-descriptions title="鸣谢" border :column="1" class="mt-5 description-style">
<el-descriptions-item label="windowsair"><a href="https://github.com/windowsair/wireless-esp8266-dap">wireless-esp8266-dap</a>
<el-descriptions-item label="windowsair"><a target="_blank" href="https://github.com/windowsair/wireless-esp8266-dap">wireless-esp8266-dap</a>
</el-descriptions-item>
</el-descriptions>
</el-collapse-item>
@ -55,11 +55,11 @@ const compileTime = import.meta.env.VITE_APP_LAST_COMMIT;
<el-descriptions title="作者：空空(kerms)" border :column="1" class="mt-5 description-style">
<el-descriptions-item label="官网"><a href="https://yunsi.studio/">允斯工作室（https://yunsi.studio/）</a></el-descriptions-item>
<el-descriptions-item label="github"><a href="https://github.com/kerms">https://github.com/kerms</a>
<el-descriptions-item label="官网"><a target="_blank" href="https://yunsi.studio/">允斯工作室（https://yunsi.studio/）</a></el-descriptions-item>
<el-descriptions-item label="github"><a target="_blank" href="https://github.com/kerms">https://github.com/kerms</a>
</el-descriptions-item>
<el-descriptions-item label="邮箱">kerms@niazo.org</el-descriptions-item>
<el-descriptions-item label="BiliBili"><a href="https://space.bilibili.com/3461571571353885">3461571571353885</a>
<el-descriptions-item label="BiliBili"><a target="_blank" href="https://space.bilibili.com/3461571571353885">3461571571353885</a>
</el-descriptions-item>
<el-descriptions-item label="QQ群">642246000</el-descriptions-item>
<el-descriptions-item label="备注">欢迎大家来打扰啊～</el-descriptions-item>

26
src/views/Wifi.vue
View File

@ -198,14 +198,13 @@ import {
WifiCmd,
type WifiInfo,
type WifiList,
WifiModuleID,
wifi_ap_get_info, wifi_connect_to
} from "@/api/apiWifi";
import type {FormInstance} from "element-plus";
import InlineSvg from "@/components/InlineSvg.vue";
import type {ApiJsonMsg, ControlMsg, ServerMsg} from "@/api";
import {ControlEvent, ControlMsgType} from "@/api";
import {ControlEvent, ControlMsgType, WtModuleID} from "@/api";
import {registerModule, unregisterModule} from "@/router/msgRouter";
import {useWsStore} from "@/stores/websocket";
import {globalNotify, globalNotifyRightSide} from "@/composables/notification";
@ -250,18 +249,12 @@ const querySearch = (queryString: string, cb: any) => {
}
}
const onClientMsg = (msg: ServerMsg) => {
if (msg.type !== "json") {
return;
}
let json = msg.data as ApiJsonMsg;
switch (json.cmd as WifiCmd) {
const onClientMsg = (msg: ApiJsonMsg) => {
switch (msg.cmd as WifiCmd) {
case WifiCmd.UNKNOWN:
break;
case WifiCmd.WIFI_API_JSON_STA_GET_AP_INFO: {
const info = msg.data as WifiInfo;
const info = msg as WifiInfo;
if (info.rssi === 0) {
Object.assign(wifiStaApInfo, defWifiInfo);
} else {
@ -276,7 +269,7 @@ const onClientMsg = (msg: ServerMsg) => {
case WifiCmd.WIFI_API_JSON_CONNECT:
break;
case WifiCmd.WIFI_API_JSON_GET_SCAN: {
const list = msg.data as WifiList;
const list = msg as WifiList;
scanning.value = false;
list.scan_list.forEach(value => {
if (value.rssi > -50) {
@ -298,7 +291,7 @@ const onClientMsg = (msg: ServerMsg) => {
case WifiCmd.WIFI_API_JSON_DISCONNECT:
break;
case WifiCmd.WIFI_API_JSON_AP_GET_INFO: {
const info = msg.data as WifiInfo;
const info = msg as WifiInfo;
Object.assign(wifiApInfo, info);
break;
}
@ -342,16 +335,17 @@ function onConnectClick() {
}
onMounted(() => {
registerModule(WifiModuleID, {
registerModule(WtModuleID.WIFI, {
ctrlCallback: onClientCtrl,
serverMsgCallback: onClientMsg
serverJsonMsgCallback: onClientMsg,
serverBinMsgCallback: () => {},
});
wifi_sta_get_ap_info();
wifi_ap_get_info();
});
onUnmounted(() => {
unregisterModule(WifiModuleID);
unregisterModule(WtModuleID.WIFI);
});

67
src/views/navigation/NavBar.vue
View File

@ -1,25 +1,31 @@
<template>
<nav class="relative px-2 py-1 flex justify-between items-center border-b">
<nav class="relative px-2 py-0.5 sm:py-1 flex justify-between items-center border-b h-full">
<div class="flex">
<button @click.prevent="sideMenuOpen=true" class="flex items-center hover:text-blue-600 p-3">
<svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<button @click.prevent="sideMenuOpen=true" class="flex items-center hover:text-blue-600 pl-1 mx-4">
<svg class="block h-3 lg:h-4 lg:w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>导航侧栏</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</button>
<router-link to="/" class="text-3xl px-4 font-bold leading-none" title="走，去码头整点薯条">
<InlineSvg name="favicon" class="h-10"></InlineSvg>
<router-link to="/" class="text-3xl px-4 font-bold leading-none hidden items-center sm:flex" title="走，去码头整点薯条">
<InlineSvg name="favicon" class="h-5 lg:h-8"></InlineSvg>
</router-link>
<!-- <a class="text-3xl px-4 font-bold leading-none" href="/">-->
<!-- <InlineSvg name="home" class="h-10"></InlineSvg>-->
<!-- </a>-->
<!-- <router-link to="/" class="flex items-center text-sm text-blue-600 font-bold">主页</router-link>-->
<!-- <a class="flex items-center text-sm text-blue-600 font-bold" href="/">主页6</a>-->
<div class="flex pt-0.5 sm:pt-1 ml-4 text-sm items-center sm:hidden">
<router-link :to="route.fullPath">{{ route.meta.title }}</router-link>
</div>
</div>
<div class="flex">
<ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 md:flex md:mx-auto md:items-center md:w-auto md:space-x-6">
<ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 sm:flex sm:mx-auto sm:items-center sm:w-auto sm:space-x-6">
<li v-for="(item, index) in menuItems" :key="index" class="router-link">
<router-link :to="item.href" :class="item?.class">{{item.name}}</router-link>
</li>
@ -27,12 +33,22 @@
</div>
<!-- <a class="md:ml-auto md:mr-3"></a>-->
<div class="flex">
<el-button :type="wsColor" size="large" class="transition duration-1000">
<InlineSvg v-show="wsColor!=='success'" name="link-off" class="mr-2" width="20"></InlineSvg>
<InlineSvg v-show="wsColor==='success'" name="link" class="mr-2" width="20"></InlineSvg>
{{ wsState }}
</el-button>
<div class="flex h-full">
<div id="page-spec-slot" class="content-center h-full flex flex-row"></div>
<div class="lg:hidden">
<el-button :type="wsColor" size="small" class="transition duration-1000 min-h-full">
<InlineSvg v-show="wsColor!=='success'" name="link-off" class="mr-2" width="20"></InlineSvg>
<InlineSvg v-show="wsColor==='success'" name="link" class="mr-2" width="20"></InlineSvg>
<div class="text-xs sm:text-sm lg:text-base">{{ wsState }}</div>
</el-button>
</div>
<div class="hidden lg:flex">
<el-button :type="wsColor" size="large" class="transition duration-1000 min-h-full">
<InlineSvg v-show="wsColor!=='success'" name="link-off" class="mr-2" width="20"></InlineSvg>
<InlineSvg v-show="wsColor==='success'" name="link" class="mr-2" width="20"></InlineSvg>
<div class="text-base">{{ wsState }}</div>
</el-button>
</div>
</div>
</nav>
<div :class='["custom-drawer", {open: sideMenuOpen}]'>
@ -42,7 +58,7 @@
size=""
:direction="'ltr'"
>
<div id="testborder" :class="[sideMenuItemClass]" class="pr-6 flex text-gray-500" @click="sideMenuOpen=false">
<div :class="[sideMenuItemClass]" class="pr-6 flex text-gray-500" @click="sideMenuOpen=false">
<InlineSvg name="cross" class="h-6"></InlineSvg>
<div>
<p class="h-6 flex items-center">{{ $t("page.close") }}</p>
@ -59,9 +75,12 @@
<template #footer>
<div>
<p class="text-xs text-center text-gray-400">
<span>Copyright <a href="http://github.com/kerms">kerms</a> 2024</span>
</p>
<el-button @click="toggle">
<InlineSvg v-if="!isFullscreen" name="open-in-full" width="16px" fill="#000000"></InlineSvg>
<p v-if="!isFullscreen">全屏</p>
<InlineSvg v-if="isFullscreen" name="close-fullscreen" width="16px" fill="#000000"></InlineSvg>
<p v-if="isFullscreen">缩小</p>
</el-button>
</div>
</template>
</el-drawer>
@ -90,8 +109,12 @@ import {computed, ref} from "vue";
import {useWsStore} from "@/stores/websocket";
import {translate} from "@/locales";
import {ControlEvent} from "@/api";
import {useRoute} from "vue-router";
import { useFullscreen } from '@vueuse/core'
const wsStore = useWsStore();
const {isFullscreen, toggle} = useFullscreen();
const route = useRoute();
const sideMenuItemClass = "block p-4 text-sm font-semibold hover:bg-blue-50 hover:text-blue-600 rounded"
const sideMenuOpen = ref(false);
@ -127,7 +150,11 @@ const menuItems: Item[] = ([
/* {
name: translate("page.home"),
href: "/",
}, */{
}, */
{
name: translate("page.uart"),
href: "/uart",
}, {
name: translate("page.wifi"),
href: "/wifi",
}, {
@ -136,11 +163,7 @@ const menuItems: Item[] = ([
}, {
name: translate("page.feedback"),
href: "/feedback",
},/* {
name: translate("page.uart"),
href: "/uart",
class: "todo-menu-item",
},*/
},
]);
</script>