Dynamic Data Conversion

General
1

I am unable to state my issue, so giving example

what I have

image
image249Ă—523 14 KB

[{"id":"d42c55ce149d9aa6","type":"inject","z":"0293de8750223951","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"FROM\":\"2024,10,27,06,00\",\"To\":\"2024,10,27,06,20\",\"DUR\":20,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,06,20\",\"To\":\"2024,10,27,06,21\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,06,21\",\"To\":\"2024,10,27,06,35\",\"DUR\":14,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,06,35\",\"To\":\"2024,10,27,06,45\",\"DUR\":10,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,06,45\",\"To\":\"2024,10,27,06,51\",\"DUR\":6,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,06,51\",\"To\":\"2024,10,27,07,04\",\"DUR\":53,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,07,04\",\"To\":\"2024,10,27,07,15\",\"DUR\":11,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,07,15\",\"To\":\"2024,10,27,07,34\",\"DUR\":19,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,07,34\",\"To\":\"2024,10,27,08,03\",\"DUR\":69,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,09,37\",\"To\":\"2024,10,27,09,42\",\"DUR\":5,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,09,42\",\"To\":\"2024,10,27,10,25\",\"DUR\":83,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,10,25\",\"To\":\"2024,10,27,10,46\",\"DUR\":21,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,10,46\",\"To\":\"2024,10,27,11,04\",\"DUR\":58,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,11,04\",\"To\":\"2024,10,27,11,25\",\"DUR\":21,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,11,25\",\"To\":\"2024,10,27,11,53\",\"DUR\":28,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,11,53\",\"To\":\"2024,10,27,12,07\",\"DUR\":54,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,12,07\",\"To\":\"2024,10,27,12,12\",\"DUR\":5,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,12,12\",\"To\":\"2024,10,27,12,20\",\"DUR\":8,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024,10,27,12,20\",\"To\":\"2024,10,27,12,22\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024,10,27,12,22\",\"To\":\"2024,10,27,12,58\",\"DUR\":36,\"mcn\":\"m03\",\"state\":\"ON\"}]","payloadType":"json","x":440,"y":1320,"wires":[["b98e1677c2a9927f","b52ef14ec1f098c4"]]}]

What I need

image
image596Ă—142 3.15 KB

I am able to do it manually 1 by 1 like below is the output

image
image463Ă—135 3.28 KB

but to create dynamic function to loop through the entire data, i am not able to as the input data quantity varies (in the example it is 20 records)

3

I assume you do not actually want JavaScript in the array but actual valid ISO date data strings.

Here is a function that generates an array of arrays of ["ON", "iso-time-string", "iso-time-string"]

msg.payload = msg.payload.map(e=> {
    const [fromY, fromMo, fromD, fromH, fromMi] = e.FROM.split(",")
    const [toY, toMo, toD, toH, toMi] = e.To.split(",")
    return [
        e.state,
        new Date(fromY, fromMo, fromD, fromH, fromMi, 0, 0),
        new Date(toY, toMo, toD, toH, toMi, 0, 0)
    ]
})
return msg;

Proof

image
image775Ă—497 23.7 KB

Sample Data (3 rows)

[
  [
    "OFF",
    "2024-11-27T06:00:00.000Z",
    "2024-11-27T06:20:00.000Z"
  ],
  [
    "ON",
    "2024-11-27T06:20:00.000Z",
    "2024-11-27T06:21:00.000Z"
  ],
  [
    "OFF",
    "2024-11-27T06:21:00.000Z",
    "2024-11-27T06:35:00.000Z"
  ]
]

PS, if you have any control over the incoming date format, I would change that to send ISO time strings instead of custom CSV!

4

I am formating mysql query to give me readable datetime as i am also simultaneously displaying a table, but i can get the time in rawformat as well.

the part i want to replace is in a bigger template node, where the number of rows are dynamic.
currently i am able to get it with flow.context (somehow msg.payload is not working with mustache template, but flow.context works) thats another subject of discussion though.

image
image885Ă—566 29.2 KB

5

Bit strange, but ok.

You can still use the function I provided (plus the extra parts you want) then stringify it (pass it through a JSON node) and add the whole array to your template via mustache

dataTable.addRows( {{{ theData }}} )

where theData is the stringified array dynamically generated and passed in or stored in context

1 Like
6

thank you, I was able to get the theData into the template node, but the dateobject is not rendering in the chart, i think it needs to be in this format only.
new Date(year,month,date,hour,minute) how do i change that ?

7

There is a separate thread where I've described how to avoid this output. :smile:

1 Like
8

Only this works to render chart successfully. Note the single quotes for first two elements m04 and off /on
image

dataTable.addRows([
        ['m04','off',new Date(2024,10,27,06,00),new Date(2024,10,27,06,03)],
        ['m04','on',new Date(2024,10,27,06,03),new Date(2024,10,27,06,07)],
        ['m04','off',new Date(2024,10,27,06,07),new Date(2024,10,27,06,09)],
        ]);

I am getting either this single quotes for all elements, which does not work

dataTable.addRows([
        ['m04','off','new Date(2024,10,27,06,00)','new Date(2024,10,27,06,03)'],
        ['m04','on','new Date(2024,10,27,06,03)','new Date(2024,10,27,06,07)'],
        ['m04','off','new Date(2024,10,27,06,07)','new Date(2024,10,27,06,09)]',
        ]);

or this no quotes at all which doesn't work.

dataTable.addRows([
        [m04,off,new Date(2024,10,27,06,00),new Date(2024,10,27,06,03)],
        [m04,on,new Date(2024,10,27,06,03),new Date(2024,10,27,06,07)],
        [m04,off,new Date(2024,10,27,06,07),new Date(2024,10,27,06,09)],
        ]);

this is the function code i am using

var data = msg.payload;
msg.payload = msg.payload.map(e => {
   return [
      e.mcn,
      e.state,
      e.FROM,
      e.To
   ]
})
return msg;

I am getting mysql query to output the data in the format new Date(Y,m,D,H,i)

MySql Query

Summary 
TRUNCATE tmp; 
Insert into tmp Select sort, if({{flow.selmc}}>0,'ON','OFF') AS state, datetime, '{{flow.selmc}}',''  FROM rawdata where rdate='{{flow.seldate}}' and shift like '{{flow.selshift}}' order by sort; 
Insert into tmp select (id-1), if (state='OFF','ON','OFF'), date_sub(datetime,interval 1 minute) ,mcn,'' from tmp limit 1;
SELECT concat("new Date(",date_format(date_sub((LAG(t2.datetime) over (order by t2.datetime)), interval 1 minute),'%Y,%m,%d,%H,%i'),")") as 'FROM' , 
concat("new Date(",date_format(t1.datetime,'%Y,%m,%d,%H,%i'),")") as 'To', round(((t1.datetime) - (LAG(t2.datetime) over (order by t2.datetime))) /100,0)+1 AS `DUR`, 
t1.mcn, t1.state FROM tmp t1 JOIN tmp t2 ON t1.id= t2.id- 1 WHERE t1.state != t2.state limit 1,480;
9

You are getting yourself confused between different data types. You need output from your SQL query to have date/times as something that JavaScript can recognise.

Then, as you are using this library: Jadwal  |  Charts  |  Google for Developers

You've seen that their example for adding rows looks like this:

    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

So it clearly wants the date as a JavaScript Date object which is what new Date creates. You cannot output the new Date part from your SQL query since you have told it to output STRINGS for the dates. SQL cannot directly output a JavaScript function which is what you need.

Since you are using UIBUILDER, there is a really simple answer here. Just output the data from SQL using a recognisable date/time format - typically in ISO format that looks like 2024-10-28T13:06:00.000Z or, if you can't work out how to do that, output as 2024-10-28 13:06:00 which will be close enought for this.

Then you convert the date string to a date object. This is best done in the front-end code since you are already having to use that.

uibuilder.onChange('msg', (msg) => {
  msg.payload.forEach( (row) => {
    dataTable.addRows( [
        [row.mcn, row.state, new Date(row.From), new Date(row.To)]
    ] );
  } );

Note: I may not have got your data properties named correctly, check the data coming out of your SQL query to get the exact format.

Basically, rule number 1 of programming - don't do what the computer can do for you.

This code runs in the browser. It listens for a message from Node-RED (via the uibuilder client helper library). It assumes that your SQL output is in msg.payload. It walks through each SQL output row (the forEach) and adds a new dataTable row for each SQL row. In that process, it creates JavaScript date objects from the text version of the date.

10

You will have to bear with me....

this is the output i get from MySQL Query, now how do i write the uibuilder.onChange function ?

[{"mcn":"m02","state":"OFF","FROM":"2024-10-27T00:30:00.000Z","To":"2024-10-27T05:26:00.000Z"},{"mcn":"m02","state":"ON","FROM":"2024-10-27T05:26:00.000Z","To":"2024-10-27T05:27:00.000Z"},{"mcn":"m02","state":"OFF","FROM":"2024-10-27T05:27:00.000Z","To":"2024-10-27T05:42:00.000Z"},{"mcn":"m02","state":"ON","FROM":"2024-10-27T05:42:00.000Z","To":"2024-10-27T05:43:00.000Z"},{"mcn":"m02","state":"OFF","FROM":"2024-10-27T05:43:00.000Z","To":"2024-10-27T05:53:00.000Z"},{"mcn":"m02","state":"ON","FROM":"2024-10-27T05:53:00.000Z","To":"2024-10-27T05:54:00.000Z"}]

Sample data in an inject node...

[{"id":"6ab576041f967758","type":"inject","z":"0293de8750223951","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"mcn\":\"m02\",\"state\":\"OFF\",\"FROM\":\"2024-10-27T00:30:00.000Z\",\"To\":\"2024-10-27T05:26:00.000Z\"},{\"mcn\":\"m02\",\"state\":\"ON\",\"FROM\":\"2024-10-27T05:26:00.000Z\",\"To\":\"2024-10-27T05:27:00.000Z\"},{\"mcn\":\"m02\",\"state\":\"OFF\",\"FROM\":\"2024-10-27T05:27:00.000Z\",\"To\":\"2024-10-27T05:42:00.000Z\"},{\"mcn\":\"m02\",\"state\":\"ON\",\"FROM\":\"2024-10-27T05:42:00.000Z\",\"To\":\"2024-10-27T05:43:00.000Z\"},{\"mcn\":\"m02\",\"state\":\"OFF\",\"FROM\":\"2024-10-27T05:43:00.000Z\",\"To\":\"2024-10-27T05:53:00.000Z\"},{\"mcn\":\"m02\",\"state\":\"ON\",\"FROM\":\"2024-10-27T05:53:00.000Z\",\"To\":\"2024-10-27T05:54:00.000Z\"}]","payloadType":"json","x":220,"y":1740,"wires":[["9d6eb06bb46d9fa7"]]},{"id":"9d6eb06bb46d9fa7","type":"debug","z":"0293de8750223951","name":"debug 10","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":350,"y":1740,"wires":[]}]
11

OK, here's somethng to get you going.

This flow takes your input and outputs something that is easily used. Then you should be able to use my previous front-end code but with 1 change, row.From becomes row.FROM.

image

12

what is in the change node ?

13

Oops! Sorry, I didn't post the actual flow! :smile:

[{"id":"a6f065865938f608","type":"inject","z":"1ceef65e4021de52","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"id\":\"6ab576041f967758\",\"type\":\"inject\",\"z\":\"0293de8750223951\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"[{\\\"mcn\\\":\\\"m02\\\",\\\"state\\\":\\\"OFF\\\",\\\"FROM\\\":\\\"2024-10-27T00:30:00.000Z\\\",\\\"To\\\":\\\"2024-10-27T05:26:00.000Z\\\"},{\\\"mcn\\\":\\\"m02\\\",\\\"state\\\":\\\"ON\\\",\\\"FROM\\\":\\\"2024-10-27T05:26:00.000Z\\\",\\\"To\\\":\\\"2024-10-27T05:27:00.000Z\\\"},{\\\"mcn\\\":\\\"m02\\\",\\\"state\\\":\\\"OFF\\\",\\\"FROM\\\":\\\"2024-10-27T05:27:00.000Z\\\",\\\"To\\\":\\\"2024-10-27T05:42:00.000Z\\\"},{\\\"mcn\\\":\\\"m02\\\",\\\"state\\\":\\\"ON\\\",\\\"FROM\\\":\\\"2024-10-27T05:42:00.000Z\\\",\\\"To\\\":\\\"2024-10-27T05:43:00.000Z\\\"},{\\\"mcn\\\":\\\"m02\\\",\\\"state\\\":\\\"OFF\\\",\\\"FROM\\\":\\\"2024-10-27T05:43:00.000Z\\\",\\\"To\\\":\\\"2024-10-27T05:53:00.000Z\\\"},{\\\"mcn\\\":\\\"m02\\\",\\\"state\\\":\\\"ON\\\",\\\"FROM\\\":\\\"2024-10-27T05:53:00.000Z\\\",\\\"To\\\":\\\"2024-10-27T05:54:00.000Z\\\"}]\",\"payloadType\":\"json\",\"x\":220,\"y\":1740,\"wires\":[[\"9d6eb06bb46d9fa7\"]]},{\"id\":\"9d6eb06bb46d9fa7\",\"type\":\"debug\",\"z\":\"0293de8750223951\",\"name\":\"debug 10\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"false\",\"statusVal\":\"\",\"statusType\":\"auto\",\"x\":350,\"y\":1740,\"wires\":[]}]","payloadType":"json","x":290,"y":960,"wires":[["0e0b44fbf90757d0"]]},{"id":"f7449e09266a99ad","type":"json","z":"1ceef65e4021de52","name":"","property":"payload","action":"","pretty":false,"x":630,"y":960,"wires":[["0e16b227d046fb12"]]},{"id":"0e0b44fbf90757d0","type":"change","z":"1ceef65e4021de52","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0].payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":960,"wires":[["f7449e09266a99ad"]]},{"id":"0e16b227d046fb12","type":"debug","z":"1ceef65e4021de52","name":"debug 2724","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":810,"y":960,"wires":[]}]

image
image504Ă—347 8.2 KB

14

I must be doing something basically wrong, as I cant get it to work. I am on the verge of giving up.

Attaching the entire flow (where I am rewriting the entire index.js file :flushed:) but is working
I want to understand , why cant i get the forEach thing working?

[{"id":"3a20af9f0b232322","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"86196da223b60add","type":"group","z":"3a20af9f0b232322","name":"Load HTML/CSS/JS Files","style":{"stroke":"#9363b7","fill":"#dbcbe7","label":true,"color":"#6f2fa0"},"nodes":["64a682c69cc73e8a","698ebc8703e77635","714ce6e07b61f280","b328132626589c0a","b14b1b6615920eef","c066b1e73f0e65b1","c5c758fb0563ccc7","0fd0374b86a58a3c","2487c25c2642383b","3b5b64bb713b9a9e","d0dd33e35c8f1ad3","c42a7aefb5791676","ef9eb47925e03786","234aeb9ed9576c56","b5e8bade75688a70"],"x":44,"y":59,"w":812,"h":202},{"id":"7ab5a22cd67392c2","type":"group","z":"3a20af9f0b232322","name":"UI-BUILDER","style":{"stroke":"#ffcf3f","fill":"#ffefbf","label":true,"color":"#0070c0"},"nodes":["a4bd895056f646fe","1b114fabfb52db74","df939924253d4619","499308298c239550","5cf856ba7e2e6862"],"x":44,"y":289,"w":502,"h":152},{"id":"7bdce0666512b731","type":"group","z":"3a20af9f0b232322","name":"Update Time Every Second","style":{"stroke":"#3f5787","fill":"#7f8faf","label":true,"color":"#ffff00"},"nodes":["28422642ce0a174a","178548589dd8dab9","67abc3c4e7365874","c4a9f7bc21b9d658"],"x":44,"y":489,"w":602,"h":82},{"id":"3592ecb00ef22768","type":"group","z":"3a20af9f0b232322","name":"Simulate MySQL Query","style":{"stroke":"#0070c0","fill":"#ffff7f","label":true,"color":"#001f60"},"nodes":["2a2405d20ef35a10","88e358a2900c77f4","241702a04b393b62","cf7297f001e3758b","14d2df29906751db","0a81529866a95024","f32a875e0e59957b"],"x":44,"y":799,"w":712,"h":162},{"id":"fa0f33030a7da271","type":"group","z":"3a20af9f0b232322","name":"Show Selected Date and Selected Machine","style":{"stroke":"#0070c0","fill":"#c8e7a7","label":true,"color":"#001f60"},"nodes":["7eda60ae916b1cce","719cdf76ef8c4e8d","6533dd62217dd1b7","3d25271024417c93","94eddf62ccd5c333","70156f9757a24f22","93694f8b65005641","f2b9129de45e58b8"],"x":44,"y":599,"w":632,"h":182},{"id":"2fe1b2f178b93edc","type":"group","z":"3a20af9f0b232322","name":"Seeking replacement of this....","style":{"stroke":"#ff0000","fill":"#ff7f7f","label":true,"color":"#0070c0"},"nodes":["84b89ef35a890901","f5470e8ee2a5b3a2","927ce942ae1bbf13","37e4fd0368333b21","2b5b56e234fae22d"],"x":794,"y":799,"w":582,"h":142},{"id":"ef9eb47925e03786","type":"junction","z":"3a20af9f0b232322","g":"86196da223b60add","x":250,"y":160,"wires":[["c066b1e73f0e65b1","64a682c69cc73e8a","b328132626589c0a","3b5b64bb713b9a9e"]]},{"id":"64a682c69cc73e8a","type":"change","z":"3a20af9f0b232322","g":"86196da223b60add","name":"index.css","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.css","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":140,"wires":[["698ebc8703e77635"]]},{"id":"698ebc8703e77635","type":"template","z":"3a20af9f0b232322","g":"86196da223b60add","name":"CSS","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":":ROOT, :ROOT.LIGHT{COLOR-SCHEME:DARK;}\n  .overflow-hidden {overflow: hidden;}\n  .livedisplay {font-size: 2.5em;text-align: center;}\n\n.zero {border-radius: 10px;font-size: 2.8em;text-align: center;background-color:#2D2D2D;}\n\n.large-font-r {border-radius: 10px;font-size:2.8em;background:red;color: white;font-family: \"Trebuchet MS\";text-align: center;}\n.large-font-b {border-radius: 10px;font-size:2.8em;background:blue;color: white;font-family: \"Trebuchet MS\";text-align: center;}\n.large-font-g {border-radius: 10px;font-size:2.8em;background:green;color: white;font-family: \"Trebuchet MS\";text-align: center;}\n\n.another-large {color:white; font-size: 2em; vertical-align:\"middle\" ; text-align: center;}\n.medium-font {font-size: 1.3em; text-align: left;}\n.smallfont {font-family: \"arial narrow\";font-size:10px;color: cyan;text-align: center;font-weight:100;}\n.raw-input {font-size:1.3em;color: white;text-align: center;font-weight:200;}\n\n.mf {font-size:17px;color:yellow;font-family: \"arial narrow\";text-align: right;}\n.lf {font-size:35px;color: cyan;font-family: \"trebuchet ms\";text-align: center;}\n\n.oee {background:#101010; font-size: 0.9em; text-align: center;}\n.oee1 {background:#202020 ;color:yellow; font-size: 0.9em; text-align: center;}\n.oeehead {background:black ;color:white; font-size: 1.3em; text-align: center;font-weight: 200;}\n.oee2 {background:#505050 ;color:yellow; font-size: 1.3em; text-align: center; font-weight: 600;}\n.oeedn {background:#121212 ;color:pink      ; font-size: 0.9em; text-align: center;}\n.oeeup {background:#121212 ;color:lightgreen; font-size: 0.9em; text-align: center;}\n.oee_grey {background:#525252 ;color:#020202; font-size: 0.9em; text-align: center;}\n.oee_grey {background:#525252 ;color:#020202; font-size: 0.9em; text-align: center;}\n.oee_green {background:green ;color:#020202; font-size: 1.3em; text-align: center;}\n.oee_pink {background:pink ;color:#020202; font-size: 1.3em; text-align: center;}\n\n.ltm {font-size: 0.9em; text-align: center;}\n\n.red {font-size:20px;color: pink;font-family: \"courier new\";text-align: center;}\n.red1 {font-size:20px;color: pink;font-family: \"courier new\";text-align: left;}\n.sum {font-size:20px;color: yellow;background:#202020;font-family: \"courier new\";text-align: center;}\n.orange {font-size:20px;color: orange;font-family: \"courier new\";text-align: center;}\n.green {font-size:20px;color: #55ff55;font-family: \"courier new\";text-align: center;}\n.green1 {font-size:20px;color: #55ff55;font-family: \"courier new\";text-align: left;}\n\n.shifts {font-size:20px;color: white;font-family: \"arial narrow\";text-align: right;}\n.mcselect {font-size:17px;color: #FBFF00;background:#505050;height:24px;font-family: \"courier\";text-align: center;}\n\n.hour0 {font-size:20px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:18px;color: #FBFF00;background:#808080;height:25px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:18px;color: #FBFF00;background:#707070;height:25px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:18px;color: #FBFF00;background:#606060;height:25px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:18px;color: #FBFF00;background:#505050;height:25px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:18px;color: #FBFF00;background:#404040;height:25px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:18px;color: #FBFF00;background:#303030;height:25px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:18px;color: #FBFF00;background:#202020;height:25px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {font-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center;}\n.f12 {font-size: 1em;background:red; color:yellow ; text-align: center;}\n\n.smallfont2 {color:grey ; font-family: \"verdana\" ; text-align: center;}\n.another-large1 {font-size: 20px; color: blue ;text-align: right;}\n\n.container {display: flex;flex-direction: column;align-items: center;}\n\n.time {font-size:0.5em;color: yellow;font-family: \"courier narrow\";text-align: center;}\n.rotate {  font-size:12px;  text-align: center;  background:#404040;  white-space: nowrap;  vertical-align: middle;  width: 1.0em;}\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.m_on {font-size:17px;color: green;font-family: \"courier\";text-align: center;}\n.m_off {font-size:17px;color: brown;font-family: \"courier\";text-align: center;}\n.m_1 {font-size:15px;color: green;font-family: \"courier\";text-align: center;}\n.m_0 {font-size:15px;color: red;font-family: \"courier\";text-align: center;}\n\n    .cap {font-size:20px;color: yellow;font-family: \"courier new\";text-align: left;}\n    .zero1 {font-size:1em;color: #606060; font-family: \"courier new\";text-align: center;}\n    .zero2 {font-size:1em;color: white;   font-family: \"courier new\";text-align: center;}\n    .zero3 {font-size:1em;color: black;   font-family: \"courier new\";text-align: center;}\n    .zero4 {font-size:1em;color: white;   font-family: \"courier new\";text-align: center;}\n    .zero5 {font-size:1em;color: yellow;  font-family: \"courier new\";text-align: center;}\n\n.my-button {border: 2;color: white;align:center;padding: 1px;border-radius: 50px;transition: 0.4s ease;}\n.my-button:hover {background: black;cursor: pointer;}\n\n  .btn-group .header {background-color: #198754;background-image: radial-gradient(circle, #198754 5%, #199754 15%, #198754 60%);border: none;border-radius: 30px;color: white;font-weight:700;font-family: AvenirNextCondensed-Bold;padding: 8px 20px;text-align: center;\n   text-shadow: 2px 2px 4px #000000;  display: inline-block;height:40px;font-size: 1.2em;cursor: default;float: left;border: 3px solid yellow;}\n\n  .btn-group .button0 {background-color: grey;box-shadow:5px 5px 5px #0078d0;border: none;border-radius: 50px;color: white;padding: 8px 20px;text-align: center;\n  display: inline-block;height:40px;font-size: 1.em;cursor: default;float: left;border: 3px solid black;}\n\n  .btn-group .time_display {font-size:0.9em;background-color: green;box-sizing:border-box;border-radius: 50px;color: white;padding: 2px 20px;text-align: center;\n  display: flexbox;height:40px;cursor: default;float: right;border: 3px solid black;}\n\n  .btn-group .button1 {background-color: #0078d0;box-shadow: 5px 5px 5px #0cc005;border-radius: 50px;color: white;padding: 8px 20px;text-align: center;\n   display: inline-block;height:40px;font-size: 1em;cursor: pointer;float: left;border: 3px solid black;}\n\n  .btn-group .button2 {background-color: #0078d0;border: none;border-radius: 50px;color: white;padding: 8px 20px;text-align: center;\n  display: inline-block;height:60px;font-size: 1.6em;cursor: pointer;float: left;border: 3px solid black;}\n\n  .btn-group .button3 {background-color: #0078d0;border: none;border-radius: 50px;color: white;padding: 2px 20px;text-align: center;\n  display: inline-block;height:60px;font-size: 0.8em;cursor: pointer;float: left;border: 1px solid black;  }\n\n  .btn-group .button4 {background-color: #0078d0;border: none;border-radius: 50px;color: white; padding: 2px 5px;text-align: center;\n      display: inline-block;height:60px;font-size: 0.7em;font-weight: 100;cursor: pointer;float: left;border: 1px solid black;  }\n\n  .btn-group .button0:hover {background-color: grey;}\n  .btn-group .button1:hover {background-color: red;transform: translateY(-2px);box-shadow: 0 5px #0078d0;}\n  .btn-group .button2:hover {background-color: red;transform: translateY(-2px);box-shadow: 0 5px #0078d0;}\n  .btn-group .button3:hover {background-color: red;transform: translateY(-2px);box-shadow: 0 5px #0078d0;}\n  .btn-group .button4:hover {background-color: green;transform: translateY(-2px);box-shadow: 0 5px #0078d0;}\n\n  .bigtext {font-size: 1.5em;}\n  .button:active {background-color: magenta;box-shadow: 0 5px #666;transform: translateY(4px);}\n  .button1:active {background-color: magenta;box-shadow: 0 5px #666;transform: translateY(4px);}\n  .button2:active {background-color: magenta;box-shadow: 0 5px #666;transform: translateY(4px);}\n  .button3:active {background-color: magenta;box-shadow: 0 5px #666;transform: translateY(4px);}\n  .button4:active {background-color: magenta;box-shadow: 0 5px #666;transform: translateY(4px);}\n\n  .marquee {height: 30px;overflow: hidden;position: relative;background: black;color: lightgreen;font-weight: 200;border: 1px solid pink;}\n  .marquee p {position: absolute;width: 100%;height: 100%;margin: 0;line-height: 30px;text-align: center;moz-transform: translateX(100%);\n    -webkit-transform: translateX(100%);transform: translateX(100%);moz-animation: scroll-left 30s linear infinite;webkit-animation: scroll-left 30s linear infinite;\n    animation: scroll-left 30s linear infinite;}\n    \n    @-moz-keyframes scroll-left {0% {moz-transform: translateX(100%);}100% {-moz-transform: translateX(-100%);}    }\n    @-webkit-keyframes scroll-left {0% {-webkit-transform: translateX(100%);}100% {-webkit-transform: translateX(-100%);}    }\n    @keyframes scroll-left {0% {-moz-transform: translateX(100%);-webkit-transform: translateX(100%); transform: translateX(100%);}100% {\n    -moz-transform: translateX(-100%);-webkit-transform: translateX(-100%); transform: translateX(-100%);}}\n\n","output":"str","x":560,"y":140,"wires":[["714ce6e07b61f280"]]},{"id":"714ce6e07b61f280","type":"uib-save","z":"3a20af9f0b232322","g":"86196da223b60add","url":"StateChart","uibId":"a4bd895056f646fe","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":760,"y":140,"wires":[]},{"id":"b328132626589c0a","type":"change","z":"3a20af9f0b232322","g":"86196da223b60add","name":"index.js","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.js","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":180,"wires":[["b5e8bade75688a70"]]},{"id":"b14b1b6615920eef","type":"uib-save","z":"3a20af9f0b232322","g":"86196da223b60add","url":"StateChart","uibId":"a4bd895056f646fe","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":760,"y":180,"wires":[]},{"id":"c066b1e73f0e65b1","type":"change","z":"3a20af9f0b232322","g":"86196da223b60add","name":"index.html","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.html","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":100,"wires":[["0fd0374b86a58a3c"]]},{"id":"c5c758fb0563ccc7","type":"uib-save","z":"3a20af9f0b232322","g":"86196da223b60add","url":"StateChart","uibId":"a4bd895056f646fe","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":760,"y":100,"wires":[]},{"id":"0fd0374b86a58a3c","type":"template","z":"3a20af9f0b232322","g":"86196da223b60add","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!doctype html>\n<html lang=\"en\">\n\n<head>\n\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link rel=\"icon\" href=\"../uibuilder/images/node-blue.ico\">\n\n    <!-- Your own CSS (defaults to loading uibuilders css)-->\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->\n    <script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>\n    <!-- <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script> -->\n    <script defer src=\"../uibuilder/uibuilder.iife.min.js\"></script>\n    <script defer src=\"./index.js\">\n        /* OPTIONAL: Put your custom code in that */\n    </script>\n    <!-- #endregion -->\n\n</head>\n\n<body class=\"uib\">\n\n    <h4 class=\"with-subtitle\">\n    </h4>\n\n\n    <div class=\"btn-group\">\n \n \n    <button id=\"b01\" class=\"header\" onclick=\"\">MyCompany Name</button>\n    <button id=\"m01\" class=\"button0\" onclick=\"\">M-01</button>\n    <button id=\"m02\" class=\"button0\" onclick=\"\">M-02</button>\n    <button id=\"m03\" class=\"button1\" onclick=\"uibuilder.eventSend(event)\">M-03</button>\n    <button id=\"m04\" class=\"button1\" onclick=\"uibuilder.eventSend(event)\">M-04</button>\n    <button id=\"m05\" class=\"button0\" onclick=\"\">M-05</button>\n    <button id=\"m06\" class=\"button0\" onclick=\"\">M-06</button>\n    <button id=\"m07\" class=\"button0\" onclick=\"\">M-07</button>\n    <button id=\"m08\" class=\"button1\" onclick=\"uibuilder.eventSend(event)\">M-08</button>\n    <button id=\"m09\" class=\"button0\" onclick=\"\">M-09</button>\n    <button id=\"m10\" class=\"button0\" onclick=\"\">M-10</button>\n    <button id=\"m11\" class=\"button0\" onclick=\"\">M-11</button>\n    <button id=\"m12\" class=\"button0\" onclick=\"\">M-12</button>\n    <button id=\"m13\" class=\"button0\" onclick=\"\">M-13</button>\n    <button id=\"m14\" class=\"button0\" onclick=\"\">M-14</button>\n    <button id=\"m15\" class=\"button0\" onclick=\"\">M-15</button>\n    <button id=\"m16\" class=\"button0\" onclick=\"\">M-16</button>\n    <button id=\"b10\" class=\"time_display\" >Time</button>\n\n</div>\n<div uib-topic=\"btnreport\"></div>\n<br>\n<br>\n<br>\n<div id=\"sform1\">\n    <form>\n        <div title=\"Required. Type: Date\" class=\"required\">\n            <label for=\"r3-date-req\">Select Date :</label>\n            <input type=\"Date\" label=\"Select Date :\" id=\"r3-date-req\" value=\"{{curdate}}\" required=\"true\" onchange=\"this.dataset.newValue = this.value\"\n            onfocus=\"this.dataset.oldValue = this.value\" name=\"r3-date-req\" title=\"Required. Type: Date\" >\n\n            <button type=\"button\" title=\"Send the form data back to Node-RED\" onclick=\"uibuilder.eventSend(event)\" id=\"btn-send\">Send</button>\n            <button type=\"button\" title=\"Reset the form\" onclick=\"uibuilder.eventSend(event)\" id=\"btn-reset\">Reset</button>\n    </form> \n</div>\n<br>\n<br>\n<br>\n<div class = \"red1\" id=\"SelDate\">Select a Date</div>\n<div class = \"green1\" id=\"SelMc\">Select a Machine (Greyed out Buttons are not available)</div>\n<br>\n<br>\n<br>\n<div id=\"timeline\" style=\"height: 480px;\"></div>\n\n<div id=\"more\"></div>\n\n</html> ","output":"str","x":560,"y":100,"wires":[["c5c758fb0563ccc7"]]},{"id":"2487c25c2642383b","type":"inject","z":"3a20af9f0b232322","g":"86196da223b60add","name":"Load","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":160,"wires":[["ef9eb47925e03786"]]},{"id":"3b5b64bb713b9a9e","type":"delay","z":"3a20af9f0b232322","g":"86196da223b60add","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":390,"y":220,"wires":[["d0dd33e35c8f1ad3"]]},{"id":"d0dd33e35c8f1ad3","type":"change","z":"3a20af9f0b232322","g":"86196da223b60add","name":"Reload","rules":[{"t":"set","p":"_ui","pt":"msg","to":"{\"method\":\"reload\"}","tot":"json"},{"t":"set","p":"topic","pt":"msg","to":"reload","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":220,"wires":[["c42a7aefb5791676"]]},{"id":"c42a7aefb5791676","type":"link out","z":"3a20af9f0b232322","g":"86196da223b60add","name":"link out 61","mode":"link","links":["5cf856ba7e2e6862"],"x":685,"y":220,"wires":[]},{"id":"234aeb9ed9576c56","type":"link in","z":"3a20af9f0b232322","g":"86196da223b60add","name":"link in 15","links":["2b5b56e234fae22d"],"x":235,"y":220,"wires":[["3b5b64bb713b9a9e"]]},{"id":"b5e8bade75688a70","type":"template","z":"3a20af9f0b232322","g":"86196da223b60add","name":"JS","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"      google.charts.load('current', {'packages':['timeline']});\n      google.charts.setOnLoadCallback(drawChart);\n      function drawChart() {\n        var container = document.getElementById('timeline');\n        var chart = new google.visualization.Timeline(container);\n        var dataTable = new google.visualization.DataTable();\n\n        dataTable.addColumn({ type: 'string', id: 'Machine' });\n        dataTable.addColumn({ type: 'string', id: 'State' });\n        dataTable.addColumn({ type: 'date', id: 'Start' });\n        dataTable.addColumn({ type: 'date', id: 'End' });\n     dataTable.addRows([ ]);\n\n        chart.draw(dataTable);\n      }\n\n  ","output":"str","x":560,"y":180,"wires":[["b14b1b6615920eef"]]},{"id":"a4bd895056f646fe","type":"uibuilder","z":"3a20af9f0b232322","g":"7ab5a22cd67392c2","name":"","topic":"","url":"StateChart","okToGo":true,"fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"7.0.4","showMsgUib":false,"title":"","descr":"","editurl":"vscode://vscode-remote/ssh-remote+10.180.18.18\\Users\\OEEHo\\.node-red\\uibuilder/dt/?windowId=_blank","x":370,"y":390,"wires":[["499308298c239550"],[]]},{"id":"1b114fabfb52db74","type":"uib-cache","z":"3a20af9f0b232322","g":"7ab5a22cd67392c2","cacheall":true,"cacheKey":"topic","newcache":true,"num":"10","storeName":"memory","name":"Cache","storeContext":"context","varName":"uib_cache","x":180,"y":390,"wires":[["a4bd895056f646fe"]]},{"id":"df939924253d4619","type":"link in","z":"3a20af9f0b232322","g":"7ab5a22cd67392c2","name":"link in 16","links":["719cdf76ef8c4e8d"],"x":85,"y":390,"wires":[["1b114fabfb52db74"]]},{"id":"499308298c239550","type":"link out","z":"3a20af9f0b232322","g":"7ab5a22cd67392c2","name":"link out 62","mode":"link","links":["6533dd62217dd1b7"],"x":505,"y":400,"wires":[]},{"id":"5cf856ba7e2e6862","type":"link in","z":"3a20af9f0b232322","g":"7ab5a22cd67392c2","name":"link in 17","links":["c42a7aefb5791676","c4a9f7bc21b9d658"],"x":85,"y":330,"wires":[["a4bd895056f646fe"]]},{"id":"28422642ce0a174a","type":"change","z":"3a20af9f0b232322","g":"7bdce0666512b731","name":"","rules":[{"t":"set","p":"time","pt":"msg","to":"$fromMillis($millis(),'[FNn],[D] [MNn] [Y], [H01]:[m01]:[s01] ','+0530')","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":530,"wires":[["67abc3c4e7365874"]]},{"id":"178548589dd8dab9","type":"cronplus","z":"3a20af9f0b232322","g":"7bdce0666512b731","name":"","outputField":"payload","timeZone":"","persistDynamic":false,"commandResponseMsgOutput":"output1","outputs":1,"options":[{"name":"time","topic":"time","payloadType":"date","payload":"","expressionType":"cron","expression":"* * * * * * *","location":"","offset":"0","solarType":"all","solarEvents":"sunrise,sunset"}],"x":150,"y":530,"wires":[["28422642ce0a174a"]]},{"id":"67abc3c4e7365874","type":"uib-update","z":"3a20af9f0b232322","g":"7bdce0666512b731","name":"Time","topic":"","mode":"update","modeSourceType":"update","cssSelector":"#b10","cssSelectorType":"str","slotSourceProp":"time","slotSourcePropType":"msg","attribsSource":"{\"style\": \"border: 1px solid silver;\"}","attribsSourceType":"json","slotPropMarkdown":false,"x":500,"y":530,"wires":[["c4a9f7bc21b9d658"]]},{"id":"c4a9f7bc21b9d658","type":"link out","z":"3a20af9f0b232322","g":"7bdce0666512b731","name":"link out 63","mode":"link","links":["5cf856ba7e2e6862"],"x":605,"y":530,"wires":[]},{"id":"7eda60ae916b1cce","type":"uib-update","z":"3a20af9f0b232322","g":"fa0f33030a7da271","name":"","topic":"","mode":"update","modeSourceType":"update","cssSelector":"#SelDate","cssSelectorType":"str","slotSourceProp":"seldate","slotSourcePropType":"msg","attribsSource":"","attribsSourceType":"msg","slotPropMarkdown":false,"x":545,"y":740,"wires":[["719cdf76ef8c4e8d"]],"l":false},{"id":"719cdf76ef8c4e8d","type":"link out","z":"3a20af9f0b232322","g":"fa0f33030a7da271","name":"link out 64","mode":"link","links":["df939924253d4619"],"x":635,"y":680,"wires":[]},{"id":"6533dd62217dd1b7","type":"link in","z":"3a20af9f0b232322","g":"fa0f33030a7da271","name":"link in 18","links":["499308298c239550"],"x":85,"y":710,"wires":[["94eddf62ccd5c333"]]},{"id":"3d25271024417c93","type":"change","z":"3a20af9f0b232322","g":"fa0f33030a7da271","name":"","rules":[{"t":"set","p":"seldate1","pt":"msg","to":"_ui.form[\"r3-date-req\"].data.oldValue","tot":"msg"},{"t":"set","p":"seldate2","pt":"msg","to":"_ui.form[\"r3-date-req\"].data.newValue","tot":"msg"},{"t":"set","p":"seldate","pt":"msg","to":"'Date Selected:'&seldate2","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"t-seldate","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":740,"wires":[["7eda60ae916b1cce"]]},{"id":"94eddf62ccd5c333","type":"switch","z":"3a20af9f0b232322","g":"fa0f33030a7da271","name":"","property":"_ui.id","propertyType":"msg","rules":[{"t":"cont","v":"m","vt":"str"},{"t":"eq","v":"btn-send","vt":"str"}],"checkall":"false","repair":false,"outputs":2,"x":170,"y":710,"wires":[["70156f9757a24f22"],["3d25271024417c93"]]},{"id":"70156f9757a24f22","type":"change","z":"3a20af9f0b232322","g":"fa0f33030a7da271","name":"","rules":[{"t":"set","p":"mc","pt":"msg","to":"_ui.slotText","tot":"msg"},{"t":"set","p":"selmc","pt":"msg","to":"'Selected Machine: '&mc","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"t-selmc","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":680,"wires":[["f2b9129de45e58b8","93694f8b65005641"]]},{"id":"93694f8b65005641","type":"uib-update","z":"3a20af9f0b232322","g":"fa0f33030a7da271","name":"","topic":"","mode":"update","modeSourceType":"update","cssSelector":"#SelMc","cssSelectorType":"str","slotSourceProp":"selmc","slotSourcePropType":"msg","attribsSource":"","attribsSourceType":"msg","slotPropMarkdown":false,"x":535,"y":680,"wires":[["719cdf76ef8c4e8d"]],"l":false},{"id":"2a2405d20ef35a10","type":"change","z":"3a20af9f0b232322","g":"3592ecb00ef22768","name":"","rules":[{"t":"set","p":"data2","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":880,"wires":[["0a81529866a95024"]]},{"id":"88e358a2900c77f4","type":"change","z":"3a20af9f0b232322","g":"3592ecb00ef22768","name":"M08","rules":[{"t":"set","p":"payload","pt":"msg","to":"[[\"m08\",\"ON\",\"2024,10,28,06,00\",\"2024,10,28,06,02\"],[\"m08\",\"OFF\",\"2024,10,28,06,02\",\"2024,10,28,06,09\"],[\"m08\",\"ON\",\"2024,10,28,06,09\",\"2024,10,28,06,11\"],[\"m08\",\"OFF\",\"2024,10,28,06,11\",\"2024,10,28,06,15\"],[\"m08\",\"ON\",\"2024,10,28,06,15\",\"2024,10,28,06,31\"],[\"m08\",\"OFF\",\"2024,10,28,06,31\",\"2024,10,28,06,33\"],[\"m08\",\"ON\",\"2024,10,28,06,33\",\"2024,10,28,06,37\"],[\"m08\",\"OFF\",\"2024,10,28,06,37\",\"2024,10,28,06,38\"]]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":920,"wires":[["2a2405d20ef35a10"]]},{"id":"241702a04b393b62","type":"change","z":"3a20af9f0b232322","g":"3592ecb00ef22768","name":"M03","rules":[{"t":"set","p":"payload","pt":"msg","to":"[[\"m03\",\"OFF\",\"2024,10,28,06,00\",\"2024,10,28,06,06\"],[\"m03\",\"ON\",\"2024,10,28,06,06\",\"2024,10,28,06,07\"],[\"m03\",\"OFF\",\"2024,10,28,06,07\",\"2024,10,28,06,32\"],[\"m03\",\"ON\",\"2024,10,28,06,32\",\"2024,10,28,06,52\"],[\"m03\",\"OFF\",\"2024,10,28,06,52\",\"2024,10,28,07,22\"],[\"m03\",\"ON\",\"2024,10,28,07,22\",\"2024,10,28,07,47\"],[\"m03\",\"OFF\",\"2024,10,28,07,47\",\"2024,10,28,07,48\"],[\"m03\",\"ON\",\"2024,10,28,07,48\",\"2024,10,28,08,02\"]]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":840,"wires":[["2a2405d20ef35a10"]]},{"id":"cf7297f001e3758b","type":"switch","z":"3a20af9f0b232322","g":"3592ecb00ef22768","name":"","property":"mc","propertyType":"msg","rules":[{"t":"eq","v":"M-03","vt":"str"},{"t":"eq","v":"M-04","vt":"str"},{"t":"eq","v":"M-08","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":180,"y":880,"wires":[["241702a04b393b62"],["f32a875e0e59957b"],["88e358a2900c77f4"]]},{"id":"14d2df29906751db","type":"link in","z":"3a20af9f0b232322","g":"3592ecb00ef22768","name":"link in 19","links":["f2b9129de45e58b8"],"x":85,"y":880,"wires":[["cf7297f001e3758b"]]},{"id":"f2b9129de45e58b8","type":"link out","z":"3a20af9f0b232322","g":"fa0f33030a7da271","name":"link out 65","mode":"link","links":["14d2df29906751db"],"x":475,"y":640,"wires":[]},{"id":"0a81529866a95024","type":"link out","z":"3a20af9f0b232322","g":"3592ecb00ef22768","name":"link out 66","mode":"link","links":["37e4fd0368333b21"],"x":715,"y":880,"wires":[]},{"id":"f32a875e0e59957b","type":"change","z":"3a20af9f0b232322","g":"3592ecb00ef22768","name":"M04","rules":[{"t":"set","p":"payload","pt":"msg","to":"[[\"m04\",\"OFF\",\"2024,10,28,06,00\",\"2024,10,28,06,11\"],[\"m04\",\"ON\",\"2024,10,28,06,11\",\"2024,10,28,06,13\"],[\"m04\",\"OFF\",\"2024,10,28,06,13\",\"2024,10,28,06,33\"],[\"m04\",\"ON\",\"2024,10,28,06,33\",\"2024,10,28,06,39\"],[\"m04\",\"OFF\",\"2024,10,28,06,39\",\"2024,10,28,06,40\"],[\"m04\",\"ON\",\"2024,10,28,06,40\",\"2024,10,28,06,45\"],[\"m04\",\"OFF\",\"2024,10,28,06,45\",\"2024,10,28,06,49\"],[\"m04\",\"ON\",\"2024,10,28,06,49\",\"2024,10,28,06,51\"]]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":880,"wires":[["2a2405d20ef35a10"]]},{"id":"84b89ef35a890901","type":"change","z":"3a20af9f0b232322","g":"2fe1b2f178b93edc","name":"index.js","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.js","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":900,"wires":[["f5470e8ee2a5b3a2"]]},{"id":"f5470e8ee2a5b3a2","type":"template","z":"3a20af9f0b232322","g":"2fe1b2f178b93edc","name":"JS","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"      google.charts.load('current', {'packages':['timeline']});\n      google.charts.setOnLoadCallback(drawChart);\n      function drawChart() {\n        var container = document.getElementById('timeline');\n        var chart = new google.visualization.Timeline(container);\n        var dataTable = new google.visualization.DataTable();\n\n        dataTable.addColumn({ type: 'string', id: 'Machine' });\n        dataTable.addColumn({ type: 'string', id: 'State' });\n        dataTable.addColumn({ type: 'date', id: 'Start' });\n        dataTable.addColumn({ type: 'date', id: 'End' });\n     dataTable.addRows([\n          ['{{flow.data2[0][0]}}', '{{flow.data2[0][1]}}', new Date({{flow.data2[0][2]}}), new Date({{flow.data2[0][3]}})],\n          ['{{flow.data2[1][0]}}', '{{flow.data2[1][1]}}', new Date({{flow.data2[1][2]}}), new Date({{flow.data2[1][3]}})],\n          ['{{flow.data2[2][0]}}', '{{flow.data2[2][1]}}', new Date({{flow.data2[2][2]}}), new Date({{flow.data2[2][3]}})],\n          ['{{flow.data2[3][0]}}', '{{flow.data2[3][1]}}', new Date({{flow.data2[3][2]}}), new Date({{flow.data2[3][3]}})],\n          ['{{flow.data2[4][0]}}', '{{flow.data2[4][1]}}', new Date({{flow.data2[4][2]}}), new Date({{flow.data2[4][3]}})],\n          ['{{flow.data2[5][0]}}', '{{flow.data2[5][1]}}', new Date({{flow.data2[5][2]}}), new Date({{flow.data2[5][3]}})],\n          ['{{flow.data2[6][0]}}', '{{flow.data2[6][1]}}', new Date({{flow.data2[6][2]}}), new Date({{flow.data2[6][3]}})],\n          ['{{flow.data2[7][0]}}', '{{flow.data2[7][1]}}', new Date({{flow.data2[7][2]}}), new Date({{flow.data2[7][3]}})]\n        ]);\n\n        chart.draw(dataTable);\n      }\n\n  ","output":"str","x":1110,"y":900,"wires":[["927ce942ae1bbf13","2b5b56e234fae22d"]]},{"id":"927ce942ae1bbf13","type":"uib-save","z":"3a20af9f0b232322","g":"2fe1b2f178b93edc","url":"StateChart","uibId":"a4bd895056f646fe","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":1280,"y":900,"wires":[]},{"id":"37e4fd0368333b21","type":"link in","z":"3a20af9f0b232322","g":"2fe1b2f178b93edc","name":"link in 20","links":["0a81529866a95024"],"x":835,"y":900,"wires":[["84b89ef35a890901"]]},{"id":"2b5b56e234fae22d","type":"link out","z":"3a20af9f0b232322","g":"2fe1b2f178b93edc","name":"link out 67","mode":"link","links":["234aeb9ed9576c56"],"x":1185,"y":840,"wires":[]}]
15

Trying to work through your logic.

What I've seen so far:

  • Your use of the uib-cache node isn't working as expected because I don't think you've set a topic for incoming messages but have configured the cache to work by topic.
  • Something is reloading the page by the looks of things - about a second after you press one of the buttons - that reload unloads all the data and so puts you back to the beginning again.

What is causing the page reload? OK, found that - it is because you are still doing what I said not to do. You are updating the static index.js file and you've set the uib-save node to automatically reload the page after saving which means the page does exactly that but of course looses all the info in doing so.

Add unique msg.topic properties to all messages you want to cache.

Move the dynamic updates to use the front-end uibuilder.onChange code previously shared so you aren't constantly reloading the page.

16

I got it..Finally. Although I dont think I understood, but i got a working solution.
msg.payload is passed on to the template node and dynamically the table is built and displayed on the dashboard, as I was expecting.

Thanks for keeping me motivated.

Summary

Passing msg.payload into template node <script> - #4 by smanjunath211