Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support ASP.NET Blazor Web Assembly Components #1811

Merged
merged 43 commits into from
Oct 11, 2021
Merged

Support ASP.NET Blazor Web Assembly Components #1811

merged 43 commits into from
Oct 11, 2021

Conversation

mattleibow
Copy link
Contributor

@mattleibow mattleibow commented Sep 20, 2021

Description of Change

Add support for Blazor on Web Assembly.

Bugs Fixed

API Changes

Behavioral Changes

PR Checklist

  • Has tests (if omitted, state reason in description)
  • Rebased on top of main at time of PR
  • Changes adhere to coding standard
  • Updated documentation

Getting Started

The build for this PR has been pushed to out preview feed: https://aka.ms/skiasharp-eap/index.json

You will also need the RC 2 .NET SDK:

All you need to do is install the SkiaSharp.Views.Blazor NuGet package!

<SKCanvasView PaintSurface="PaintMySurface" style="width:100px; height:100px" />

🔥

wasm

@mattleibow mattleibow changed the title Support ASP.NET Blazor Components Support ASP.NET Blazor Web Assembly Components Sep 20, 2021
@RChrisCoble
Copy link

RChrisCoble commented Sep 20, 2021

I'm somewhat surprised you're pushing 50 FPS with Blazor. I wasn't sure it could turn around frames that fast without AOT compilation. Pretty sweet!

@mattleibow
Copy link
Contributor Author

@RChrisCoble I can also get 60 now that I cleaned up some stuff. But... The trick is SkiaSharp is mainly a C++ library which is pre-AOT-ed. So you don't need AOT for anything except a bunch of pinvokes and a few lines of code.

And then skia is just naturally fast. And the 60 FPS is the limit set by the browser ticker. It uses 60 FPS and I hook into it. I bet I can go faster if I used a setInterval or something.

@davidwengier
Copy link

Very excited for this! Is there a reason SKCanvasView doesn't have the same requestAnimationFrame functionality? Doesn't it work with normal 2D HTML canvases too?

@artemiusgreat
Copy link

artemiusgreat commented Sep 23, 2021

@mattleibow Hi Matthew, this is an amazing news.
However, after downloading the sample project I can't find latest versions of referenced Nuget packages.
I'm using .NET 6 Preview 7 and VS 2022 Preview 3.1
Is there anything else I need to install or download?

image

@mattleibow
Copy link
Contributor Author

@artemiusgreat you need to add the preview feed for skia: https://aka.ms/skiasharp-eap/index.json

As soon as I can get all the dotnet bits updated (#1815) I will push to nuget.org. But, don't wait on that as CI has been iffy.

@mattleibow
Copy link
Contributor Author

mattleibow commented Oct 2, 2021

From @artemiusgreat (#1815 (comment))

Does anybody have any idea why in Mac OS I'm getting this error?
The method OnAfterRenderAsync complains that there is no suitable method to override.
If I remove override from this method, it says that it hides existing method in this class.
This error seems to contradict itself, the method exists but can't be overridden.
Is it a Mono issue?
https://github.com/mattleibow/SkiaSharpBlazorWebAssembly/blob/main/SkiaSharp.Views.Blazor/SKCanvasView.razor.cs#L52

image

@mattleibow
Copy link
Contributor Author

Let me have a look at this. Did you try the new VSMac preview? I wonder if there was some issue with the source gen in older IDEs. I know we had issues in the maui repo, but later versions seemed to have been much better.

@mattleibow
Copy link
Contributor Author

mattleibow commented Oct 2, 2021

You may have an older SDK. I can get it to build and run via the CLI once I installed the later SDKS.

https://dotnetcli.azureedge.net/dotnet/Sdk/6.0.100-rc.2.21478.37/dotnet-sdk-6.0.100-rc.2.21478.37-osx-x64.pkg

dotnet workload update --from-rollback-file https://aka.ms/dotnet/maui/preview.9.json --source https://aka.ms/dotnet6/nuget/index.json
dotnet workload install wasm-tools --skip-manifest-update --source https://aka.ms/dotnet6/nuget/index.json

@mattleibow
Copy link
Contributor Author

Just tested on the very latest of IDE builds, and I get an error there. A different error, so I am checking with the IDE team. Not sure why I would get an error in the IDE and not the CLI since they are using the same commands...

my error log: https://gist.github.com/mattleibow/e2f0471a0dc644229213c8572d4535ef

@artemiusgreat
Copy link

artemiusgreat commented Oct 2, 2021

Just tested on the very latest of IDE builds, and I get an error there. A different error, so I am checking with the IDE team. Not sure why I would get an error in the IDE and not the CLI since they are using the same commands...

my error log: https://gist.github.com/mattleibow/e2f0471a0dc644229213c8572d4535ef

I've been trying to install VS 2022 on Mac for several days but appeared to be it's not as easy as in Windows because Mac users are required to request a link to download a new VS preview. The download link is not available directly. Maybe some licensing issues or something.

Besides this, I have Visual Studio 2019, the latest SDKs, including .NET 6 Preview 7, and updated all Nuget packages including pre-releases. Nevertheless, VS isn't complaining about the latest features but about the basic override modifier.

Laptop:~ Administrator$ dotnet --list-sdks
2.1.505 [/usr/local/share/dotnet/sdk]
2.1.701 [/usr/local/share/dotnet/sdk]
3.0.100 [/usr/local/share/dotnet/sdk]
3.1.413 [/usr/local/share/dotnet/sdk]
5.0.401 [/usr/local/share/dotnet/sdk]
6.0.100-preview.7.21379.14 [/usr/local/share/dotnet/sdk]
6.0.100-rc.1.21463.6 [/usr/local/share/dotnet/sdk]

The version of the Skia is this one.

image

The latest CLI didn't install for some reason.

image

Executing commands that you sent I'm getting the error in red.

image

Then, failing build.

image

@Pinox
Copy link

Pinox commented Oct 5, 2021

Hi @mattleibow , awesome stuff. Was checking out https://github.com/microcharts-dotnet/Microcharts last week and was hoping for the day we can run microcharts with blazor as I currently use it in Xamarin Forms. I assume this request with Skia makes that now possible as Microcharts just needs (.NET Standard 2.0 SkiaSharp ) ?

@mattleibow
Copy link
Contributor Author

Yep!

@dr-vij
Copy link

dr-vij commented Oct 5, 2021

It looks fantastic!

@davidwengier
Copy link

Hello @mattleibow I don't think you saw my question so I'm obnoxiously reposting it:

Very excited for this! Is there a reason SKCanvasView doesn't have the same render loop requestAnimationFrame functionality? Doesn't it work with normal 2D HTML canvases too?

IS this in fact a subtle way to drive people to use GL stuff and I should just stop being lazy? 😛

@mattleibow
Copy link
Contributor Author

Is there a reason SKCanvasView doesn't have the same render loop requestAnimationFrame functionality?

Nope! This is a pre-pre-preview PR. I am going to make both views do the same thing with a render loop. I was going for a canvas view is on-demand by default, but for the html/js stuff, there is no clean way to do a loop for managed code with all weird timers. So, I might as well do it right in js with the frame and then all is well.

@mattleibow
Copy link
Contributor Author

@davidwengier all done!

I'll push another build to the preview feed as soon as it is done. Hopefully people are just making absolutely amazing blazor+wasm apps already :)

@anpin
Copy link
Contributor

anpin commented Feb 13, 2022

hi @mattleibow, I'm getting the same issue SKCanvasView.OnAfterRenderAsync(bool)': no suitable method found to override on 6.0.200-preview.22055.15on Windows. What could possibly be wrong?

Error message:

"D:\Work\Projects\SkiaSharp\source\SkiaSharpSource.Windows-net6.slnf" (Build target) (1:2) ->
       "D:\Work\Projects\SkiaSharp\source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor.csproj"
       (CoreCompile target) ->
         D:\Work\Projects\SkiaSharp\source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SKCanvasView.razor.cs(63,33):
       iaSharp\source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor.csproj]
         D:\Work\Projects\SkiaSharp\source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SKGLView.razor.cs(70,33): erro
       r CS0115: 'SKGLView.OnAfterRenderAsync(bool)': no suitable method found to override [D:\Work\Projects\SkiaSharp\
       source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor.csproj]

@mattleibow mattleibow added this to the v2.88.0 milestone May 22, 2022
@mattleibow
Copy link
Contributor Author

@anpin I totally missed this. Could you open a new issue for that? Often, closed issues are missed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

7 participants