easing.html

<script type="text/javascript">
    RED.nodes.registerType('easing',{
        category: 'function',
        color: '#E6E0F8',
        defaults: {
            name: {value: "" },
            easingType: { value: "linear" },
            outputType: { value: "overTime" },
            duration: { value: 1000, validate: RED.validators.number() },
            interval: { value: 50, validate: RED.validators.number() },
            numberOfValues: { value: 10, validate: RED.validators.number() }
        },
        inputs:1,
        outputs:1,
        icon: "function.png",
        label: function() {
            return this.name || "easing";
        },
        oneditprepare: function () {

            function switchOperatorType(operatorType) {
                $(".detail-view").hide();
                if (operatorType !== "")
                    $(".detail-view#" + operatorType).show()
            }

            $('#node-input-outputType').on('change', function (val) {
                switchOperatorType(this.value);
            })

            switchOperatorType("overTime");
        },
        oneditsave: function () {
            var type = $('#node-input-outputType').val();
            this.outputType = type || "overTime";
        }
    });
</script>

<script type="text/x-red" data-template-name="easing">
    <div class="form-row">
        <label for="node-input-easingType">Easing Function</label>
        <select id="node-input-easingType" style="width:270px !important">
            <option value="none" disabled selected>Select easing function</option>
            <option value="linear">linear</option>

            <option value="easeInQuad">easeIn</option>
            <option value="easeOutQuad">easeOut</option>
            <option value="easeInOutQuad">easeInOut</option>

            <option value="easeInCubic">easeInCubic</option>
            <option value="easeOutCubic">easeOutCubic</option>
            <option value="easeInOutCubic">easeInOutCubic</option>

            <option value="easeInQuart">easeInQuart</option>
            <option value="easeOutQuart">easeOutQuart</option>
            <option value="easeInOutQuart">easeInOutQuart</option>

            <option value="easeInQuint">easeInQuint</option>
            <option value="easeOutQuint">easeOutQuint</option>
            <option value="easeInOutQuint">easeInOutQuint</option>

            <option value="easeInSine">easeInSine</option>
            <option value="easeOutSine">easeOutSine</option>
            <option value="easeInOutSine">easeInOutSine</option>

            <option value="easeInExpo">easeInExpo</option>
            <option value="easeOutExpo">easeOutExpo</option>
            <option value="easeInOutExpo">easeInOutExpo</option>

            <option value="bounceIn">bounceIn</option>
            <option value="bounceOut">bounceOut</option>
            <option value="bounceInOut">bounceInOut</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-outputType">Output</label>
        <select id="node-input-outputType" style="width:270px !important">
            <option value="overTime" selected>Values over time</option>
            <option value="asArray">As Array</option>
        </select>
    </div>

    <div class="detail-view" id="asArray">
        <div class="form-row">
            <label for="node-input-numberOfValues">Size</label>
            <input type="number" id="node-input-numberOfValues" placeholder="Number of Values">
        </div>
    </div>

    <div class="detail-view" id="overTime">
        <div class="form-row">
            <label for="node-input-duration">Duration</label>
            <input type="number" id="node-input-duration" placeholder="Duration for function">
        </div>
        <div class="form-row">
            <label for="node-input-interval">Interval</label>
            <input type="number" id="node-input-interval" placeholder="Interval for emiting values">
        </div>
    </div>

    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="easing">
    <p>A node that animates a value between a start and end value using an easing function</p>

    <h3>Inputs</h3>
        <dl class="message-properties">
            <dt>topic
                <span class="property-type">string</span>
            </dt>
            <dd>
                Sending a message with the topic <i>reset</i> will cancel a running easing function. Any other topic will trigger the easing function. 
            </dd>
            <dt>payload
                <span class="property-type">number | json</span>
            </dt>
            <dd>
                <ul>
                <li>If the payload is a number, the node will ramp from its last value to this number using the specified easing function.</li>
                <li>If the payload contains a json object in the format: <code>{ "from" : 1, "to" : 10, "duration": 200, "interval" : 10 }</code>, it will ramp between these two values within 200ms, sending a value every 10ms</li>
                <li>If the payload contains a json object in the format: <code>{ "from" : 1, "to" : 10, "size": 10 }</code>, it will ramp between these two values, giving an array of 10 values</li>
                <li>In any other case, the function will ramp from 0.0 to 1.0.</li>
                </ul>
            </dd>
        </dl>

    <h3>Options</h3>
        <dl class="message-properties">
            <dt>Easing Function
                <span class="property-type">string</span>
            </dt>
            <dd>
                Selects the easing function.
            </dd>
            <dt>Output
                <span class="property-type">string</span>
            </dt>
            <dd>
                Selects either to output values as an array or over time.
            </dd>
            <dt>Size
                <span class="property-type">number</span>
            </dt>
            <dd>
                Selects number of elements if output is set to array.
            </dd>
            <dt>Duration
                <span class="property-type">number</span>
            </dt>
            <dd>
                Sets duration of the easing function.
            </dd>
            <dt>Interval
                <span class="property-type">number</span>
            </dt>
            <dd>
                Sets interval in which values are emitted.
            </dd>
        </dl>
</script>