Node-Red 使用 UI Dashboard Template 節點
參考來源https://stevesnoderedguide.com/using-dashboard-template-node
|
<style> .table { width:500px; background:lightblue; border:1px solid black; //font-size:10px; } .main { height:400px; } </style>
<div
class="main"> <table
class="table"> <tr ng-repeat = "payload in
msg.payload"> <td ng-repeat ="(key,value)
in payload"> {{key}}: {{value}}</td></tr> </table> </div> |
|
<style> .table {
width:500px;
background:lightblue; border:1px
solid black; //font-size:10px; } .main {
height:400px; } </style> <div ng-app=""> <p>Input something in the input
box:</p> <p>Name : <input
type="text" ng-model="name" placeholder="Enter name
here"></p> <h1>Hello {{name}}</h1> </div> |
[{"id":"068ce15ad4de52ad","type":"inject","z":"81c254fd0a75d7a7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":300,"y":140,"wires":[["d7c731c5c8f0610e"]]},{"id":"d7c731c5c8f0610e","type":"ui_template","z":"81c254fd0a75d7a7","group":"c7f6cd2081a9366a","name":"","order":13,"width":0,"height":0,"format":"<style>\n \n.table\n{\n\n width:500px;\n background:lightblue;\n border:1px solid black;\n//font-size:10px;\n}\n.main\n{\n height:400px;\n}\n\n</style>\n<div ng-app=\"\">\n \n<p>Input something in the input box:</p>\n<p>Name : <input type=\"text\" ng-model=\"name\" placeholder=\"Enter name here\"></p>\n<h1>Hello {{name}}</h1>\n\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":500,"y":140,"wires":[["4f1a59f69325e800"]]},{"id":"4f1a59f69325e800","type":"debug","z":"81c254fd0a75d7a7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":140,"wires":[]},{"id":"c7f6cd2081a9366a","type":"ui_group","name":"Default","tab":"e01b6f.a9d07c9","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"e01b6f.a9d07c9","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
沒有留言:
張貼留言