Creating a data driven line animation

General
1

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.:muscle::speech_balloon::right_anger_bubble:

2

Can you define what you mean by animating please?

3

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

4

Then maybe svg animations is good place to start

5

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

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

7

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": "",
        "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
    }
]
8

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.

9

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