@john-beer You could use a animated gif if you want to use the switch <ma-switch-img> component.
Alternatively you could just style a div to look like a LED indicator using CSS. Here's an example. You can put everything between the <style> tags into a user style sheet if you want to re-use it on multiple pages (Administration, UI settings, User stylesheet URL).
<div class="ma-designer-root" id="1b41b158-5dab-4cb8-8981-1f8861f58bcd" style="width: 1366px; height: 768px; position: relative;">
<ma-get-point-value point-xid="binary" point="binaryPoint"></ma-get-point-value>
<div id="eb9bf90f-9ca2-41f2-9eb1-755b5840c061" style="position: absolute; left: 172px; top: 40px; width: 50px; height: 50px;" class="led" ng-class="{'led-blink': binaryPoint.value}" ng-style="{'background-color': binaryPoint.value ? 'rgb(0, 255, 0)' : 'rgb(255, 0, 0)'}">
<div class="led-inner"></div>
</div>
<div id="20040fcf-9884-4eb6-8e8d-43bf4f5e0a68" style="position: absolute; left: 262px; top: 40px; width: 50px; height: 50px; background-color: rgb(0, 255, 0);" class="led" ng-class="{'led-blink': binaryPoint.value}">
<div class="led-inner"></div>
</div>
</div>
<style>
.led {
border: 5px solid grey;
border-radius: 50%;
overflow: hidden;
box-shadow: 5px 5px 5px rgba(30,30,30,0.7);
}
.led-inner {
height: 100%;
width: 100%;
border-radius: inherit;
}
.led-inner:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: radial-gradient(rgba(255,255,255,0.3),rgba(0,0,0,0.3));
}
.led-blink .led-inner {
animation: led-blink 1s ease-in-out infinite;
}
@keyframes led-blink {
0% {
background-color: rgba(0,0,0,0);
}
50% {
background-color: rgba(0,0,0,1);
}
}
</style>
Offline