Help with ma-switch-img

Jared Wiltshire

JoHn-Beer

Hi @phildunlap I want you to help me.
<ma-switch-img id="963fcec0-a854-4b84-8fd9-287efaa10f72" default-src="/rest/v2/file-stores/default/gray-led-circle-3-md.png" src-false="/rest/v2/file-stores/default/red-led-circle-3-hi.png" src-true="/rest/v2/file-stores/default/led-green-hi.png" point-xid="internal_mango_num_data_points"></ma-switch-img>

If the value is true, show the green light. If the value is false, show the red light.If the value is default, show the grey light.I want the light to blink between green and gray.Where do I set it? Or any component that works the way I want it?

Thankyou.

Jared Wiltshire

@JoHn-Beer I moved your post to a new topic. Please create a new topic when you ask new questions, it helps everyone (including us at IAS) find it.

@john-beer said in Help with ma-switch-img:

If the value is true, show the green light. If the value is false, show the red light.If the value is default, show the grey light

The markup you posted looks correct for what you have described, except that if it is a binary data point then the value is always true or false, there is no scenario where the default would be shown (except before any point values are polled and there is no value).

@john-beer said in Help with ma-switch-img:

I want the light to blink between green and gray.Where do I set it? Or any component that works the way I want it?

When do you want it to blink between green and grey? When the point value is true?

JoHn-Beer

@jared-wiltshire When do you want it to blink between green and grey? When the point value is true?
Ans. Yes. point value is true.blink between green and grey. Where can I set up?

Thank you

Jared Wiltshire

@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>