Detect communications loss between Perspective Client and Gateway

Ignition
1

I’m working to resolve an exception scenario I discovered during testing.
I’d like to be able to detect when there’s a comm loss between a perspective session (running on a PC) and the Gateway (on another PC). And then automatically switch to another page with messaging indicating there was a comms loss.

At present, when I disconnect the client from the network I see that there’s a small “No Connection to Gateway” banner that appears at the top. This presents two problems. 1) At a glance from a distance an operator may not notice this . 2) All existing states on the UI seem to be at their last state. It is problematic to display a system state that’s not necessarily true.

I know it’s problematic to run client side events/scripts as these execute on the gateway. Is there a way to display better (larger) messaging of a comms loss? Switch pages as I’d prefer? Or any other method to address client to gateway comm loss events?

1 Like
2

Hi @fil.rossi, and welcome to the forums!

You can do this with Perspective Workstation through the new (8.1.6) Fallback Redirect feature. It even supports returning to the original page once comms are re-established.

Hope that helps,
Jonathan C

3

I’m not sure if @jcoffman 's solution will suit, but if not, you might be able to look at modifying the display of the existing comms lost display by overriding the CSS for it in your custom CSS theme

4

Thanks @nminchin @jcoffman. Our client prefers to use a web browser instead of Perspective Workstation, for reasons that escape me. I’ll look into the Fallback redirect and perhaps make a case to switch to PW. I’ll also look into this CSS option. Thanks.

5

The selectors you’ll need to change are:

.connection-lost-banner {
    position: absolute;
    width: 100%;
    height: 3rem;
    top: -3rem;
    padding: 0.75rem 1rem;
    background-color: #194070;
    transition: top 0.3s ease-in-out;
}

and for the text:

.connection-lost-banner .connection-lost-message {
    color: #4E5665;
    font-size: 16px;
    line-height: 1.5rem;
}

You can modify this in your browser with your browser’s dev tools to test it and get it right before copying it into your theme.

image
image910×239 26.6 KB

image
image942×92 4.99 KB

6

Hey,

Thanks very much!

Best Regards,

Fil

7

Howdy @nminchin - I'm just trying to get your CSS override suggestion from a few years ago working but it seems to only work when the dev tools is open - can you confirm if there is a way for these CSS overrides to be applied when dev tools is closed? It looks so much more obvious with the red/white! Thanks.

8

You can add them into the advanced stylesheet into the perspective project to have them permanent

1 Like
9

Ahhhh, I didn't realize that was a thing. I got it working. One further question - can I change the text that is displayed? I'm not savvy with the web stuff - I see the "No Connection to Gateway" text in the web page elements but is that something can set also via the stylesheet? Thanks for the help!

10

Not via CSS, no - CSS can only style existing dom elements. There was a post the other day about being able to affect the base HTML doc or something that may be able to modify the text? but it would be very unsupported. I can't find the post.. but someone else may know what I'm talking about @victordcq?

11

i would first check if you can put this in the translation mananger and just change it in there

But you can create new content with css using a :before or :after selector with content:'string'

i cant rly test the lost connection banner rn, but i guess it could look like this

.connection-lost-banner .connection-lost-message {
    visibility: hidden;
    position: relative;
}
.connection-lost-banner .connection-lost-message:before {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

something like this isnt really recommanded though, wont work with translation and stuff.

1 Like