Pipe Animations

[Pikey4]

Hi,

Is it possible to make the pipe animations animate only when certain conditions are met such as a analog value is above or below 'x' or a binary point is on or off etc.

Many thanks in advance.

[phildunlap]

Hi Pikey,

Here's a way to do it, try it out in your play area (with the XID of a binary point of yours):

<style>
.pipe-disabled {
    background-color: #00bfff;
    background-size: 30px 30px;
    background-image: linear-gradient(90deg,
        transparent 0%,
    	rgba(255, 255, 255, .30) 50%,
    	transparent 100%);
    height: 15px;
    width: 100%;
}
</style>

<ma-get-point-value point-xid="binaryXid" point="binary"></ma-get-point-value>

<div layout="row">
    <md-input-container flex="50">
	   <label>value</label>
	   <input type="number" ng-model="max" ng-init="max=100">
    </md-input-container>
    <md-input-container flex="50">
	   <label>limit</label>
	   <input type="number" ng-model="limit" ng-init="limit=50">
    </md-input-container>
</div>

<div layout="row">
    <md-input-container flex="50">
	   <label>color</label>
	   <input type="color" ng-model="choosenColor" ng-init="choosenColor='#ff4d4d'">
    </md-input-container>
</div>


<div style="position:relative; height: 200px">
	<div ng-class="{'pipe-disabled': limit < max , 'pipe-left-right': limit >= max}" ng-style="{'background-color':choosenColor}" style="position:absolute; top:30px; left:180px; width: 250px; z-index: 1"></div>
	<div ng-class="{'pipe-disabled': binary.value , 'pipe-left-right': !binary.value }" ng-style="{'background-color':choosenColor}" style="position:absolute; top:55px; left:180px; width: 250px; z-index: 1"></div>
</div>

[Pikey4]

Thanks Phillip, I got the Binary one working a treat. I think I would be better creating a binary data point based on if an analog value is above or below a certain value. I could use this new point for other situations. I tried a couple of different ways but couldn't get it going. Are you able to assist with this also?

Cheers!

[Pikey4]

Its ok thanks I got what I need figured from previous posts in this forum.

Thanks again!

[phildunlap]

Glad to hear it!

To use a Numeric point you could have changed the XID to a numeric point (probably rename the point in the 'point' property of the ma-get-point-value) and you could use expressions like I have done with "limit" and "max" only using "binary.value" or whatever you rename it to in the point="binary" portion of ma-get-point-value