Add ImageUpload to Blazor playground

albi005 · Nov 5, 2022 · 7bd5c97 · 7bd5c97
1 parent 23f1f9d
commit 7bd5c97
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 49 deletions.
diff --git a/MaterialColorUtilities.Maui/MaterialColorUtilities.Maui.csproj b/MaterialColorUtilities.Maui/MaterialColorUtilities.Maui.csproj
@@ -39,7 +39,7 @@
 	<ItemGroup>
 		<PackageReference Include="Microsoft.SourceLink.GitHub" Version="1.1.1" PrivateAssets="all" />
 
-		<None Include="..\README.md">
+		<None Include="README.md">
 			<Pack>True</Pack>
 			<PackagePath>\</PackagePath>
 		</None>

diff --git a/MaterialColorUtilities/MaterialColorUtilities.csproj b/MaterialColorUtilities/MaterialColorUtilities.csproj
@@ -32,7 +32,7 @@
 		<!-- Pack the source generator to the right package folder -->
 		<None Include="..\MaterialColorUtilities.SourceGenerators\bin\$(Configuration)\netstandard2.0\MaterialColorUtilities.SourceGenerators.dll" PackagePath="analyzers\dotnet\roslyn4.0\cs" Pack="true" Visible="false" />
 
-		<None Include="..\README.md">
+		<None Include="README.md">
 		  <Pack>True</Pack>
 		  <PackagePath>\</PackagePath>
 		</None>

diff --git a/Playground/Playground.Maui/CustomMaterialColorService.cs b/Playground/Playground.Maui/CustomMaterialColorService.cs
@@ -1,7 +1,7 @@
 using MaterialColorUtilities.Maui;
 using MaterialColorUtilities.Palettes;
+using MaterialColorUtilities.Schemes;
 using Microsoft.Extensions.Options;
-using Playground.Shared;
 #if ANDROID
 using Android.App;
 using AndroidX.Core.View;
@@ -12,7 +12,7 @@
 
 namespace Playground.Maui;
 
-public class CustomMaterialColorService : MaterialColorService<CorePalette, AppScheme<uint>, AppScheme<Color>, LightAppSchemeMapper, DarkAppSchemeMapper>
+public class CustomMaterialColorService : MaterialColorService<CorePalette, Scheme<uint>, Scheme<Color>, LightSchemeMapper, DarkSchemeMapper>
 {
     private readonly WeakEventManager _weakEventManager = new();
 

diff --git a/Playground/Playground.Shared/AppScheme.cs b/Playground/Playground.Shared/AppScheme.cs
diff --git a/Playground/Playground.Wasm/MudScheme.cs b/Playground/Playground.Wasm/MudScheme.cs
@@ -0,0 +1,28 @@
+using MaterialColorUtilities.Palettes;
+using MaterialColorUtilities.Schemes;
+using MaterialColorUtilities.Utils;
+
+namespace Playground.Wasm;
+
+public partial class MudScheme<TColor> : Scheme<TColor>
+{
+    public TColor Primary2 { get; set; } = default!;
+}
+
+public class DarkMudSchemeMapper : DarkSchemeMapper<CorePalette, MudScheme<uint>>
+{
+    protected override void MapCore(CorePalette corePalette, MudScheme<uint> scheme)
+    {
+        base.MapCore(corePalette, scheme);
+        scheme.Primary2 = scheme.Primary.Add(scheme.OnPrimary, .08);
+    }
+}
+
+public class LightMudSchemeMapper : LightSchemeMapper<CorePalette, MudScheme<uint>>
+{
+    protected override void MapCore(CorePalette corePalette, MudScheme<uint> scheme)
+    {
+        base.MapCore(corePalette, scheme);
+        scheme.Primary2 = scheme.Primary.Add(scheme.OnPrimary, .08);
+    }
+}
diff --git a/Playground/Playground.Wasm/Pages/Index.razor b/Playground/Playground.Wasm/Pages/Index.razor
@@ -21,6 +21,8 @@
         <ColorInput/>
         <div class="pb-4"></div>
         <StyleSelector/>
+        <div class="pb-4"></div>
+        <ImageInput />
     </MudPaper>
     <MudPaper Class="pa-4" Style="width: 460px">
         <h3>
@@ -53,19 +55,17 @@
             </a>
         </h3>
         <p class="info">Chroma is maximized</p>
-        <MudTooltip Text="from JCh, " Placement="Placement.Top">
-            <ColorPlot
-                Resolution="200"
-                Func="@((x, y) => Cam16.FromJch(y, 100, x).ToInt())"
-                FuncInverse="@(color => { Cam16 cam16 = Cam16.FromInt(color); return (cam16.Hue, cam16.J); })"
-                LabelX="h"
-                LabelY="J"
-                MaxX="360"
-                MaxY="100"
-                MinX="0"
-                MinY="0"
-                CacheId="cam16"/>
-        </MudTooltip>
+        <ColorPlot
+            Resolution="200"
+            Func="@((x, y) => Cam16.FromJch(y, 100, x).ToInt())"
+            FuncInverse="@(color => { Cam16 cam16 = Cam16.FromInt(color); return (cam16.Hue, cam16.J); })"
+            LabelX="h"
+            LabelY="J"
+            MaxX="360"
+            MaxY="100"
+            MinX="0"
+            MinY="0"
+            CacheId="cam16"/>
     </MudPaper>
     <MudPaper Class="pa-4">
         <h3>

diff --git a/Playground/Playground.Wasm/Services/ThemeService.cs b/Playground/Playground.Wasm/Services/ThemeService.cs
@@ -4,18 +4,17 @@
 using Microsoft.JSInterop;
 using MudBlazor;
 using MudBlazor.Utilities;
-using Playground.Shared;
 using Playground.Wasm.Extensions;
 
 namespace Playground.Wasm.Services;
 
 public class ThemeService
 {
     private bool _isDark;
-    private readonly LightAppSchemeMapper _lightMapper = new();
-    private readonly DarkAppSchemeMapper _darkMapper = new();
+    private readonly LightMudSchemeMapper _lightMapper = new();
+    private readonly DarkMudSchemeMapper _darkMapper = new();
     private uint _seed = Scorer.Default;
-    private Style _style;
+    private Style _style = Style.Vibrant;
 
     private uint? _prevSeed;
     private bool? _prevIsDark;
@@ -57,7 +56,7 @@ public Style Style
 
     private CorePalette CorePalette { get; } = new();
 
-    public AppScheme<uint> Scheme { get; private set; }
+    public MudScheme<uint> Scheme { get; private set; }
     public MudTheme MudTheme { get; } = new()
     {
         ZIndex = new()
@@ -80,23 +79,27 @@ private void Apply()
             CorePalette.Fill(_seed, _style);
         }
 
-        ISchemeMapper<CorePalette, AppScheme<uint>> mapper = IsDark
+        ISchemeMapper<CorePalette, MudScheme<uint>> mapper = IsDark
             ? _darkMapper
             : _lightMapper;
         Scheme = mapper.Map(CorePalette);
-        AppScheme<MudColor> mudColorScheme = Scheme.Convert(IntExtensions.ToMudColor);
+        MudScheme<MudColor> mudColorScheme = Scheme.Convert(IntExtensions.ToMudColor);
         if (IsDark)
             MudTheme.PaletteDark = UpdatePalette(MudTheme.PaletteDark, mudColorScheme);
         else
             MudTheme.Palette = UpdatePalette(MudTheme.Palette, mudColorScheme);
         Changed?.Invoke();
     }
 
-    private static Palette UpdatePalette(Palette palette, AppScheme<MudColor> scheme)
+    private static Palette UpdatePalette(Palette palette, MudScheme<MudColor> scheme)
     {
         palette.Primary = scheme.Primary;
+        palette.PrimaryDarken = scheme.Primary2.Value;
+        palette.PrimaryContrastText = scheme.OnPrimary;
         palette.Secondary = scheme.Secondary;
+        palette.SecondaryContrastText = scheme.OnSecondary;
         palette.Tertiary = scheme.Tertiary;
+        palette.TertiaryContrastText = scheme.OnTertiary;
         palette.Background = scheme.Background;
         palette.AppbarBackground = scheme.Surface2;
         palette.AppbarText = scheme.OnBackground;

diff --git a/Playground/Playground.Wasm/Shared/ImageInput.razor b/Playground/Playground.Wasm/Shared/ImageInput.razor
@@ -0,0 +1,36 @@
+@using Playground.Wasm.Services
+@using SkiaSharp
+@using MaterialColorUtilities.Utils
+@using System.Runtime.InteropServices
+@using MaterialColorUtilities.Palettes
+@using System.Diagnostics
+
+@inject ThemeService ThemeService
+
+<InputFile id="imageInput" accept="image/png, image/jpeg" hidden OnChange="OnImageSelected" />
+
+<MudButton
+    Variant="Variant.Filled"
+    HtmlTag="label"
+    Color="Color.Primary"
+    for="imageInput">
+    Upload image
+</MudButton>
+
+@code {
+
+    private async void OnImageSelected(InputFileChangeEventArgs e)
+    {
+        IBrowserFile resized = await e.File.RequestImageFileAsync("image/png", 122, 122);
+        using MemoryStream memoryStream = new();
+        await using Stream openReadStream = resized.OpenReadStream();
+        await openReadStream.CopyToAsync(memoryStream);
+        memoryStream.Position = 0;
+        SKBitmap skBitmap = SKBitmap.Decode(memoryStream);
+        uint[] array = MemoryMarshal.Cast<SKColor, uint>(skBitmap.Pixels).ToArray();
+
+        uint seed = ImageUtils.ColorsFromImage(array)[0];
+        ThemeService.Seed = seed;
+    }
+
+}