This tutorial will show you can use the animera.js library to easily animate or populate html objects based on sensor values from a mqtt broker.

First you need to add the animera.js library to the head of your html file: 

<html>  
 <head>
   <script src="https://github.com/op-en/animera.js/releases/download/v2.2.0/animera.js" data-autobind="https://op-en.se"></script>
 </head>

 <body>
   <!-- your content -->
 </body>

</html>

bindTopicToHtml This example shows how to display data inside an object. In this case it is a Json string from the mqtt broker with topic: "test/signalA". This topic will also be used in the examples below.


Copy paste this code between the tags <body> and </body>.

<div id="dataDiv1" style="transform-origin: center; background-color: rgba(255,245,0,1); height:160px; width:200px; padding:20px; float:left; margin-right:30px; font-size:12px;" animera="bindTopicToHtml?topic=test/signalA"></div>

This example is pretty straight forward and simply displays the payload from a subscribed mqtt topic defined in the topic=test/signalA parameter.

bindTopicToRotation - Rotation speed. The example shows you how to use animera.js to control the rotation speed of an object. In this case a simple div with with border-radius and background-color styling.

Copy paste the code below into your html file between the tags <body> and </body>.

<div id="spinDiv1" style="transform-origin: center; background-color:rgba(0,169,157,1); height:100px; width:100px; margin:20px;border-radius: 50px; border-top-left-radius:0px; float:left; margin-right:40px;" animera="bindTopicToRotation?inputRange=[0,2500];outputRange=[0,0.5];relative=true;clamp=true;topic=test/signalA;subproperty=power"></div>

The parameter to pay attention to here is the animera inside the div. The others are just normal style parameters in html. With the transform-origin you can decide from which origin the transform is applied. You can read more about possible property values over at w3schools.com.

animera="bindTopicToRotation?inputRange=[0,2500];outputRange=[0,0.5];relative=true;clamp=true;topic=test/signalA;subproperty=power

The string begins by declearing what kind of function we would like to run on the object. List of available functions within the animera.js library:

  • bindTopicToRotation
  • bindTopicToHtml
  • bindTopicToStyle
  • bindTopicToCallback

inputRange Defines the max and min value for the sensor value. This is used for mapping the signal into a rotation speed or a angle in this bindTopicToRotation example. inputRange=[0,2500]
outputRange Defines the max and min value for the output. Meaning which angle or rotation speed is the inputRange mapped to. outputRange=[0,0.5].
relative Defines if the rotation is continuous or static. In other words is it a rotation speed or a rotation angle of the object. relative=true means it is a rotation speed.
topic Defines which topic to subscribe to in the mqtt broker. topic=test/signalA
subproperty Defines which of the properties value it should use to transform the object. subproperty=power

bindTopicToRotation - Rotation angle This example shows you how to change the rotation angle of an object.

Again copy paste the code below into your html file between the tags <body> and </body>.
<div id="spinDiv2" style="transform-origin: center; transition: all 0.5s ease;background-color:rgba(41,171,226,1); height:100px; width:100px; margin:20px; border-radius:50px; border-top-left-radius:0px; float:left; margin-right:40px;" animera="bindTopicToRotation?inputRange=[0,2500];outputRange=[0,180];relative=false;clamp=true;topic=test/signalA;subproperty=power"><div>

The only difference from the bindTopicToRotation - Rotation speed are these parameter values relative=false and outputRange=[0,180]. outputRange defines what kind of angle range the rotation should be restricted to.