npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

node-red-contrib-easing

v0.2.2

Published

A node for node-red that animates a value between a start and end value using an easing function.

Downloads

88

Readme

Node Red Contrib Easing

A node that ramps up a value from a start to an end value using an easing function. Output values are values over time or values within an array. Typical use cases are smoothing command value changes to avoid large steps.
node-appearance
Fig. 1: Node appearance

Installation

In Node-RED

  • Via Manage Palette -> Search for "node-red-contrib-easing"

In a shell

  • go to the Node-RED installation folder, in OS X it's usually: ~/.node-red
  • run npm install node-red-contrib-easing

Usage

Node Configuration

node-settings
Fig. 2: Node properties

Easing function

The transition from the start to the end value follows a functional behaviour. These transiton profiles are divided into three categories depending on the easing function name:

  • easeIn...: These are profiles where the starting section is very smooth and the ending section contains a sharp bend.
  • easeOut...: These are profiles where the starting section contains a sharp bend and the ending section is very smooth.
  • easeInOut...: These are profiles where starting and ending sections are quite smooth.

The behaviour of these three categories is shown by the means of the sinoidal functions in Figure 3.
Fig. 3: Easing function categories (In, Out, InOut)

Several easing funtions are selectable in the node configuration. These are:

  • linear
  • 2nd order / parabolic (easeIn, easeOut, easeInOut)
  • 3rd order / cubic (easeInCubic, easeOutCubic, easeInOutCubic)
  • 4th order (easeInQuart, easeOutQuart, easeInOutQuart)
  • 5th order (easeInQuint, easeOutQuint, easeInOutQuint)
  • sinusodial (easeInSine, easeOutSine, easeInOutSine)
  • exponential (easeInExpo, , easeOutExpo, easeInOutExpo)
  • bouncing (bounceIn, bounceOut, bounceInOut)

The profiles of these functions are shown below. See chapter Transition profiles of the easing functions for details.

Input

Depending on the type of the msg.payload the easing node behaves differently ramping with the selected easing function:

  1. No payload (empty string) In the case of an empty string within the msg.payload, the easing node ramps from 0.0 to 1.0.
  2. Number as payload If the msg.payload is a number, the easing node ramps from its last value to this number given.
  3. JSON object as payload
  • If the msg.payload contains a JSON object in the format: { "from" : 1, "to" : 10, "duration": 200, "interval" :10 }, it will ramp between these two values (<from>, <to>) within the given <duration> (in milliseconds), outputing a value every <interval> ms.
  • If the msg.payload contains a JSON object in the format: { "from" : 1, "to" : 10, "size": 10 }, it will ramp between these two values (<from>, <to>), giving an array of <size> values.
  1. Sending a msg with the topic reset will cancel any currently running easing function.

Output

The output can be configured via the Output property within the node configuration to be

  • Values over Time In this case, several msg objects are sent, each containing one single value within the msg.payload.
  • As Array In this case, one single msg is sent, containing an array with all transition profile values within the msg.payload.

Output - Values over time

This option generates a msg sequence. The duration of this sequence is set by the Duration property within the node configuration. The time interval between two msg sent is set by the Interval property within the node configuration. The scaling of both values relates to milliseconds (ms).

The number of sent msg objects equals to (<Duration> / <Interval>) + 1: The first msg object is sent immediately containing the start value (e.g. 0.0), the last msg object is sent after <Duration> ms containing the end value (e.g. 1.0).

The 'step height' of every msg.payload value depends on the selected easing function. As an example, for the linear case it equals to :
(<end value> -- <start value>) · <Interval> / <Duration>.
Values_over_time
Fig. 4: Values over time (<duration>, <interval> in ms)

Output - Values in an array

This option generates one single msg object. It contains an array [0 .. <Size>] with a selectable number of entries. This number of entries is set by the Size property within the node configuration, i.e. the array contains (<Size> + 1) entries.
As array
Fig. 5: Configuration As Array

Further information

Check Node-REDs info panel to see more information on how to use the easing node.

Example


Remark: Example flows are present in the examples subdirectory. In Node-RED they can be imported via the import function and then selecting Examples in the vertical tab menue.


The example flow shows the three options of input data via the injecting nodes (option values over time).

EasingFlow.json

Fig. 6: Easing example

Transition profiles of the easing functions

The following graphs show the normalized transition profiles the user can select.

Fig. 7: Polynomial profiles

Fig. 8: Sinoide and exponential profiles

Fig. 9: Bouncing profiles