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