Main Update - add RTD8TM Chart
parent
572db9200b
commit
1ecb5a545f
|
|
@ -1,4 +1,5 @@
|
|||
<Blazored.Modal.CascadingBlazoredModal>
|
||||
|
||||
<Blazored.Modal.CascadingBlazoredModal>
|
||||
<Router AppAssembly="@typeof(App).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
|
|
@ -11,4 +12,8 @@
|
|||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
</Blazored.Modal.CascadingBlazoredModal>
|
||||
</Blazored.Modal.CascadingBlazoredModal>
|
||||
|
||||
@code{
|
||||
|
||||
}
|
||||
|
|
@ -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)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
@ -86,6 +88,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -7,4 +7,4 @@
|
|||
@using Microsoft.AspNetCore.Components.WebAssembly.Http
|
||||
@using Microsoft.JSInterop
|
||||
@using UI_SequentMicrosystems
|
||||
@using UI_SequentMicrosystems.Layout
|
||||
@using UI_SequentMicrosystems.Layout
|
||||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue