CODEWITHSUNDEEP
svgblazorblazor-server-side
jrzycoder
jrzycoder

Reputation: 21

Blazor / SVG Real Time Updates

I'm in the early stages of working on a real-time web app using Blazor. The purpose is to display real-time status updates pertaining to the state of certain devices on a webpage. It's an HMI for a machine. Think of it like a dashboard with real-time data updates.

The graphical model of the machine will be done with SVG and hosted in the app. I'm trying to design the app so that creating and marking up the graphical model can be done in a tool like InkScape and marked up accordingly, giving the bits and pieces of the model attributes that can then be manipulated by the blazor app depending on the state of the machine. For example, change the color or visibility of an SVG object depending on the running status of a part of the machine. The server would have knowledge of the state of the various parts of the machine, and as they change I'd like to push the changes to the app and have the graphics updated in real-time.

I'm struggling with the best way to design this so that the authoring of the graphics can be kept separate from the actual HTML that is rendered.

So, my question is this, is it possible using Blazor to update known parts of the svg DOM based on data changes. for example, if each element has a known 'id' field, how can I find that element and then update the svg 'fill' or 'visibility' or other properties?

Upvotes: 2

Views: 2667

Answers (1)

Brian Parker
Brian Parker

Reputation: 14623

Blazor works fine with SVG. It can render it like any other html.

SomeSvgComponent.razor

<svg height="100" width="100">
    <CircleSvg Radius="@radius" />
</svg>

<input type="range" 
       class="form-control-range" 
       step=".1" min="20" max="60" 
       @bind-value="@radius" 
       @bind-value:event="oninput"  />

@code {
    double radius = 40;
}

CircleSvg.razor

<circle cx="50" cy="50" r="@Radius" stroke="black" stroke-width="3" fill="red" />
@code {
    [Parameter]
    public double Radius { get; set; }
}

BlazorFiddle

Upvotes: 2

Related Questions