Skip to content

Commit 6b816ff

Browse files
LostBeardLostBeard
committed
Demo update
1 parent 52ef67e commit 6b816ff

5 files changed

Lines changed: 356 additions & 388 deletions

File tree

‎SpawnDev.MatrixLEDDisplay.Demo/Pages/Home.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,6 @@
1717
<div>
1818
<RadzenTabs RenderMode="TabRenderMode.Client" >
1919
<Tabs>
20-
@foreach(var display in DisplayService.Displays)
21-
{
22-
<RadzenTabsItem Text="@display.DeviceHexId" >
23-
<MatrixDisplayControl display="@display" />
24-
</RadzenTabsItem>
25-
}
2620
<RadzenTabsItem Text="Test">
2721
<div>
2822
<select @onchange=SelectDisplay_OnChange style="min-width: 23rem;">
@@ -41,6 +35,12 @@
4135
Status: @_testStatus
4236
</div>
4337
</RadzenTabsItem>
38+
@foreach (var display in DisplayService.Displays)
39+
{
40+
<RadzenTabsItem Text="@display.DeviceHexId">
41+
<MatrixDisplayControl Display="@display" />
42+
</RadzenTabsItem>
43+
}
4444
</Tabs>
4545
</RadzenTabs>
4646
</div>

‎SpawnDev.MatrixLEDDisplay.Demo/Pages/MatrixDisplayControl.razor‎

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,32 @@
22
@using SixLabors.ImageSharp.Formats.Gif
33
@using SixLabors.ImageSharp.PixelFormats
44
@using SpawnDev.MatrixLEDDisplay
5+
@implements IDisposable
6+
57
<div class="display-control">
68
<div>
79
<RadzenMenu>
8-
<RadzenMenuItem Icon="close" title="Disconnect" Click=@(() => DisplayService.RemoveDisplay(display)) />
9-
<RadzenMenuItem Icon="transition_dissolve" title="Test pattern" disabled="@(!display.Connected)" Click=@(() => display.SendTestPicture(false)) />
10-
<RadzenMenuItem Icon="image" title="Test image" disabled="@(!display.Connected)" Click=@(() => LoadPenguinImage(display, false)) />
11-
<RadzenMenuItem Icon="file_open" title="Load image file" disabled="@(!display.Connected)" Click=@(() => display.SelectAndLoadImage(false)) />
12-
<RadzenMenuItem Icon="save" title="Save to display" disabled="@(!display.Connected)" Click=@(() => display.SavePicture()) />
13-
<RadzenMenuItem Icon="replay" title="Reset" disabled="@(!display.Connected)" Click=@(() => display.Reset()) />
14-
<RadzenMenuItem Icon="power_off" title="Power off" disabled="@(!display.Connected)" Click=@(() => display.PowerOff()) />
15-
<RadzenMenuItem Icon="power" title="Power on" disabled="@(!display.Connected)" Click=@(() => display.PowerOn()) />
16-
<RadzenMenuItem Icon="slideshow" title="Slideshow mode" disabled="@(!display.Connected)" Click=@(() => display.StartSlideShowMode()) />
17-
@* <RadzenMenuItem Icon="dangerous" title="Slideshow mode" disabled="@(!display.Connected)" Click=@(() => display.SendTestSlideShow()) /> *@
10+
<RadzenMenuItem Icon="close" disabled="@(Busy)" title="Disconnect" Click=@(() => DisplayService.RemoveDisplay(Display)) />
11+
@* <RadzenMenuItem Icon="transition_dissolve" title="Test pattern" disabled="@(!display.Connected)" Click=@(() => display.SendTestPicture(true)) />
12+
<RadzenMenuItem Icon="image" title="Test image" disabled="@(!display.Connected)" Click=@(() => LoadPenguinImage(display, true)) /> *@
13+
<RadzenMenuItem Icon="file_open" title="Load image file" disabled="@(!Display.Connected || Busy)" Click=@(() => Display.SelectAndLoadImage(true)) />
14+
<RadzenMenuItem Icon="replay" title="Reset" disabled="@(!Display.Connected || Busy)" Click=@(() => Display.Reset()) />
15+
<RadzenMenuItem Icon="power_off" title="Power off" disabled="@(!Display.Connected || Busy)" Click=@(() => Display.PowerOff()) />
16+
<RadzenMenuItem Icon="power" title="Power on" disabled="@(!Display.Connected || Busy)" Click=@(() => Display.PowerOn()) />
17+
@* <RadzenMenuItem Icon="slideshow" title="Slideshow mode" disabled="@(!display.Connected)" Click=@(() => display.StartSlideShowMode()) /> *@
1818
</RadzenMenu>
1919
</div>
2020
<div>
2121
<div title="Matrix display gamma correction">
22-
<label for="gamma">Gamma: @(Math.Round(display.Gamma, 2))</label>
23-
<UISlider Name="gamma" Min="0" Max="1" Value=@display.Gamma Change="@((v) => display.Gamma = v)" />
22+
<label for="gamma">Gamma: @(Math.Round(Display.Gamma, 2))</label>
23+
<UISlider Disabled="@(!Display.Connected || Busy)" Name="gamma" Min="0" Max="1" Value=@Display.Gamma Change="@((v) => Display.Gamma = v)" />
2424
</div>
2525
<div title="Used with images that have transparency">
26-
<label for="background_color">Background: @display.BackgroundColor.HexColor</label>
27-
<input name="background_color" type="color" @onchange="@(e => ColorPicker(e, display))" value="@display.BackgroundColor.HexColor">
26+
<label for="background_color">Background: @Display.BackgroundColor.HexColor</label>
27+
<input disabled="@(!Display.Connected || Busy)" name="background_color" type="color" @onchange="@(e => ColorPicker(e))" value="@Display.BackgroundColor.HexColor">
2828
</div>
2929
<div>
30-
<LEDMatrix Data="display.DrawnData" />
30+
<LEDMatrix Display="Display" />
3131
</div>
3232
</div>
3333
</div>
@@ -40,17 +40,42 @@
4040
MatrixLEDDisplayService DisplayService { get; set; } = default!;
4141

4242
[Parameter]
43-
public MIMatrixDisplay display { get; set; }
43+
public MIMatrixDisplay Display { get; set; }
44+
45+
bool Busy => Display?.Busy ?? false;
4446

45-
void ColorPicker(ChangeEventArgs args, MIMatrixDisplay display)
47+
MIMatrixDisplay? _Display;
48+
void ColorPicker(ChangeEventArgs args)
4649
{
4750
var newColor = args.Value as string;
48-
display.BackgroundColor.HexColor = newColor!;
51+
Display.BackgroundColor.HexColor = newColor!;
52+
_ = Display.Resend();
4953
}
50-
async Task LoadPenguinImage(MIMatrixDisplay display, bool save)
54+
void DetachDisplayEvents()
5155
{
52-
await display.LoadImageFromURL("pixelart/penguin_16.png", save);
56+
if (_Display == null) return;
57+
_Display.OnStateChanged -= _Display_OnStateHasChanged;
58+
_Display = null;
59+
}
60+
void _Display_OnStateHasChanged(MIMatrixDisplay display)
61+
{
62+
StateHasChanged();
63+
}
64+
bool _attached = false;
65+
protected override void OnParametersSet()
66+
{
67+
if (_Display != Display)
68+
{
69+
DetachDisplayEvents();
70+
_Display = Display;
71+
if (_Display != null)
72+
{
73+
_Display.OnStateChanged -= _Display_OnStateHasChanged;
74+
}
75+
}
76+
}
77+
public void Dispose()
78+
{
79+
DetachDisplayEvents();
5380
}
54-
55-
5681
}

‎SpawnDev.MatrixLEDDisplay.Demo/UI/UISlider.razor‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
<input @onchange=OnChange style="@Style" name="@Name" type="range" min="@Min" max="@Max" value="@Value" step="@(Step == 0 ? "any" : Step.ToString())" />
1+
<input disabled="@Disabled" @onchange=OnChange style="@Style" name="@Name" type="range" min="@Min" max="@Max" value="@Value" step="@(Step == 0 ? "any" : Step.ToString())" />
22

33
@code {
4+
[Parameter]
5+
public bool Disabled { get; set; }
6+
47
[Parameter]
58
public double Max { get; set; }
69

‎SpawnDev.MatrixLEDDisplay/Components/LEDMatrix.razor‎

Lines changed: 63 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
@using SpawnDev.BlazorJS
22
@using SpawnDev.BlazorJS.JSObjects
33
@using SpawnDev.MatrixLEDDisplay.ImageTools
4+
@using System.Timers
5+
@using Timer = System.Timers.Timer;
6+
@implements IDisposable
47

58
<div style="@Style">
6-
<canvas style="border: 1px solid grey;" @ref=_canvasRef></canvas>
9+
<div>
10+
<canvas style="border: 1px solid grey;" @ref=_canvasRef></canvas>
11+
</div>
12+
<div style="@(Display.SourceIsSlideShow && Display.SlideShowFrameCount > 0 ? "" : "display: none;")">
13+
@(ImageIndex + 1) / @Display.SlideShowFrameCount
14+
</div>
715
</div>
816

917
@code {
@@ -14,7 +22,9 @@
1422
public string Style { get; set; } = "";
1523

1624
[Parameter]
17-
public RGBImage Data { get; set; } = new RGBImage(16, 16);
25+
public MIMatrixDisplay Display { get; set; }
26+
27+
MIMatrixDisplay? _Display;
1828

1929
ElementReference _canvasRef;
2030

@@ -30,16 +40,27 @@
3040
int _pixelWidth = 16;
3141
int _pixelHeight = 16;
3242

43+
Timer _tmr = new Timer();
44+
public void Dispose()
45+
{
46+
_tmr.Enabled = false;
47+
_tmr.Dispose();
48+
DetachDisplayEvents();
49+
}
3350
void DrawData()
3451
{
35-
var width = Data.Width * _blockSize;
36-
var height = Data.Height * _blockSize;
37-
_canvas!.Width = width;
38-
_canvas.Height = height;
39-
Data.ForEachXY((x, y) =>
52+
if (_canvas == null || _ctx == null) return;
53+
var data = Display.GetFrame(ImageIndex);
54+
var width = data.Width * _blockSize;
55+
var height = data.Height * _blockSize;
56+
if (_canvas.Width != width || _canvas.Height != height)
57+
{
58+
_canvas.Width = width;
59+
_canvas.Height = height;
60+
}
61+
data.ForEachXY((x, y) =>
4062
{
41-
var color = Data[x, y];
42-
var i = y * _pixelWidth + x;
63+
var color = data[x, y];
4364
var x1 = x * _blockSize;
4465
var y1 = y * _blockSize;
4566
_ctx!.FillStyle = color.HexColor;
@@ -49,6 +70,36 @@
4970
_ctx.StrokeRect(x1, y1, _blockSize, _blockSize);
5071
});
5172
}
73+
void DetachDisplayEvents()
74+
{
75+
if (_Display == null) return;
76+
_Display.OnStateChanged -= _Display_OnStateHasChanged;
77+
_Display = null;
78+
}
79+
void _Display_OnStateHasChanged(MIMatrixDisplay display)
80+
{
81+
StateHasChanged();
82+
}
83+
bool _attached = false;
84+
protected override void OnParametersSet()
85+
{
86+
if (_Display != Display)
87+
{
88+
DetachDisplayEvents();
89+
_Display = Display;
90+
if (_Display != null)
91+
{
92+
_Display.OnStateChanged -= _Display_OnStateHasChanged;
93+
}
94+
}
95+
}
96+
int ImageIndex => Display.SlideShowFrameCount == 0 ? 0 : _imageIndex % Display.SlideShowFrameCount;
97+
int _imageIndex = 0;
98+
void timer_elapsed(object? sender, ElapsedEventArgs e)
99+
{
100+
_imageIndex = _imageIndex == int.MaxValue ? 0 : _imageIndex + 1;
101+
StateHasChanged();
102+
}
52103
protected override void OnAfterRender(bool firstRender)
53104
{
54105
if (firstRender)
@@ -59,6 +110,9 @@
59110
_canvasSize = (int)(_blockSize * _pixelWidth); // 16 blocks + 1 pixel border between each block
60111
_canvas.Width = _canvasSize;
61112
_canvas.Height = _canvasSize;
113+
_tmr.Elapsed += timer_elapsed;
114+
_tmr.Interval = 650;
115+
_tmr.Enabled = true;
62116
}
63117
DrawData();
64118
}

0 commit comments

Comments
 (0)