# Creating a data driven line animation

**URL:** <https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971>\
**Category:** General\
**Created:** [10 April 2019 05:11 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971 "2019-04-10T05:11:19Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![JamsawColPH](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jamsawcolph/32/7416_2.png) [@JamsawColPH](https://discourse.nodered.org/u/JamsawColPH)\
**Post date:** [10 April 2019 05:11 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/1 "2019-04-10T05:11:19Z")

</div>

**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._💪💬🗯

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 April 2019 06:13 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/2 "2019-04-10T06:13:30Z")

</div>

Can you define what you mean by animating please?

---

<div class="post-metadata">

**Author:** ![JamsawColPH](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jamsawcolph/32/7416_2.png) [@JamsawColPH](https://discourse.nodered.org/u/JamsawColPH)\
**Post date:** [10 April 2019 06:22 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/3 "2019-04-10T06:22:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 April 2019 06:35 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/4 "2019-04-10T06:35:45Z")

</div>

Then maybe svg animations is good place to start

> **[How SVG Line Animation Works | CSS-Tricks](https://css-tricks.com/svg-line-animation-works/)**
>
> I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the

---

<div class="post-metadata">

**Author:** ![JamsawColPH](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jamsawcolph/32/7416_2.png) [@JamsawColPH](https://discourse.nodered.org/u/JamsawColPH)\
**Post date:** [10 April 2019 06:45 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/5 "2019-04-10T06:45:21Z")

</div>

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:

```auto
<html>
<head>
<style>
	#plane
	{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:700px;
		height:600px;
		box-shadow:0px 0px 5px;
	}
	.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>
</head>
<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>

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 April 2019 07:00 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/6 "2019-04-10T07:00:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JamsawColPH](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jamsawcolph/32/7416_2.png) [@JamsawColPH](https://discourse.nodered.org/u/JamsawColPH)\
**Post date:** [10 April 2019 07:40 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/7 "2019-04-10T07:40:50Z")

</div>

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?](https://flows.nodered.org/node/node-red-contrib-ui-level)

My code:

```auto
[
    {
        "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": "",
        "payload": "",
        "payloadType": "date",
        "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",
        "func": "msg.payload = Math.round(Math.random()*100);\nreturn msg;",
        "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
    }
]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 April 2019 08:56 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/8 "2019-04-10T08:56:24Z")

</div>

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](https://flows.nodered.org/node/node-red-contrib-uibuilder) to get full control of the dashboard layout.

---

<div class="post-metadata">

**Author:** ![JamsawColPH](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jamsawcolph/32/7416_2.png) [@JamsawColPH](https://discourse.nodered.org/u/JamsawColPH)\
**Post date:** [10 April 2019 09:08 UTC](https://discourse.nodered.org/t/creating-a-data-driven-line-animation/9971/9 "2019-04-10T09:08:48Z")

</div>

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