Faceplate <smart-faceplate>

Getting Started with Faceplate in Blazor

Smart.Blazor.Industrial targets .NET 6 and later, for Blazor Server and Blazor WebAssembly.

The Faceplate component is part of the Smart.Blazor.Industrial NuGet package, which contains all 54 Industrial components as Razor components. The package includes the Smart.Industrial runtime in its wwwroot and does not depend on Smart.Blazor.

Quick start

1. Install the package:
   
   

   dotnet add package Smart.Blazor.Industrial

   
   
2. Add the styles and the runtime to the application page (App.razor, _Host.cshtml or index.html):
   
   

   <link rel="stylesheet" href="_content/Smart.Blazor.Industrial/css/smart.default.css" />
   <link rel="stylesheet" href="_content/Smart.Blazor.Industrial/css/smart.industrial-elements.css" />
   <link rel="stylesheet" href="_content/Smart.Blazor.Industrial/css/smart.industrial.css" />
   
   <script src="_content/Smart.Blazor.Industrial/js/smart.blazor.js"></script>
   <script src="_content/Smart.Blazor.Industrial/js/smart.industrial.js"></script>

   
   
3. Register the services in Program.cs and add the namespace to _Imports.razor:
   
   

   using Smart.Blazor.Industrial;
   
   builder.Services.AddSmartIndustrial();

   @using Smart.Blazor.Industrial

   
   
4. Use the component in a page. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode: @rendermode InteractiveServer as below, InteractiveWebAssembly or InteractiveAuto, or one render mode for the whole app on <Routes @rendermode="InteractiveServer" /> in App.razor. Without it the component renders as an empty box and its parameters and events do not arrive. On .NET 6 and 7 leave the @rendermode line out. The parameters are the component's properties in PascalCase; the events are EventCallbacks named On<EventName>. This is the first element of the demo, with Interactive set:
   
   

   @page "/"
   @* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
   @rendermode InteractiveServer
   
   <Faceplate
              Tag="TIC-204"
              Description="Jacket temperature"
              Unit="°C"
              Min="0"
              Max="150"
              ProcessValue="84.2"
              Setpoint="85"
              Output="41"
              Mode="FaceplateMode.Auto"
              Quality="FaceplateQuality.Stale"
              PrecisionDigits="1"
              Interactive="true"
              OnSetpointChange="OnSetpointChange" />
   
   @code {
       void OnSetpointChange(Event ev)
       {
           // Event is a Dictionary<string, dynamic>; "Detail" is the typed detail of the event.
           FaceplateSetpointChangeEventDetail detail = ev["Detail"];
   
           // Write the request to the plant here, then set the parameter from the value the plant reports.
       }
   }

   
   
5. The component raises OnSetpointChange as a request when Interactive is true and does not change its own value: the handler writes to the plant, and the parameter is set from the value the plant reports. The typed detail class FaceplateSetpointChangeEventDetail carries the event data.
   
   
6. Set the license key once, in Program.cs: Smart.Blazor.Industrial.License.Key = "YOUR-KEY";

Parameters

The most used parameters of <Faceplate>; the API page lists them all.

Events

OnSetpointChange, OnOutputChange, OnModeChange, OnAlarmStateChange, OnWriteTimeout

The frameworks guide describes the parameter types, the naming rules and the request/confirm round trip in C#.