nodered템플릿 예제

템플릿 노드전체.

 

전체코드

 [{"id":"6d054402.bae15c","type":"tab","label":"template","disabled":false,"info":""},{"id":"357aacf3.bb1a1c","type":"template","z":"6d054402.bae15c","name":"html template","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"\n<table border=\"1\" width=\"500px\">\n    <thead>\n        <tr>\n            <th colspan=\"3\">Messages</th>\n        </tr>\n    </thead>\n    \n    <tr>\n        <th class=\"red\">Message</th>\n        <th class=\"yellow\">Topic</th>\n        <th class=\"blue\" width=\"150\">Time & Date</th>\n\n    </tr>\n    {{#payload}}\n        <tr class=\"\">\n            <td>{{msg}}</td> \n            <td>{{topic}}</td>   \n            <td width=\"150\">{{time}}</td>\n        </tr>\n    {{/payload}}\n</table>\n<h4>Total Messages={{total}}</h4>","output":"str","x":300,"y":200,"wires":[["cd697280.7892e8"]]},{"id":"cd697280.7892e8","type":"ui_template","z":"6d054402.bae15c","group":"4a93a592.39efec","name":"Scrolling Messages","order":0,"width":0,"height":0,"format":"<style>\n.red {   background-color:red; }\n.yellow { background-color:yellow;}\n.blue {  background-color:blue;}\n</style>\n\n<div ng-bind-html=\"msg.payload\"  style=\"width:550px;height:400px\">\n\n</div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":328,"y":273,"wires":[[]]},{"id":"1bef68be.08f577","type":"inject","z":"6d054402.bae15c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"test","payload":"Test Message","payloadType":"str","x":130,"y":40,"wires":[["70471bb6.892d64"]]},{"id":"189fecce.8c76bb","type":"debug","z":"6d054402.bae15c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":399,"y":58,"wires":[]},{"id":"70471bb6.892d64","type":"function","z":"6d054402.bae15c","name":"Display Messages","func":"var data=context.get('data') || [];\nvar count=context.get('count');\n\nvar payload=msg.payload;\nvar topic=msg.topic\nif(count==undefined){\n    count=0;\n}\nvar d= new Date();\ncount+=1;\nnow=d.getTime();\nvar s= new Date(now);\nvar mtime=s.getFullYear()+ \"-\"+ ( s.getMonth()+1)+\"-\"+s.getDate()+\" \"+ s.getHours() +\":\"+s.getMinutes()+\":\"+s.getSeconds();\nvar mdata={};\n\nmdata.msg=payload.slice(0,30) +\"   \"+ count;\nmdata.time=mtime;\ndata.push(mdata);\nnode.log(\"data \" + data.length);\nif(data.length>10){\n    data.shift();\n}\nif(topic==\"reset\"){\ndata=[];\nnode.log(data)\ncount=0;\n}\n\ncontext.set('count',count);\ncontext.set('data',data);\nmsg1={};\n\nmsg1[\"payload\"]=data;\nmsg1.topic=topic;\nmsg1.total=count;\n\nreturn msg1;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":120,"wires":[["357aacf3.bb1a1c","189fecce.8c76bb"]]},{"id":"80e0d7eb.2d341","type":"inject","z":"6d054402.bae15c","name":"reset","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"reset","payload":"true","payloadType":"str","x":90,"y":260,"wires":[["70471bb6.892d64"]]},{"id":"4a93a592.39efec","type":"ui_group","name":"Test Messages","tab":"c4971399.f6246","order":1,"disp":true,"width":"12","collapse":false},{"id":"c4971399.f6246","type":"ui_tab","name":"Demo","icon":"dashboard"}]

Out HTML ui 출력 화면

클릭 2회 후 출력화면.

TestMessage클릭하면 레코다 하나씩 추가되고 Reset 하면 지워진다.

Function  Display Message 코드

//컨텍스트 :: 현재 노드에서
var data=context.get('data') || []; // data란것을 가져온다. 
var count=context.get('count');

var payload=msg.payload;
var topic=msg.topic
if(count==undefined){
    count=0;
}
var d= new Date();
count+=1;
now=d.getTime();
var s= new Date(now);
var mtime=s.getFullYear()+ "-"+ ( s.getMonth()+1)+"-"+s.getDate()+" "+ s.getHours() +":"+s.getMinutes()+":"+s.getSeconds();
var mdata={}; //오브젝트로 설정

mdata.msg=payload.slice(0,30) +"   "+ count;
mdata.time=mtime;
data.push(mdata); // data란 것에 mdata를  푸시 
node.log("data " + data.length); //디버그창에 data 개수  로그
if(data.length>10){
    data.shift(); // 10개넘으면 쉬프트해서 10개만 보여주게 하기
}
if(topic=="reset"){ // 리셋하면 data 를 []로 
data=[];
node.log(data) // data 디버그창에 로그
count=0; // 리셋하면 0으로
}

context.set('count',count); //카운트를 컨텍스트에  저장해~
context.set('data',data); //데이타도 ~
msg1={}; // 오브젝 선언 내보낼꺼~

msg1["payload"]=data;
//동일함확인  msg1.payload=data; 
msg1.topic=topic; // 토픽~
msg1.total=count;  //토탈 

return msg1;

 

 

Scrolling Messages 코드

<style>
.red {   background-color:red; }
.yellow { background-color:yellow;}
.blue {  background-color:blue;}
</style>

<div ng-bind-html="msg.payload"  style="width:550px;height:400px">

</div>

html Template  코드

<table border="1" width="500px">
    <thead>
        <tr>
            <th colspan="3">Messages</th>
        </tr>
    </thead>
    
    <tr>
        <th class="red">Message</th>
        <th class="yellow">Topic</th>
        <th class="blue" width="150">Time & Date</th>

    </tr>
    {{#payload}}
        <tr class="">
            <td>{{msg}}</td> 
            <td>{{topic}}</td>   
            <td width="150">{{time}}</td>
        </tr>
    {{/payload}}
</table>
<h4>Total Messages={{total}}</h4>

핵심쳌~

루프가 {{#payload}} 로 시작~ {{/payload}}로 구현되었다. ~

루프 안에서 data의길이 만큼 반복이되었다.

push()로 데이타를 넣었다.

10개넘으면 shift()로 10개로 최근것10개가 나오게 하였다.

node안에서 유지는 context.get(), .set()으로 불러오고 설정하였다.

(( 여기엔없비만 flow에서는 flow.get(), .set() 전역은 global.get(), .set() 으로 불러오고 설정 함.

 

Reset 후

원본 출처 :  https://stevesnoderedguide.com/download/node-red-template-node-video