Skip to content

feat(ISerialService): add ISerialService service #4487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 35 commits into from
Oct 19, 2024
Merged

feat(ISerialService): add ISerialService service #4487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
669d1fd
feat: 增加串口
ArgoZhang Oct 18, 2024
f9c1cd5
chore: 增加串口通讯服务
ArgoZhang Oct 18, 2024
dd411eb
doc: 更新示例
ArgoZhang Oct 18, 2024
faebdb3
refactor: 更新 Option 简化逻辑
ArgoZhang Oct 18, 2024
214ccf6
doc: 更新示例
ArgoZhang Oct 18, 2024
d0700d6
feat: 更新接口定义
ArgoZhang Oct 18, 2024
9af3a35
doc: 更新按钮状态
ArgoZhang Oct 18, 2024
47a8f8f
feat: 实现写入逻辑
ArgoZhang Oct 18, 2024
3c91d9e
doc: 更新示例文档
ArgoZhang Oct 18, 2024
a1fc6fb
refactor: 重构接收数据方法逻辑
ArgoZhang Oct 18, 2024
14d0db7
doc: 更新示例
ArgoZhang Oct 18, 2024
d42a8af
refactor: 调整写入方法参数
ArgoZhang Oct 18, 2024
f918c92
doc: 更新示例
ArgoZhang Oct 18, 2024
e5f6d55
style: 微调 Console 组件样式
ArgoZhang Oct 18, 2024
cdded7e
feat: 更新关闭逻辑
ArgoZhang Oct 18, 2024
07bca17
doc: 更新示例
ArgoZhang Oct 18, 2024
ccb6c81
doc: 更新示例
ArgoZhang Oct 19, 2024
528e9bc
refactor: 移除 console 代码
ArgoZhang Oct 19, 2024
c498cd6
doc: 实现循环发送逻辑
ArgoZhang Oct 19, 2024
0411996
doc: 分类更改为服务
ArgoZhang Oct 19, 2024
5927642
doc: 完善发送数据逻辑
ArgoZhang Oct 19, 2024
0e34f12
feat: 继承 IAsyncDispose 接口
ArgoZhang Oct 19, 2024
a720030
refactor: 代码优化
ArgoZhang Oct 19, 2024
48ccb39
refactor: 更正关闭串口逻辑
ArgoZhang Oct 19, 2024
d9bddcb
refactor: 申请串口增加保护逻辑
ArgoZhang Oct 19, 2024
5c89f41
doc: 更新文档
ArgoZhang Oct 19, 2024
5060aed
refactor: 更新文档
ArgoZhang Oct 19, 2024
b902f36
doc: 更新文字
ArgoZhang Oct 19, 2024
a3fbb1c
doc: 增加新组件标志
ArgoZhang Oct 19, 2024
410f8b8
chore: bump version 8.10.4-beta03
ArgoZhang Oct 19, 2024
8d78873
test: 更新单元测试
ArgoZhang Oct 19, 2024
c80b64c
refactor: 重命名类
ArgoZhang Oct 19, 2024
8eed2b8
doc: 更新示例
ArgoZhang Oct 19, 2024
d4654b0
test: 更新单元测试
ArgoZhang Oct 19, 2024
d99bdc2
test: 更新单元测试
ArgoZhang Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 111 additions & 121 deletions src/BootstrapBlazor.Server/Components/Samples/WebSerials.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,147 +7,137 @@

<p>@((MarkupString)Localizer["WebSerialDescription"].Value)</p>

<PackageTips Name="BootstrapBlazor.WebAPI" />
<Pre>[Inject, NotNull]
private ISerialService? SerialService { get; set; }</Pre>

<Tips>
<ul class="ul-demo">
<li>@((MarkupString)Localizer["WebSerialTipsLi1"].Value)</li>
<li>@((MarkupString)Localizer["WebSerialTipsLi2"].Value)</li>
</ul>
<div>@((MarkupString)Localizer["WebSerialTipsTitle"].Value)</div>
</Tips>

<DemoBlock Title="@Localizer["WebSerialNormalTitle"]" Introduction="@Localizer["WebSerialNormalIntro"]" Name="WebSerialNormal">
<GroupBox Title="串口设置">
<div class="row g-3">
<div class="col-12 col-sm-6 col-md-4">
<Select Color="Color.Primary" Items="BaudRateList" @bind-Value="@SelectedBaudRate" ShowLabel="true" />
<div class="row form-inline g-3">
<div class="col-12 col-sm-6">
<Select Items="_baudRateList" @bind-Value="@_serialOptions.BaudRate" ShowLabel="true" DisplayText="@Localizer["BaudRateText"]" />
</div>
<div class="col-12 col-sm-6 col-md-4">
<BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.DataBits" ShowLabel="true" />
<div class="col-12 col-sm-6">
<Select Items="_dataBits" @bind-Value="@_serialOptions.DataBits" ShowLabel="true" DisplayText="@Localizer["DataBitsText"]" />
</div>
<div class="col-12 col-sm-6 col-md-4">
<BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.StopBits" ShowLabel="true" />
<div class="col-12 col-sm-6">
<Select Items="_stopBits" @bind-Value="@_serialOptions.StopBits" ShowLabel="true" DisplayText="@Localizer["StopBitsText"]" />
</div>
<div class="col-12 col-sm-6 col-md-4">
<Select Color="Color.Primary" @bind-Value="@options.FlowControlType" ShowLabel="true" />
<div class="col-12 col-sm-6">
<Select @bind-Value="@_serialOptions.ParityType" ShowLabel="true" DisplayText="@Localizer["ParityTypeText"]" />
</div>
<div class="col-12 col-sm-6 col-md-4">
<Select Color="Color.Primary" @bind-Value="@options.ParityType" ShowLabel="true" />
<div class="col-12 col-sm-6">
<Select Items="_bufferSizes" @bind-Value="@_serialOptions.BufferSize" ShowLabel="true" DisplayText="@Localizer["BufferSizeText"]" />
</div>
</div>
</GroupBox>
<GroupBox Title="其他功能" class="mt-3">
<div class="row g-3">
<div class="col-12 col-sm-6 col-md-4">
<BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.BufferSize" ShowLabel="true" />
<div class="col-12 col-sm-6">
<Select @bind-Value="@_serialOptions.FlowControlType" ShowLabel="true" DisplayText="@Localizer["FlowControlTypeText"]" />
</div>
<div class="col-12">
<Button OnClick="GetPort" Text="@Localizer["RequestPortText"]"></Button>
<Button IsDisabled="CheckOpen" OnClick="OpenPort" Text="@Localizer["OpenPortText"]" class="ms-2"></Button>
<Button IsDisabled="CheckClose" OnClick="ClosePort" Text="@Localizer["ClosePortText"]" class="ms-2"></Button>
</div>
<div class="col-12">
<Console Items="@_messages" Height="126" IsAutoScroll="true" HeaderText="@Localizer["ReadDataText"]" />
</div>
<div class="col-12">
<div>@Localizer["WriteDataText"]</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<Select Color="Color.Primary" @bind-Value="@options.AutoFrameBreakType" ShowLabel="true" />
<div class="col-12">
<Textarea IsDisabled="CheckClose" @bind-Value="@_sendData" rows="3"></Textarea>
</div>
<div class="col-12 col-sm-6 col-md-4">
<BootstrapInput Color="Color.Primary" @bind-Value="@options.FrameBreakChar" ShowLabel="true" />
<div class="col-12 col-sm-6">
<Checkbox @bind-Value="_appendCRLF" ShowAfterLabel="true" DisplayText="@Localizer["CRLFText"]"></Checkbox>
<Checkbox @bind-Value="_isHEX" ShowAfterLabel="true" DisplayText="@Localizer["HEXText"]" class="ms-3"></Checkbox>
</div>
<div class="col-12 col-sm-6 col-md-4">
<Switch ShowLabel="true" @bind-Value="@options.AutoConnect" />
<div class="col-12 col-sm-6">
<Checkbox @bind-Value="_isLoop" ShowAfterLabel="true" DisplayText="@Localizer["LoopSendText"]" class="me-3"></Checkbox>
<BootstrapInputGroup>
<BootstrapInputGroupLabel DisplayText="@Localizer["LoopIntervalText"]"></BootstrapInputGroupLabel>
<BootstrapInput @bind-Value="_sendInterval"></BootstrapInput>
</BootstrapInputGroup>
</div>
<div class="col-12 col-sm-6 col-md-4">
<Switch ShowLabel="true" @bind-Value="@options.OutputInHex" />
<div class="col-12">
<Button IsDisabled="CheckClose" OnClick="Write" Text="@Localizer["WriteButtonText"]"></Button>
</div>
<div class="col-12 col-sm-6 col-md-4">
<Switch ShowLabel="true" @bind-Value="@options.InputWithHex" />
<div class="col-12 col-sm-6">
<Checkbox Value="_ring" ShowAfterLabel="true" DisplayText="RING"></Checkbox>
<Checkbox Value="_dsr" ShowAfterLabel="true" DisplayText="DSR" class="ms-3"></Checkbox>
</div>
<div class="col-12 col-sm-6 col-md-4">
<Switch ShowLabel="true" @bind-Value="@options.AutoGetSignals" />
<div class="col-12 col-sm-6">
<Checkbox Value="_cts" ShowAfterLabel="true" DisplayText="CTS"></Checkbox>
<Checkbox Value="_dcd" ShowAfterLabel="true" DisplayText="DCD" class="ms-3"></Checkbox>
</div>
<div class="col-12">
<Button IsDisabled="CheckClose" OnClick="GetSignals" Text="@Localizer["GetSignalsButtonText"]"></Button>
</div>
<div class="col-12 col-sm-6">
<Display Value="@_usbInfo?.UsbVendorId" ShowLabel="true" DisplayText="VendorId"></Display>
</div>
<div class="col-12 col-sm-6">
<Display Value="@_usbInfo?.UsbProductId" ShowLabel="true" DisplayText="ProductId"></Display>
</div>
<div class="col-12">
<Button IsDisabled="CheckClose" OnClick="GetInfo" Text="@Localizer["GetInfoButtonText"]"></Button>
</div>
</div>
</GroupBox>
</DemoBlock>

<GroupBox Title="操作" class="mt-3">
<div class="mt-3">
@if (Flag)
{
<WebSerial @ref="WebSerial"
OnConnect="@OnConnect"
OnReceive="@OnReceive"
OnSignals="@OnSignals"
OnLog="@OnLog"
OnError="@OnError"
Options="@options" Debug
ShowUI="false" />

<div @ref="WebSerial.Element">
<div class="row m-3">
<div class="col-12">
<BootstrapInputGroup>
<Button data-action="butConnect" Text="@options.ConnectBtnTitle" />
@if (!IsConnected)
{
<Button Text="关闭" OnClick="OnApply" Icon="fa-fw fa-solid fa-close" />
}
else
{
<Button Text="@options.GetSignalsBtnTitle" OnClick="WebSerial.GetSignals" />
}
</BootstrapInputGroup>
</div>
</div>
<div class="row m-3">
<div class="col-6">
<textarea class="form-control" type="text" data-action="fname" style="visibility:hidden;" />
</div>
<div class="col-6">
<Button data-action='butwrite' style="visibility:hidden;" Text="@options.WriteBtnTitle" />
</div>
</div>
@if (WebSerial != null && IsConnected)
{
<div class="row m-3">
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
<Switch @bind-Value="WebSerial.DTR" ShowLabel="true" OnValueChanged="WebSerial.SetSignalDTR" />
</div>
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
<Switch @bind-Value="WebSerial.RTS" ShowLabel="true" OnValueChanged="WebSerial.SetSignalRTS" />
</div>
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
<Switch @bind-Value="WebSerial.Break" ShowLabel="true" OnValueChanged="WebSerial.SetSignalBreak" />
</div>
</div>
<div class="row m-3">
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
RING
<Light Color="@(Signals.RING?Color.Success:Color.None)"></Light>
</div>
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
DSR
<Light Color="@(Signals.DSR?Color.Success:Color.None)"></Light>
</div>
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
CTS
<Light Color="@(Signals.CTS?Color.Success:Color.None)"></Light>
</div>
<div class="col-12 col-sm-4 col-md-3 col-lg-auto">
DCD
<Light Color="@(Signals.DCD?Color.Success:Color.None)"></Light>
</div>
</div>
}
</div>
<pre data-action="log"></pre>
}
else
{
<div class="col-6">
<Button Text="应用" OnClick="OnApply" Icon="fa-fw fa-solid fa-play" />
</div>
}
</div>
</GroupBox>
<p class="code-label mt-3">1. 服务注入</p>

<section ignore>
<p>注意:本例子改变设置要点关闭再重新应用</p>
<pre style="overflow-y:scroll;max-height:500px;">@_message</pre>
<pre style="color:green">@_statusMessage</pre>
<pre style="color:red">@_errorMessage</pre>
<hr />
<a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/Receive_DSP.ino">附件: Arduino源码示例</a>
</section>
</DemoBlock>
<Pre>[Inject]
[NotNull]
private ISerialService? SerialService { get; set; }</Pre>

<p class="code-label">2. 申请串口权限</p>
<p>调用 <code>SerialService</code> 实例方法 <code>GetPort</code> 即可，通过 <code>IsSupport</code> 进行浏览器是否支持判断</p>

<Pre>_serialPort = await SerialService.GetPort();
if (SerialService.IsSupport == false)
{
await ToastService.Error(Localizer["NotSupportSerialTitle"], Localizer["NotSupportSerialContent"]);
}</Pre>

<p class="code-label">3. 打开串口</p>

<ul class="ul-demo">
<li>如果需要读取数据，请先设置 <code>ISerialPort</code> 实例 <code>DataReceive</code> 参数</li>
<li>调用 <code>ISerialPort</code> 实例方法 <code>Open</code> 打开串口，可通过 <code>SerialPortOptions</code> 参数设置 <code>波特率</code> 等信息</li>
</ul>

<Pre>private async Task OpenPort()
{
if (_serialPort != null)
{
_serialPort.DataReceive = async data =>
{
_messages.Add(new ConsoleMessageItem()
{
IsHtml = true,
Message = $"{DateTime.Now}: --> Text: {Encoding.ASCII.GetString(data)} HEX: {Convert.ToHexString(data)}"
});
await InvokeAsync(StateHasChanged);
};
await _serialPort.Open(_serialOptions);
}
}</Pre>

<AttributeTable Items="@GetAttributes()" />
<p class="code-label">4. 关闭串口</p>

<AttributeTable Title="@Localizer["WebSerialOptionsText"]" Items="@GetWebSerialOptionsAttributes()" />
<p>调用 <code>ISerialPort</code> 实例方法 <code>Close</code> 关闭串口，请注意路由切换时，请调用其 <code>DisposeAsync</code> 方法释放资源</p>

<Pre>private async Task ClosePort()
{
if (_serialPort != null)
{
await _serialPort.Close();
}
}</Pre>
Loading