Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • 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.


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

  • 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!


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

    Thanks again!


  • 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