Elementy wyświetlanych danych przykłady użycia kodu w aplikacji wyświetlającej dane.

Użycie komponentu RadzenRadialGauge do wyświetlenia zegara w apilikacji.
<div class="col-md-3 col-sm-3 p-3">
<Radzen.Blazor.RadzenCard>
<span style="font-weight:800">Czas </span>
<RadzenRadialGauge Style="width: 100%; height: 40vh;">
<RadzenRadialGaugeScale Step="1" Min="0" Max="12" StartAngle="0" EndAngle="360" ShowFirstTick="false"
MinorStep=@minorStep
TickLength="20"
MinorTickLength="10"
TickLabelOffset="40"
TickPosition="GaugeTickPosition.Inside">
<RadzenRadialGaugeScalePointer Value=@hours Length="0.6" ShowValue="false" />
<RadzenRadialGaugeScalePointer Value=@seconds Length="0.9" Fill="red" Width="2" ShowValue="false" />
<RadzenRadialGaugeScalePointer Value=@minutes Length="0.8" ShowValue="false" />
</RadzenRadialGaugeScale>
</RadzenRadialGauge>
</Radzen.Blazor.RadzenCard>
</div>

Wyświetlanie temperatury jako okrągłego wskaźnika
<div class="col-md-3 col-sm-3 p-3">
<Radzen.Blazor.RadzenCard>
<span style="font-weight:800">Temperatura pieca </span>
<RadzenRadialGauge Style="width: 100%; height: 40vh;">
<RadzenRadialGaugeScale StartAngle="-180" EndAngle="90" Step="10" Min="0" Max="100" TickPosition=@tickPosition>
<RadzenRadialGaugeScalePointer Value=@Convert.ToDouble(tempbake) Length="0.6" ShowValue=true>
<Template Context="pointer">
<h4>
@pointer.Value <sup>°C</sup>
</h4>
</Template>
</RadzenRadialGaugeScalePointer>
<RadzenRadialGaugeScaleRange From="40" To="90" Fill="green" />
<RadzenRadialGaugeScaleRange From="0" To="40" Fill="orange" />
<RadzenRadialGaugeScaleRange From="90" To="100" Fill="red" />
</RadzenRadialGaugeScale>
</RadzenRadialGauge>
</Radzen.Blazor.RadzenCard>
</div>
Definicje:
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
namespace MierzwiceWeb.Area.Home
{
public partial class StartComponent : ComponentBase
{
[Inject]
private EspEasyDS18B20Service espservice { get; set; }
private decimal temp { get; set; }
private decimal tempbake { get; set; }
private decimal Tempoutside { get; set; }
GaugeTickPosition tickPosition = GaugeTickPosition.Outside;
Timer timer;
double hours;
double minutes;
double seconds;
double minorStep = 12 / 60.0;
private string Today { get; set; }
Funkcje:
protected override void OnInitialized()
{
timer = new Timer(state =>
{
double t = 12 / 60.0;
var now = DateTime.Now;
Today = DateTime.Now.ToShortDateString();
if ( now.Hour<=12)
{
hours = (now.Hour + now.Minute / 60.0);
}
else
{
hours = ((now.Hour-12) + now.Minute / 60.0);
}
minutes = now.Minute * minorStep + now.Second * 12 / 3600.0;
seconds = now.Second * minorStep;
temp= HomeService.Data.SensorReandings.InSide.Temperature;
tempbake = HomeService.Data.SensorReandings.CentralHeatingStove.Temperature;
Tempoutside = HomeService.Data.SensorReandings.OutSide.Temperature;
InvokeAsync(StateHasChanged);
}, null, 0, 1000);
}
public void Dispose()
{
timer.Dispose();
}
W pierwszej części przetwarzamy czas na potrzebne do wyświetlania wartości. W drugiej ustawiamy wartości dla temperatur.
Użyto komponentu radial-gauge , z https://www.radzen.com/blazor-components/ dostępny przez NutGet.
