feat: 实现参数设置与设备连接
This commit is contained in:
43
src/lib/components/SettingPanel/DeviceSetting.svelte
Normal file
43
src/lib/components/SettingPanel/DeviceSetting.svelte
Normal file
@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from '$lib/components/ui/tabs';
|
||||
import SerialSetting from './components/SerialSetting.svelte';
|
||||
let activeTab = 'serial';
|
||||
</script>
|
||||
|
||||
<Tabs bind:value={activeTab} className="p-2">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="serial">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
><!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --><path
|
||||
fill="currentColor"
|
||||
d="M7 3h10v2h2v3h-3v6H8V8H5V5h2zm10 6h2v5h-2zm-6 6h2v7h-2zM5 9h2v5H5z"
|
||||
/></svg
|
||||
>
|
||||
串口</TabsTrigger
|
||||
>
|
||||
<TabsTrigger value="ble">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
><!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --><path
|
||||
fill="currentColor"
|
||||
d="M14.88 16.29L13 18.17v-3.76m0-8.58l1.88 1.88L13 9.58m4.71-1.87L12 2h-1v7.58L6.41 5L5 6.41L10.59 12L5 17.58L6.41 19L11 14.41V22h1l5.71-5.71l-4.3-4.29z"
|
||||
/></svg
|
||||
>
|
||||
蓝牙</TabsTrigger
|
||||
>
|
||||
</TabsList>
|
||||
<TabsContent value="serial"><SerialSetting /></TabsContent>
|
||||
<TabsContent value="ble">蓝牙设置</TabsContent>
|
||||
</Tabs>
|
||||
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectTrigger,
|
||||
} from '$lib/components/ui/select';
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
label: string;
|
||||
items: { label: string; value: string }[];
|
||||
value: string;
|
||||
placeholder: string;
|
||||
};
|
||||
|
||||
let { id, label, items, value = $bindable(), placeholder }: Props = $props();
|
||||
</script>
|
||||
|
||||
<label
|
||||
for={id}
|
||||
class="text-md leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
|
||||
<Select type="single" bind:value>
|
||||
<SelectTrigger
|
||||
{id}
|
||||
class="w-full outline-none focus:border-base-content/20 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
|
||||
>
|
||||
{items.find((i) => i.value === value)?.label ?? placeholder}
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent {items} />
|
||||
</Select>
|
||||
111
src/lib/components/SettingPanel/components/SerialSetting.svelte
Normal file
111
src/lib/components/SettingPanel/components/SerialSetting.svelte
Normal file
@ -0,0 +1,111 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
baudRateValue,
|
||||
baudRateItems,
|
||||
dataBitsValue,
|
||||
parityValue,
|
||||
stopBitsValue,
|
||||
} from '$lib/stores/serial.ui';
|
||||
import { serialOptions } from '$lib/stores/serial.options';
|
||||
import SerialParamSelect from './SerialParamSelect.svelte';
|
||||
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
|
||||
import { getSerialContext } from '$lib/serial/serial.store';
|
||||
|
||||
const serial = getSerialContext();
|
||||
const serialState = serial.state;
|
||||
|
||||
const dataBitsItems = [
|
||||
{ value: '7', label: '7' },
|
||||
{ value: '8', label: '8' },
|
||||
];
|
||||
|
||||
const parityItems = [
|
||||
{ value: 'none', label: 'None' },
|
||||
{ value: 'even', label: 'Even' },
|
||||
{ value: 'odd', label: 'Odd' },
|
||||
];
|
||||
|
||||
const stopBitsItems = [
|
||||
{ value: '1', label: '1' },
|
||||
{ value: '2', label: '2' },
|
||||
];
|
||||
|
||||
async function connect() {
|
||||
await serial.requestPort();
|
||||
await serial.openPort($serialOptions);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col p-4">
|
||||
<div class="flex flex-col gap-y-1.5 pb-4">
|
||||
<h3 class="leading-none font-semibold tracking-tight">串口设置</h3>
|
||||
<p class="text-neutral/50">请选择串口连接相关参数</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-3 pb-4">
|
||||
<SerialParamSelect
|
||||
id="baud-rate"
|
||||
label="波特率"
|
||||
items={$baudRateItems}
|
||||
bind:value={$baudRateValue}
|
||||
placeholder="选择波特率"
|
||||
/>
|
||||
|
||||
<SerialParamSelect
|
||||
id="data-bits"
|
||||
label="数据位"
|
||||
items={dataBitsItems}
|
||||
bind:value={$dataBitsValue}
|
||||
placeholder="选择数据位"
|
||||
/>
|
||||
|
||||
<SerialParamSelect
|
||||
id="parity"
|
||||
label="校验位"
|
||||
items={parityItems}
|
||||
bind:value={$parityValue}
|
||||
placeholder="选择校验位"
|
||||
/>
|
||||
|
||||
<SerialParamSelect
|
||||
id="stop-bits"
|
||||
label="停止位"
|
||||
items={stopBitsItems}
|
||||
bind:value={$stopBitsValue}
|
||||
placeholder="选择停止位"
|
||||
/>
|
||||
|
||||
<div class="flex grid-cols-1 flex-col gap-4">
|
||||
{#if $serialState.status === 'idle'}
|
||||
{#if $serialState.port !== null}
|
||||
<Button class="w-full" color="primary" onclick={connect}
|
||||
>重新选择设备</Button
|
||||
>
|
||||
<Button
|
||||
class="w-full"
|
||||
color="primary"
|
||||
onclick={() => {
|
||||
serial.reopenPort($serialOptions);
|
||||
}}>重新连接</Button
|
||||
>
|
||||
{:else}
|
||||
<Button class="w-full" color="primary" onclick={connect}
|
||||
>选择串口设备</Button
|
||||
>
|
||||
{/if}
|
||||
{:else if $serialState.status === 'requesting' || $serialState.status === 'connecting'}
|
||||
<Button class="w-full" disabled>连接中...</Button>
|
||||
{:else if $serialState.status === 'connected'}
|
||||
<Button class="w-full" color="error" onclick={serial.closePort}
|
||||
>断开连接</Button
|
||||
>
|
||||
{:else}
|
||||
<Button class="w-full" color="error" onclick={connect}
|
||||
>连接失败，点击重试</Button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user