From 60f075e91cf1a2b3226cd4fc6781c5b3f9c9f678 Mon Sep 17 00:00:00 2001 From: mckaragoz <78308169+mckaragoz@users.noreply.github.com> Date: Tue, 11 Apr 2023 00:39:49 +0300 Subject: [PATCH 1/3] Basic Start of QrGenerator --- .../CodeBeam.MudBlazor.Extensions.csproj | 2 + .../QrGenerator/MudQrGenerator.razor | 18 ++++++++ .../QrGenerator/MudQrGenerator.razor.cs | 44 +++++++++++++++++++ .../Examples/PasswordFieldExample1.razor | 10 +++++ 4 files changed, 74 insertions(+) create mode 100644 CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor create mode 100644 CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor.cs diff --git a/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj b/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj index c7ab7254..4d293711 100644 --- a/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj +++ b/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj @@ -25,6 +25,8 @@ + + diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor new file mode 100644 index 00000000..8f951bce --- /dev/null +++ b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor @@ -0,0 +1,18 @@ +@namespace MudExtensions +@inherits MudComponentBase +@using MudBlazor +@using Microsoft.JSInterop +@using System.Drawing.Imaging; +@using SkiaSharp; +@using ZXing; +@using ZXing.Common; +@using ZXing.SkiaSharp; +@using ZXing.QrCode; +@inject IJSRuntime JSRuntime + + + + +@_content + +@**@ diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor.cs new file mode 100644 index 00000000..092378e9 --- /dev/null +++ b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor.cs @@ -0,0 +1,44 @@ +using Microsoft.AspNetCore.Components; +using MudBlazor; +using SkiaSharp; +using ZXing; +using ZXing.QrCode; +using ZXing.SkiaSharp; + +namespace MudExtensions +{ + public partial class MudQrGenerator : MudComponentBase + { + string _content = ""; + + public byte[] Value { get; set; } + + public void Refresh(string value) + { + _content = value; + Value = CreateQrCode(value); + StateHasChanged(); + } + + public byte[] CreateQrCode(string content) + { + BarcodeWriter writer = new BarcodeWriter + { + Format = BarcodeFormat.QR_CODE, + Options = new QrCodeEncodingOptions + { + Width = 100, + Height = 100, + } + }; + + var qrCodeImage = writer.Write(content); + + using (var stream = new MemoryStream()) + { + qrCodeImage.Encode(stream, SKEncodedImageFormat.Png, 100); + return stream.ToArray(); + } + } + } +} diff --git a/ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor b/ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor index 45b5fe86..fa93ed89 100644 --- a/ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor +++ b/ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor @@ -2,10 +2,20 @@ Password Mode + + + @*Refresh*@ @code{ string _password = "asdf"; bool _passwordMode; + + MudQrGenerator _qrGenerator; + private void Refresh(string value) + { + _qrGenerator.Refresh(value); + StateHasChanged(); + } } From 877b65149dc11eac600ab8abbf4765ca533b1cdd Mon Sep 17 00:00:00 2001 From: mckaragoz <78308169+mckaragoz@users.noreply.github.com> Date: Tue, 11 Apr 2023 20:28:48 +0300 Subject: [PATCH 2/3] Docs and API --- .../Components/QrGenerator/MudQrCode.razor | 18 +++++++++++ ...rGenerator.razor.cs => MudQrCode.razor.cs} | 32 +++++++++++-------- .../QrGenerator/MudQrGenerator.razor | 18 ----------- .../Pages/Components/ApiPage.razor | 21 ++++++++++++ .../Pages/Components/QrCodePage.razor | 8 +++++ .../Examples/PasswordFieldExample1.razor | 10 ------ .../Pages/Examples/QrCodeExample1.razor | 16 ++++++++++ ComponentViewer.Docs/Pages/Index.razor | 3 +- 8 files changed, 84 insertions(+), 42 deletions(-) create mode 100644 CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor rename CodeBeam.MudBlazor.Extensions/Components/QrGenerator/{MudQrGenerator.razor.cs => MudQrCode.razor.cs} (50%) delete mode 100644 CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor create mode 100644 ComponentViewer.Docs/Pages/Components/QrCodePage.razor create mode 100644 ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor new file mode 100644 index 00000000..386d88f2 --- /dev/null +++ b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor @@ -0,0 +1,18 @@ +@namespace MudExtensions +@inherits MudComponentBase +@using MudBlazor +@using Microsoft.JSInterop +@using System.Drawing.Imaging; +@using SkiaSharp; +@using ZXing; +@using ZXing.Common; +@using ZXing.SkiaSharp; +@using ZXing.QrCode; +@inject IJSRuntime JSRuntime + + + @{ + var content = GetQrCode(); + } + + \ No newline at end of file diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs similarity index 50% rename from CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor.cs rename to CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs index 092378e9..7bbcae7f 100644 --- a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor.cs +++ b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs @@ -7,32 +7,38 @@ namespace MudExtensions { - public partial class MudQrGenerator : MudComponentBase + public partial class MudQrCode : MudComponentBase { - string _content = ""; + [Parameter] + public string Value { get; set; } - public byte[] Value { get; set; } + [Parameter] + public EventCallback ValueChanged { get; set; } - public void Refresh(string value) - { - _content = value; - Value = CreateQrCode(value); - StateHasChanged(); - } + [Parameter] + public int Width { get; set; } = 100; + + [Parameter] + public int Height { get; set; } = 100; - public byte[] CreateQrCode(string content) + protected byte[] GetQrCode() { + if (string.IsNullOrEmpty(Value)) + { + return null; + } + BarcodeWriter writer = new BarcodeWriter { Format = BarcodeFormat.QR_CODE, Options = new QrCodeEncodingOptions { - Width = 100, - Height = 100, + Width = Width, + Height = Height, } }; - var qrCodeImage = writer.Write(content); + var qrCodeImage = writer.Write(Value); using (var stream = new MemoryStream()) { diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor deleted file mode 100644 index 8f951bce..00000000 --- a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrGenerator.razor +++ /dev/null @@ -1,18 +0,0 @@ -@namespace MudExtensions -@inherits MudComponentBase -@using MudBlazor -@using Microsoft.JSInterop -@using System.Drawing.Imaging; -@using SkiaSharp; -@using ZXing; -@using ZXing.Common; -@using ZXing.SkiaSharp; -@using ZXing.QrCode; -@inject IJSRuntime JSRuntime - - - - -@_content - -@**@ diff --git a/ComponentViewer.Docs/Pages/Components/ApiPage.razor b/ComponentViewer.Docs/Pages/Components/ApiPage.razor index 496f9753..9ecffa66 100644 --- a/ComponentViewer.Docs/Pages/Components/ApiPage.razor +++ b/ComponentViewer.Docs/Pages/Components/ApiPage.razor @@ -341,6 +341,27 @@ + + x.Name).ToList())"> + + Name + Type + Default + + + @context.Name + @context.PropertyType.Name + + @if (true) + { + MudQrCode instance = new(); + @(context.GetValue(instance)?.ToString() ?? "null") + } + + + + + x.Name).ToList())"> diff --git a/ComponentViewer.Docs/Pages/Components/QrCodePage.razor b/ComponentViewer.Docs/Pages/Components/QrCodePage.razor new file mode 100644 index 00000000..e0ff3340 --- /dev/null +++ b/ComponentViewer.Docs/Pages/Components/QrCodePage.razor @@ -0,0 +1,8 @@ +@page "/mudqrcode" +@using ComponentViewer.Docs.Pages.Examples + + + + + + diff --git a/ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor b/ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor index fa93ed89..45b5fe86 100644 --- a/ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor +++ b/ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor @@ -2,20 +2,10 @@ Password Mode - - - @*Refresh*@ @code{ string _password = "asdf"; bool _passwordMode; - - MudQrGenerator _qrGenerator; - private void Refresh(string value) - { - _qrGenerator.Refresh(value); - StateHasChanged(); - } } diff --git a/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor b/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor new file mode 100644 index 00000000..1827c2ad --- /dev/null +++ b/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor @@ -0,0 +1,16 @@ + + + + + + + + + + + + + +@code { + string _qrValue; +} diff --git a/ComponentViewer.Docs/Pages/Index.razor b/ComponentViewer.Docs/Pages/Index.razor index 1a2eda45..bccfc063 100644 --- a/ComponentViewer.Docs/Pages/Index.razor +++ b/ComponentViewer.Docs/Pages/Index.razor @@ -7,7 +7,7 @@ - + @@ -229,6 +229,7 @@ new("MudPage", "A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan."), new("MudPasswordField", "A specialized textfield that designed for working easily with passwords."), new("MudPopup", "A mobile friendly popup content for several situations."), + new("MudQrCode", "A QR code viewer with defined value."), new("MudScrollbar", "Handle all or selected scrollbar styles with a Mud component."), new("MudSpeedDial", "An expandable fab component."), new("MudSplitter", "A resizeable content splitter."), From 8e72c4cfae60c5d2e836e9b89df47fc748ca0a07 Mon Sep 17 00:00:00 2001 From: mckaragoz <78308169+mckaragoz@users.noreply.github.com> Date: Tue, 11 Apr 2023 22:37:29 +0300 Subject: [PATCH 3/3] Finalize MudQrCode --- .../Components/QrGenerator/MudQrCode.razor | 20 +++---- .../Components/QrGenerator/MudQrCode.razor.cs | 58 ++++++++++++++----- .../Pages/Examples/QrCodeExample1.razor | 19 +++++- ComponentViewer.Docs/Shared/MainLayout.razor | 1 + 4 files changed, 71 insertions(+), 27 deletions(-) diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor index 386d88f2..986f9d98 100644 --- a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor +++ b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor @@ -1,18 +1,16 @@ @namespace MudExtensions @inherits MudComponentBase -@using MudBlazor -@using Microsoft.JSInterop -@using System.Drawing.Imaging; -@using SkiaSharp; -@using ZXing; -@using ZXing.Common; -@using ZXing.SkiaSharp; -@using ZXing.QrCode; -@inject IJSRuntime JSRuntime - + @{ var content = GetQrCode(); } - + @if (content != null) + { + + } + else + { + + } \ No newline at end of file diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs index 7bbcae7f..b4e5dc85 100644 --- a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs +++ b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs @@ -16,10 +16,31 @@ public partial class MudQrCode : MudComponentBase public EventCallback ValueChanged { get; set; } [Parameter] - public int Width { get; set; } = 100; + public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE; [Parameter] - public int Height { get; set; } = 100; + public int Width { get; set; } = 200; + + [Parameter] + public int Height { get; set; } = 200; + + /// + /// If true, it goes to specified href when click. + /// + [Parameter] + public bool Clickable { get; set; } + + [Parameter] + public string Target { get; set; } = "_blank"; + + [Parameter] + public string ErrorText { get; set; } + + /// + /// If true, no text show on barcode format. + /// + [Parameter] + public bool PureBarcode { get; set; } protected byte[] GetQrCode() { @@ -28,23 +49,34 @@ protected byte[] GetQrCode() return null; } - BarcodeWriter writer = new BarcodeWriter + try { - Format = BarcodeFormat.QR_CODE, - Options = new QrCodeEncodingOptions + BarcodeWriter writer = new BarcodeWriter { - Width = Width, - Height = Height, - } - }; + Format = BarcodeFormat, + Options = new QrCodeEncodingOptions + { + Width = Width, + Height = Height, + PureBarcode = PureBarcode, + } + }; - var qrCodeImage = writer.Write(Value); + var qrCodeImage = writer.Write(Value); - using (var stream = new MemoryStream()) + using (var stream = new MemoryStream()) + { + qrCodeImage.Encode(stream, SKEncodedImageFormat.Png, 100); + ErrorText = null; + return stream.ToArray(); + } + } + catch (Exception ex) { - qrCodeImage.Encode(stream, SKEncodedImageFormat.Png, 100); - return stream.ToArray(); + ErrorText = ex.Message; + return null; } } + } } diff --git a/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor b/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor index 1827c2ad..2ab6d6bc 100644 --- a/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor +++ b/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor @@ -1,16 +1,29 @@ - +@using ZXing; + - + - + + + + + @(_qrCode.ErrorText == null ? null : "Error: " + _qrCode.ErrorText) + + @code { + MudQrCode _qrCode; string _qrValue; + int _width = 200; + int _height = 200; + BarcodeFormat _barcodeFormat = BarcodeFormat.QR_CODE; + bool _clickable = false; + bool _pureBarcode = false; } diff --git a/ComponentViewer.Docs/Shared/MainLayout.razor b/ComponentViewer.Docs/Shared/MainLayout.razor index 09f5b91d..8690206d 100644 --- a/ComponentViewer.Docs/Shared/MainLayout.razor +++ b/ComponentViewer.Docs/Shared/MainLayout.razor @@ -51,6 +51,7 @@ Page & Section PasswordField Popup + QrCode Scrollbar SelectExtended SpeedDial