Node-Red: OEE Monitoring System Dashboard with Animation

welcome back to my channel in this video i will show you an example of using animation on a dashboard i make an oee or overall equipment effectiveness dashboard with animation this is a ee monitoring system dashboard using node red you can view my previous videos about oee monitoring system dashboard using node-red and postgresql as database on this dashboard i put svg picture to show machine condition and also add animation into it the dashboard becomes more interesting and easy to understand machine condition machine color will be changed based on machine condition green if machine is running red if machine is stop or trouble and gray of machine is off there are some animations on it such as conveyor rotation animation if the machine is running and finished gets run on the conveyor when machine produces one piece output there are also some additional information in the text box such as total output total defect total product okay machine name and product name all parameters will be changed based on information from the databases real time [Music] let me show you how to make animation in note red dashboard i will show you a simple animation you can download all files such as svg file flow file i put the link at video description in node-red we need to install additional node flow namely node-red contribute isvg and node-red control draw svg click manage palette on install tab type the node name and then install you can view my previous video about scada node red to see detail about svg node you can view further information about node svg on the website including information about animation on this node [Music] this is an example of animation in node red on this example we have two svg pictures the left side is gear animation and the right side is machine animation below is for controlling animation i got gear example animation from the website you can view the original code from the link on the control group there are some buttons to control the animation start button and stop button to send a trigger to svg node for show animation [Music] [Music] this is the code of node red flow there are two svg nodes click svg node to view svg picture and the setting configuration for animation [Music] in svg editor we can set each id object then we can use the id for the animation in this example we use two objects gear a and gear b set the id in the properties click animation tab for setting the animation click add button to add new animation set animation id target element id as object id that we set in the svg editor set attribute name as kind of animation we use transform and rotate animation from into his coordinate of the object start from a point and finish until a point format of rotate animation is degree x coordinate and y coordinate set other settings such as duration repeat count animation end and set the trigger to input message because we want to trigger animation from the message of button click [Music] set the message from the button we can set the value of payload with the message of animation format this is the format of message for trigger the animation to stop or to start [Music] [Music] in the second svg node we will animate conveyor rotation and move the object click animation tab we can view three animation configurations two for rotation animation and one for move animation for movement animation we select translate option and in from 2 we only use x y coordinate to define the start point and end point of movement set up the message from the button set the payload with animation format messages thank you for watching don't forget to like and subscribe see you on next video

Channel: Yaser Ali Husen

Views: 33,892

Keywords:

Id: sQx7dC1xtsk

Length: 5min 36sec (336 seconds)

Published: Sun Jan 09 2022