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

feat(wifi) configurable AP/STA mode

This commit is contained in:
kerms 2024-07-12 14:33:21 +08:00
parent 80bbaf8f54
commit 794c02b94c
2 changed files with 205 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/api/apiWifi.ts
View File

@ -2,11 +2,36 @@ import {type ApiJsonMsg, sendJsonMsg, WtModuleID} from '@/api'
export enum WifiCmd {
UNKNOWN = 0,
WIFI_API_JSON_STA_GET_AP_INFO,
WIFI_API_JSON_CONNECT,
WIFI_API_JSON_GET_SCAN,
WIFI_API_JSON_DISCONNECT,
WIFI_API_JSON_AP_GET_INFO,
WIFI_API_JSON_STA_GET_AP_INFO = 1,
WIFI_API_JSON_CONNECT = 2,
WIFI_API_JSON_GET_SCAN = 3,
WIFI_API_JSON_DISCONNECT = 4,
WIFI_API_JSON_AP_GET_INFO = 5,
WIFI_API_JSON_GET_MODE = 6,
WIFI_API_JSON_SET_MODE = 7,
}
export enum WifiMode {
/* permanent */
WIFI_AP_AUTO_STA_ON = 0,
WIFI_AP_STA_OFF = 4, /* 100 */
WIFI_AP_OFF_STA_ON = 5, /* 101 */
WIFI_AP_ON_STA_OFF = 6, /* 110 */
WIFI_AP_STA_ON = 7, /* 111 */
/* temporary */
WIFI_AP_STOP = 8,
WIFI_AP_START = 9,
WIFI_STA_STOP = 10,
WIFI_STA_START = 11,
}
export enum WifiStatus {
WIFI_MODE_NULL = 0, /**< null mode */
WIFI_MODE_STA, /**< WiFi station mode */
WIFI_MODE_AP, /**< WiFi soft-AP mode */
WIFI_MODE_APSTA, /**< WiFi station + soft-AP mode */
}
interface WifiMsgOut extends ApiJsonMsg {
@ -61,3 +86,40 @@ export interface WifiInfo extends ApiJsonMsg {
export interface WifiList extends ApiJsonMsg {
scan_list: Array<WifiInfo>;
}
export interface IWifiMode extends ApiJsonMsg {
mode?: WifiMode;
status?: WifiStatus;
ap_on_delay?: number;
ap_off_delay?: number;
err?: string;
}
export function wifi_set_mode(req_mode: WifiMode, ap_on_delay = -1, ap_off_delay = -1) {
let msg: IWifiMode;
if (req_mode === WifiMode.WIFI_AP_AUTO_STA_ON && ap_on_delay !== -1 && ap_off_delay !== -1) {
msg = {
module: WtModuleID.WIFI,
cmd: WifiCmd.WIFI_API_JSON_SET_MODE,
mode: req_mode,
ap_on_delay: ap_on_delay,
ap_off_delay: ap_off_delay,
};
} else {
msg = {
module: WtModuleID.WIFI,
cmd: WifiCmd.WIFI_API_JSON_SET_MODE,
mode: req_mode,
};
}
sendJsonMsg(msg);
}
export function wifi_get_mode() {
const msg: IWifiMode = {
module: WtModuleID.WIFI,
cmd: WifiCmd.WIFI_API_JSON_GET_MODE,
};
sendJsonMsg(msg);
}

143
src/views/Wifi.vue
View File

@ -54,15 +54,55 @@
</div>
</el-form>
<el-divider></el-divider>
<div class="flex items-center">
<h5 class="text-md font-bold text-gray-800 w-24">Wi-Fi模式</h5>
<div class="flex shrink-0">
<el-tooltip effect="light">
<template #content>
<p>热点+终端模式并存会影响稳定性。且保持热点开启会增加功耗。</p>
<p>
<el-text size="small">智能模式：</el-text>
成功连接Wi-Fi，10秒后自动关闭热点；断开连接，5秒后自动打开热点
</p>
<p>
<el-text size="small">热点+终端共存模式：</el-text>
方便使用，但是影响稳定性
</p>
<p>
<el-text size="small">单热点模式缺点：</el-text>
无网络
</p>
</template>
<InlineSvg name="help" class="w-3.5 h-3.5 text-gray-500 cursor-help"></InlineSvg>
</el-tooltip>
</div>
<el-select v-model="wifiMode" placeholder="Select" :disabled="wsStore.state != ControlEvent.CONNECTED">
<el-option
v-for="item in wifiModeOptions"
:key="item.key"
:value="item.key"
:label="item.label"
/>
</el-select>
<el-button type="primary" @click="wifiChangeMode" :loading="wifiMode_loading">更改</el-button>
</div>
<el-divider></el-divider>
<el-descriptions
title="Wi-Fi终端信息"
title="Wi-Fi终端(STA)信息(路由器/手机热点等)"
:column="1"
border
class="description-style"
>
<template #extra>
<el-switch v-model="wifiSta_On" :disabled="wsStore.state != ControlEvent.CONNECTED || !wifiAp_On"
active-text="已启用" inactive-text="未启用" :loading="wifiMode_loading"
:before-change="()=>beforeWifiModeChange('STA')"
/>
</template>
<el-descriptions-item label="asd">
<template #label>
<div>
@ -92,7 +132,7 @@
<el-descriptions-item span="4">
<template #label>
<div>
IP
IP(内网地址)
</div>
</template>
{{ wifiStaApInfo.ip }}
@ -127,11 +167,17 @@
<el-divider></el-divider>
<el-descriptions
title="Wi-Fi热点信息"
title="Wi-Fi热点(AP)信息(调试器自发热点)"
:column="1"
border
class="description-style"
>
<template #extra>
<el-switch v-model="wifiAp_On" :disabled="wsStore.state != ControlEvent.CONNECTED || !wifiSta_On"
active-text="热点已开启" inactive-text="热点已关闭" :loading="wifiMode_loading"
:before-change="()=>beforeWifiModeChange('AP')"
/>
</template>
<el-descriptions-item span="6">
<template #label>
<div>
@ -184,7 +230,6 @@
{{ wifiApInfo.netmask }}
</el-descriptions-item>
</el-descriptions>
<el-divider></el-divider>
</div>
@ -193,21 +238,28 @@
<script setup lang="ts">
import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
import {
wifi_sta_get_ap_info,
type IWifiMode,
wifi_ap_get_info,
wifi_connect_to,
wifi_get_mode,
wifi_get_scan_list,
wifi_set_mode,
wifi_sta_get_ap_info,
WifiCmd,
type WifiInfo,
type WifiList,
wifi_ap_get_info, wifi_connect_to
WifiMode,
WifiStatus
} from "@/api/apiWifi";
import type {FormInstance} from "element-plus";
import InlineSvg from "@/components/InlineSvg.vue";
import type {ApiJsonMsg, ControlMsg, ServerMsg} from "@/api";
import type {ApiJsonMsg, ControlMsg} 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";
import {isDevMode} from "@/composables/buildMode";
const formRef = ref<FormInstance>()
let wifiListPlaceholder = ref("我的WIFI")
@ -216,6 +268,29 @@ let ssidValidateForm = reactive({
password: "",
})
let wifiSta_On = ref(false);
const wifiMode_loading = ref(false)
let wifiAp_On = ref(false);
let wifiMode = ref(-1);
let wifiModeOptions = [
{
label: "智能热点+常开终端（AP+STA）",
key: WifiMode.WIFI_AP_AUTO_STA_ON,
}, {
label: "仅开启热点（AP）",
key: WifiMode.WIFI_AP_ON_STA_OFF,
}, {
label: "[不推荐] 常开热点+常开终端（AP+STA）",
key: WifiMode.WIFI_AP_STA_ON,
}, /* {
value: "仅开启终端（STA）",
key: 2,
},*/
]
let wsStore = useWsStore();
@ -295,6 +370,42 @@ const onClientMsg = (msg: ApiJsonMsg) => {
Object.assign(wifiApInfo, info);
break;
}
case WifiCmd.WIFI_API_JSON_SET_MODE:
wifi_get_mode();
/* falls through */
case WifiCmd.WIFI_API_JSON_GET_MODE: {
const modeInfo = msg as IWifiMode;
wifiMode_loading.value = false;
if (modeInfo.err !== undefined) {
globalNotifyRightSide("设置失败", "error");
return;
}
if (modeInfo.status !== undefined) {
wifiAp_On.value = modeInfo.status === WifiStatus.WIFI_MODE_AP || modeInfo.status === WifiStatus.WIFI_MODE_APSTA;
wifiSta_On.value = modeInfo.status === WifiStatus.WIFI_MODE_STA || modeInfo.status === WifiStatus.WIFI_MODE_APSTA;
}
if (modeInfo.mode !== undefined) {
if (modeInfo.mode < WifiMode.WIFI_AP_STOP) {
wifiMode.value = modeInfo.mode;
} else if (modeInfo.mode === WifiMode.WIFI_AP_START) {
wifiAp_On.value = true;
} else if (modeInfo.mode === WifiMode.WIFI_AP_STOP) {
wifiAp_On.value = false;
} else if (modeInfo.mode === WifiMode.WIFI_STA_START) {
wifiSta_On.value = true;
} else if (modeInfo.mode === WifiMode.WIFI_STA_STOP) {
wifiSta_On.value = false;
}
}
console.log("@@@", wifiAp_On.value);
break;
}
default:
if (isDevMode()) {
console.log(msg);
}
break;
}
};
@ -311,6 +422,7 @@ const onClientCtrl = (msg: ControlMsg) => {
if (msg.data === ControlEvent.CONNECTED) {
wifi_sta_get_ap_info();
wifi_ap_get_info();
wifi_get_mode();
}
};
@ -334,6 +446,22 @@ function onConnectClick() {
}
}
function beforeWifiModeChange(ap_sta: "AP" | "STA" = "AP") {
if (ap_sta === "AP") {
wifiMode_loading.value = true;
wifi_set_mode(wifiAp_On.value ? WifiMode.WIFI_AP_STOP : WifiMode.WIFI_AP_START);
} else {
wifiMode_loading.value = true;
wifi_set_mode(wifiSta_On.value ? WifiMode.WIFI_STA_STOP : WifiMode.WIFI_STA_START);
}
return false;
}
function wifiChangeMode() {
wifiMode_loading.value = true;
wifi_set_mode(wifiMode.value);
}
onMounted(() => {
registerModule(WtModuleID.WIFI, {
ctrlCallback: onClientCtrl,
@ -342,6 +470,7 @@ onMounted(() => {
});
wifi_sta_get_ap_info();
wifi_ap_get_info();
wifi_get_mode();
});
onUnmounted(() => {