UI_Chart multiline example

  • ตัวอย่างการใช้งาน ui_chart แสดงหลายค่าพร้อมกัน เลือกค่าที่จะแสดงโดยใช้ ui_switch
  • ตัวอย่างการนำ {{msg....}} ไปใช้กับ label ของ ui_switch และ topic ใน chart เพื่อให้ชื่อของทั้งสองจุดตรงกัน (ใช้ได้กับทุก ui แต่ dashboard v2.4.3 จะไม่แสดงใน ui_switch ต้องรอ release ก่อน แต่สามารถ copy ไฟล์ ui_chart.js กับ ui_chart.html จากใน github ไปวางทับของเดิมก่อนได้)
  • สร้าง ui_button รีเซท chart แบบง่ายๆ
  • แถมตัวอย่างฟังก์ชั่นแสดงค่าวันเป็นภาษาไทยวิธีบ้านๆ
[{"id":"c91197a9.1b0818","type":"inject","z":"c5a184dc.30bc68","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"x":150,"y":140,"wires":[["53a7b7d0.a82148","1b00715a.fd86cf"]]},{"id":"5ae57209.00e5ac","type":"ui_switch","z":"c5a184dc.30bc68","name":"Choice1","label":"{{msg.label1}}","group":"d3390420.783878","order":3,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":380,"y":320,"wires":[["a9110e08.3f754"]]},{"id":"53a7b7d0.a82148","type":"function","z":"c5a184dc.30bc68","name":"thai Date","func":"function thaiDate(date) {\n  var monthName = [\n    \"มกราคม\", \"กุมภาพันธ์\", \"มีนาคม\",\n    \"เมษายน\", \"พฤษภาคม\", \"มิถุนายน\", \"กรกฎาคม\",\n    \"สิงหาคม\", \"กันยายน\", \"ตุลาคม\",\n    \"พฤศจิกายน\", \"ธันวาคม\"\n  ];\n\n  var day = date.getDate();\n  var monthIndex = date.getMonth();\n  var year = date.getFullYear()+543;\n\n  return day + ' ' + monthName[monthIndex] + ' ' + year;\n}\n\nvar d = new Date(msg.payload);\nmsg.payload =thaiDate(d) + '  ' + d.toLocaleTimeString();\nreturn msg;","outputs":1,"noerr":0,"x":220,"y":200,"wires":[["3c20cd84.3e6892","ddc0d4.8190bf3"]]},{"id":"3c20cd84.3e6892","type":"ui_text","z":"c5a184dc.30bc68","group":"d3390420.783878","order":1,"width":0,"height":0,"name":"time","label":"{{msg.payload}}","format":"เลือกข้อมูลที่ต้องการแสดง","layout":"col-center","x":370,"y":240,"wires":[]},{"id":"ddc0d4.8190bf3","type":"debug","z":"c5a184dc.30bc68","name":"","active":true,"console":"false","complete":"payload","x":390,"y":200,"wires":[]},{"id":"1b00715a.fd86cf","type":"function","z":"c5a184dc.30bc68","name":"set Label","func":"msg.label1='Test Choice1';\nmsg.label2='Test Choice2';\nmsg.label3='Test Choice3';\nreturn msg;","outputs":1,"noerr":0,"x":220,"y":320,"wires":[["5ae57209.00e5ac","9a227703.8617c8","42081181.74a09"]]},{"id":"9a227703.8617c8","type":"ui_switch","z":"c5a184dc.30bc68","name":"Choice2","label":"{{msg.label2}}","group":"d3390420.783878","order":4,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":380,"y":360,"wires":[["d723bf24.96d7"]]},{"id":"42081181.74a09","type":"ui_switch","z":"c5a184dc.30bc68","name":"Choice3","label":"{{msg.label3}}","group":"d3390420.783878","order":5,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":380,"y":400,"wires":[["81017ea0.3fe91"]]},{"id":"a9110e08.3f754","type":"function","z":"c5a184dc.30bc68","name":"msg1","func":"var msg1={};\nif (msg.payload===true) {\n    msg1.payload = Math.round(Math.random()*100);\n    msg1.topic = msg.label1;\nreturn msg1;\n}","outputs":1,"noerr":0,"x":530,"y":320,"wires":[["d4a52bb0.f0f188"]]},{"id":"d723bf24.96d7","type":"function","z":"c5a184dc.30bc68","name":"msg2","func":"var msg2={};\nif (msg.payload===true) {\n    msg2.payload = Math.round(Math.random()*100);\n    msg2.topic = msg.label2;\nreturn msg2;\n}","outputs":1,"noerr":0,"x":530,"y":360,"wires":[["d4a52bb0.f0f188"]]},{"id":"81017ea0.3fe91","type":"function","z":"c5a184dc.30bc68","name":"msg3","func":"var msg3={};\nif (msg.payload===true) {\n    msg3.payload = Math.round(Math.random()*100);\n    msg3.topic = msg.label3;\nreturn msg3;\n}","outputs":1,"noerr":0,"x":530,"y":400,"wires":[["d4a52bb0.f0f188"]]},{"id":"d4a52bb0.f0f188","type":"ui_chart","z":"c5a184dc.30bc68","name":"","group":"faee512b.7f9bb","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"x":690,"y":360,"wires":[[],[]]},{"id":"46399bdc.041db4","type":"function","z":"c5a184dc.30bc68","name":"reset chart","func":"msg.payload=[];\nreturn msg;","outputs":1,"noerr":0,"x":550,"y":480,"wires":[["d4a52bb0.f0f188"]]},{"id":"9a3fcaad.2112b8","type":"ui_button","z":"c5a184dc.30bc68","name":"","group":"d3390420.783878","order":0,"width":0,"height":0,"passthru":false,"label":"reset chart","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":390,"y":480,"wires":[["46399bdc.041db4"]]},{"id":"d3390420.783878","type":"ui_group","z":"","name":"Group1","tab":"5ec074b0.493abc","order":2,"disp":true,"width":"5"},{"id":"faee512b.7f9bb","type":"ui_group","z":"","name":"Group 2","tab":"5ec074b0.493abc","order":2,"disp":true,"width":"15"},{"id":"5ec074b0.493abc","type":"ui_tab","z":"","name":"example ui_chart","icon":"dashboard"}]
aid402

Flow Info

created 2 months, 3 weeks ago

Node Types

Core
  • debug (x1)
  • function (x6)
  • inject (x1)
Other
  • ui_button (x1)
  • ui_chart (x1)
  • ui_group (x2)
  • ui_switch (x3)
  • ui_tab (x1)
  • ui_text (x1)

Tags

  • ui_chart
  • ui_switch
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option