Reprise

This is a prosecution of what started in my previous article.
As said, I've managed to split an old project of mine into multiple managed pieces. Now I'm (re)connecting the dots.
The final result should be a single page application that bridges the authorized user to the hardware devices exploiting the new SignalR Core.
Since I've already managed to render IP cameras' frames, it is now time to light up the scene.

OpenWebNet Protocol

In the recent past, I've rebuilt my office floor and empowered it with cabled domotics stuff (lighting, door entry, consumption...) branded by bTicino (which, at least here in Italy, has huge market share). Didn't care much about their user devices since I was aiming to access the overall system at low level and provide my own UI.
The communication protocol used by these devices is the OpenWebNet protocol.
OpenWebNet uses Tcp/Ip underneath and its syntax is pretty straightforward: components who, where and (optional) what are combined in a "meaningful" message string.
The following line represents a message towards the gateway (domotics server) meant to dim a light:

*#1*12*8##

It is even more meaningful when decomposed as:

$"*#{who}*{where}*{what}##" // who -> 1 (light, it is a) // where -> 12 (light address at gateway level) // what -> 8 (dim at 80% of the full intensity)

Acknowledgement for successful execution is also known as ACK
and equals to *#*1##, while its counterpart NACK is the constant string *#*0##.

Status (on/off) and intensity of a light can be also requested:

*#1*12##

And a couple of regexes used to parse a lighting status response:

const string ONOFF_PATTERN = @"^\*1\*(?<What>[01]{1})(#(?<Speed>([\d]+)))?\*(?<Where>[\d]+)##(?<Ack>(\*#\*[01]##))?$"; const string DIM_PATTERN = @"^\*1\*(?<What>([2-9]|10))\*(?<Where>[\d]+)##(?<Ack>(\*#\*[01]##))?$";

Flow

Simple idea is: SignalR Hub opens a connection with the OpenWebNet gateway and communicates back and forth via Tcp/Ip. SignalR Client helps in showing current lighting state and in invoking changes.

UI

SignalR Client is wrapped by Pacem JS custom element <pacem-hub-proxy> while the visual elements are obtained combining other Pacem JS elements:

<pacem-hub-proxy accesstoken="{{ #token.model }}" id="hub" url="{{ #apiUrl.model + 'phousys' }}" disabled="{{ #token.model == null || #apiUrl.model == null }}"> <pacem-hub-listener method="'deviceChange'" on-receive="#change.change = $event.detail[1]"></pacem-hub-listener> </pacem-hub-proxy>

Here's a quick video of a grabbed demo navigation and utilization:

Next steps: consumption charts.