feat(espFlasher) add console
This commit is contained in:
kerms
parent
3e78a8560a
commit
9f14031583
|
|
@ -88,7 +88,7 @@ const programBaudOption = [
|
||||||
]
|
]
|
||||||
|
|
||||||
const connectedBaud = ref("")
|
const connectedBaud = ref("")
|
||||||
const isConnected = ref(false)
|
const programConnected = ref(false)
|
||||||
const serialSupported = ref(false);
|
const serialSupported = ref(false);
|
||||||
|
|
||||||
const imageOption = [
|
const imageOption = [
|
||||||
|
|
@ -141,7 +141,7 @@ async function programConnect() {
|
||||||
|
|
||||||
chip.value = await esploader.main();
|
chip.value = await esploader.main();
|
||||||
connectedBaud.value = programBaud.value;
|
connectedBaud.value = programBaud.value;
|
||||||
isConnected.value = true;
|
programConnected.value = true;
|
||||||
|
|
||||||
chip_type.value = esploader.chip.CHIP_NAME;
|
chip_type.value = esploader.chip.CHIP_NAME;
|
||||||
|
|
||||||
|
|
@ -349,7 +349,7 @@ async function programDisconnect() {
|
||||||
await transport.waitForUnlock(1500);
|
await transport.waitForUnlock(1500);
|
||||||
}
|
}
|
||||||
|
|
||||||
isConnected.value = false;
|
programConnected.value = false;
|
||||||
chip.value = "";
|
chip.value = "";
|
||||||
chip_type.value = "";
|
chip_type.value = "";
|
||||||
connectedBaud.value = "";
|
connectedBaud.value = "";
|
||||||
|
|
@ -365,6 +365,7 @@ async function resetClick() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* used for file upload */
|
||||||
async function handleFileChange(e: Event) {
|
async function handleFileChange(e: Event) {
|
||||||
const target = e.target as HTMLInputElement
|
const target = e.target as HTMLInputElement
|
||||||
const files = target.files
|
const files = target.files
|
||||||
|
|
@ -399,6 +400,65 @@ const customColors = [
|
||||||
{ color: '#019d30', percentage: 100 },
|
{ color: '#019d30', percentage: 100 },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
/* CONSOLE */
|
||||||
|
const consoleStarted = ref(false);
|
||||||
|
|
||||||
|
const consoleBaud = ref("115200");
|
||||||
|
const consoleBaudOption = [
|
||||||
|
{text: '115200', value: '115200'},
|
||||||
|
{text: '230400', value: '230400'},
|
||||||
|
{text: '460800', value: '460800'},
|
||||||
|
{text: '921600', value: '921600'},
|
||||||
|
]
|
||||||
|
const consoleBaudConnected = ref("");
|
||||||
|
|
||||||
|
async function consoleStartButton() {
|
||||||
|
if (chip.value === "") {
|
||||||
|
let port = await navigator.serial.requestPort({});
|
||||||
|
transport = new Transport(port, true);
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!transport) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
terminal.reset();
|
||||||
|
|
||||||
|
consoleBaudConnected.value = consoleBaud.value;
|
||||||
|
await transport.connect(parseInt(consoleBaudConnected.value));
|
||||||
|
consoleStarted.value = true;
|
||||||
|
|
||||||
|
while (consoleStarted.value) {
|
||||||
|
const val = await transport.rawRead();
|
||||||
|
if (typeof val !== "undefined") {
|
||||||
|
terminal.write(val);
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log("quitting console");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function consoleStopButton() {
|
||||||
|
consoleStarted.value = false;
|
||||||
|
if (transport) {
|
||||||
|
await transport.disconnect();
|
||||||
|
await transport.waitForUnlock(1500);
|
||||||
|
}
|
||||||
|
terminal.reset();
|
||||||
|
cleanUp();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reset() {
|
||||||
|
if (transport) {
|
||||||
|
await transport.setDTR(false);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||||
|
await transport.setDTR(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -406,80 +466,111 @@ const customColors = [
|
||||||
<h1>在线ESP32烧录<span v-if="serialSupported">（免环境配置，免装软件）</span></h1>
|
<h1>在线ESP32烧录<span v-if="serialSupported">（免环境配置，免装软件）</span></h1>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
<div v-show="serialSupported">
|
<div v-show="serialSupported">
|
||||||
<el-alert type="info" class="mb-4" show-icon>
|
<el-tabs>
|
||||||
若无法连接，请先让ESP32进入下载模式，再尝试连接（按住BOOT，按一下RESET，松开BOOT）
|
<el-tab-pane label="烧录" :disabled="consoleStarted">
|
||||||
</el-alert>
|
<el-alert type="info" class="mb-4" show-icon>
|
||||||
<el-form label-width="auto">
|
若无法连接，请先让ESP32进入下载模式，再尝试连接（按住BOOT，按一下RESET，松开BOOT）
|
||||||
<el-form-item label="固件">
|
</el-alert>
|
||||||
<client-only>
|
<el-form label-width="auto">
|
||||||
<el-select
|
<el-form-item label="固件">
|
||||||
v-model="imageSelect"
|
<client-only>
|
||||||
placeholder="选择固件"
|
<el-select
|
||||||
>
|
v-model="imageSelect"
|
||||||
<el-option
|
placeholder="选择固件"
|
||||||
v-for="item in imageOption"
|
>
|
||||||
:key="item.value"
|
<el-option
|
||||||
:label="item.value"
|
v-for="item in imageOption"
|
||||||
:value="item"
|
:key="item.value"
|
||||||
/>
|
:label="item.value"
|
||||||
</el-select>
|
:value="item"
|
||||||
</client-only>
|
/>
|
||||||
</el-form-item>
|
</el-select>
|
||||||
<el-form-item label="波特率">
|
</client-only>
|
||||||
<client-only>
|
</el-form-item>
|
||||||
<el-select
|
<el-form-item label="波特率">
|
||||||
v-model="programBaud"
|
<client-only>
|
||||||
placeholder="选择波特率"
|
<el-select
|
||||||
>
|
v-model="programBaud"
|
||||||
<el-option
|
placeholder="选择波特率"
|
||||||
v-for="item in programBaudOption"
|
>
|
||||||
:key="item.value"
|
<el-option
|
||||||
:label="item.value"
|
v-for="item in programBaudOption"
|
||||||
:value="item.value"
|
:key="item.value"
|
||||||
/>
|
:label="item.value"
|
||||||
</el-select>
|
:value="item.value"
|
||||||
</client-only>
|
/>
|
||||||
</el-form-item>
|
</el-select>
|
||||||
<el-form-item label="操作">
|
</client-only>
|
||||||
<el-button v-if="!isConnected" @click="programConnect" type="primary">连接</el-button>
|
</el-form-item>
|
||||||
<el-button v-show="isConnected" @click="programFlash" type="primary">烧录</el-button>
|
<el-form-item label="操作">
|
||||||
<el-button v-show="isConnected" @click="programErase" type="danger">全片擦除</el-button>
|
<el-button v-if="!programConnected" @click="programConnect" type="primary">连接</el-button>
|
||||||
<el-button v-show="isConnected" @click="programDisconnect" type="info">断开连接</el-button>
|
<el-button v-show="programConnected" @click="programFlash" type="primary">烧录</el-button>
|
||||||
</el-form-item>
|
<el-button v-show="programConnected" @click="programErase" type="danger">全片擦除</el-button>
|
||||||
<el-form-item label="已连接" v-show="isConnected">
|
<el-button v-show="programConnected" @click="programDisconnect" type="info">断开连接</el-button>
|
||||||
<div class="flex gap-2">
|
</el-form-item>
|
||||||
<el-tag type="primary">芯片型号 {{ chip }}</el-tag>
|
<el-form-item label="已连接" v-show="programConnected">
|
||||||
<el-tag type="success">波特率 {{ connectedBaud }}</el-tag>
|
<div class="flex gap-2">
|
||||||
<!-- <el-tag type="info">Tag 3</el-tag>-->
|
<el-tag type="primary">芯片型号 {{ chip }}</el-tag>
|
||||||
<!-- <el-tag type="warning">Tag 4</el-tag>-->
|
<el-tag type="success">波特率 {{ connectedBaud }}</el-tag>
|
||||||
<!-- <el-tag type="danger">Tag 5</el-tag>-->
|
<!-- <el-tag type="info">Tag 3</el-tag>-->
|
||||||
</div>
|
<!-- <el-tag type="warning">Tag 4</el-tag>-->
|
||||||
</el-form-item>
|
<!-- <el-tag type="danger">Tag 5</el-tag>-->
|
||||||
<el-form-item label="状态" class="border" v-if="binaryLoadStatus.status">
|
</div>
|
||||||
<div class="flex flex-row w-full">
|
</el-form-item>
|
||||||
<el-text class="w-32">{{ binaryLoadStatus.status }}</el-text>
|
<el-form-item label="状态" class="border" v-if="binaryLoadStatus.status">
|
||||||
<el-progress :percentage="binaryLoadStatus.progress" :color="customColors" class="w-full"/>
|
<div class="flex flex-row w-full">
|
||||||
</div>
|
<el-text class="w-32">{{ binaryLoadStatus.status }}</el-text>
|
||||||
</el-form-item>
|
<el-progress :percentage="binaryLoadStatus.progress" :color="customColors" class="w-full"/>
|
||||||
</el-form>
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="查看日志" :disabled="programConnected">
|
||||||
|
<el-form label-width="auto">
|
||||||
|
<el-form-item label="波特率">
|
||||||
|
<client-only>
|
||||||
|
<el-select
|
||||||
|
v-model="consoleBaud"
|
||||||
|
placeholder="选择波特率"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in consoleBaudOption"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</client-only>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="操作">
|
||||||
|
<el-button v-if="!consoleStarted" @click="consoleStartButton" type="primary">连接</el-button>
|
||||||
|
<el-button v-show="consoleStarted" @click="reset" type="info">重启</el-button>
|
||||||
|
<el-button v-show="consoleStarted" @click="consoleStopButton" type="danger">断开连接</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" v-show="consoleStarted">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<el-tag type="success">已连接</el-tag>
|
||||||
|
<el-tag type="primary">波特率 {{ consoleBaudConnected }}</el-tag>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
<!-- <input type="file" @change="handleFileChange"/>-->
|
<!-- <input type="file" @change="handleFileChange"/>-->
|
||||||
|
|
||||||
<!-- <div>-->
|
|
||||||
<!-- <h1>Console</h1>-->
|
|
||||||
<!-- <p>Connected to device: {{chip}}</p>-->
|
|
||||||
<!-- <button @click="consoleConnectBtn">stop</button>-->
|
|
||||||
<!-- <button @click="consoleResetBtn">reset</button>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<div>
|
<div>
|
||||||
<div id="terminal-container" ref="terminalContainer" class="terminal"></div>
|
<div id="terminal-container" ref="terminalContainer" class="terminal"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="!serialSupported">
|
<div v-if="!serialSupported">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<a href="/"><el-button type="primary">返回至首页</el-button></a>
|
<a href="/"><el-button type="primary">返回至首页</el-button></a>
|
||||||
</div>
|
</div>
|
||||||
<h2>{{notSupportedMsg}}</h2>
|
<h2>{{notSupportedMsg}}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue