- ตัวอย่างการใช้งาน 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 แบบง่ายๆ
- แถมตัวอย่างฟังก์ชั่นแสดงค่าวันเป็นภาษาไทยวิธีบ้านๆ
-
-
Save aid402/cb1e729d7cd5e7082063679b5502feca to your computer and use it in GitHub Desktop.
UI_Chart multiline example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[{"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"}] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment