[Node-red] Custom node 만드는 방법

2022. 12. 2. 15:00개발/Node-red

2022.11.21 - [기록/개발 노트] - [Node-red] Custom node 수정 - 4

 

[Node-red] Custom node 수정 - 4

2022.11.21 - [기록/개발 노트] - [Node-red] Custom node 수정 - 3 [Node-red] Custom node 수정 - 3 마지막 수정 후 보완할 점들 mqtt 통신 불안정 mqtt 통신 불안정에 따른 Node-red 서버 중지 ( cmd 에서 자주 node-red 종료

iruk.tistory.com

Node-red에서 Custom 노드를 제작했었다.

노드의 주된 기능은 scheduler 이다.

설정한 시간 값에 따라서 mqtt 로 데이터를 전송해

원격으로 4채널 보드의 ESP32, 릴레이를 동작시켰다.

 

이번에 새로 만들 노드는

시간 값 없이 JSON 데이터를 입력했을 때

해당 4채널 보드의 릴레이가 동작하도록 한다.


Node-red 노드 만드는 방법

생각해보면 기존에 만들었던 Custom node에 대한 설명과

Custom node 를 npm에 배포하는 내용은 기록했는데

원초적으로 node를 만드는 방법은 기록하지 않았다.

 

https://nodered.org/docs/creating-nodes/first-node#lower-casehtml

 

Creating your first node : Node-RED

Creating your first node Nodes get created when a flow is deployed, they may send and receive some messages whilst the flow is running and they get deleted when the next flow is deployed. They consist of a pair of files: a JavaScript file that defines what

nodered.org

위 사이트에 자세하게 나와있다.

 

1. 원하는 경로에 프로젝트 폴더를 생성

 

2. html, js, package.json 파일을 생성

3. 프로젝트 폴더 cmd에서  npm init 실행

npm에 등록할 package.json 파일을 생성해주기 위함

{
    "name" : "릴레이노드",
    ...
    "node-red" : {
        "nodes": {
            "relay_node": "relaynode.js"
        }
    }
}

4. package.json 에 데이터 추가

생성된 package.json에 'node-red' 데이터를 추가한다.

package.json 에 대한 내용은

구글에 자료가 방대하므로 그때그때 필요한 데이터 추가할 예정

ex) npm 명령어 ( script ), author, license 등등

 

js파일은 같은 폴더 내의 js 파일명을 입력해준다.

module.exports = function(RED) {
    function LowerCaseNode(config) {
        RED.nodes.createNode(this,config);
        var node = this;
        node.on('input', function(msg) {
            msg.payload = msg.payload.toLowerCase();
            node.send(msg);
        });
    }
    RED.nodes.registerType("lower-case",LowerCaseNode);
}

5. js 파일 작성

위는 Node-red의 Custom node 가이드에 나와있는 예시다.

원하는 대로 js 파일을 작성한다.

<script type="text/javascript">
    RED.nodes.registerType('lower-case',{
        category: 'function',
        color: '#a6bbcf',
        defaults: {
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
            return this.name||"lower-case";
        }
    });
</script>

<script type="text/html" data-template-name="lower-case">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/html" data-help-name="lower-case">
    <p>A simple node that converts the message payloads into all lower-case characters</p>
</script>

6. html 파일 작성

js파일과 마찬가지로 html 도 작성한다.

 

Custom node에 적용되는 html, js 파일의 구조는

Node-red forum에 정말 자세하게 다 나와있다.

( 아까 업로드한 링크 참조 )

 

부분별로 구조를 이해하고 나면 node 제작이 수월하다.

7. node red 폴더에 npm install 프로젝트 경로

node-red가 설치된 폴더에서 cmd 실행 후

npm install 프로젝트폴더 를 실행한다.

위 경로를 복사해서

이렇게 실행하면 된다. 그러면 local 환경, 즉

본인의 node-red에 Custom node가 생긴다.

위와 같이 localhost 환경에 내 노드가 생겼다.


Custom node 제작 및 local 배포까지의 과정이 정말 간단해서

js, html을 어떻게 작성하느냐가 관건이지

Custom node 제작에 불편한점은 전혀 없는 것 같다.

'개발 > Node-red' 카테고리의 다른 글

[Node-red] Relay node 제작 - 2  (0) 2022.12.07
[Node-red] Relay node 제작  (0) 2022.12.05
[Node-red] Custom node 배포  (0) 2022.12.01
[Node-red] Schedule node 수정 - 4  (0) 2022.11.21
[Node-red] Schedule node 수정 - 3  (0) 2022.11.21