Main Update - add RTD8TM Chart

master
Jan Beníček 2023-12-17 18:09:39 +01:00
parent 572db9200b
commit 1ecb5a545f
9 changed files with 152 additions and 23 deletions

View File

@ -1,4 +1,5 @@
<Blazored.Modal.CascadingBlazoredModal>

<Blazored.Modal.CascadingBlazoredModal>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
@ -12,3 +13,7 @@
</NotFound>
</Router>
</Blazored.Modal.CascadingBlazoredModal>
@code{
}

View File

@ -54,12 +54,16 @@
/// <param name="NewName"></param>
private void ChangeName(string NewName)
{
if (NewName == "")
{
NewName = "----------";
}
RTD8tmService.SetChanelNames(StackID, ChanelID, NewName);
}
private float RecalculateValues(float resistance, byte Type = 0)
public float RecalculateValues(float resistance, byte Type = 0)
{
if (Type == RTD8TMSensorTypes.PT100)
{
@ -70,7 +74,7 @@
return resistance;
}
}
private string ValueType(byte Type)
public string ValueType(byte Type)
{
if (Type == RTD8TMSensorTypes.PT100)
{

View File

@ -0,0 +1,79 @@
@using ApexCharts
@using UI_SequentMicrosystems.Components
@using UI_SequentMicrosystems.Services
@using UI_SequentMicrosystems.Models
@inject RTD8TMService _RTD8TMService
<ApexChart TItem="RTD8TMGraphPointModel"
Title="Temperature"
Options="chartOptions"
@ref="chart">
@foreach (byte stack in _RTD8TMService.GetActualData().Keys)
{
for (byte chanel = 0; chanel < 8; chanel++)
{
if (_RTD8TMService.GetChanelName(stack, chanel) != "----------")
{
<ApexPointSeries TItem="RTD8TMGraphPointModel"
Items="@_RTD8TMService.GetChartData(stack, chanel)"
Name="@(_RTD8TMService.GetChanelName(stack, chanel))"
SeriesType="SeriesType.Line"
XValue="@(e => e.Time.ToString("HH:mm:ss"))"
YValue="@(e => (decimal)e.Value)"
OrderBy="e=>e.X" />
}
}
}
</ApexChart>
@code {
private ApexChart<RTD8TMGraphPointModel> chart;
private ApexChartOptions<RTD8TMGraphPointModel> chartOptions;
protected override void OnInitialized()
{
_RTD8TMService.EventUpdateGraph += UpdateChart;
chartOptions = new ApexChartOptions<RTD8TMGraphPointModel>
{
Theme = new Theme
{
Mode = Mode.Dark,
},
Legend = new Legend
{
Position = LegendPosition.Bottom,
FontSize = "20px",
HorizontalAlign = Align.Center
}
};
}
public async Task UpdateChart(object? o, bool b)
{
await InvokeAsync(() =>
{
chart.UpdateSeriesAsync(false);
StateHasChanged();
});
}
}

View File

@ -1,8 +1,8 @@
namespace UI_SequentMicrosystems.Models
{
public class RTD8TMGraphModel
public class RTD8TMGraphPointModel
{
public SortedList<byte, float[]> Data { get; set; }
public float Value { get; set; }
public DateTime Time { get; set; }
}
}

View File

@ -2,6 +2,7 @@
@using Blazored.Modal.Services
@using UI_SequentMicrosystems.Components
@using UI_SequentMicrosystems.Services
@using UI_SequentMicrosystems.Models
@using Blazored.Modal
@inject NavigationManager Navigator
@ -42,10 +43,11 @@
</div>
<div class="row">
<div class="col-lg-6 graybg">
<div class="well">
1 - Future Graph
</div>
<div class="col-lg-6">
@if (_RTD8TMService.GraphData.Keys.Count != 0)
{
<RTD8TMGraphComponent/>
}
</div>
<div class="col-lg-6">
<div class="row">
@ -92,4 +94,5 @@
}

View File

@ -1,4 +1,5 @@
using System.Timers;
using UI_SequentMicrosystems.Components;
using UI_SequentMicrosystems.Models;
using Wrapper_Api_SequentMicrosystems.RTD8TM;
@ -9,9 +10,9 @@ namespace UI_SequentMicrosystems.Services
private SortedList<byte, string[]> ChanelNames = new SortedList<byte, string[]>();
private SortedList<byte, float[]> ActualValues = new SortedList<byte, float[]>();
private SortedList<byte, byte[]> ValuesType = new SortedList<byte, byte[]>();
private List<RTD8TMGraphModel> GraphData = new();
public SortedList<byte, List<List<RTD8TMGraphPointModel>>> GraphData = new();
private byte GraphDataCounterCount = 10;
private byte GraphDataCounter = 0;
private byte GraphDataCounter = 9;
private string? Address { get; set; }
@ -20,6 +21,7 @@ namespace UI_SequentMicrosystems.Services
public delegate Task AsyncEventHandler<TEventArgs>(object? sender, TEventArgs? e);
public event AsyncEventHandler<bool>? EventUpdateValues;
public event AsyncEventHandler<bool>? EventUpdateGraph;
public RTD8TMService()
{
@ -72,7 +74,13 @@ namespace UI_SequentMicrosystems.Services
if (GraphDataCounter >= GraphDataCounterCount)
{
GraphDataCounter = 0;
GraphData.Add(new() { Data = ActualValues, Time = DateTime.Now });
ReadChartData();
if (EventUpdateGraph != null)
{
await EventUpdateGraph.Invoke(this, true);
}
}
else
{
@ -227,19 +235,50 @@ namespace UI_SequentMicrosystems.Services
//Graph Data
/// <summary>
/// Get Chart data
/// </summary>
public void ReadChartData()
{
DateTime time = DateTime.Now;
foreach (byte stack in ActualValues.Keys)
{
if (!GraphData.ContainsKey(stack))
{
GraphData.Add(stack, new());
for (int chanel = 0; chanel < 8; chanel++)
{
GraphData[stack].Add(new());
}
}
for (byte chanel = 0; chanel < 8; chanel++)
{
GraphData[stack][chanel].Add(new RTD8TMGraphPointModel() { Value = new RTD8TMChanelComponent().RecalculateValues(ActualValues[stack][chanel], GetValueType(stack, chanel)), Time = time });
}
}
}
/// <summary>
/// Get data for graph visualize
/// </summary>
/// <returns>saved Graphn Data</returns>
public List<RTD8TMGraphModel> GetGraphData()
/// <returns>saved chart chanel Data</returns>
public List<RTD8TMGraphPointModel> GetChartData(byte StackID, byte Chanel)
{
return GraphData;
if (!GraphData.ContainsKey(StackID))
{
return new List<RTD8TMGraphPointModel>();
}
return GraphData[StackID][Chanel];
}
/// <summary>
/// Clear data from Graph
/// </summary>
public void ClearGraph()
public void ClearChart()
{
GraphData.Clear();
}

View File

@ -8,6 +8,7 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazor-ApexCharts" Version="2.2.0" />
<PackageReference Include="Blazored.Modal" Version="7.1.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />

View File

@ -3,13 +3,11 @@
color: white;
}
.graybg {
background: gray;
color: yellow;
.c-bg-black {
background: black;
color: white;
}
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */