[{"data":1,"prerenderedAt":2609},["ShallowReactive",2],{"blog-\u002Fblog\u002F2026\u002F07\u002Fcontrol-and-track-factory-floor-machines":3,"blog-all-for-related":2608},{"id":4,"title":5,"authors":6,"body":8,"cta":2583,"date":2587,"description":2588,"extension":2589,"image":2590,"lastUpdated":2591,"meta":2592,"navigation":1554,"path":2599,"seo":2600,"sitemap":2601,"stem":2602,"subtitle":2603,"tags":2604,"tldr":2606,"video":2591,"__hash__":2607},"blog\u002Fblog\u002F2026\u002F07\u002Fcontrol-and-track-factory-floor-machines.md","Control and Track Machines on the Factory Floor",[7],"sumit-shinde",{"type":9,"value":10,"toc":2558},"minimark",[11,15,18,24,29,32,77,83,87,90,104,115,118,121,124,135,139,142,148,153,168,171,216,219,228,231,235,238,250,309,316,319,328,332,338,362,377,386,389,393,396,424,427,519,522,531,535,538,545,548,552,555,558,561,609,613,616,665,674,680,691,695,698,701,744,747,753,762,766,769,772,790,793,797,800,810,813,817,827,834,853,1045,1057,1060,1080,1083,1092,1096,1099,1120,1123,1126,1130,1133,1157,1192,1197,1203,1206,1210,1217,1221,1244,1256,1259,1353,1364,1368,1384,1398,2521,2533,2542,2549,2552,2555],[12,13,14],"p",{},"Operators need more than buttons to control machines - they also need visibility into what's actually happening on the factory floor. Knowing whether a motor is running is useful, but knowing how long it has been running helps with maintenance, production tracking, and troubleshooting.",[12,16,17],{},"In this tutorial, you'll connect FlowFuse to a Siemens S7 PLC, build an operator dashboard to control a motor and stack light, and automatically track the runtime of each device. By the end, you'll have a dashboard that not only sends commands to the PLC but also displays live operating time for every connected device.",[19,20],"lite-youtube",{"videoid":21,"style":22,"title":23},"kiOufj0ghxg","width: 100%; aspect-ratio: 16\u002F9; background-image: url('\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fdemo-thumbnail.jpg'); background-size: cover; background-position: center;","Control and Track the Shopfloor Machines",[25,26,28],"h2",{"id":27},"prerequisites","Prerequisites",[12,30,31],{},"Before you begin, make sure you have the following:",[33,34,35,44,53,74],"ul",{},[36,37,38,39,43],"li",{},"A Siemens S7 PLC, or ",[40,41,42],"strong",{},"S7-PLCSIM"," if you're using a simulated PLC.",[36,45,46,47,52],{},"A FlowFuse instance running on your edge device with the Device Agent installed. If you don't already have one, [sign up]({% include \"sign-up-url.njk\" %}) and follow the ",[48,49,51],"a",{"href":50},"\u002Fdocs\u002Fdevice-agent\u002Fquickstart\u002F","Device Agent Quick Start guide"," to connect your first device.",[36,54,55,56],{},"The following packages installed:\n",[33,57,58,64,69],{},[36,59,60],{},[61,62,63],"code",{},"@flowfuse\u002Fnode-red-dashboard",[36,65,66],{},[61,67,68],{},"node-red-contrib-s7",[36,70,71],{},[61,72,73],{},"node-red-contrib-hourglass",[36,75,76],{},"A motor and stack light connected to the PLC, or simulated outputs.",[78,79,80],"blockquote",{},[12,81,82],{},"Note: This tutorial uses a Siemens S7 PLC and the node-red-contrib-s7 package, but FlowFuse isn't limited to S7 PLCs. It has community nodes for most major PLC brands and protocols, including Allen-Bradley\u002FRockwell (EtherNet\u002FIP), Modbus, OPC UA, Mitsubishi, and more, so you can follow the same pattern with whichever PLC and connection node matches your hardware.",[25,84,86],{"id":85},"example-plc-logic","Example PLC Logic",[12,88,89],{},"The demo above uses a simple example PLC program with four normally open contacts stored inside a data block, each controlling a PLC output:",[33,91,92,95,98,101],{},[36,93,94],{},"Motor",[36,96,97],{},"RedLightCmd",[36,99,100],{},"YellowLightCmd",[36,102,103],{},"GreenLightCmd",[12,105,106,107,110,111,114],{},"Whenever one of these data block values is set to ",[61,108,109],{},"TRUE",", the PLC energizes the corresponding output. Setting the value back to ",[61,112,113],{},"FALSE"," turns the output off again.",[12,116,117],{},"Throughout this tutorial, FlowFuse writes to these data block variables whenever an operator interacts with the dashboard. At the same time, it continuously reads those same variables so it always knows the current state of each device. We'll later use those live values to calculate runtime automatically.",[12,119,120],{},"If your PLC program is structured differently, that's fine: you just need to know which data block(s) and addresses correspond to the outputs you want to control, and adjust the variable configuration in the following sections accordingly.",[12,122,123],{},"The example ladder logic used in this tutorial is shown below.",[12,125,126,131],{},[127,128],"img",{"alt":129,"src":130},"Example ladder logic with four normally open contacts controlling the motor, red light, yellow light, and green light outputs","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fplc-program-runtime.png",[132,133,134],"em",{},"The example ladder logic used in this tutorial: four contacts controlling the motor and the three stack light colors.",[25,136,138],{"id":137},"connecting-flowfuse-to-the-plc","Connecting FlowFuse to the PLC",[12,140,141],{},"With an example PLC program in mind, let's establish communication between FlowFuse and the controller.",[12,143,144,145,147],{},"We'll use the ",[61,146,68],{}," package to communicate with the PLC. The first task is creating an S7 endpoint, which stores the connection details that every S7 node in the flow will reuse.",[149,150,152],"h3",{"id":151},"configure-the-s7-endpoint","Configure the S7 Endpoint",[12,154,155,156,159,160,163,164,167],{},"Drag either an ",[40,157,158],{},"S7 In"," or ",[40,161,162],{},"S7 Out"," node onto the workspace and create a new ",[40,165,166],{},"S7 Endpoint",".",[12,169,170],{},"Configure it as follows:",[172,173,174,181,184,190,196,206],"ol",{},[36,175,176,177,180],{},"Select ",[40,178,179],{},"Ethernet (ISO on TCP)"," as the transport.",[36,182,183],{},"Enter the PLC's IP address.",[36,185,186,187,167],{},"Leave the port set to ",[40,188,189],{},"102",[36,191,192,193,167],{},"Set the connection mode to ",[40,194,195],{},"Rack",[36,197,198,199,201,202,205],{},"Enter the appropriate ",[40,200,195],{}," and ",[40,203,204],{},"Slot"," values for your PLC.",[36,207,208,209,201,212,215],{},"Set the ",[40,210,211],{},"Cycle Time",[40,213,214],{},"Timeout"," values according to your application's requirements.",[12,217,218],{},"Your configuration should look similar to the example below.",[12,220,221,225],{},[127,222],{"alt":223,"src":224},"S7 Endpoint configuration showing transport, IP address, rack, slot, and cycle time fields","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fplc-config.png",[132,226,227],{},"S7 Endpoint configuration used to connect FlowFuse to the PLC over Ethernet (ISO on TCP).",[12,229,230],{},"The endpoint now manages communication with the PLC, allowing every S7 node in the flow to reuse the same connection rather than creating multiple independent PLC connections.",[149,232,234],{"id":233},"add-the-plc-variables","Add the PLC Variables",[12,236,237],{},"Next, tell the endpoint which PLC variables it should read and write.",[172,239,240,247],{},[36,241,242,243,246],{},"Open the ",[40,244,245],{},"Variables"," tab.",[36,248,249],{},"Add the following variables.",[251,252,253,266],"table",{},[254,255,256],"thead",{},[257,258,259,263],"tr",{},[260,261,262],"th",{},"Variable",[260,264,265],{},"Address",[267,268,269,279,289,299],"tbody",{},[257,270,271,274],{},[272,273,94],"td",{},[272,275,276],{},[61,277,278],{},"DB1,X0.0",[257,280,281,284],{},[272,282,283],{},"Red Light",[272,285,286],{},[61,287,288],{},"DB1,X0.1",[257,290,291,294],{},[272,292,293],{},"Yellow Light",[272,295,296],{},[61,297,298],{},"DB1,X0.2",[257,300,301,304],{},[272,302,303],{},"Green Light",[272,305,306],{},[61,307,308],{},"DB1,X0.3",[12,310,311,312,167],{},"These addresses correspond to the example ladder logic used in this tutorial. Replace them with the data block and address values that match the outputs on your own PLC. If you'd like to learn more about how variable addresses are defined for the S7 nodes, see our guide on ",[48,313,315],{"href":314},"\u002Fblog\u002F2025\u002F01\u002Fintegrating-siemens-s7-plcs-with-node-red-guide\u002F#addressing-scheme-for-variables-in-node-red-with-the-s7-node","Addressing Scheme for Variables in FlowFuse with the S7 Node",[12,317,318],{},"After adding them, your configuration should resemble the following.",[12,320,321,325],{},[127,322],{"alt":323,"src":324},"S7 Endpoint Variables tab listing Motor, Red Light, Yellow Light, and Green Light with their data block addresses","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fs7-config-variables-counter.png",[132,326,327],{},"The four PLC variables mapped to their data block addresses in the S7 Endpoint.",[149,329,331],{"id":330},"add-the-output-nodes","Add the Output Nodes",[12,333,334,335,337],{},"The dashboard will control each PLC output independently, so we'll create one ",[40,336,162],{}," node per Output.",[172,339,340,346,349],{},[36,341,342,343,345],{},"Drag four ",[40,344,162],{}," nodes onto the workspace.",[36,347,348],{},"Configure each node to use the endpoint created earlier.",[36,350,351,352],{},"Assign one PLC variable to each node:\n",[33,353,354,356,358,360],{},[36,355,94],{},[36,357,283],{},[36,359,293],{},[36,361,303],{},[12,363,364,365,367,368,370,371,373,374,376],{},"All four nodes are configured the same way: only the assigned variable changes. For reference, here's the configuration for the ",[40,366,94],{}," node; configure the other three the same way, assigning ",[40,369,283],{},", ",[40,372,293],{},", and ",[40,375,303],{}," respectively.",[12,378,379,383],{},[127,380],{"alt":381,"src":382},"S7 Out node configured to write to the Motor variable using the S7 Endpoint","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fmotor-s7-out.png",[132,384,385],{},"Reference configuration for the Motor S7 Out node. Repeat this setup for Red Light, Yellow Light, and Green Light, changing only the assigned variable.",[12,387,388],{},"Each node is now responsible for updating a single PLC variable whenever it receives a new value.",[149,390,392],{"id":391},"read-the-plc-status","Read the PLC Status",[12,394,395],{},"Writing values to the PLC is only half of the solution. We also need to monitor the current output states so the dashboard always reflects what's happening inside the controller.",[172,397,398,404,407,414,421],{},[36,399,400,401,403],{},"Drag an ",[40,402,158],{}," node onto the workspace.",[36,405,406],{},"Select the same S7 Endpoint.",[36,408,409,410,413],{},"Set the node to ",[40,411,412],{},"All Variables"," mode.",[36,415,416,417,420],{},"Connect a ",[40,418,419],{},"Debug"," node to its output.",[36,422,423],{},"Deploy the flow.",[12,425,426],{},"Whenever one of the configured variables changes, the S7 In node publishes the latest state of every PLC variable as a single object.",[428,429,434],"pre",{"className":430,"code":431,"language":432,"meta":433,"style":433},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n    \"Motor\": true,\n    \"Red Light\": false,\n    \"Yellow Light\": false,\n    \"Green Light\": true\n}\n","javascript","",[61,435,436,445,468,484,499,513],{"__ignoreMap":433},[437,438,441],"span",{"class":439,"line":440},"line",1,[437,442,444],{"class":443},"sMK4o","{\n",[437,446,448,451,454,457,461,465],{"class":439,"line":447},2,[437,449,450],{"class":443},"    \"",[437,452,94],{"class":453},"sfazB",[437,455,456],{"class":443},"\"",[437,458,460],{"class":459},"swJcz",": ",[437,462,464],{"class":463},"sfNiH","true",[437,466,467],{"class":443},",\n",[437,469,471,473,475,477,479,482],{"class":439,"line":470},3,[437,472,450],{"class":443},[437,474,283],{"class":453},[437,476,456],{"class":443},[437,478,460],{"class":459},[437,480,481],{"class":463},"false",[437,483,467],{"class":443},[437,485,487,489,491,493,495,497],{"class":439,"line":486},4,[437,488,450],{"class":443},[437,490,293],{"class":453},[437,492,456],{"class":443},[437,494,460],{"class":459},[437,496,481],{"class":463},[437,498,467],{"class":443},[437,500,502,504,506,508,510],{"class":439,"line":501},5,[437,503,450],{"class":443},[437,505,303],{"class":453},[437,507,456],{"class":443},[437,509,460],{"class":459},[437,511,512],{"class":463},"true\n",[437,514,516],{"class":439,"line":515},6,[437,517,518],{"class":443},"}\n",[12,520,521],{},"This message represents the live state of the PLC. Later in the tutorial we'll use these values to synchronize the dashboard and determine when each runtime timer should start or stop.",[12,523,524,528],{},[127,525],{"alt":526,"src":527},"S7 In node set to All Variables mode connected to a Debug node, with the Debug panel showing the live PLC state object","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fread-all-s7-in.png",[132,529,530],{},"S7 In node reading all PLC variables at once and publishing the combined state to a Debug node.",[149,532,534],{"id":533},"verify-the-connection","Verify the Connection",[12,536,537],{},"Once everything has been configured, deploy the flow one final time.",[12,539,540,541,544],{},"If the connection is successful, every S7 node should display an ",[40,542,543],{},"Online"," status.",[12,546,547],{},"At this point, FlowFuse can both control the PLC outputs and continuously monitor their current state. In the next section, we'll use these S7 nodes to build an operator dashboard for controlling the motor and stack light.",[25,549,551],{"id":550},"building-the-dashboard","Building the Dashboard",[12,553,554],{},"With communication to the PLC established, we can now build the operator interface.",[12,556,557],{},"For this tutorial, the dashboard provides controls for both the motor and the stack light. The motor uses two buttons: one to start it and another to stop it, while each stack light color is controlled using its own switch.",[12,559,560],{},"The finished dashboard will contain the following widgets.",[251,562,563,573],{},[254,564,565],{},[257,566,567,570],{},[260,568,569],{},"Widget",[260,571,572],{},"Purpose",[267,574,575,583,590,597,603],{},[257,576,577,580],{},[272,578,579],{},"Button",[272,581,582],{},"Start Motor",[257,584,585,587],{},[272,586,579],{},[272,588,589],{},"Stop Motor",[257,591,592,595],{},[272,593,594],{},"Switch",[272,596,283],{},[257,598,599,601],{},[272,600,594],{},[272,602,293],{},[257,604,605,607],{},[272,606,594],{},[272,608,303],{},[149,610,612],{"id":611},"control-the-motor","Control the Motor",[12,614,615],{},"Let's start by creating the controls for the motor.",[172,617,618,624,643,659],{},[36,619,620,621,623],{},"Add two ",[40,622,579],{}," widgets to the dashboard.",[36,625,626,627],{},"Configure the first button with:\n",[33,628,629,635],{},[36,630,631,634],{},[40,632,633],{},"Label:"," Start Motor",[36,636,637,640,641],{},[40,638,639],{},"Payload:"," ",[61,642,464],{},[36,644,645,646],{},"Configure the second button with:\n",[33,647,648,653],{},[36,649,650,652],{},[40,651,633],{}," Stop Motor",[36,654,655,640,657],{},[40,656,639],{},[61,658,481],{},[36,660,661,662,664],{},"Connect both buttons to the ",[40,663,94],{}," S7 Out node.",[12,666,667,668,670,671,673],{},"Whenever an operator presses one of these buttons, the corresponding Boolean value is written to the PLC. Writing ",[61,669,464],{}," starts the motor, while writing ",[61,672,481],{}," stops it.",[12,675,676,677,679],{},"Configure each button the same way, changing only the label and payload. For example, here's the configuration for the ",[40,678,582],{}," button:",[12,681,682,686],{},[127,683],{"alt":684,"src":685},"Button widget configuration with label \"Start Motor\" and payload set to true","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fmotor-on-button-config.png",[132,687,688,689,167],{},"Example Button widget configuration for Start Motor. Use the same setup for Stop Motor, with the payload set to ",[61,690,481],{},[149,692,694],{"id":693},"control-the-stack-light","Control the Stack Light",[12,696,697],{},"Next, create controls for each color of the stack light.",[12,699,700],{},"Rather than using buttons, switches are a better choice because they clearly indicate whether each light is currently enabled or disabled.",[172,702,703,708,719,738],{},[36,704,705,706,623],{},"Add three ",[40,707,594],{},[36,709,710,711],{},"Label them:\n",[33,712,713,715,717],{},[36,714,283],{},[36,716,293],{},[36,718,303],{},[36,720,721,722],{},"Configure each switch with:\n",[33,723,724,731],{},[36,725,726,640,729],{},[40,727,728],{},"ON Payload:",[61,730,464],{},[36,732,733,640,736],{},[40,734,735],{},"OFF Payload:",[61,737,481],{},[36,739,740,741,743],{},"Connect each switch to its corresponding ",[40,742,162],{}," node.",[12,745,746],{},"When a switch changes state, FlowFuse immediately writes the updated value to the PLC, turning the selected light on or off.",[12,748,749,750,752],{},"Configure each switch the same way, changing only the label and connected node. For example, here's the configuration for the ",[40,751,283],{}," switch:",[12,754,755,759],{},[127,756],{"alt":757,"src":758},"Switch widget configuration for Red Light with ON payload true and OFF payload false","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fred-led-switch.png",[132,760,761],{},"Example Switch widget configuration for Red Light. Use the same setup for Yellow Light and Green Light.",[149,763,765],{"id":764},"test-the-dashboard","Test the Dashboard",[12,767,768],{},"At this point the dashboard is fully wired to the PLC.",[12,770,771],{},"Deploy the flow and open the dashboard in your browser. Verify that:",[33,773,774,780,784,787],{},[36,775,776,777,779],{},"Pressing ",[40,778,582],{}," starts the motor.",[36,781,776,782,673],{},[40,783,589],{},[36,785,786],{},"Each switch controls the correct stack light output.",[36,788,789],{},"Changes made from the dashboard are immediately reflected in the PLC.",[12,791,792],{},"You now have a functional PLC control dashboard that can operate each connected device independently.",[25,794,796],{"id":795},"tracking-device-runtime","Tracking Device Runtime",[12,798,799],{},"The dashboard can now control the PLC, but it still doesn't provide any information about how long each device has been operating.",[12,801,802,803,805,806,809],{},"Since the ",[40,804,158],{}," node continuously reports the state of every PLC output, we can use those values to determine when a device starts and stops running. We'll use the ",[40,807,808],{},"Hourglass"," node to maintain an independent runtime counter for each device.",[12,811,812],{},"Before connecting the Hourglass nodes, we first need to convert the PLC states into the commands they expect.",[149,814,816],{"id":815},"convert-plc-states-into-timer-commands","Convert PLC States into Timer Commands",[12,818,819,820,159,823,826],{},"The S7 In node outputs all configured variables as a single object. The Hourglass node, however, expects individual messages containing either a ",[61,821,822],{},"start",[61,824,825],{},"stop"," command.",[12,828,829,830,833],{},"We'll use a ",[40,831,832],{},"Function"," node to bridge this gap.",[172,835,836,844,850],{},[36,837,838,839,841,842,743],{},"Drag a ",[40,840,832],{}," node onto the workspace after the ",[40,843,158],{},[36,845,846,847,167],{},"Configure the node with ",[40,848,849],{},"four outputs",[36,851,852],{},"Replace the default code with the following:",[428,854,856],{"className":430,"code":855,"language":432,"meta":433,"style":433},"return [\n    { command: msg.payload.Motor ? \"start\" : \"stop\" },\n    { command: msg.payload[\"Red Light\"] ? \"start\" : \"stop\" },\n    { command: msg.payload[\"Yellow Light\"] ? \"start\" : \"stop\" },\n    { command: msg.payload[\"Green Light\"] ? \"start\" : \"stop\" }\n];\n",[61,857,858,868,914,956,996,1037],{"__ignoreMap":433},[437,859,860,864],{"class":439,"line":440},[437,861,863],{"class":862},"s7zQu","return",[437,865,867],{"class":866},"sTEyZ"," [\n",[437,869,870,873,876,879,882,884,887,889,892,895,898,900,902,905,907,909,911],{"class":439,"line":447},[437,871,872],{"class":443},"    {",[437,874,875],{"class":459}," command",[437,877,878],{"class":443},":",[437,880,881],{"class":866}," msg",[437,883,167],{"class":443},[437,885,886],{"class":866},"payload",[437,888,167],{"class":443},[437,890,891],{"class":866},"Motor ",[437,893,894],{"class":443},"?",[437,896,897],{"class":443}," \"",[437,899,822],{"class":453},[437,901,456],{"class":443},[437,903,904],{"class":443}," :",[437,906,897],{"class":443},[437,908,825],{"class":453},[437,910,456],{"class":443},[437,912,913],{"class":443}," },\n",[437,915,916,918,920,922,924,926,929,931,933,935,938,940,942,944,946,948,950,952,954],{"class":439,"line":470},[437,917,872],{"class":443},[437,919,875],{"class":459},[437,921,878],{"class":443},[437,923,881],{"class":866},[437,925,167],{"class":443},[437,927,928],{"class":866},"payload[",[437,930,456],{"class":443},[437,932,283],{"class":453},[437,934,456],{"class":443},[437,936,937],{"class":866},"] ",[437,939,894],{"class":443},[437,941,897],{"class":443},[437,943,822],{"class":453},[437,945,456],{"class":443},[437,947,904],{"class":443},[437,949,897],{"class":443},[437,951,825],{"class":453},[437,953,456],{"class":443},[437,955,913],{"class":443},[437,957,958,960,962,964,966,968,970,972,974,976,978,980,982,984,986,988,990,992,994],{"class":439,"line":486},[437,959,872],{"class":443},[437,961,875],{"class":459},[437,963,878],{"class":443},[437,965,881],{"class":866},[437,967,167],{"class":443},[437,969,928],{"class":866},[437,971,456],{"class":443},[437,973,293],{"class":453},[437,975,456],{"class":443},[437,977,937],{"class":866},[437,979,894],{"class":443},[437,981,897],{"class":443},[437,983,822],{"class":453},[437,985,456],{"class":443},[437,987,904],{"class":443},[437,989,897],{"class":443},[437,991,825],{"class":453},[437,993,456],{"class":443},[437,995,913],{"class":443},[437,997,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034],{"class":439,"line":501},[437,999,872],{"class":443},[437,1001,875],{"class":459},[437,1003,878],{"class":443},[437,1005,881],{"class":866},[437,1007,167],{"class":443},[437,1009,928],{"class":866},[437,1011,456],{"class":443},[437,1013,303],{"class":453},[437,1015,456],{"class":443},[437,1017,937],{"class":866},[437,1019,894],{"class":443},[437,1021,897],{"class":443},[437,1023,822],{"class":453},[437,1025,456],{"class":443},[437,1027,904],{"class":443},[437,1029,897],{"class":443},[437,1031,825],{"class":453},[437,1033,456],{"class":443},[437,1035,1036],{"class":443}," }\n",[437,1038,1039,1042],{"class":439,"line":515},[437,1040,1041],{"class":866},"]",[437,1043,1044],{"class":443},";\n",[12,1046,1047,1048,159,1050,1052,1053,1056],{},"The Function node examines the current state of each PLC output and converts it into either a ",[61,1049,822],{},[61,1051,825],{}," command. Update the field names (",[61,1054,1055],{},"msg.payload.Motor",", etc.) to match the variable names you used in your own PLC Variables configuration.",[12,1058,1059],{},"For example:",[33,1061,1062,1071],{},[36,1063,1064,1065,1067,1068,167],{},"If the motor is running (",[61,1066,464],{},"), the first output sends ",[61,1069,1070],{},"{ command: \"start\" }",[36,1072,1073,1074,1076,1077,167],{},"If the motor stops (",[61,1075,481],{},"), it sends ",[61,1078,1079],{},"{ command: \"stop\" }",[12,1081,1082],{},"The same logic is applied independently to each stack light.",[12,1084,1085,1089],{},[127,1086],{"alt":1087,"src":1088},"Function node code editor showing the four-output script that converts PLC states into start and stop commands","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Ffunction-config-state-to-commands.png",[132,1090,1091],{},"Function node converting the PLC's live output states into start\u002Fstop commands for the four Hourglass nodes.",[149,1093,1095],{"id":1094},"add-the-hourglass-nodes","Add the Hourglass Nodes",[12,1097,1098],{},"Now that each device has its own stream of timer commands, we can begin tracking runtime.",[172,1100,1101,1104,1107],{},[36,1102,1103],{},"Drag four Hourglass nodes onto the workspace.",[36,1105,1106],{},"Configure each node to use English as the language.",[36,1108,1109,1110],{},"Use one Hourglass node for each device:\n",[33,1111,1112,1114,1116,1118],{},[36,1113,94],{},[36,1115,283],{},[36,1117,293],{},[36,1119,303],{},[12,1121,1122],{},"All four nodes use the same configuration: only the device they're wired to changes.",[12,1124,1125],{},"Each Hourglass node maintains its own accumulated runtime. This means every device is tracked independently, allowing the motor and each stack light to start and stop without affecting the timers for the other devices.",[149,1127,1129],{"id":1128},"request-runtime-updates","Request Runtime Updates",[12,1131,1132],{},"The Hourglass node stores the elapsed time internally and only reports its current status when requested. To keep the dashboard updated in real time, we'll periodically ask each Hourglass node to publish its current runtime.",[172,1134,1135,1142,1148,1154],{},[36,1136,1137,1138,1141],{},"Add an ",[40,1139,1140],{},"Inject"," node to the workspace.",[36,1143,1144,1145,167],{},"Configure it to repeat every ",[40,1146,1147],{},"1 second",[36,1149,1150,1151,167],{},"Set the payload type to ",[40,1152,1153],{},"JSON",[36,1155,1156],{},"Use the following payload:",[428,1158,1162],{"className":1159,"code":1160,"language":1161,"meta":433,"style":433},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n    \"command\": \"status\"\n}\n","json",[61,1163,1164,1168,1188],{"__ignoreMap":433},[437,1165,1166],{"class":439,"line":440},[437,1167,444],{"class":443},[437,1169,1170,1172,1176,1178,1180,1182,1185],{"class":439,"line":447},[437,1171,450],{"class":443},[437,1173,1175],{"class":1174},"spNyl","command",[437,1177,456],{"class":443},[437,1179,878],{"class":443},[437,1181,897],{"class":443},[437,1183,1184],{"class":453},"status",[437,1186,1187],{"class":443},"\"\n",[437,1189,1190],{"class":439,"line":470},[437,1191,518],{"class":443},[172,1193,1194],{"start":501},[36,1195,1196],{},"Connect the Inject node to all four Hourglass nodes.",[12,1198,1199,1200,1202],{},"Every second, the Inject node sends a ",[61,1201,1184],{}," command, prompting each Hourglass node to return its latest runtime information.",[12,1204,1205],{},"At this point, every Hourglass node is continuously tracking the runtime of its assigned device and publishing an updated status once per second. The final step is displaying that information on the dashboard.",[25,1207,1209],{"id":1208},"displaying-the-runtime","Displaying the Runtime",[12,1211,1212,1213,1216],{},"We'll use ",[40,1214,1215],{},"UI Template"," widgets to build a simple HMI-style runtime display for each device.",[149,1218,1220],{"id":1219},"create-the-runtime-display","Create the Runtime Display",[172,1222,1223,1228,1231],{},[36,1224,342,1225,1227],{},[40,1226,1215],{}," widgets onto the workspace and configure each one to use the appropriate Page and Group based on your dashboard layout and type to \"Widget ( Group Scoped )\"",[36,1229,1230],{},"Connect each Hourglass node to its corresponding UI Template.",[36,1232,1233,1234],{},"Give each widget an appropriate label:\n",[33,1235,1236,1238,1240,1242],{},[36,1237,94],{},[36,1239,283],{},[36,1241,293],{},[36,1243,303],{},[78,1245,1246],{},[12,1247,1248,1251,1252,167],{},[40,1249,1250],{},"Note:"," The dashboard layout, groups, and theme are intentionally left to your preference. You can organize the widgets in whatever way best suits your application. For guidance on pages, groups, navigation, layouts, and styling in FlowFuse Dashboard, see ",[48,1253,1255],{"href":1254},"\u002Fblog\u002F2024\u002F05\u002Fnode-red-dashboard-2-layout-navigation-styling\u002F","FlowFuse Dashboard: Layout, Navigation & Styling",[12,1257,1258],{},"Whenever an Hourglass node publishes its status, the connected UI Template receives a message similar to the following.",[428,1260,1262],{"className":430,"code":1261,"language":432,"meta":433,"style":433},"{\n    started: true,\n    elapsed: {\n        time: {\n            hours: 0,\n            minutes: 12,\n            seconds: 34\n        }\n    }\n}\n",[61,1263,1264,1268,1281,1291,1300,1313,1325,1336,1342,1348],{"__ignoreMap":433},[437,1265,1266],{"class":439,"line":440},[437,1267,444],{"class":443},[437,1269,1270,1274,1276,1279],{"class":439,"line":447},[437,1271,1273],{"class":1272},"sBMFI","    started",[437,1275,878],{"class":443},[437,1277,1278],{"class":463}," true",[437,1280,467],{"class":443},[437,1282,1283,1286,1288],{"class":439,"line":470},[437,1284,1285],{"class":1272},"    elapsed",[437,1287,878],{"class":443},[437,1289,1290],{"class":443}," {\n",[437,1292,1293,1296,1298],{"class":439,"line":486},[437,1294,1295],{"class":1272},"        time",[437,1297,878],{"class":443},[437,1299,1290],{"class":443},[437,1301,1302,1305,1307,1311],{"class":439,"line":501},[437,1303,1304],{"class":1272},"            hours",[437,1306,878],{"class":443},[437,1308,1310],{"class":1309},"sbssI"," 0",[437,1312,467],{"class":443},[437,1314,1315,1318,1320,1323],{"class":439,"line":515},[437,1316,1317],{"class":1272},"            minutes",[437,1319,878],{"class":443},[437,1321,1322],{"class":1309}," 12",[437,1324,467],{"class":443},[437,1326,1328,1331,1333],{"class":439,"line":1327},7,[437,1329,1330],{"class":1272},"            seconds",[437,1332,878],{"class":443},[437,1334,1335],{"class":1309}," 34\n",[437,1337,1339],{"class":439,"line":1338},8,[437,1340,1341],{"class":443},"        }\n",[437,1343,1345],{"class":439,"line":1344},9,[437,1346,1347],{"class":443},"    }\n",[437,1349,1351],{"class":439,"line":1350},10,[437,1352,518],{"class":443},[12,1354,1355,1356,1359,1360,1363],{},"The ",[61,1357,1358],{},"started"," property indicates whether the device is currently running, while ",[61,1361,1362],{},"elapsed.time"," contains the accumulated runtime.",[149,1365,1367],{"id":1366},"build-the-runtime-widget","Build the Runtime Widget",[12,1369,1370,1371,1373,1374,370,1376,370,1378,1380,1381,1383],{},"Paste the following code into each ",[40,1372,1215],{}," widget, updating only the device label (for example ",[40,1375,94],{},[40,1377,283],{},[40,1379,293],{},", or ",[40,1382,303],{},") where required.",[78,1385,1386],{},[12,1387,1388,1390,1391,1394,1395,167],{},[40,1389,1250],{}," If you'd like a different design for the runtime widget, you can use ",[40,1392,1393],{},"FlowFuse Expert",". Simply describe the UI you want in plain English, and it will generate the component for your dashboard. Learn more about ",[48,1396,1393],{"href":1397},"\u002Fdocs\u002Fuser\u002Fexpert\u002Fnode-red-embedded-ai",[428,1399,1403],{"className":1400,"code":1401,"language":1402,"meta":433,"style":433},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"hmi-timer\" :class=\"{ running: started }\" @mouseenter=\"hover = true\" @mouseleave=\"hover = false\">\n    \u003Cspan class=\"label\">Motor\u003C\u002Fspan>\n    \u003Cspan class=\"clock\">{{ clock }}\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: 'HmiTimer',\n  data() {\n    return { hover: false }\n  },\n  computed: {\n    started() {\n      return this.msg?.started === true\n    },\n    clock() {\n      const t = this.msg?.elapsed?.time\n      const pad = (n) => String(n ?? 0).padStart(2, '0')\n\n      if (!t) return '00h:00m:00s'\n\n      return `${pad(t.hours)}h:${pad(t.minutes)}m:${pad(t.seconds)}s`\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.hmi-timer {\n  --accent: #2ecc71;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  width: 100%;\n  box-sizing: border-box;\n  background: #11161d;\n  border: 1px solid #2c3744;\n  border-radius: 10px;\n  font-family: 'Courier New', monospace;\n  font-weight: 700;\n  letter-spacing: 2px;\n  padding: 16px 24px;\n  color: #5b6675;\n  transition: all .3s ease;\n  transform: .95;\n}\n\n.label {\n  font-size: 2.4rem;\n  font-weight: 600;\n}\n\n.clock {\n  font-size: 2.4rem;\n}\n\n.hmi-timer.running {\n  padding: 26px 36px;\n  color: var(--accent);\n  border-color: var(--accent);\n  background: #0d1c13;\n  box-shadow: 0 0 18px rgba(46, 204, 113, .35),\n              inset 0 0 12px rgba(46, 204, 113, .15);\n}\n\n.hmi-timer.running .label {\n  font-size: 3.6rem;\n}\n\n.hmi-timer.running .clock {\n  font-size: 5rem;\n}\n\u003C\u002Fstyle>\n","html",[61,1404,1405,1416,1475,1505,1533,1542,1550,1556,1565,1575,1593,1604,1623,1629,1639,1648,1671,1677,1687,1713,1775,1780,1807,1812,1873,1878,1884,1889,1898,1903,1916,1925,1941,1955,1968,1981,1993,2006,2019,2032,2047,2069,2082,2104,2117,2130,2145,2160,2179,2192,2197,2202,2211,2224,2236,2241,2246,2255,2266,2271,2276,2290,2305,2323,2339,2353,2394,2428,2433,2438,2456,2468,2473,2478,2495,2507,2512],{"__ignoreMap":433},[437,1406,1407,1410,1413],{"class":439,"line":440},[437,1408,1409],{"class":443},"\u003C",[437,1411,1412],{"class":459},"template",[437,1414,1415],{"class":443},">\n",[437,1417,1418,1421,1424,1427,1430,1432,1435,1437,1440,1442,1444,1447,1449,1452,1454,1456,1459,1461,1464,1466,1468,1471,1473],{"class":439,"line":447},[437,1419,1420],{"class":443},"  \u003C",[437,1422,1423],{"class":459},"div",[437,1425,1426],{"class":1174}," class",[437,1428,1429],{"class":443},"=",[437,1431,456],{"class":443},[437,1433,1434],{"class":453},"hmi-timer",[437,1436,456],{"class":443},[437,1438,1439],{"class":1174}," :class",[437,1441,1429],{"class":443},[437,1443,456],{"class":443},[437,1445,1446],{"class":453},"{ running: started }",[437,1448,456],{"class":443},[437,1450,1451],{"class":1174}," @mouseenter",[437,1453,1429],{"class":443},[437,1455,456],{"class":443},[437,1457,1458],{"class":453},"hover = true",[437,1460,456],{"class":443},[437,1462,1463],{"class":1174}," @mouseleave",[437,1465,1429],{"class":443},[437,1467,456],{"class":443},[437,1469,1470],{"class":453},"hover = false",[437,1472,456],{"class":443},[437,1474,1415],{"class":443},[437,1476,1477,1480,1482,1484,1486,1488,1491,1493,1496,1498,1501,1503],{"class":439,"line":470},[437,1478,1479],{"class":443},"    \u003C",[437,1481,437],{"class":459},[437,1483,1426],{"class":1174},[437,1485,1429],{"class":443},[437,1487,456],{"class":443},[437,1489,1490],{"class":453},"label",[437,1492,456],{"class":443},[437,1494,1495],{"class":443},">",[437,1497,94],{"class":866},[437,1499,1500],{"class":443},"\u003C\u002F",[437,1502,437],{"class":459},[437,1504,1415],{"class":443},[437,1506,1507,1509,1511,1513,1515,1517,1520,1522,1524,1527,1529,1531],{"class":439,"line":486},[437,1508,1479],{"class":443},[437,1510,437],{"class":459},[437,1512,1426],{"class":1174},[437,1514,1429],{"class":443},[437,1516,456],{"class":443},[437,1518,1519],{"class":453},"clock",[437,1521,456],{"class":443},[437,1523,1495],{"class":443},[437,1525,1526],{"class":866},"{{ clock }}",[437,1528,1500],{"class":443},[437,1530,437],{"class":459},[437,1532,1415],{"class":443},[437,1534,1535,1538,1540],{"class":439,"line":501},[437,1536,1537],{"class":443},"  \u003C\u002F",[437,1539,1423],{"class":459},[437,1541,1415],{"class":443},[437,1543,1544,1546,1548],{"class":439,"line":515},[437,1545,1500],{"class":443},[437,1547,1412],{"class":459},[437,1549,1415],{"class":443},[437,1551,1552],{"class":439,"line":1327},[437,1553,1555],{"emptyLinePlaceholder":1554},true,"\n",[437,1557,1558,1560,1563],{"class":439,"line":1338},[437,1559,1409],{"class":443},[437,1561,1562],{"class":459},"script",[437,1564,1415],{"class":443},[437,1566,1567,1570,1573],{"class":439,"line":1344},[437,1568,1569],{"class":862},"export",[437,1571,1572],{"class":862}," default",[437,1574,1290],{"class":443},[437,1576,1577,1580,1582,1585,1588,1591],{"class":439,"line":1350},[437,1578,1579],{"class":459},"  name",[437,1581,878],{"class":443},[437,1583,1584],{"class":443}," '",[437,1586,1587],{"class":453},"HmiTimer",[437,1589,1590],{"class":443},"'",[437,1592,467],{"class":443},[437,1594,1596,1599,1602],{"class":439,"line":1595},11,[437,1597,1598],{"class":459},"  data",[437,1600,1601],{"class":443},"()",[437,1603,1290],{"class":443},[437,1605,1607,1610,1613,1616,1618,1621],{"class":439,"line":1606},12,[437,1608,1609],{"class":862},"    return",[437,1611,1612],{"class":443}," {",[437,1614,1615],{"class":459}," hover",[437,1617,878],{"class":443},[437,1619,1620],{"class":463}," false",[437,1622,1036],{"class":443},[437,1624,1626],{"class":439,"line":1625},13,[437,1627,1628],{"class":443},"  },\n",[437,1630,1632,1635,1637],{"class":439,"line":1631},14,[437,1633,1634],{"class":459},"  computed",[437,1636,878],{"class":443},[437,1638,1290],{"class":443},[437,1640,1642,1644,1646],{"class":439,"line":1641},15,[437,1643,1273],{"class":459},[437,1645,1601],{"class":443},[437,1647,1290],{"class":443},[437,1649,1651,1654,1657,1660,1663,1665,1668],{"class":439,"line":1650},16,[437,1652,1653],{"class":862},"      return",[437,1655,1656],{"class":443}," this.",[437,1658,1659],{"class":866},"msg",[437,1661,1662],{"class":443},"?.",[437,1664,1358],{"class":866},[437,1666,1667],{"class":443}," ===",[437,1669,1670],{"class":463}," true\n",[437,1672,1674],{"class":439,"line":1673},17,[437,1675,1676],{"class":443},"    },\n",[437,1678,1680,1683,1685],{"class":439,"line":1679},18,[437,1681,1682],{"class":459},"    clock",[437,1684,1601],{"class":443},[437,1686,1290],{"class":443},[437,1688,1690,1693,1696,1699,1701,1703,1705,1708,1710],{"class":439,"line":1689},19,[437,1691,1692],{"class":1174},"      const",[437,1694,1695],{"class":866}," t",[437,1697,1698],{"class":443}," =",[437,1700,1656],{"class":443},[437,1702,1659],{"class":866},[437,1704,1662],{"class":443},[437,1706,1707],{"class":866},"elapsed",[437,1709,1662],{"class":443},[437,1711,1712],{"class":866},"time\n",[437,1714,1716,1718,1721,1723,1726,1730,1733,1736,1740,1743,1745,1748,1750,1752,1754,1757,1759,1762,1765,1767,1770,1772],{"class":439,"line":1715},20,[437,1717,1692],{"class":1174},[437,1719,1720],{"class":866}," pad",[437,1722,1698],{"class":443},[437,1724,1725],{"class":443}," (",[437,1727,1729],{"class":1728},"sHdIc","n",[437,1731,1732],{"class":443},")",[437,1734,1735],{"class":1174}," =>",[437,1737,1739],{"class":1738},"s2Zo4"," String",[437,1741,1742],{"class":459},"(",[437,1744,1729],{"class":866},[437,1746,1747],{"class":443}," ??",[437,1749,1310],{"class":1309},[437,1751,1732],{"class":459},[437,1753,167],{"class":443},[437,1755,1756],{"class":1738},"padStart",[437,1758,1742],{"class":459},[437,1760,1761],{"class":1309},"2",[437,1763,1764],{"class":443},",",[437,1766,1584],{"class":443},[437,1768,1769],{"class":453},"0",[437,1771,1590],{"class":443},[437,1773,1774],{"class":459},")\n",[437,1776,1778],{"class":439,"line":1777},21,[437,1779,1555],{"emptyLinePlaceholder":1554},[437,1781,1783,1786,1788,1791,1794,1797,1799,1801,1804],{"class":439,"line":1782},22,[437,1784,1785],{"class":862},"      if",[437,1787,1725],{"class":459},[437,1789,1790],{"class":443},"!",[437,1792,1793],{"class":866},"t",[437,1795,1796],{"class":459},") ",[437,1798,863],{"class":862},[437,1800,1584],{"class":443},[437,1802,1803],{"class":453},"00h:00m:00s",[437,1805,1806],{"class":443},"'\n",[437,1808,1810],{"class":439,"line":1809},23,[437,1811,1555],{"emptyLinePlaceholder":1554},[437,1813,1815,1817,1820,1823,1826,1828,1831,1834,1837,1840,1842,1844,1846,1849,1851,1854,1856,1858,1860,1862,1865,1867,1870],{"class":439,"line":1814},24,[437,1816,1653],{"class":862},[437,1818,1819],{"class":443}," `${",[437,1821,1822],{"class":1738},"pad",[437,1824,1825],{"class":866},"(t",[437,1827,167],{"class":443},[437,1829,1830],{"class":866},"hours)",[437,1832,1833],{"class":443},"}",[437,1835,1836],{"class":453},"h:",[437,1838,1839],{"class":443},"${",[437,1841,1822],{"class":1738},[437,1843,1825],{"class":866},[437,1845,167],{"class":443},[437,1847,1848],{"class":866},"minutes)",[437,1850,1833],{"class":443},[437,1852,1853],{"class":453},"m:",[437,1855,1839],{"class":443},[437,1857,1822],{"class":1738},[437,1859,1825],{"class":866},[437,1861,167],{"class":443},[437,1863,1864],{"class":866},"seconds)",[437,1866,1833],{"class":443},[437,1868,1869],{"class":453},"s",[437,1871,1872],{"class":443},"`\n",[437,1874,1876],{"class":439,"line":1875},25,[437,1877,1347],{"class":443},[437,1879,1881],{"class":439,"line":1880},26,[437,1882,1883],{"class":443},"  }\n",[437,1885,1887],{"class":439,"line":1886},27,[437,1888,518],{"class":443},[437,1890,1892,1894,1896],{"class":439,"line":1891},28,[437,1893,1500],{"class":443},[437,1895,1562],{"class":459},[437,1897,1415],{"class":443},[437,1899,1901],{"class":439,"line":1900},29,[437,1902,1555],{"emptyLinePlaceholder":1554},[437,1904,1906,1908,1911,1914],{"class":439,"line":1905},30,[437,1907,1409],{"class":443},[437,1909,1910],{"class":459},"style",[437,1912,1913],{"class":1174}," scoped",[437,1915,1415],{"class":443},[437,1917,1919,1921,1923],{"class":439,"line":1918},31,[437,1920,167],{"class":443},[437,1922,1434],{"class":1272},[437,1924,1290],{"class":443},[437,1926,1928,1931,1933,1936,1939],{"class":439,"line":1927},32,[437,1929,1930],{"class":866},"  --accent",[437,1932,878],{"class":443},[437,1934,1935],{"class":443}," #",[437,1937,1938],{"class":866},"2ecc71",[437,1940,1044],{"class":443},[437,1942,1944,1948,1950,1953],{"class":439,"line":1943},33,[437,1945,1947],{"class":1946},"sqsOY","  display",[437,1949,878],{"class":443},[437,1951,1952],{"class":866}," flex",[437,1954,1044],{"class":443},[437,1956,1958,1961,1963,1966],{"class":439,"line":1957},34,[437,1959,1960],{"class":1946},"  flex-direction",[437,1962,878],{"class":443},[437,1964,1965],{"class":866}," row",[437,1967,1044],{"class":443},[437,1969,1971,1974,1976,1979],{"class":439,"line":1970},35,[437,1972,1973],{"class":1946},"  align-items",[437,1975,878],{"class":443},[437,1977,1978],{"class":866}," center",[437,1980,1044],{"class":443},[437,1982,1984,1987,1989,1991],{"class":439,"line":1983},36,[437,1985,1986],{"class":1946},"  justify-content",[437,1988,878],{"class":443},[437,1990,1978],{"class":866},[437,1992,1044],{"class":443},[437,1994,1996,1999,2001,2004],{"class":439,"line":1995},37,[437,1997,1998],{"class":1946},"  gap",[437,2000,878],{"class":443},[437,2002,2003],{"class":1309}," 16px",[437,2005,1044],{"class":443},[437,2007,2009,2012,2014,2017],{"class":439,"line":2008},38,[437,2010,2011],{"class":1946},"  width",[437,2013,878],{"class":443},[437,2015,2016],{"class":1309}," 100%",[437,2018,1044],{"class":443},[437,2020,2022,2025,2027,2030],{"class":439,"line":2021},39,[437,2023,2024],{"class":1946},"  box-sizing",[437,2026,878],{"class":443},[437,2028,2029],{"class":866}," border-box",[437,2031,1044],{"class":443},[437,2033,2035,2038,2040,2042,2045],{"class":439,"line":2034},40,[437,2036,2037],{"class":1946},"  background",[437,2039,878],{"class":443},[437,2041,1935],{"class":443},[437,2043,2044],{"class":866},"11161d",[437,2046,1044],{"class":443},[437,2048,2050,2053,2055,2058,2061,2064,2067],{"class":439,"line":2049},41,[437,2051,2052],{"class":1946},"  border",[437,2054,878],{"class":443},[437,2056,2057],{"class":1309}," 1px",[437,2059,2060],{"class":866}," solid ",[437,2062,2063],{"class":443},"#",[437,2065,2066],{"class":866},"2c3744",[437,2068,1044],{"class":443},[437,2070,2072,2075,2077,2080],{"class":439,"line":2071},42,[437,2073,2074],{"class":1946},"  border-radius",[437,2076,878],{"class":443},[437,2078,2079],{"class":1309}," 10px",[437,2081,1044],{"class":443},[437,2083,2085,2088,2090,2092,2095,2097,2099,2102],{"class":439,"line":2084},43,[437,2086,2087],{"class":1946},"  font-family",[437,2089,878],{"class":443},[437,2091,1584],{"class":443},[437,2093,2094],{"class":453},"Courier New",[437,2096,1590],{"class":443},[437,2098,1764],{"class":443},[437,2100,2101],{"class":866}," monospace",[437,2103,1044],{"class":443},[437,2105,2107,2110,2112,2115],{"class":439,"line":2106},44,[437,2108,2109],{"class":1946},"  font-weight",[437,2111,878],{"class":443},[437,2113,2114],{"class":1309}," 700",[437,2116,1044],{"class":443},[437,2118,2120,2123,2125,2128],{"class":439,"line":2119},45,[437,2121,2122],{"class":1946},"  letter-spacing",[437,2124,878],{"class":443},[437,2126,2127],{"class":1309}," 2px",[437,2129,1044],{"class":443},[437,2131,2133,2136,2138,2140,2143],{"class":439,"line":2132},46,[437,2134,2135],{"class":1946},"  padding",[437,2137,878],{"class":443},[437,2139,2003],{"class":1309},[437,2141,2142],{"class":1309}," 24px",[437,2144,1044],{"class":443},[437,2146,2148,2151,2153,2155,2158],{"class":439,"line":2147},47,[437,2149,2150],{"class":1946},"  color",[437,2152,878],{"class":443},[437,2154,1935],{"class":443},[437,2156,2157],{"class":866},"5b6675",[437,2159,1044],{"class":443},[437,2161,2163,2166,2168,2171,2174,2177],{"class":439,"line":2162},48,[437,2164,2165],{"class":1946},"  transition",[437,2167,878],{"class":443},[437,2169,2170],{"class":866}," all ",[437,2172,2173],{"class":1309},".3s",[437,2175,2176],{"class":866}," ease",[437,2178,1044],{"class":443},[437,2180,2182,2185,2187,2190],{"class":439,"line":2181},49,[437,2183,2184],{"class":1946},"  transform",[437,2186,878],{"class":443},[437,2188,2189],{"class":1309}," .95",[437,2191,1044],{"class":443},[437,2193,2195],{"class":439,"line":2194},50,[437,2196,518],{"class":443},[437,2198,2200],{"class":439,"line":2199},51,[437,2201,1555],{"emptyLinePlaceholder":1554},[437,2203,2205,2207,2209],{"class":439,"line":2204},52,[437,2206,167],{"class":443},[437,2208,1490],{"class":1272},[437,2210,1290],{"class":443},[437,2212,2214,2217,2219,2222],{"class":439,"line":2213},53,[437,2215,2216],{"class":1946},"  font-size",[437,2218,878],{"class":443},[437,2220,2221],{"class":1309}," 2.4rem",[437,2223,1044],{"class":443},[437,2225,2227,2229,2231,2234],{"class":439,"line":2226},54,[437,2228,2109],{"class":1946},[437,2230,878],{"class":443},[437,2232,2233],{"class":1309}," 600",[437,2235,1044],{"class":443},[437,2237,2239],{"class":439,"line":2238},55,[437,2240,518],{"class":443},[437,2242,2244],{"class":439,"line":2243},56,[437,2245,1555],{"emptyLinePlaceholder":1554},[437,2247,2249,2251,2253],{"class":439,"line":2248},57,[437,2250,167],{"class":443},[437,2252,1519],{"class":1272},[437,2254,1290],{"class":443},[437,2256,2258,2260,2262,2264],{"class":439,"line":2257},58,[437,2259,2216],{"class":1946},[437,2261,878],{"class":443},[437,2263,2221],{"class":1309},[437,2265,1044],{"class":443},[437,2267,2269],{"class":439,"line":2268},59,[437,2270,518],{"class":443},[437,2272,2274],{"class":439,"line":2273},60,[437,2275,1555],{"emptyLinePlaceholder":1554},[437,2277,2279,2281,2283,2285,2288],{"class":439,"line":2278},61,[437,2280,167],{"class":443},[437,2282,1434],{"class":1272},[437,2284,167],{"class":443},[437,2286,2287],{"class":1272},"running",[437,2289,1290],{"class":443},[437,2291,2293,2295,2297,2300,2303],{"class":439,"line":2292},62,[437,2294,2135],{"class":1946},[437,2296,878],{"class":443},[437,2298,2299],{"class":1309}," 26px",[437,2301,2302],{"class":1309}," 36px",[437,2304,1044],{"class":443},[437,2306,2308,2310,2312,2315,2317,2320],{"class":439,"line":2307},63,[437,2309,2150],{"class":1946},[437,2311,878],{"class":443},[437,2313,2314],{"class":1738}," var",[437,2316,1742],{"class":443},[437,2318,2319],{"class":866},"--accent",[437,2321,2322],{"class":443},");\n",[437,2324,2326,2329,2331,2333,2335,2337],{"class":439,"line":2325},64,[437,2327,2328],{"class":1946},"  border-color",[437,2330,878],{"class":443},[437,2332,2314],{"class":1738},[437,2334,1742],{"class":443},[437,2336,2319],{"class":866},[437,2338,2322],{"class":443},[437,2340,2342,2344,2346,2348,2351],{"class":439,"line":2341},65,[437,2343,2037],{"class":1946},[437,2345,878],{"class":443},[437,2347,1935],{"class":443},[437,2349,2350],{"class":866},"0d1c13",[437,2352,1044],{"class":443},[437,2354,2356,2359,2361,2363,2365,2368,2371,2373,2376,2378,2381,2383,2386,2388,2391],{"class":439,"line":2355},66,[437,2357,2358],{"class":1946},"  box-shadow",[437,2360,878],{"class":443},[437,2362,1310],{"class":1309},[437,2364,1310],{"class":1309},[437,2366,2367],{"class":1309}," 18px",[437,2369,2370],{"class":1738}," rgba",[437,2372,1742],{"class":443},[437,2374,2375],{"class":1309},"46",[437,2377,1764],{"class":443},[437,2379,2380],{"class":1309}," 204",[437,2382,1764],{"class":443},[437,2384,2385],{"class":1309}," 113",[437,2387,1764],{"class":443},[437,2389,2390],{"class":1309}," .35",[437,2392,2393],{"class":443},"),\n",[437,2395,2397,2400,2402,2404,2407,2409,2411,2413,2415,2417,2419,2421,2423,2426],{"class":439,"line":2396},67,[437,2398,2399],{"class":866},"              inset ",[437,2401,1769],{"class":1309},[437,2403,1310],{"class":1309},[437,2405,2406],{"class":1309}," 12px",[437,2408,2370],{"class":1738},[437,2410,1742],{"class":443},[437,2412,2375],{"class":1309},[437,2414,1764],{"class":443},[437,2416,2380],{"class":1309},[437,2418,1764],{"class":443},[437,2420,2385],{"class":1309},[437,2422,1764],{"class":443},[437,2424,2425],{"class":1309}," .15",[437,2427,2322],{"class":443},[437,2429,2431],{"class":439,"line":2430},68,[437,2432,518],{"class":443},[437,2434,2436],{"class":439,"line":2435},69,[437,2437,1555],{"emptyLinePlaceholder":1554},[437,2439,2441,2443,2445,2447,2449,2452,2454],{"class":439,"line":2440},70,[437,2442,167],{"class":443},[437,2444,1434],{"class":1272},[437,2446,167],{"class":443},[437,2448,2287],{"class":1272},[437,2450,2451],{"class":443}," .",[437,2453,1490],{"class":1272},[437,2455,1290],{"class":443},[437,2457,2459,2461,2463,2466],{"class":439,"line":2458},71,[437,2460,2216],{"class":1946},[437,2462,878],{"class":443},[437,2464,2465],{"class":1309}," 3.6rem",[437,2467,1044],{"class":443},[437,2469,2471],{"class":439,"line":2470},72,[437,2472,518],{"class":443},[437,2474,2476],{"class":439,"line":2475},73,[437,2477,1555],{"emptyLinePlaceholder":1554},[437,2479,2481,2483,2485,2487,2489,2491,2493],{"class":439,"line":2480},74,[437,2482,167],{"class":443},[437,2484,1434],{"class":1272},[437,2486,167],{"class":443},[437,2488,2287],{"class":1272},[437,2490,2451],{"class":443},[437,2492,1519],{"class":1272},[437,2494,1290],{"class":443},[437,2496,2498,2500,2502,2505],{"class":439,"line":2497},75,[437,2499,2216],{"class":1946},[437,2501,878],{"class":443},[437,2503,2504],{"class":1309}," 5rem",[437,2506,1044],{"class":443},[437,2508,2510],{"class":439,"line":2509},76,[437,2511,518],{"class":443},[437,2513,2515,2517,2519],{"class":439,"line":2514},77,[437,2516,1500],{"class":443},[437,2518,1910],{"class":459},[437,2520,1415],{"class":443},[12,2522,2523,2524,2526,2527,370,2529,373,2531,167],{},"All four widgets use the same template code: only the label changes. For reference, this example uses the ",[40,2525,94],{}," label; configure the other three the same way, swapping in ",[40,2528,283],{},[40,2530,293],{},[40,2532,303],{},[12,2534,2535,2539],{},[127,2536],{"alt":2537,"src":2538},"Finished HMI-style runtime widget for the Motor, showing elapsed time and a highlighted green state while running","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fruntime-display-motor.png",[132,2540,2541],{},"Reference result for the Motor runtime widget. Repeat this setup for Red Light, Yellow Light, and Green Light, changing only the label.",[12,2543,2544,2545,2548],{},"The template formats the elapsed time into an easy-to-read ",[61,2546,2547],{},"HHh:MMm:SSs"," display and automatically changes its appearance while the device is running. Because each widget is connected to a separate Hourglass node, every device maintains its own independent runtime display.",[12,2550,2551],{},"Deploy the flow and open the dashboard.",[12,2553,2554],{},"Start the motor and toggle each stack light while watching the runtime displays update.",[1910,2556,2557],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":433,"searchDepth":486,"depth":486,"links":2559},[2560,2561,2562,2569,2574,2579],{"id":27,"depth":447,"text":28},{"id":85,"depth":447,"text":86},{"id":137,"depth":447,"text":138,"children":2563},[2564,2565,2566,2567,2568],{"id":151,"depth":470,"text":152},{"id":233,"depth":470,"text":234},{"id":330,"depth":470,"text":331},{"id":391,"depth":470,"text":392},{"id":533,"depth":470,"text":534},{"id":550,"depth":447,"text":551,"children":2570},[2571,2572,2573],{"id":611,"depth":470,"text":612},{"id":693,"depth":470,"text":694},{"id":764,"depth":470,"text":765},{"id":795,"depth":447,"text":796,"children":2575},[2576,2577,2578],{"id":815,"depth":470,"text":816},{"id":1094,"depth":470,"text":1095},{"id":1128,"depth":470,"text":1129},{"id":1208,"depth":447,"text":1209,"children":2580},[2581,2582],{"id":1219,"depth":470,"text":1220},{"id":1366,"depth":470,"text":1367},{"type":2584,"title":2585,"description":2586},"contact","Ready to bring this to your shopfloor?","Talk to our team about connecting FlowFuse to your PLCs and building operator dashboards for your production line.","2026-07-02","Learn how to connect FlowFuse to a Siemens S7 PLC, build an operator dashboard to control a motor and stack light, and automatically track device runtime using the Hourglass node.","md","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fcontrol-and-monitor-machines.png",null,{"usecase":2593,"excerpt":2595},[2594],"shop-floor-communication",{"type":9,"value":2596},[2597],[12,2598,14],{},"\u002Fblog\u002F2026\u002F07\u002Fcontrol-and-track-factory-floor-machines",{"title":5,"description":2588},{"loc":2599},"blog\u002F2026\u002F07\u002Fcontrol-and-track-factory-floor-machines","Build a FlowFuse dashboard to control a PLC-connected motor and stack light, then track runtime automatically",[2605],"flowfuse","Connect FlowFuse to a Siemens S7 PLC with node-red-contrib-s7, build a dashboard to control a motor and stack light, and use the Hourglass node to automatically track and display how long each device has been running.","Ea1w11wecrOYaPPhg0BOlDU19SYv-1kN2MVEwB8lQb4",[],1785528703002]