I have many such mysql query outputs to assign to flow context, the change node becomes very big and difficult to manage, what is the equivalent to use jsonata in a function node ?
RED.utils has two js methods to prepare jsonata and evaluate the prepared expression
https://nodered.org/docs/api/modules/v/0.20.0/@node-red_util_util.html#.prepareJSONataExpression
https://nodered.org/docs/api/modules/v/0.20.0/@node-red_util_util.html#.evaluateJSONataExpression
But you should be able to do it in function node without JSONata, just use Javascript.
Why not use a single flow context var to save all the dots in, you should be able to the recall them using flow. var_name.dot1 etc. The saving to flow context could then be done in one expression. Could be more helpful here if you supplied the incoming data
it's deliberate (well, atleast as i have put the logic in the flow, it is required to break them into pieces, i am sure there is always a better way, happy to learn) I will try to give a sample data, so that i can get help in the function node. brb.
In base context or a a var is much the same. But easier to save to context and better grouped, so in context sidebar it is easier to view and collapsible to hide while viewing other context vars.
Do you need them in context at all? The node red way is pass data in messages to where you need it.
I found it easier to save in flow context and recall them as the inputs are non-sequential, I could use join node, but somehow I am used to set and get.
I am trying to get a machine status bar (somewhat similar to ui-state trail but no where near its functionality). green being running and red being stopped. (acheived through css ). i have set my mysql query itself to attach class to the <td> tag.
eventually i wish to 'merge' all the running statuses and stop statuses into contniuous bars and achieve on-click action. (way too ambitious at this point)
PS: I am sure you would find many amateurish design in the flow please bear with me.
[{"id":"d4e881f7d92c6a4b","type":"inject","z":"8aeac5104f2cecfe","name":"Sample Data from Mysql Query","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:27</div></td>\"},{\"dot1\":\"<td class='m_off'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:26</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:25</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:24</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:23</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:22</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:21</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:20</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:19</div></td>\"},{\"dot1\":\"<td class='m_off'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:18</div></td>\"}],[{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:17</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:16</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:15</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:14</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:13</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:12</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:11</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:10</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:09</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:08</div></td>\"}],[{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:07</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:06</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:05</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:04</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:03</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:02</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:01</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:00</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>20:59</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>20:58</div></td>\"}],[{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:57</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:56</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:55</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:54</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:53</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:52</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:51</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:50</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:49</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:48</div></td>\"}],[{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:47</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:46</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:45</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:44</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:43</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:42</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:41</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:40</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:39</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:38</div></td>\"}],[{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:37</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:36</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:35</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:34</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:33</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:32</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:31</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:30</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:29</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:28</div></td>\"}]]","payloadType":"json","x":3185,"y":1050,"wires":[["490db87c25d18caa"]]},{"id":"490db87c25d18caa","type":"change","z":"8aeac5104f2cecfe","name":"Set Flow Context","rules":[{"t":"set","p":"dot1","pt":"flow","to":"*.dot1","tot":"jsonata"},{"t":"set","p":"dot2","pt":"flow","to":"*.dot2","tot":"jsonata"},{"t":"set","p":"dot3","pt":"flow","to":"*.dot3","tot":"jsonata"},{"t":"set","p":"dot4","pt":"flow","to":"*.dot4","tot":"jsonata"},{"t":"set","p":"dot5","pt":"flow","to":"*.dot5","tot":"jsonata"},{"t":"set","p":"dot6","pt":"flow","to":"*.dot6","tot":"jsonata"},{"t":"set","p":"t1","pt":"flow","to":"*.t1","tot":"jsonata"},{"t":"set","p":"t2","pt":"flow","to":"*.t2","tot":"jsonata"},{"t":"set","p":"t3","pt":"flow","to":"*.t3","tot":"jsonata"},{"t":"set","p":"t4","pt":"flow","to":"*.t4","tot":"jsonata"},{"t":"set","p":"t5","pt":"flow","to":"*.t5","tot":"jsonata"},{"t":"set","p":"t6","pt":"flow","to":"*.t6","tot":"jsonata"},{"t":"set","p":"machine","pt":"flow","to":"JUICE LINE :-","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3465,"y":1050,"wires":[["82e3f308dec250e7"]]},{"id":"82e3f308dec250e7","type":"template","z":"8aeac5104f2cecfe","name":"TABLE SET","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<body>\n\n<!-- <th>{{{flow.machine}}}</th>\n<caption>{{flow.machine}} Last 60 minutes Status</caption>\n --> \n<table border = '0' cellpadding = \"0\">\n<th>{{{flow.machine}}}</th>\n{{{flow.t1.0}}}\n{{{flow.dot1.0}}}{{{flow.dot1.1}}}{{{flow.dot1.2}}}{{{flow.dot1.3}}}{{{flow.dot1.4}}}\n{{{flow.dot1.5}}}{{{flow.dot1.6}}}{{{flow.dot1.7}}}{{{flow.dot1.8}}}{{{flow.dot1.9}}}\n{{{flow.t2.0}}}\n{{{flow.dot2.0}}}{{{flow.dot2.1}}}{{{flow.dot2.2}}}{{{flow.dot2.3}}}{{{flow.dot2.4}}}\n{{{flow.dot2.5}}}{{{flow.dot2.6}}}{{{flow.dot2.7}}}{{{flow.dot2.8}}}{{{flow.dot2.9}}} \n{{{flow.t3.0}}} \n{{{flow.dot3.0}}}{{{flow.dot3.1}}}{{{flow.dot3.2}}}{{{flow.dot3.3}}}{{{flow.dot3.4}}}\n{{{flow.dot3.5}}}{{{flow.dot3.6}}}{{{flow.dot3.7}}}{{{flow.dot3.8}}}{{{flow.dot3.9}}} \n{{{flow.t4.0}}}\n{{{flow.dot4.0}}}{{{flow.dot4.1}}}{{{flow.dot4.2}}}{{{flow.dot4.3}}}{{{flow.dot4.4}}}\n{{{flow.dot4.5}}}{{{flow.dot4.6}}}{{{flow.dot4.7}}}{{{flow.dot4.8}}}{{{flow.dot4.9}}} \n{{{flow.t5.0}}}\n{{{flow.dot5.0}}}{{{flow.dot5.1}}}{{{flow.dot5.2}}}{{{flow.dot5.3}}}{{{flow.dot5.4}}}\n{{{flow.dot5.5}}}{{{flow.dot5.6}}}{{{flow.dot5.7}}}{{{flow.dot5.8}}}{{{flow.dot5.9}}} \n{{{flow.t6.0}}}\n{{{flow.dot6.0}}}{{{flow.dot6.1}}}{{{flow.dot6.2}}}{{{flow.dot6.3}}}{{{flow.dot6.4}}}\n{{{flow.dot6.5}}}{{{flow.dot6.6}}}{{{flow.dot6.7}}}{{{flow.dot6.8}}}{{{flow.dot6.9}}} \n{{{flow.t6.9}}}\n </tr>\n\n \n<tr height = \"2px\" bgcolor=\"orange\"> <td colspan=\"71\"></td></tr> \n\n\n</table>\n </body>\n","output":"str","x":3670,"y":1050,"wires":[["e27d0775fc48f270"]]},{"id":"e27d0775fc48f270","type":"ui_template","z":"8aeac5104f2cecfe","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"30","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":3870,"y":1050,"wires":[[]]},{"id":"ef627a4df6559aca","type":"ui_template","z":"8aeac5104f2cecfe","group":"a4ea32cfdc7814fc","name":"CSS","order":1,"width":"1","height":"1","format":"<style>\n\n.large-font {\nfont-size:2.7em;\ncolor: white;\nfont-family: \"Trebuchet MS\";\ntext-align: center;}\n\n\n.medium-font {\nfont-size: 1.3em; text-align: center;/* Increase font size by 1.5 times */\n}\n\n.another-large {\n font-size: 25px; vertical-align:\"middle\" ; text-align: center; /* Set a specific pixel size */\n}\n\n.smallfont {\nfont-size:12px;\ncolor: cyan;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.red {\nfont-size:20px;\ncolor: red;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.orange {\nfont-size:20px;\ncolor: orange;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.green {\nfont-size:20px;\ncolor: #55ff55;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.shifts {\nfont-size:21px;\ncolor: white;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hours {\nfont-size:20px;\ncolor: #FBFF00;\nbackground:#505050;\nheight:28px;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hour0 {font-size:22px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:20px;color: #FBFF00;background:#808080;height:28px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:20px;color: #FBFF00;background:#707070;height:28px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:20px;color: #FBFF00;background:#606060;height:28px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:20px;color: #FBFF00;background:#505050;height:28px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:20px;color: #FBFF00;background:#404040;height:28px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:20px;color: #FBFF00;background:#303030;height:28px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:20px;color: #FBFF00;background:#202020;height:28px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {\nfont-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n\n.smallfont2 {\ncolor:grey ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n.another-large1 {\nfont-size: 20px; color: blue ;text-align: right;/* Set a specific pixel size */\n}\n\n.container {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\n\n}\n\n.time {\nfont-size:8px;\ncolor: yellow;\nfont-family: \"courier narrow\";\ntext-align: center;\n}\n.rotate {\n height:40px;\n font-size:12px;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n width: 1.0em;\n}\n.rotate div {\n -moz-transform: rotate(-90.0deg); /* FF3.5+ */\n -o-transform: rotate(-90.0deg); /* Opera 10.5 */\n -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */\n -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)\"; /* IE8 */\n margin-left: -10em;\n margin-right: -10em;\n}\n.m_on {\nfont-size:25px;\ncolor: green;\nfont-family: \"courier\";\ntext-align: center;\n}\n.m_off {\nfont-size:25px;\ncolor: red;\nfont-family: \"courier\";\ntext-align: center;\n}\n\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":3825,"y":1000,"wires":[[]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
As @Colin suggests why move it all to context, you could just dynamically create the table in the template
e.g
[{"id":"575be6088b54c8bb","type":"inject","z":"d1395164b4eec73e","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:27</div></td>\"},{\"dot1\":\"<td class='m_off'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:26</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:25</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:24</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:23</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:22</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:21</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:20</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:19</div></td>\"},{\"dot1\":\"<td class='m_off'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:18</div></td>\"}],[{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:17</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:16</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:15</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:14</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:13</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:12</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:11</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:10</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:09</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:08</div></td>\"}],[{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:07</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:06</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:05</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:04</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:03</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:02</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:01</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:00</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>20:59</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>20:58</div></td>\"}],[{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:57</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:56</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:55</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:54</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:53</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:52</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:51</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:50</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:49</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:48</div></td>\"}],[{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:47</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:46</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:45</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:44</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:43</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:42</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:41</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:40</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:39</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:38</div></td>\"}],[{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:37</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:36</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:35</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:34</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:33</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:32</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:31</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:30</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:29</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:28</div></td>\"}]]","payloadType":"json","x":150,"y":20,"wires":[["c5e019eb649e8d50"]]},{"id":"c5e019eb649e8d50","type":"change","z":"d1395164b4eec73e","name":"correct object names","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.payload#$i.[[$.{\"dot\": $lookup($, \"dot\" & $string($i+1)), \t \"t\": $lookup($, \"t\" & $string($i+1))}]]\t","tot":"jsonata"},{"t":"set","p":"last_time","pt":"msg","to":"$$.payload[-1][-1].t","tot":"jsonata"},{"t":"set","p":"colspan","pt":"msg","to":"$count($$.payload.**)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":20,"wires":[["7dc21897748bb008","cec076d603fddd15"]]},{"id":"7dc21897748bb008","type":"template","z":"d1395164b4eec73e","name":"TABLE SET","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table border = '0' cellpadding = \"0\">\n<th>{{{machine}}}:-</th>\n{{#payload}}\n {{{0.t}}} \n {{#.}}\n {{{dot}}}\n \n {{/.}}\n{{/payload}}\n<td>{{{last_time}}}</td>\n</tr> \n<tr height = \"2px\" bgcolor=\"orange\"> <td colspan=\"{{colspan}}\"></td></tr> \n</table>\n \n","output":"str","x":610,"y":20,"wires":[["92a656c0db91c226"]]},{"id":"cec076d603fddd15","type":"debug","z":"d1395164b4eec73e","name":"debug 2561","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":310,"y":80,"wires":[]},{"id":"92a656c0db91c226","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"30","height":"4","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":80,"wires":[[]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Would be better to move all the html and css out of the input array. This is best as just data, you then add the html in the template. I have not done this as it would take to long to correct the input data.
I did add a JSONata to correct the input object names, as this makes the template much simpler. The template should be reactive to array input changes, know need to edit template, just the data input.
below is the pure data feed, 1 being machine on and 0 being machine off.
[{"id":"2fbc4fafb3c315ef","type":"inject","z":"8aeac5104f2cecfe","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot1\":0,\"t1\":\"06:59\"},{\"dot1\":0,\"t1\":\"06:58\"},{\"dot1\":1,\"t1\":\"06:57\"},{\"dot1\":1,\"t1\":\"06:56\"},{\"dot1\":1,\"t1\":\"06:55\"},{\"dot1\":1,\"t1\":\"06:54\"},{\"dot1\":1,\"t1\":\"06:53\"},{\"dot1\":1,\"t1\":\"06:52\"},{\"dot1\":1,\"t1\":\"06:51\"},{\"dot1\":1,\"t1\":\"06:50\"}],[{\"dot2\":1,\"t2\":\"06:49\"},{\"dot2\":1,\"t2\":\"06:48\"},{\"dot2\":1,\"t2\":\"06:47\"},{\"dot2\":1,\"t2\":\"06:46\"},{\"dot2\":1,\"t2\":\"06:45\"},{\"dot2\":1,\"t2\":\"06:44\"},{\"dot2\":1,\"t2\":\"06:43\"},{\"dot2\":1,\"t2\":\"06:42\"},{\"dot2\":1,\"t2\":\"06:41\"},{\"dot2\":1,\"t2\":\"06:40\"}],[{\"dot3\":1,\"t3\":\"06:39\"},{\"dot3\":1,\"t3\":\"06:38\"},{\"dot3\":1,\"t3\":\"06:37\"},{\"dot3\":1,\"t3\":\"06:36\"},{\"dot3\":1,\"t3\":\"06:34\"},{\"dot3\":1,\"t3\":\"06:33\"},{\"dot3\":1,\"t3\":\"06:32\"},{\"dot3\":1,\"t3\":\"06:31\"},{\"dot3\":1,\"t3\":\"06:30\"},{\"dot3\":1,\"t3\":\"06:29\"}],[{\"dot4\":1,\"t4\":\"06:28\"},{\"dot4\":1,\"t4\":\"06:27\"},{\"dot4\":1,\"t4\":\"06:26\"},{\"dot4\":1,\"t4\":\"06:25\"},{\"dot4\":1,\"t4\":\"06:24\"},{\"dot4\":1,\"t4\":\"06:23\"},{\"dot4\":0,\"t4\":\"06:22\"},{\"dot4\":0,\"t4\":\"06:21\"},{\"dot4\":0,\"t4\":\"06:20\"},{\"dot4\":0,\"t4\":\"06:19\"}],[{\"dot5\":1,\"t5\":\"06:18\"},{\"dot5\":1,\"t5\":\"06:17\"},{\"dot5\":1,\"t5\":\"06:16\"},{\"dot5\":1,\"t5\":\"06:15\"},{\"dot5\":0,\"t5\":\"06:14\"},{\"dot5\":0,\"t5\":\"06:13\"},{\"dot5\":0,\"t5\":\"06:12\"},{\"dot5\":0,\"t5\":\"06:11\"},{\"dot5\":0,\"t5\":\"06:10\"},{\"dot5\":0,\"t5\":\"06:09\"}],[{\"dot6\":0,\"t6\":\"06:08\"},{\"dot6\":0,\"t6\":\"06:07\"},{\"dot6\":0,\"t6\":\"06:06\"},{\"dot6\":0,\"t6\":\"06:05\"},{\"dot6\":0,\"t6\":\"06:04\"},{\"dot6\":0,\"t6\":\"06:03\"},{\"dot6\":0,\"t6\":\"06:02\"},{\"dot6\":0,\"t6\":\"06:01\"},{\"dot6\":0,\"t6\":\"06:00\"},{\"dot6\":0,\"t6\":\"05:59\"}]]","payloadType":"json","x":3330,"y":1025,"wires":[["a43262a5152e0786"]]}]
I can add one by one with an If Else statement, but not sure how to add the same with a for next loop to cover the entire data array.
Indeed, alas, it would take me weeks to even understand the same and replicate it.
yes, i wanted to dynamically change the length of data array from 1 hour to 4 hour etc, but was stuck due to this. this is exactly what i wanted.
The html is now in the template and a slight change in the css m_1 and m_0.
[{"id":"2fbc4fafb3c315ef","type":"inject","z":"d1395164b4eec73e","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot1\":0,\"t1\":\"06:59\"},{\"dot1\":0,\"t1\":\"06:58\"},{\"dot1\":1,\"t1\":\"06:57\"},{\"dot1\":1,\"t1\":\"06:56\"},{\"dot1\":1,\"t1\":\"06:55\"},{\"dot1\":1,\"t1\":\"06:54\"},{\"dot1\":1,\"t1\":\"06:53\"},{\"dot1\":1,\"t1\":\"06:52\"},{\"dot1\":1,\"t1\":\"06:51\"},{\"dot1\":1,\"t1\":\"06:50\"}],[{\"dot2\":1,\"t2\":\"06:49\"},{\"dot2\":1,\"t2\":\"06:48\"},{\"dot2\":1,\"t2\":\"06:47\"},{\"dot2\":1,\"t2\":\"06:46\"},{\"dot2\":1,\"t2\":\"06:45\"},{\"dot2\":1,\"t2\":\"06:44\"},{\"dot2\":1,\"t2\":\"06:43\"},{\"dot2\":1,\"t2\":\"06:42\"},{\"dot2\":1,\"t2\":\"06:41\"},{\"dot2\":1,\"t2\":\"06:40\"}],[{\"dot3\":1,\"t3\":\"06:39\"},{\"dot3\":1,\"t3\":\"06:38\"},{\"dot3\":1,\"t3\":\"06:37\"},{\"dot3\":1,\"t3\":\"06:36\"},{\"dot3\":1,\"t3\":\"06:34\"},{\"dot3\":1,\"t3\":\"06:33\"},{\"dot3\":1,\"t3\":\"06:32\"},{\"dot3\":1,\"t3\":\"06:31\"},{\"dot3\":1,\"t3\":\"06:30\"},{\"dot3\":1,\"t3\":\"06:29\"}],[{\"dot4\":1,\"t4\":\"06:28\"},{\"dot4\":1,\"t4\":\"06:27\"},{\"dot4\":1,\"t4\":\"06:26\"},{\"dot4\":1,\"t4\":\"06:25\"},{\"dot4\":1,\"t4\":\"06:24\"},{\"dot4\":1,\"t4\":\"06:23\"},{\"dot4\":0,\"t4\":\"06:22\"},{\"dot4\":0,\"t4\":\"06:21\"},{\"dot4\":0,\"t4\":\"06:20\"},{\"dot4\":0,\"t4\":\"06:19\"}],[{\"dot5\":1,\"t5\":\"06:18\"},{\"dot5\":1,\"t5\":\"06:17\"},{\"dot5\":1,\"t5\":\"06:16\"},{\"dot5\":1,\"t5\":\"06:15\"},{\"dot5\":0,\"t5\":\"06:14\"},{\"dot5\":0,\"t5\":\"06:13\"},{\"dot5\":0,\"t5\":\"06:12\"},{\"dot5\":0,\"t5\":\"06:11\"},{\"dot5\":0,\"t5\":\"06:10\"},{\"dot5\":0,\"t5\":\"06:09\"}],[{\"dot6\":0,\"t6\":\"06:08\"},{\"dot6\":0,\"t6\":\"06:07\"},{\"dot6\":0,\"t6\":\"06:06\"},{\"dot6\":0,\"t6\":\"06:05\"},{\"dot6\":0,\"t6\":\"06:04\"},{\"dot6\":0,\"t6\":\"06:03\"},{\"dot6\":0,\"t6\":\"06:02\"},{\"dot6\":0,\"t6\":\"06:01\"},{\"dot6\":0,\"t6\":\"06:00\"},{\"dot6\":0,\"t6\":\"05:59\"}]]","payloadType":"json","x":150,"y":20,"wires":[["c5e019eb649e8d50"]]},{"id":"c5e019eb649e8d50","type":"change","z":"d1395164b4eec73e","name":"correct object names","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.payload#$i.[[$.{\"on\": $lookup($, \"dot\" & $string($i+1)), \t \"time\": $lookup($, \"t\" & $string($i+1)),\t \"id\": \"dot\" & $string($i+1)}]]\t","tot":"jsonata"},{"t":"set","p":"last_time","pt":"msg","to":"$$.payload[-1][-1].time","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":20,"wires":[["7dc21897748bb008","cec076d603fddd15"]]},{"id":"7dc21897748bb008","type":"template","z":"d1395164b4eec73e","name":"TABLE SET","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table border = '0' cellpadding = \"0\">\n<th>{{{machine}}}:-</th>\n{{#payload}}\n<td class = 'rotate'><div>{{{0.time}}}</div></td>\n{{#.}}\n <td class='m_{{{on}}}'>▄</td>\n{{/.}}\n{{/payload}}\n<td class = 'rotate'><div>{{{last_time}}}</div></td>\n</tr>\n<tr height = \"2px\" bgcolor=\"orange\"> <td colspan=\"100%\"></td></tr>\n</table>","output":"str","x":610,"y":20,"wires":[["92a656c0db91c226"]]},{"id":"cec076d603fddd15","type":"debug","z":"d1395164b4eec73e","name":"debug 2561","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":330,"y":120,"wires":[]},{"id":"92a656c0db91c226","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"30","height":"4","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":80,"wires":[[]]},{"id":"f3d623295fd5b403","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"CSS","order":1,"width":"1","height":"1","format":"<style>\n\n.large-font {\nfont-size:2.7em;\ncolor: white;\nfont-family: \"Trebuchet MS\";\ntext-align: center;}\n\n\n.medium-font {\nfont-size: 1.3em; text-align: center;/* Increase font size by 1.5 times */\n}\n\n.another-large {\n font-size: 25px; vertical-align:\"middle\" ; text-align: center; /* Set a specific pixel size */\n}\n\n.smallfont {\nfont-size:12px;\ncolor: cyan;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.red {\nfont-size:20px;\ncolor: red;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.orange {\nfont-size:20px;\ncolor: orange;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.green {\nfont-size:20px;\ncolor: #55ff55;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.shifts {\nfont-size:21px;\ncolor: white;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hours {\nfont-size:20px;\ncolor: #FBFF00;\nbackground:#505050;\nheight:28px;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hour0 {font-size:22px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:20px;color: #FBFF00;background:#808080;height:28px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:20px;color: #FBFF00;background:#707070;height:28px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:20px;color: #FBFF00;background:#606060;height:28px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:20px;color: #FBFF00;background:#505050;height:28px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:20px;color: #FBFF00;background:#404040;height:28px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:20px;color: #FBFF00;background:#303030;height:28px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:20px;color: #FBFF00;background:#202020;height:28px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {\nfont-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n\n.smallfont2 {\ncolor:grey ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n.another-large1 {\nfont-size: 20px; color: blue ;text-align: right;/* Set a specific pixel size */\n}\n\n.container {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\n\n}\n\n.time {\nfont-size:8px;\ncolor: yellow;\nfont-family: \"courier narrow\";\ntext-align: center;\n}\n.rotate {\n height:40px;\n font-size:12px;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n width: 1.0em;\n}\n.rotate div {\n -moz-transform: rotate(-90.0deg); /* FF3.5+ */\n -o-transform: rotate(-90.0deg); /* Opera 10.5 */\n -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */\n -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)\"; /* IE8 */\n margin-left: -10em;\n margin-right: -10em;\n}\n.m_1 {\nfont-size:25px;\ncolor: green;\nfont-family: \"courier\";\ntext-align: center;\n}\n.m_0 {\nfont-size:25px;\ncolor: red;\nfont-family: \"courier\";\ntext-align: center;\n}\n\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":770,"y":30,"wires":[[]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
If you can change the data to something like this, there would be no need for the correction jsonata
[
[
{
"on": 0,
"time": "06:59",
"id": "dot1"
},
{
"on": 0,
"time": "06:58",
"id": "dot1"
}
],
[
{
"on": 1,
"time": "06:49",
"id": "dot2"
},
{
"on": 1,
"time": "06:48",
"id": "dot2"
}
]
]
so instead of dot1, dot2, t1, t2 etc, keeping all of them as dot, t, and then add id as 1, 2, 3, 4, etc. ? I see the logic, but unable to understand how you would use them to arrange the data. hope i have given you below the correct sample data as requested.
I am very grateful, you are helping me understand and learn new things.
[{"id":"fe7c401dce8737f3","type":"inject","z":"8aeac5104f2cecfe","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot\":1,\"t\":\"11:59\",\"id\":1},{\"dot\":1,\"t\":\"11:58\",\"id\":1},{\"dot\":1,\"t\":\"11:57\",\"id\":1},{\"dot\":1,\"t\":\"11:56\",\"id\":1},{\"dot\":1,\"t\":\"11:55\",\"id\":1},{\"dot\":1,\"t\":\"11:54\",\"id\":1},{\"dot\":1,\"t\":\"11:53\",\"id\":1},{\"dot\":1,\"t\":\"11:52\",\"id\":1},{\"dot\":1,\"t\":\"11:51\",\"id\":1},{\"dot\":1,\"t\":\"11:50\",\"id\":1}],[{\"dot\":1,\"t\":\"11:49\",\"id\":2},{\"dot\":1,\"t\":\"11:48\",\"id\":2},{\"dot\":1,\"t\":\"11:47\",\"id\":2},{\"dot\":1,\"t\":\"11:46\",\"id\":2},{\"dot\":1,\"t\":\"11:45\",\"id\":2},{\"dot\":1,\"t\":\"11:44\",\"id\":2},{\"dot\":1,\"t\":\"11:43\",\"id\":2},{\"dot\":1,\"t\":\"11:42\",\"id\":2},{\"dot\":1,\"t\":\"11:41\",\"id\":2},{\"dot\":1,\"t\":\"11:40\",\"id\":2}],[{\"dot\":1,\"t\":\"11:39\",\"id\":3},{\"dot\":1,\"t\":\"11:38\",\"id\":3},{\"dot\":1,\"t\":\"11:37\",\"id\":3},{\"dot\":1,\"t\":\"11:36\",\"id\":3},{\"dot\":1,\"t\":\"11:35\",\"id\":3},{\"dot\":1,\"t\":\"11:34\",\"id\":3},{\"dot\":1,\"t\":\"11:33\",\"id\":3},{\"dot\":1,\"t\":\"11:32\",\"id\":3},{\"dot\":1,\"t\":\"11:31\",\"id\":3},{\"dot\":1,\"t\":\"11:30\",\"id\":3}],[{\"dot\":1,\"t\":\"11:29\",\"id\":4},{\"dot\":0,\"t\":\"11:28\",\"id\":4},{\"dot\":0,\"t\":\"11:27\",\"id\":4},{\"dot\":0,\"t\":\"11:26\",\"id\":4},{\"dot\":0,\"t\":\"11:25\",\"id\":4},{\"dot\":0,\"t\":\"11:24\",\"id\":4},{\"dot\":0,\"t\":\"11:23\",\"id\":4},{\"dot\":0,\"t\":\"11:22\",\"id\":4},{\"dot\":0,\"t\":\"11:21\",\"id\":4},{\"dot\":0,\"t\":\"11:20\",\"id\":4}],[{\"dot\":0,\"t\":\"11:19\",\"id\":5},{\"dot\":0,\"t\":\"11:18\",\"id\":5},{\"dot\":0,\"t\":\"11:17\",\"id\":5},{\"dot\":0,\"t\":\"11:16\",\"id\":5},{\"dot\":0,\"t\":\"11:15\",\"id\":5},{\"dot\":0,\"t\":\"11:14\",\"id\":5},{\"dot\":0,\"t\":\"11:13\",\"id\":5},{\"dot\":0,\"t\":\"11:12\",\"id\":5},{\"dot\":0,\"t\":\"11:11\",\"id\":5},{\"dot\":0,\"t\":\"11:10\",\"id\":5}],[{\"dot\":0,\"t\":\"11:09\",\"id\":6},{\"dot\":1,\"t\":\"11:08\",\"id\":6},{\"dot\":1,\"t\":\"11:07\",\"id\":6},{\"dot\":1,\"t\":\"11:06\",\"id\":6},{\"dot\":1,\"t\":\"11:05\",\"id\":6},{\"dot\":1,\"t\":\"11:04\",\"id\":6},{\"dot\":1,\"t\":\"11:03\",\"id\":6},{\"dot\":1,\"t\":\"11:02\",\"id\":6},{\"dot\":1,\"t\":\"11:01\",\"id\":6},{\"dot\":1,\"t\":\"11:00\",\"id\":6}]]","payloadType":"json","x":3195,"y":1225,"wires":[["e9d7757fbbe951cd"]]}]
This explains how the
{{#payload}} blah {{/payload}} iterates over an array. mustache(5) - Logic-less templates. look at Non-Empty Lists section. They can be nested as in the template in my example
example flow using latest example data but reduce times and machines. css needs correcting for rotate div, i will leave that for you to sort.
[{"id":"fe7c401dce8737f3","type":"inject","z":"d1395164b4eec73e","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot\":1,\"t\":\"11:59\",\"id\":1},{\"dot\":1,\"t\":\"11:58\",\"id\":1},{\"dot\":1,\"t\":\"11:57\",\"id\":1},{\"dot\":1,\"t\":\"11:56\",\"id\":1},{\"dot\":1,\"t\":\"11:55\",\"id\":1},{\"dot\":1,\"t\":\"11:54\",\"id\":1},{\"dot\":1,\"t\":\"11:53\",\"id\":1},{\"dot\":1,\"t\":\"11:52\",\"id\":1}],[{\"dot\":1,\"t\":\"11:49\",\"id\":2},{\"dot\":1,\"t\":\"11:48\",\"id\":2},{\"dot\":1,\"t\":\"11:47\",\"id\":2},{\"dot\":1,\"t\":\"11:46\",\"id\":2},{\"dot\":1,\"t\":\"11:45\",\"id\":2},{\"dot\":1,\"t\":\"11:44\",\"id\":2},{\"dot\":1,\"t\":\"11:43\",\"id\":2},{\"dot\":1,\"t\":\"11:42\",\"id\":2}],[{\"dot\":1,\"t\":\"11:39\",\"id\":3},{\"dot\":1,\"t\":\"11:38\",\"id\":3},{\"dot\":1,\"t\":\"11:37\",\"id\":3},{\"dot\":1,\"t\":\"11:36\",\"id\":3},{\"dot\":1,\"t\":\"11:35\",\"id\":3},{\"dot\":1,\"t\":\"11:34\",\"id\":3},{\"dot\":1,\"t\":\"11:33\",\"id\":3},{\"dot\":1,\"t\":\"11:32\",\"id\":3}],[{\"dot\":1,\"t\":\"11:29\",\"id\":4},{\"dot\":0,\"t\":\"11:28\",\"id\":4},{\"dot\":0,\"t\":\"11:27\",\"id\":4},{\"dot\":0,\"t\":\"11:26\",\"id\":4},{\"dot\":0,\"t\":\"11:25\",\"id\":4},{\"dot\":0,\"t\":\"11:24\",\"id\":4},{\"dot\":0,\"t\":\"11:23\",\"id\":4},{\"dot\":0,\"t\":\"11:22\",\"id\":4}],[{\"dot\":0,\"t\":\"11:19\",\"id\":5},{\"dot\":0,\"t\":\"11:18\",\"id\":5},{\"dot\":0,\"t\":\"11:17\",\"id\":5},{\"dot\":0,\"t\":\"11:16\",\"id\":5},{\"dot\":0,\"t\":\"11:15\",\"id\":5},{\"dot\":0,\"t\":\"11:14\",\"id\":5},{\"dot\":0,\"t\":\"11:13\",\"id\":5},{\"dot\":0,\"t\":\"11:12\",\"id\":5}]]","payloadType":"json","x":190,"y":180,"wires":[["f71b56f55b67a833"]]},{"id":"f71b56f55b67a833","type":"change","z":"d1395164b4eec73e","name":"select last time","rules":[{"t":"set","p":"last_time","pt":"msg","to":"$$.payload[-1][-1].t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":180,"wires":[["da1c6f731811a8d8"]]},{"id":"da1c6f731811a8d8","type":"template","z":"d1395164b4eec73e","name":"TABLE SET","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table>\n<th>{{{machine}}}:-</th>\n{{#payload}}\n<td class = 'rotate'><div>{{{0.t}}}</div></td>\n{{#.}}\n <td class='m_{{{dot}}}'>▄</td>\n{{/.}}\n{{/payload}}\n<td class = 'rotate'><div>{{{last_time}}}</div></td>\n</tr>\n<tr height = \"2px\" bgcolor=\"orange\"> <td colspan=\"100%\"></td></tr>\n</table>","output":"str","x":590,"y":180,"wires":[["92a656c0db91c226"]]},{"id":"92a656c0db91c226","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"27","height":"4","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":80,"wires":[[]]},{"id":"f3d623295fd5b403","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"CSS","order":1,"width":"1","height":"1","format":"<style>\n\n.large-font {\nfont-size:2.7em;\ncolor: white;\nfont-family: \"Trebuchet MS\";\ntext-align: center;}\n\n\n.medium-font {\nfont-size: 1.3em; text-align: center;/* Increase font size by 1.5 times */\n}\n\n.another-large {\n font-size: 25px; vertical-align:\"middle\" ; text-align: center; /* Set a specific pixel size */\n}\n\n.smallfont {\nfont-size:12px;\ncolor: cyan;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.red {\nfont-size:20px;\ncolor: red;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.orange {\nfont-size:20px;\ncolor: orange;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.green {\nfont-size:20px;\ncolor: #55ff55;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.shifts {\nfont-size:21px;\ncolor: white;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hours {\nfont-size:20px;\ncolor: #FBFF00;\nbackground:#505050;\nheight:28px;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hour0 {font-size:22px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:20px;color: #FBFF00;background:#808080;height:28px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:20px;color: #FBFF00;background:#707070;height:28px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:20px;color: #FBFF00;background:#606060;height:28px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:20px;color: #FBFF00;background:#505050;height:28px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:20px;color: #FBFF00;background:#404040;height:28px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:20px;color: #FBFF00;background:#303030;height:28px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:20px;color: #FBFF00;background:#202020;height:28px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {\nfont-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n\n.smallfont2 {\ncolor:grey ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n.another-large1 {\nfont-size: 20px; color: blue ;text-align: right;/* Set a specific pixel size */\n}\n\n.container {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\n\n}\n\n.time {\nfont-size:8px;\ncolor: yellow;\nfont-family: \"courier narrow\";\ntext-align: center;\n}\n.rotate {\n height:40px;\n font-size:12px;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n width: 1.0em;\n}\n.rotate div {\n -moz-transform: rotate(-90.0deg); /* FF3.5+ */\n -o-transform: rotate(-90.0deg); /* Opera 10.5 */\n -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */\n -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)\"; /* IE8 */\n margin-left: -10em;\n margin-right: -10em;\n} \n\n.m_1 {\nfont-size:25px;\ncolor: green;\nfont-family: \"courier\";\ntext-align: center;\n}\n.m_0 {\nfont-size:25px;\ncolor: red;\nfont-family: \"courier\";\ntext-align: center;\n}\n\ntable {\n border: 0;\n cellpadding: 0;\n width:auto;\n white-space:nowrap\n}\ntr {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \nth {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \ntd {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \n\n\n\n</style>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":770,"y":30,"wires":[[]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
[edit]
Removed the div which was causing issues with spacing, slight change on css template
[{"id":"92a656c0db91c226","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"27","height":"4","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":80,"wires":[[]]},{"id":"f3d623295fd5b403","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"CSS","order":1,"width":"1","height":"1","format":"<style>\n\n.large-font {\nfont-size:2.7em;\ncolor: white;\nfont-family: \"Trebuchet MS\";\ntext-align: center;}\n\n\n.medium-font {\nfont-size: 1.3em; text-align: center;/* Increase font size by 1.5 times */\n}\n\n.another-large {\n font-size: 25px; vertical-align:\"middle\" ; text-align: center; /* Set a specific pixel size */\n}\n\n.smallfont {\nfont-size:12px;\ncolor: cyan;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.red {\nfont-size:20px;\ncolor: red;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.orange {\nfont-size:20px;\ncolor: orange;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.green {\nfont-size:20px;\ncolor: #55ff55;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.shifts {\nfont-size:21px;\ncolor: white;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hours {\nfont-size:20px;\ncolor: #FBFF00;\nbackground:#505050;\nheight:28px;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hour0 {font-size:22px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:20px;color: #FBFF00;background:#808080;height:28px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:20px;color: #FBFF00;background:#707070;height:28px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:20px;color: #FBFF00;background:#606060;height:28px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:20px;color: #FBFF00;background:#505050;height:28px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:20px;color: #FBFF00;background:#404040;height:28px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:20px;color: #FBFF00;background:#303030;height:28px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:20px;color: #FBFF00;background:#202020;height:28px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {\nfont-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n\n.smallfont2 {\ncolor:grey ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n.another-large1 {\nfont-size: 20px; color: blue ;text-align: right;/* Set a specific pixel size */\n}\n\n.container {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\n\n}\n\n.time {\nfont-size:8px;\ncolor: yellow;\nfont-family: \"courier narrow\";\ntext-align: center;\n}\n\n.m_1 {\nfont-size:25px;\ncolor: green;\nfont-family: \"courier\";\ntext-align: center;\n}\n.m_0 {\nfont-size:25px;\ncolor: red;\nfont-family: \"courier\";\ntext-align: center;\n}\n\ntable {\n border: 0;\n cellpadding: 0;\n width: 0.1%;\n white-space: nowrap:\n}\ntr {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \nth {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \ntd {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \n\n .rotate {\n font-size:10px;\n width:0.1%;\n white-space:nowrap;\n -webkit-transform: rotate(270deg);\n -moz-transform: rotate(270deg);\n -o-transform: rotate(270deg);\n writing-mode: lr-tb;\n }\n\n\n</style>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":390,"y":80,"wires":[[]]},{"id":"fe7c401dce8737f3","type":"inject","z":"d1395164b4eec73e","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot\":1,\"t\":\"11:59\",\"id\":1},{\"dot\":1,\"t\":\"11:58\",\"id\":1},{\"dot\":1,\"t\":\"11:57\",\"id\":1},{\"dot\":1,\"t\":\"11:56\",\"id\":1},{\"dot\":1,\"t\":\"11:55\",\"id\":1},{\"dot\":1,\"t\":\"11:54\",\"id\":1},{\"dot\":1,\"t\":\"11:53\",\"id\":1},{\"dot\":1,\"t\":\"11:52\",\"id\":1}],[{\"dot\":1,\"t\":\"11:49\",\"id\":2},{\"dot\":1,\"t\":\"11:48\",\"id\":2},{\"dot\":1,\"t\":\"11:47\",\"id\":2},{\"dot\":1,\"t\":\"11:46\",\"id\":2},{\"dot\":1,\"t\":\"11:45\",\"id\":2},{\"dot\":1,\"t\":\"11:44\",\"id\":2},{\"dot\":1,\"t\":\"11:43\",\"id\":2},{\"dot\":1,\"t\":\"11:42\",\"id\":2}],[{\"dot\":1,\"t\":\"11:39\",\"id\":3},{\"dot\":1,\"t\":\"11:38\",\"id\":3},{\"dot\":1,\"t\":\"11:37\",\"id\":3},{\"dot\":1,\"t\":\"11:36\",\"id\":3},{\"dot\":1,\"t\":\"11:35\",\"id\":3},{\"dot\":1,\"t\":\"11:34\",\"id\":3},{\"dot\":1,\"t\":\"11:33\",\"id\":3},{\"dot\":1,\"t\":\"11:32\",\"id\":3}],[{\"dot\":1,\"t\":\"11:29\",\"id\":4},{\"dot\":0,\"t\":\"11:28\",\"id\":4},{\"dot\":0,\"t\":\"11:27\",\"id\":4},{\"dot\":0,\"t\":\"11:26\",\"id\":4},{\"dot\":0,\"t\":\"11:25\",\"id\":4},{\"dot\":0,\"t\":\"11:24\",\"id\":4},{\"dot\":0,\"t\":\"11:23\",\"id\":4},{\"dot\":0,\"t\":\"11:22\",\"id\":4}],[{\"dot\":0,\"t\":\"11:19\",\"id\":5},{\"dot\":0,\"t\":\"11:18\",\"id\":5},{\"dot\":0,\"t\":\"11:17\",\"id\":5},{\"dot\":0,\"t\":\"11:16\",\"id\":5},{\"dot\":0,\"t\":\"11:15\",\"id\":5},{\"dot\":0,\"t\":\"11:14\",\"id\":5},{\"dot\":0,\"t\":\"11:13\",\"id\":5},{\"dot\":0,\"t\":\"11:12\",\"id\":5}]]","payloadType":"json","x":190,"y":180,"wires":[["f71b56f55b67a833"]]},{"id":"f71b56f55b67a833","type":"change","z":"d1395164b4eec73e","name":"select last time","rules":[{"t":"set","p":"last_time","pt":"msg","to":"$$.payload[-1][-1].t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":180,"wires":[["da1c6f731811a8d8"]]},{"id":"da1c6f731811a8d8","type":"template","z":"d1395164b4eec73e","name":"TABLE SET","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table>\n<th>{{{machine}}}:-</th>\n{{#payload}}\n<td class=\"rotate\">{{{0.t}}}</td>\n{{#.}}\n <td class='m_{{{dot}}}'>▄</td>\n{{/.}}\n{{/payload}}\n<td class=\"rotate\">{{{last_time}}}</td>\n</tr>\n<tr height=\"2px\" bgcolor=\"orange\"> <td colspan=\"100%\"></td></tr>\n</table>","output":"str","x":590,"y":180,"wires":[["92a656c0db91c226"]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Amazing, now the code became very concise. I will take time to understand the logic/flow. Snack for my brain for weekend!
A lot of CSS nodes got duplicated while trying out, so getting strange results in display. will sort out and post the final flow here for any one following this topic.
Thanks very much!
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
