# Creating a data driven line animation

A good day to everyone!

Anyone here doing some sort of animating lines vertically and horizontally using the data obtained?

I search on the internet but I found nothing on it related to my concern.
My goal is to create a custom node where I can use to monitor the data obtained from sensors then output it as a response through animating lines on a dashboard template node.

If you already done this stuff, I am more thankful if you share me your knowledge it is really a great help.

I am going to test the possibility on how node-red acts like a scada electrical for my personal use.

Can you define what you mean by animating please?

I want the line to animate like a progress bar when input a data came from sensors.

Then maybe svg animations is good place to start

Gonna go on that, thanks!
Someone had done this on the internet and I think this is a good starting point.

Here's the code:

``````<html>
<style>
#plane
{
position:relative;
margin-left:auto;
margin-right:auto;
width:700px;
height:600px;
}
.point
{
width:10px;
height:10px;

position:absolute;
}
#point1
{
left:20px;
top:20px;
background-color:red;
}
#point2
{
left:500px;
top:20px;
background-color:blue;
}
#line
{
background-color:yellow;
position:absolute;
height:10px;
}
</style>
<script>
function createLine(x1,y1,x2,y2,lineId)
{
/// the distance between the tow points(for the line div width)
distance = Math.sqrt( ((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2))    );

// the mid-point between the two points, we use it as rotation center
xMid = (x1+x2)/2
yMid = (y1+y2)/2

// get the salope of the line between two points

salopeInRadian = Math.atan2(y1 - y2, x1 - x2)
salopeInDegrees =  (salopeInRadian * 180) / Math.PI;

// change the css of the line

line = document.getElementById(lineId)
line.style.width = distance
line.style.top = yMid
line.style.left = xMid - (distance/2)
line.style.transform = "rotate("+salopeInDegrees+"deg)";
}
</script>
<body>

<div id='plane'>
<div class='point' id='point1'></div>
<div class='point' id='point2'></div>
<div id='line'></div>
</div>
<script>
createLine(30,20,500,20,"line")
</script>

</body>
</html>
``````

And @hotNipi has already created this animated level indicator https://flows.nodered.org/node/node-red-contrib-ui-level

Thank you! I tried that node from the past and it seems doesn't work well as what the demo looks about.

Their sample output:
Why it doesn't animate?

My code:

``````[
{
"id": "7d145eb6.29b98",
"type": "ui_level",
"z": "deae5156.4857e",
"group": "97d6a3ec.21de7",
"order": 0,
"width": "6",
"height": "1",
"name": "",
"label": "Horizontal",
"colorHi": "#e60000",
"colorWarn": "#ff9900",
"colorNormal": "#00b33c",
"colorOff": "#595959",
"min": 0,
"max": 100,
"segWarn": "23",
"segHigh": "75",
"unit": "buss",
"layout": "sh",
"channelA": "",
"channelB": "",
"decimals": 0,
"animations": "soft",
"shape": "1",
"x": 550,
"y": 180,
"wires": []
},
{
"id": "9f69a78b.9abf38",
"type": "inject",
"z": "deae5156.4857e",
"name": "",
"topic": "",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 140,
"y": 180,
"wires": [
[
"d47c42a6.0bde9"
]
]
},
{
"id": "d47c42a6.0bde9",
"type": "function",
"z": "deae5156.4857e",
"name": "Data generator",
"outputs": 1,
"noerr": 0,
"x": 340,
"y": 180,
"wires": [
[
"7d145eb6.29b98"
]
]
},
{
"id": "97d6a3ec.21de7",
"type": "ui_group",
"z": "",
"name": "H",
"tab": "31ca105a.5061d",
"order": 1,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "31ca105a.5061d",
"type": "ui_tab",
"z": "",
"name": "Home",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
``````

Well I think the animations of ui-level node just not the type of animations you are looking for. `ui-level` is general purpose level indicator, not much more. If you need something specific, you definitely need to create it from scratch. Even it will be custom ui-widget, or you do it by using ui_template nodes or by using https://flows.nodered.org/node/node-red-contrib-uibuilder to get full control of the dashboard layout.

@hotNipi , thank you for giving this link. I would definite pursue this guide.