Dynamic Data Conversion

smanjunath211 · 28 October 2024 08:05

I am unable to state my issue, so giving example

what I have

[{"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

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

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)

Steve-Mcl · 28 October 2024 08:49

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

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!

smanjunath211 · 28 October 2024 09:01

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.

Steve-Mcl · 28 October 2024 09:05

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

smanjunath211 · 28 October 2024 09:17

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 ?

TotallyInformation · 28 October 2024 10:36

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

smanjunath211 · 28 October 2024 11:25

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

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;

TotallyInformation · 28 October 2024 13:18

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.

smanjunath211 · 28 October 2024 15:56

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

TotallyInformation · 28 October 2024 16:08

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.

smanjunath211 · 28 October 2024 16:11

what is in the change node ?

TotallyInformation · 28 October 2024 16:49

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

[{"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":[]}]

smanjunath211 · 29 October 2024 06:27

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 ) 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":[]}]

TotallyInformation · 29 October 2024 13:57

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.

smanjunath211 · 31 October 2024 05:45

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

system · 14 November 2024 05:46

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Function node - Calculate and filter messages General	7	184	14 March 2023
Function Code Help in concatenating General	3	66	27 June 2024
Msg.payload help General	20	1066	11 October 2019
Plz Help with Parsing String General function-node	4	455	13 December 2022
Appeal for aid Cut special characters General	4	99	5 January 2024

Dynamic Data Conversion

Related topics