Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.58k stars 396 forks source link

Use with Blazor? #209

Open rgamage opened 4 years ago

rgamage commented 4 years ago

I'm trying to use this wonderful library in a server-side Blazor application. It almost works, the element appears briefly on page reload, but quickly disappears. I'm sure there is something unique about the way Blazor renders its HTML that is preventing the canvas-gauges magic to work.

All I've done as a simple test is to add this line to one of my .razor component pages:

Can anyone provide some insight into how I might get this to work? I assume there will be a requirement for some JS interop, but I'm hoping it will be minimal. I'm aware of the project Blazor Extensions Canvas (https://github.com/BlazorExtensions/Canvas), but that's not helpful for this purpose - that's more if you want to start drawing from scratch using the Canvas commands. I just want to use this wonderful gauges library!

rgamage commented 4 years ago

UPDATE - I found that I CAN use this with Blazor, there is just one oddity to know about. The canvas element must be the at the top level of the page or component, it cannot be nested inside a div, for example. I have no idea why this is, but knowing this allows me to use it in Blazor. If you want to put the gauge inside a div, you can just make a separate component that contains the gauge, wherein the canvas element is at the top level. It just has to be at the top level of whatever Blazor component it is in.

Ammarhassan48 commented 1 year ago

this might help you on this https://learn.microsoft.com/en-us/training/modules/blazor-build-rich-interactive-components/2-create-user-interfaces-blazor-components

TuShen121 commented 1 year ago

您的邮件我已收到,谢谢!