
Topology HMI
Rendering of human-computer interface through Topology
open source components
Just load the Json
file exported by the website, click the number box below the fan to control the operation
Demo
Attributes
@page "/topologies"
@inherits JSModuleComponentBase
@inject IStringLocalizer<Topologies> Localizer
@attribute [JSModuleAutoLoader("topology", ModuleName = "Topology", JSObjectReference = true)]
<h3>Topology HMI</h3>
<h4>Rendering of human-computer interface through <code>Topology</code> open source components</h4>
<DemoBlock Title="Basic usage" Introduction="Just load the <code>Json</code> file exported by the website, click the number box below the fan to control the operation" Name="Nomal">
<div class="topology">
<Topology @ref="TopologyElement" Content="@Content" OnBeforePushData="OnBeforePushData"></Topology>
</div>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Services;
using Microsoft.JSInterop;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
/// 图标库
/// </summary>
public partial class Topologies
{
[Inject]
[NotNull]
private FanControllerDataService? DataService { get; set; }
[Inject]
[NotNull]
private SwalService? SwalService { get; set; }
private string? Content { get; set; }
[NotNull]
private Topology? TopologyElement { get; set; }
private JSInterop<Topologies>? Interop { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
var assembly = typeof(Topologies).Assembly;
string strName = assembly.GetName().Name + ".topology.json";
var stream = assembly.GetManifestResourceStream(strName);
if (stream != null)
{
using var reader = new StreamReader(stream);
Content = reader.ReadToEnd();
}
}
/// <summary>
/// <inheritdoc/>
/// </summary>
/// <returns></returns>
protected override Task ModuleInitAsync() => InvokeInitAsync(TopologyElement.Id, nameof(ToggleFan));
/// <summary>
/// 切换风扇状态方法
/// </summary>
/// <param name="tagName"></param>
/// <returns></returns>
[JSInvokable]
public async Task ToggleFan(string tagName)
{
var open = DataService.IsOpen;
var op = new SwalOption()
{
Title = open ? "关闭风扇" : "打开风扇",
Content = open ? "您确定要关闭风扇吗?" : "您确定要打开风扇吗?",
Category = SwalCategory.Information
};
open = !open;
var ret = await SwalService.ShowModal(op);
if (ret)
{
await DataService.UpdateStatus(open);
}
}
private async Task OnBeforePushData()
{
await InvokeExecuteAsync(TopologyElement.Id);
// 推送数据
var data = DataService.GetDatas();
await TopologyElement.PushData(data);
// 数据订阅
DataService.OnDataChange = async datas => await TopologyElement.PushData(datas);
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem() {
Name = nameof(Topology.Content),
Description = "Load Graphical Json Content",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(Topology.Interval),
Description = "Polling interval in polling mode",
Type = "int",
ValueList = " — ",
DefaultValue = "2000"
},
new AttributeItem() {
Name = nameof(Topology.OnQueryAsync),
Description = "Get push data callback delegate method",
Type = "Func<CancellationToken, Task<IEnumerable<TopologyItem>>>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(Topology.OnBeforePushData),
Description = "Callback method before starting to push data",
Type = "Func<Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
/// <summary>
/// Dispose
/// </summary>
/// <param name="disposing"></param>
protected virtual void Dispose(bool disposing)
{
if (disposing)
{
if (Interop != null)
{
Interop.Dispose();
Interop = null;
}
}
}
/// <summary>
/// Dispose
/// </summary>
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
}