High Performance HMI Alarm Indicator Border Styles

nminchin · August 23, 2024, 4:05am

This exchange resource is a really nice way to implement showing alarms, as it abstracts the visual components away from physical components you have to place yourself, and instead defines them all within CSS. So adding an alarm border and the alarm icon itself is simply a matter of adding the style class to the component.

My one comment for improvement however, would be to add Perspective Styles for each of the CSS selectors so that they can be selected from the style.classes dropdown.

(You simply need to add skeleton Perspective Styles for each of the selectors which the stylesheet would merge with, however it would be prudent to then also rename the selectors so that they are grouped in the Perspective Styles)

e.g.

Stylesheet

/* High Performance Alarm Indication from BIJC
 * Created by Lewis Storey & Yahia Aboueleish*/

/*Priority 1 Alarm indicated by a red border, a red square priority symbol and the number 1*/


.psc-Alarms\/Display\/border-1 {
  position: relative;
  box-shadow: 0px 0px 0px 2px var(--alarm-border-color, red);
}

.psc-Alarms\/Display\/top-left-border-1 {
  position: relative;
  box-shadow: -1px -1px 0px 1px var(--alarm-border-color, red);
}

.psc-Alarms\/Display\/icon-1 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-1 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-1::before,.psc-Alarms\/Display\/border-1::before,.psc-Alarms\/Display\/top-left-border-1::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background-color: var(--alarm-priority-color, red); 
}

.psc-Alarms\/Display\/inner-icon-1::after,.psc-Alarms\/Display\/border-1::after,.psc-Alarms\/Display\/top-left-border-1::after {
  counter-reset: alarm-content var(--alarm-priority-number, 1);
  content: counter(alarm-content);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.psc-Alarms\/Display\/icon-1::before,.psc-Alarms\/Display\/border-1::before,.psc-Alarms\/Display\/top-left-border-1::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  background-color: var(--alarm-priority-color, red); 
}

.psc-Alarms\/Display\/icon-1::after,.psc-Alarms\/Display\/border-1::after,.psc-Alarms\/Display\/top-left-border-1::after {
  counter-reset: alarm-content var(--alarm-priority-number, 1);
  content: counter(alarm-content);
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

/*Priority 2 Alarm indicated by a yellow border, a yellow triangle priority symbol and the number 2*/

.psc-Alarms\/Display\/border-2 {
  position: relative;
  box-shadow: 0px 0px 0px 2px var(--alarm-border-color, #E6E600);
}

.psc-Alarms\/Display\/top-left-border-2 {
  position: relative;
  box-shadow: -1px -1px 0px 1px var(--alarm-border-color, #E6E600);
}

.psc-Alarms\/Display\/icon-2 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-2 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-2::before,.psc-Alarms\/Display\/border-2::before,.psc-Alarms\/Display\/top-left-border-2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--alarm-priority-color, #E6E600);
}

.psc-Alarms\/Display\/inner-icon-2::after,.psc-Alarms\/Display\/border-2::after,.psc-Alarms\/Display\/top-left-border-2::after {
  counter-reset: alarm-content var(--alarm-priority-number, 2);
  content: counter(alarm-content);
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.psc-Alarms\/Display\/icon-2::before,.psc-Alarms\/Display\/border-2::before,.psc-Alarms\/Display\/top-left-border-2::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--alarm-priority-color, #E6E600);
}

.psc-Alarms\/Display\/icon-2::after,.psc-Alarms\/Display\/border-2::after,.psc-Alarms\/Display\/top-left-border-2::after {
  counter-reset: alarm-content var(--alarm-priority-number, 2);
  content: counter(alarm-content);
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

/*Priority 3 Alarm indicated by an orange border, an orange upside down triangle priority symbol and the number 3*/

.psc-Alarms\/Display\/border-3 {
  position: relative;
  box-shadow: 0px 0px 0px 2px var(--alarm-border-color, orange);
}

.psc-Alarms\/Display\/top-left-border-3 {
  position: relative;
  box-shadow: -1px -1px 0px 1px var(--alarm-border-color, orange);
}

.psc-Alarms\/Display\/icon-3 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-3 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-3::before,.psc-Alarms\/Display\/border-3::before,.psc-Alarms\/Display\/top-left-border-3::before {
  content: "";
  position: absolute;
  top: 0px;
  left: -1px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--alarm-priority-color, orange);
  transform: rotate(180deg); 
}

.psc-Alarms\/Display\/inner-icon-3::after,.psc-Alarms\/Display\/border-3::after,.psc-Alarms\/Display\/top-left-border-3::after {
  counter-reset: alarm-content var(--alarm-priority-number, 3);
  content: counter(alarm-content);
  position: absolute;
  top: 0px;
  left: 4px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.psc-Alarms\/Display\/icon-3::before,.psc-Alarms\/Display\/border-3::before,.psc-Alarms\/Display\/top-left-border-3::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--alarm-priority-color, orange);
  transform: rotate(180deg); 
}

.psc-Alarms\/Display\/icon-3::after,.psc-Alarms\/Display\/border-3::after,.psc-Alarms\/Display\/top-left-border-3::after {
  counter-reset: alarm-content var(--alarm-priority-number, 3);
  content: counter(alarm-content);
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

/*Diagnostic Priority Alarm indicated by a magenta border, magenta diamond priority symbol and the number 4*/

.psc-Alarms\/Display\/border-4 {
  position: relative;
  box-shadow: 0px 0px 0px 2px var(--alarm-border-color, magenta);
}

.psc-Alarms\/Display\/top-left-border-4 {
  position: relative;
  box-shadow: -1px -1px 0px 1px var(--alarm-border-color, magenta);
}

.psc-Alarms\/Display\/icon-4 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-4 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-4::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background-color: var(--alarm-priority-color, magenta); 
  transform: rotate(45deg); 
}

.psc-Alarms\/Display\/inner-icon-4::after {
  counter-reset: alarm-content var(--alarm-priority-number, 4);
  content: counter(alarm-content);
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.psc-Alarms\/Display\/icon-4::before,.psc-Alarms\/Display\/border-4::before,.psc-Alarms\/Display\/top-left-border-4::before {
  content: "";
  position: absolute;
  top: -11px;
  left: -11px;
  width: 20px;
  height: 20px;
  background-color: var(--alarm-priority-color, magenta); 
  transform: rotate(45deg); 
}

.psc-Alarms\/Display\/icon-4::after,.psc-Alarms\/Display\/border-4::after,.psc-Alarms\/Display\/top-left-border-4::after {
  counter-reset: alarm-content var(--alarm-priority-number, 4);
  content: counter(alarm-content);
  position: absolute;
  top: -11px;
  left: -11px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

Example of style classes:

nminchin · August 23, 2024, 5:23am

A few other suggestions:

Replace these sections in the stylesheet:

  counter-reset: alarm-content var(--alarm-priority-number, 4);
  content: counter(alarm-content);

with:

  content: var(--alarm-priority-content-p4);

and add the variable into a root selector at the top:

:root {
  --alarm-priority-content-p4: "4";
}

The counter isn't needed.

Set the text colour of the priority numbers according to the colour lightness of the icon colour. E.g. white text on red and magenta icon, black on the lighter colours yellow and orange.
Replace values like this:
var(--alarm-priority-color, magenta); with
var(--alarm-priority-colour-p4); and then define these in the root at the top e.g.

:root {
  --alarm-priority-colour-p4: magenta;
}

e.g.

Modified Stylesheet

/* High Performance Alarm Indication from BIJC
 * Created by Lewis Storey & Yahia Aboueleish
 Revision History
 Rev		Date			Author					Comment
 1.0.6	2023-08-23	Lewis Storey/Yahia Aboueleish	Original
 1.1.0	2024-08-23	Nick Minchin				Added root variables with alarm colours and icon text
 											Modified selector names to modify Perspective Styles so they can be selected in the Designer
 */
 :root {
	--alarm-priority-colour-p1: #E22028;
	--alarm-priority-content-p1: "C";
	
	--alarm-priority-colour-p2: #EC8629;
	--alarm-priority-content-p2: "H";

	--alarm-priority-colour-p3: #F5E11B;
	--alarm-priority-content-p3: "M";

	--alarm-priority-colour-p4: #916AAD;
	--alarm-priority-content-p4: "L";

	--alarm-priority-colour-p5: black;
	--alarm-priority-content-p5: "D";
}

/*Priority 1 (Critical) Alarm indication - Square icon*/

.psc-Alarms\/Display\/border-1 {
  position: relative;
  box-shadow: 0px 0px 0px 2px var(--alarm-priority-colour-p1);
}

.psc-Alarms\/Display\/top-left-border-1 {
  position: relative;
  box-shadow: -1px -1px 0px 1px var(--alarm-priority-colour-p1);
}

.psc-Alarms\/Display\/icon-1 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-1 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-1::before,.psc-Alarms\/Display\/border-1::before,.psc-Alarms\/Display\/top-left-border-1::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background-color: var(--alarm-priority-colour-p1); 
}

.psc-Alarms\/Display\/inner-icon-1::after,.psc-Alarms\/Display\/border-1::after,.psc-Alarms\/Display\/top-left-border-1::after {
  content: var(--alarm-priority-content-p1);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  color: #fff; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.psc-Alarms\/Display\/icon-1::before,.psc-Alarms\/Display\/border-1::before,.psc-Alarms\/Display\/top-left-border-1::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  background-color: var(--alarm-priority-colour-p1);
}

.psc-Alarms\/Display\/icon-1::after,.psc-Alarms\/Display\/border-1::after,.psc-Alarms\/Display\/top-left-border-1::after {
  content: var(--alarm-priority-content-p1);
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  color: #fff; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

/*Priority 2 (High) Alarm indication - Triangle icon*/

.psc-Alarms\/Display\/border-2 {
  position: relative;
  box-shadow: 0px 0px 0px 2px var(--alarm-priority-colour-p2);
}

.psc-Alarms\/Display\/top-left-border-2 {
  position: relative;
  box-shadow: -1px -1px 0px 1px var(--alarm-priority-colour-p2);
}

.psc-Alarms\/Display\/icon-2 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-2 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-2::before,.psc-Alarms\/Display\/border-2::before,.psc-Alarms\/Display\/top-left-border-2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--alarm-priority-colour-p2);
}

.psc-Alarms\/Display\/inner-icon-2::after,.psc-Alarms\/Display\/border-2::after,.psc-Alarms\/Display\/top-left-border-2::after {
  content: var(--alarm-priority-content-p2);
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.psc-Alarms\/Display\/icon-2::before,.psc-Alarms\/Display\/border-2::before,.psc-Alarms\/Display\/top-left-border-2::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--alarm-priority-colour-p2);
}

.psc-Alarms\/Display\/icon-2::after,.psc-Alarms\/Display\/border-2::after,.psc-Alarms\/Display\/top-left-border-2::after {
  content: var(--alarm-priority-content-p2);
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

/*Priority 3 (Medium) Alarm indication - Upside-down Triangle Icon*/

.psc-Alarms\/Display\/border-3 {
  position: relative;
  box-shadow: 0px 0px 0px 2px var(--alarm-priority-colour-p3);
}

.psc-Alarms\/Display\/top-left-border-3 {
  position: relative;
  box-shadow: -1px -1px 0px 1px var(--alarm-priority-colour-p3);
}

.psc-Alarms\/Display\/icon-3 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-3 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-3::before,.psc-Alarms\/Display\/border-3::before,.psc-Alarms\/Display\/top-left-border-3::before {
  content: "";
  position: absolute;
  top: 0px;
  left: -1px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--alarm-priority-colour-p3);
  transform: rotate(180deg); 
}

.psc-Alarms\/Display\/inner-icon-3::after,.psc-Alarms\/Display\/border-3::after,.psc-Alarms\/Display\/top-left-border-3::after {
  content: var(--alarm-priority-content-p3);
  position: absolute;
  top: 0px;
  left: 4px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.psc-Alarms\/Display\/icon-3::before,.psc-Alarms\/Display\/border-3::before,.psc-Alarms\/Display\/top-left-border-3::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--alarm-priority-colour-p3);
  transform: rotate(180deg); 
}

.psc-Alarms\/Display\/icon-3::after,.psc-Alarms\/Display\/border-3::after,.psc-Alarms\/Display\/top-left-border-3::after {
  content: var(--alarm-priority-content-p3);
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  color: #000000; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

/*Priority 4 (Low) Alarm indication - Diamond Icon*/

.psc-Alarms\/Display\/border-4 {
  position: relative;
  box-shadow: 0px 0px 0px 2px var(--alarm-priority-colour-p4);
}

.psc-Alarms\/Display\/top-left-border-4 {
  position: relative;
  box-shadow: -1px -1px 0px 1px var(--alarm-priority-colour-p4);
}

.psc-Alarms\/Display\/icon-4 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-4 {
  position: relative;
}

.psc-Alarms\/Display\/inner-icon-4::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background-color: var(--alarm-priority-colour-p4); 
  transform: rotate(45deg); 
}

.psc-Alarms\/Display\/inner-icon-4::after {
  content: var(--alarm-priority-content-p4);
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  color: #fff; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.psc-Alarms\/Display\/icon-4::before,.psc-Alarms\/Display\/border-4::before,.psc-Alarms\/Display\/top-left-border-4::before {
  content: "";
  position: absolute;
  top: -11px;
  left: -11px;
  width: 20px;
  height: 20px;
  background-color: var(--alarm-priority-colour-p4); 
  transform: rotate(45deg); 
}

.psc-Alarms\/Display\/icon-4::after,.psc-Alarms\/Display\/border-4::after,.psc-Alarms\/Display\/top-left-border-4::after {
  content: var(--alarm-priority-content-p4);
  position: absolute;
  top: -11px;
  left: -11px;
  width: 20px;
  height: 20px;
  color: #fff; 
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

I just want to re-emphasise that i'm really impressed with how easy it is to use this resource, and how well they work. Thanks for this resource

Ha99 · October 23, 2024, 7:43am

Hi,
I have a need related to this, is it possible to add other indicators in css like the availability of the equipment or the mode in ccs with other box-shadow, in my equipment I hope having 3 indicators at the same time do you have an idea how to accomplish this in CSS properly.