스위치노드는 입력으로 들어오는 메시지를 분석하여 설정한 조건에 따라 메시지의 출력 방향을 조절할 수 있는 기능을 제공합니다.
예를 들어, 인젝트(inject)에서 "Dog"라는 메시를 설정하고 switch노드에서 목적상 여러 개의 출력을 설정하였을 때, "Dog"라는 메시지와 동일한(==) 출력 노드로만 메시지를 보낼 수 있습니다. 즉 메시지에 일정한 규칙을 설정하여 Flow의 방향을 조절할 수 있습니다.
여기서 만약 아래 이미지처럼, 처음 맞는 조건에서 더 이상의 하위 조건들을 검사하지 않고 종료할 수도 있는 옵션도 사용할 수 있습니다.
검토할 수 있는 조건의 종류는 아래와 같습니다. 인젝터에 있는 메시지 전체에 대해 판별하며, 일치할 경우 true값을 반환합니다.
특히, JSONata를 지원하기 때문에, 좀 더 디테일하게 조건을 판별 처리할 수 있습니다. ( ※ JSONata는 JSON 데이터를 위한 경량 쿼리 및 변환 언어입니다.XPath 3.1의 '위치 경로' 시맨틱에서 영감을 받아 정교한 쿼리를 간결하고 직관적인 표기법으로 표현할 수 있습니다.추출된 데이터를 조작하고 결합하기 위해 내장된 연산자 및 함수의 풍부한 보완이 제공되며 쿼리 결과는 친숙한 JSON 개체 및 배열 구문을 사용하여 모든 JSON 출력 구조로 형식화될 수 있습니다.사용자 정의 함수를 생성하는 기능과 함께 고급 표현식을 구축하여 모든 JSON 쿼리 및 변환 작업을 처리할 수 있습니다. 참고 → http://docs.jsonata.org/overview.html )
⑦ Template 노드
템플릿 노드는 이름 그대로 원하는 형태로 본을 떠주는 노드라고 할 수 있는데요, 아래 예시를 참고해 보세요.
예시 1)
이 경우, template의 속성은 아래처럼 되어 있습니다. 그리고, 전달할 내용(payload)을 {{ ... }} 이중 괄호 묶어서 템플릿을 구성하면 됩니다.
예시 2)
예시 3) 여기서 템플릿노드는 특정문자를 HTML 이스케이프 코드로 바꾸어 버리는 경우가 생기는데, 이럴 때는 {{ ... }} 이중 괄호가 아니라, {{{ ... }}} 삼중 괄호를 사용해 주면 됩니다.
아래 예시는 html에서 강조(bold) 태그인 <b> </b>를 사용한 메시지를 전달할 때 이중괄호와 삼중괄호를 비교한 예시이니 참고해 보세요.
또한, 템플릿 노드에서는, HTML, JSON... 뿐 아니라, mustache(머 스테치)라는 템플릿 문법을 지원하는데요, 머스테치는다양한 언어를 합쳐서 사용할 수 있는 하나의 템플릿 엔진으로, Loop와 같은 로직 구문이 존재하지 않으므로, Logic-Less Templates라고 불리는 엔진입니다. 머스테치는 가장 심플한 템플릿 엔진 중 하나이며, 다양한 언어를 지원하기도 합니다. (C++, C#, PHP, Java, JavaScript, Python, Perl... 등 50여 개 이상 지원)
따라서 머스테치와 같은 템플릿 엔진을 사용한 템플릿 노드를 이용해서 사용자가 정의한 형태의 타입으로 메시지를 가공하는데 효과적으로 사용할 수 있는 노드입니다. 특히, HTML과 같은 웹페이지 출력 형태를 사용할 때 많이 사용하게 됩니다. 뒤에서 다루게 될 [http response] 노드와 함께, 웹으로 출력하는 것을 볼 수 있습니다.
⑧ Complete 노드
노드들의 Flow에서, 어떤 노드들은 출력이 없는 노드들이 있습니다. 따라서 수행완료(처리)를 파악하는 것이 필요할 경우가 생기는데, complete 노드는 이런 경우처럼 다른 노드의 메시지 처리가 완료되면 이를 체크할 수 있는 기능을 제공하는 노드입니다. 물론 출력이 있는 노드도 체크할 수 있습니다. 아래 예시에서 보면, Complete노드에서 "Hello World!" 메시지를 갖고 있는 인젝트(Inject) 노드의 출력 메시지를 감지하면 "debug 2"를 통해서 동일한 메시지를 출력할 수 있도록 하였습니다.
물론 "debug 1" 메시지의 출력을 체크하여도 동일한 결과를 얻을 수 있습니다.
다만 모든 노드가 이벤트를 발생시키는 것은 아니기 때문에, Complete노드를 모든 노드에 적용할 수 있는 것은 아닙니다.
⑨ Link in, out과 Link Call 노드
Link 노드는 플로우 화면에 배치된 노드와 플로우가 너무 복잡할 경우 실제 링크 연결을 대신하여, 즉 무선으로 연결시켜 줄 수 있는 역할을 하는 노드로서, 플로우를 간결하게 표현하는 데 사용할 수 있는 노드입니다.
아래 예시를 보면, 인젝터에 있는 Hello world! 메시지와 Function 1의 메시지를 합친 출력을 "Link Out 1"노드 → "Link In 1"노드로 전달시켜 debug 1으로 출력시켜본 예제입니다.
아래 "Link Out 1" 노드를 선택해 보면, 옵션에서 "Link In 1" 연결되었다는 표시를 볼 수 있습니다.
위와 같이 연결되기 위해서는 아래에 있는 Link Out노드와 Link In노드의 설정을 참고해 주세요.
또한 Link 노드를 아래 예시처럼 서부루틴 함수처럼 활용할 수도 있습니다. (Link Call 함수 활용)
Link node의 옵션은 아래 이미지들을 참고하세요~
그리고 아래처럼, 여러 개의 Flow node에서 Link Call 하여 정말 서부루틴 함수 활용하듯 할 수 있습니다.
그리고 아래처럼, 플로우 화면 1과 화면 2로 나누어 좀 더 체계적으로 플로우노드를 구성할 수도 있습니다.
⑩ Catch 노드
Catch노드는 플로우에서 발생되는 에러를 감지하는 노드인데요, 모든 플로우를 설계하고서 어떤 예상치 못하는 에러가 발생하는 경우 의도적으로 에러를 발생시켜 플로우를 종료해야 되는 경우가 발생됩니다. 특히, 외부 서비스를 연동하거나 할 때 예를 들어, 외부 DB나 HTTP연동에서 응답이 없는 경우에 대한 처리를 해줄 필요가 있습니다. 이러한 경우 등에 catch 노드를 사용하여 대비하는 플로우를 짜는 것이 좋습니다.
아래 이미지들은 Function 함수에서 에러를 발생시켜 이를 Catch노드에서 감지하도록 하여 에러 발생 내용을 debug 6 노드로 출력하도록 한 예시입니다.
Function 노드 내용 :
var msg1 = { payload: "1" };
var msg2 = { payload: "2" };
var msg3 = { payload: "3" };
return [msg1, msg2, msg3];
function 노드에는 msg3에 대한 리턴이 없고 msg4로 잘못 리턴이 되어 에러가 발생하게 됩니다.
Catch노드에서는 에러를 체크할 노드로 "function 1"을 체크해 주세요. 물론 하나의 catch노드에서 플로우에 있는 여러 개의 노드를 동시에 에러 체크할 수 있습니다.
그리고 catch 노드와 연결된 메시지로 에러메시지를 출력하기 위해, 대상: msg.error.message 로 입력해 주세요.
에러가 나는 부분을 정상정으로 수정 후에는 아래처럼 정상 출력(작동) 되는 것을 볼 수 있습니다.
이번 글에서는 노드레드(Node-RED)에서 플로우를 작성하기 위한 기본 단위인 노드에 대해 설명 주요 노드를 중심으로 설명을 드리려고 하며, 이를 그룹별로 정리한 노드 그룹(Group)에 대해 설명하고자 합니다.
아래는 노드래드를 실행하면 보이는 좌측 팔레트(Palette Side) 영역에 보이는 노드와 기본 노드 그룹에 대한 설명을 표로 정리하였습니다.
이 노드는 Node-RED를 처음 실행하면 보이는 기본 그룹이며, 팔레트 관리 메뉴에서 추가적으로 필요한 노드를 라이브러리 검색으로 검색하여 추가시킬 수 있습니다. 아래는 가장 많이 추가해서 사용되는 Dashboard 노드 그룹과 Raspberry Pi 노드 그룹입니다.
2. 핵심 노드 설명
① Inject 노드
인젝트(Inject) 노드는 작업영역에 배치하면 Time Stemp(타임스템프)로 표시되는 노드이며, 좌측에 있는 버튼을 눌러 수동으로 플로우를 발생시킬 때 사용할 수 있는 노드입니다. 또는 일정한 시간 간격(인터벌)으로 플로우를 발생시킬 수 있습니다.
또한 아래처럼 지정한 시간 간격, 일시 형태로도 설정이 가능합니다.
전달하는 기본 형태는 msg.payload와 msg.topic을 설정할 수 있는데, 메시지 타입을 숫자, 문자열(String), Josn 타입 등 다양하게 전달할 수 있습니다.
그리고 화면 아래 '+추가' 버튼을 클릭하면, 메시지를 추가하거나 삭제 그리고 메시지의 타입을 선택할 수 있습니다.
inject 노드에서 전달할 수 있는 메시지의 주요 타입(속성)은 아래와 같습니다.
② 디버그(Debug) 노드
디버그 노드는 아두이노IDE로 예시를 들자면 시리얼 모니터와 같은 기능을 하는 노드로 이해하면 됩니다. 플로우 사이에 이동되는 메시지를 파악하거나 탐색하기 위해 많이 사용되는 노드입니다. 편집기 화면에서 디버그 내용을 보기 위해서는 측면영역(Side Bar)에 있는 debug 탭을 클릭하면 그곳으로 출력됩니다.
만약, 시스템 콘솔 (system console)로 출력을 선택하면, 아래처럼 Node-Red를 실행시킨 콘솔(터미널) 화면으로 출력 됩니다.
또한, 노드 상태(node status)창으로 출력을 설정할 경우 플로우 작업영역의 노드 아래에 32 character까지 출력해 줍니다.
그리고 이 옵션들은 중복해서 적용할 수 있습니다. (동시 출력 가능함) 그리고 이과정에서 디버그 노드는 앞선 글에서도 다루었지만, 활성화 또는 비활성화할 수 있는데요, 필요치 않은 경우 비활성화시켜놓다가 다시 체크해 볼 상황이 되면 활성화시켜 확인해 보는 식으로 하면 편리하게 디버그 노드를 활용할 수 있습니다.
③ 함수(function) 노드
함수 노드는 전달 받은 메시지를 JavaScript를 활용하여, 처리하고 처리된 결과를 뒷 단의 노드로 전송할 수 있습니다. 사용자가 원하는 기능을 정의한다고 생각하면 됩니다.
예를 들어 인젝트 노드에서 'Hello World!'라는 문자열을 받아서 문자열 전체 개수를 카운트하여 전달할 수 있습니다. 아래 이미지를 보면, 공백포함하여 정확히 '12'가 카운트되어 전달되는 것을 볼 수 있습니다.
예제 1) 전달 되는 메시지(Hello World!)의 문자열 길이를 출력하는 함수(function) 넣기
▷ Function 함수 내용 : var msg= { msg.payload.length ); return msg;
예제 2) 다중 함수를 구성하여 기본 전달 메시지(Hello World!)와, 설명 문자열 출력과 전달되는 문자열의 길이를 출력하는 3중 출력 함수 Json코드 넣기.
이때, 함수(function) 노드의 설정창의 Setup탭에서 함수 노드 수를 3개로 변경해 주어야 합니다.
그럼, 아래와 같이 디버그 창으로 동시에 원하는 3가지 형태의 출력 결과를 얻을 수 있습니다.
또한, if 조건문을 넣어 원하는 입력일 경우 그대로 출력하고 그렇지 않을 경우 에러 메시지 등과 같은 것을 출력하는 등, 좀 더 다양하게 활용할 수 있습니다.
① 원하는 입력('Hello World!')이 들어오면 설정한 대로 출력합니다.
② 만약 원하지 않는 입력('Nice World!')이 들어오면 다시 확인할 수 있도록 메시지를 출력할 수도 있습니다.
위에서 입력한 function 코드는 아래와 같습니다.
var msg2 = { payload: "메시지의 총길이는:" }; var msg3 = { payload: msg.payload.length }; var msg4 = { payload: "입력문자를 확인하세요!"}; if (msg.payload == "Hello World!") { return [msg, msg2, msg3]; } else { return [msg4]; }
예제 3) 하나의 디버그 노드로도 여러개의여러 개의 메시지를 순차적으로 출력할 수 있습니다. (한 번의 인젝션으로 여러 개의 메시지를 출력할 수 있음)
아래 function 내용을 참고하세요.
또한, return 에서 대괄호 [ ]는 배열을 의미합니다. 따라서, function 노드의 Setup에서 출력수를 2로 하고 디버그를 하나더 연결 후 아래와 같이 msg, msg1과 msg2, msg3를 배열의 요소로 따로 분류하면 각각의 디버그 노드로 분리되어 출력되는 것을 볼 수 있습니다.
예제 4) 이벤트 로깅
필요할 때마다 콘솔을 통해 무언가를 기록해야 하거나, 특정 노드에서 주의(경고)나 에러(오류)가 발생하는 상황에 대해 메시지를 출력하도록 할 수 있습니다. function 노드에 아래와 같이 코드를 입력하고 실행시켜 보면, 이벤트 로깅이 되는 것을 볼 수 있습니다. 단, node.log ()의 경우는 사이드바로는 출력되지 않고 콘솔로만 출력됩니다.
node.log("로그 기록입니다.");
node.warn("주의 경고 사항발생!");
node.error("에러 발생~!");
그리고 이벤트 함수에 직접 메시지를 입력할 수도 있지만 아래처럼, 변수를 지정해서 할 수도 있습니다. var msg1 = { payload:"로그 기록입니다."}; var msg2 = { payload: "주의 경고 사항발생!" }; var msg3 = { payload: "에러 발생~!" }; node.log(msg1.payload); node.warn(msg2.payload); node.error(msg3.payload, msg3); return [[msg1, msg2, msg3]];
아래 이미지를 보면, 이벤트 로깅 함수에의해 발생되는 것(분홍색 표시)과 일반 메시지로 출력되는 것(주황색 표시)의 차이를 구분하실 수 있을 거예요.
④ Catch 노드
catch 노드를 통해서는 노드 전체나 특정 노드에서 발생하는 에러가 있을 경우 이벤트 메시지를 발생시키도록 할 수 있습니다.
⑤ Change 노드
Change 노드는 Function노드에서 처럼 JavaScript 코드에 의존하지 않고 사용할 수 있는 노드로서, Node-RED에서 자주 사용될 수 있는 기능인, payload값을 변경하거나, 설정, 삭제, 이동 같은 작업들을 처리해 줄 수 있는 노드입니다.
Change노드의 설정으로 들어가보면 4가지 속성을 선택할 수 있는데요, 각각의 예시를 들어 볼게요.
예제 1) 값의 대입 (Set) 속성 Change노드의 설정부분에서 "값의 대입(Set)"으로 놓고 대입하고자 하는 값('Welcome!')을 입력해 놓으면, 인젝터에 입력값이 없는 경우에도 특정 값을 대입(설정,Set)시킬 수 있습니다.
예제 2) 값의 치환(Change) 속성
치환 속성은 예를들어 인젝트 노드로부터 입력되는 값에서 특정 문자열을 검색하여 바꾸고자 하는 문자열로 변경해 주는 속성입니다.
"Hello World!" 문자열에서 Hello를 검색하고 이 문자열 대신 "Nice"로 치환하여 출력 하도록 합니다. 그래서 결국 "Hello World!" 문자열은 Change 노드를 거친 결과 값은 "Nice World!"로 바뀌어 출력되게 되는거죠.
예제 3) 값의 삭제(Delete) 속성
값의 삭제(Delete)속성은 입력되는 payload 값을 삭제하도록 합니다. 아래처럼 Change의 속성을 값의 삭제로 변경하게 되면,
Change 노드를 거친 "디버그 2" 노드로는 출력값이 나오지 않게 됩니다.
예제 4) 값의 이동(Move) 속성
값의 이동은 이동(Move)이라는 말보다는 추출이라는 말로 생각하면 더 빠르게 이해할 수 있는데요, 예를 들어, Raspberry Pi에 연결 된 dht11 온도센서가 있다면, 센서로부터 전달 받는 데이터(payload)는 오브젝트(객체)로 전달 받게 되는데요 즉, dht11이라는 정보 객체 속에는 온도값과 습도값의 데이터 집합(뭉텅이) 형태로 전달 받게 되는데, 실제로 활용하고자 하는 온도(Temperature) 값이나 습도(Humidity)값을 추출(이동-Move)해야 활용할 수 있게 되겠죠? 따라서 이런 상황에서 아래처럼, 이동(Move) 속성을 이용하여 플로우를 구성하여 사용할 수 있습니다.
노드레드는 플로우(Flow) 즉, 흐름 기반의 프로그래밍으로써 시각적 표현에 매우 적합하고, 복잡하고 어려운 프로그래밍 사용을 자제하고, 사용자가 보다 쉽게 접근할 수 있도록 설계된 모듈입니다. 노드레드에서의 각 노드는 마치 블록코딩의 대명사인 스크래치의 블록과 유사한 개념으로 노드레드는 다수의 노드를 이용하여 각 노드별 원하는 요구사항에 맞는 플로우를 만들 수 있으며 이를 아두이노, 라즈베리파이 및 각종 센서, 디스플레이 등 제어모듈과 같은 하드웨어와 연결하여 시각적으로 보여주거나 제어가능하도록 ioT 시스템을 쉽게 구축할 수 있는 특징이 있습니다.
아래는 노드레드 Flow 구성 및 편집 예시입니다.
아래는 노드레드 UI 예시입니다.
아래는 노드레드 UI 예시입니다.
아래는 노드레드 UI 예시입니다.
기본 화면 구성은 아래 이미지와 같습니다.
① 노드레드 편집기 화면 구성
노드레드는 크게 4개의 영역으로 구성되는데요,,
→ ① 상단(Header) 영역에는 배포(Deploy) 메뉴와(Deploy) 팔레트관리와 같은 설정 메뉴가 배치되어 있습니다.
→ ② 팔레트(Palette) 영역은 각종 기능 구현해 주는 노드 블록들로 배치되어 있습니다.
→ ③ 측면(Sidebar) 영역은 노드에 대한“정보/도움말/디버그/노드설정”에 대한 메뉴로 구성되어 있습니다.
→ ④ 작업공간(Workspace) 영역은 노드들을 배치하고 이어주며 함수 노드에 프로그래밍을 하는 영역입니다.
① 상단(Header) 영역에 있는 배포(Deploy) 메뉴는 작업공간영역에서 완성된 노드들의 플로우를 실행시키는 역할을 합니다. 만약 UI(User Interface)가 있는 플로우라면 “http://localhost:1880/ui” 주소를 통해서 UI를 확인하거나 실행할 수 있습니다. 그리고 배포하기 옆에 세줄로 표시된 부분을 클릭하면, 라이브러리 추가 등 팔레트관리와 같은 설정 메뉴가 있는데, 제세한 내용은 이후 계속 설명이 됩니다.
② 팔레트(Palette) 영역은 작업영역 좌측에 있으며, 기본적으로 6개 그룹(카테고리)의 메뉴로 구성되어 있습니다. 여기에서 필요한 노드 블록을 선택하여 작업영역으로 끌어다 놓는 식으로 작업합니다. 기본 그룹 외에 추가적으로 팔레트관리 메뉴에 있는 라이브러리 추가를 통해 대시보드(dashboard)나 라즈베리파이(Raspberry Pi) 노드 그룹 같은 것들을 추가해서 사용할 수 있습니다. 대략 2,700개 이상의 모듈을 추가 설치가 가능하며, 사용자 정의로 직접 모듈을 등록하고 관리할 수 있습니다.
③ 측면(Sidebar) 영역은 노드 편집기 내의 유용한 도구를 제공하는 패널로 구성되어 있는데요, Information탭/Help탭/Debug탭/Configuration nodes탭/Context Data탭/Dashboard탭 , 6개의 탭으로 구성되어 있습니다.
주로 Debug탭을 많이 활용하게 되는데요, 작업공간에서 사용한 디버그 노드의 출력을 확인할 수 있습니다. 측면영역은 작업영역 확보를 위해 숨김/보이기 처리할 수 있으며, (Ctrl+Space) 단축키도 할당되어 있습니다. 가령, "Hello world!"와 같은
④ 작업공간(Workspace) 영역은 필요한 노드 블록을 끌어다 놓고 블록들 사이의 플로우(Flow)를 연결하며, 함수 노드의 경우 Javascript로 프로그래밍을 추가해 넣을 수 있는 작업 공간입니다. 노드들을 클릭하면 세부 설정을 변경하거나 코드를 입력할 수 있는 메뉴가 표시됩니다. 노드레드에서 노드는 플로우를 작성하는 기본 구성단위 요소입니다.
작업공간 상단 우측에 보면 + 표시와 서브메뉴가 보이는데요, 이를 클릭하면 플로우 페이지를 추가하거나 보이기 감추기 등을 할 수 있습니다.
또한, 불필요한 플로우 삭제는 아래처럼, 플로우를 더블클릭 후 나타나는 메뉴에서 플로우를 삭제할 수 있습니다.
그럼, 사용법을 익히기 위해 먼저 간단한 플로우를 작성해 볼게요.
▶ Hello world ! 문자 출력해 보기
프로그래밍을 배울 때 제일 처음 출력해 보는 것이 “Hello world!”인 것은 이제 국룰? 인데요, 여기서도 그 문장을 출력해 볼게요.
먼저 위 이미지처럼, 공통노드(common node) 그룹에서 inject(타임스탬프)를 플로우 작업화면으로 끌어다 놓으세요. 그리고, 타임스탬프노드를 더블 클릭하면 설정창이 열리는데, 아래 ②번 부분을 클릭하여 전달할 메시지 타입을 String(문자열)으로 선택합니다.
그런 다음, 아래 ④번과 같이 "Hello world !" 메시지를 입력하고 완료 버튼을 눌러주세요.
이제 공통그룹에서 debug 노드를 ⑤ 위치에 끌어다 놓으세요.
그리고 "Hello world! " 노드 끝에 있는 포인트를 마우스로 드래그하면 연결할 수 있는 주황색 선이 나오는데요, 이를 debug노드의 연결점에 이어 붙여주세요. (아래 이미지 참조)
각각의 노드 오른쪽에 보면, 파란색 점이 있는 것을 볼 수 있는데요, 이는 현재 새로운 노드가 삽입되었거나, 변경 사항이 발생한 표시이며, 아직 배포(적용)되기 전이라는 뜻입니다. 그럼, 이 상태에서 상단메뉴에 보이는 "베포하기" 버튼을 눌러주세요.
그럼, 아래처럼 파란색 점이 사라진 것을 볼 수 있습니다. 이제 "Hello world!"라는 전달 내용(payload)을 가진 타임스탬프 노드의 왼쪽 버튼 부분(Inject)을 클릭하면 디버그 노드로 전달이 이루어집니다. 이윽고 우측 Sidebar의 디버그 창으로 "Hello world !"가 출력되는 것을 볼 수 있게 됩니다. 또한, Inject 버튼을 여러 번 클릭하는 만큼 출력이 됩니다.
참고로, 노드레드의 언어 설정은 기본적으로 영어, 독일어, 일본어, 러시아어를 지원하며, 한글도 지원하지만 간혹 한글 표현이 조금 어색한 경우도 있습니다. 언어 설정 메뉴는 상단메뉴의 "배포하기" 버튼 오른쪽에 있는 삼선을 클릭 후, 창 탭을 클릭하면 나옵니다.
그리고 디버그 창에 출력된 내용이 지저분하거나 하여 삭제하고 싶을 때는 아래 휴지통 버튼을 클릭하면 됩니다.
참고로 디버그(debug) 노드를 클릭 후 보이는 설정메뉴 하단에 "ㅇ사용가능" 표시가 있는데요, 이를 클릭하면 "Ø사용불가능"으로 표시가 바뀌며, 해당 디버그 노드는 실행을 시켜도 디버그 창으로 메시지 출력이 되지 않도록 사용이 중단됩니다.
아래 이미지처럼, 해당 노드는 점선으로 처리되며, Inject 버튼을 눌러도 아무것도 출력되지 않게 됩니다.
노드의 삭제는 삭제하고자 하는 개별 노드를 선택한 다음 Delete 키로 쉽게 삭제 가능합니다. 노드간 연결된 선도 마우스로 선택 후 Delete 키로 삭제할 수 있습니다.
그럼 "Node-RED의 시작!" 첫 글은 여기까지 하고, 다음 게시글에서 계속 이어가도록 하겠습니다.
노드레드는 플로우(Flow) 즉, 흐름 기반의 프로그래밍으로써 시각적 표현에 매우 적합하고, 사용자가 보다 쉽게 접근할 수 있는 모듈입니다. 노드레드는 다수의 노드를 이용하여 각 노드별 원하는 요구사항에 맞는 플로우를 만들 수 있으며 이를 아두이노, 라즈베리파이 및 각종 센서, 디스플레이 등 제어모듈과 같은 하드웨어와 연결하여 시각적으로 보여주거나 제어가능하도록 ioT 시스템을 쉽게 구축할 수 있는 특징이 있습니다.
[ Node-red 예시 ]
바로 위 이미지에서도 볼 수 있듯이 그래픽 기반의 GUI 환경으로 인터넷에 연결된 장치들을 모니터링하거나 컨트롤 할 수 있는 웹 앱 대시보드를 보다 쉽고 빠르게 구성할 수 있으며, 예를 들어, API를 활용한 일기예보, 버스나 지하철 시간표, 뉴스 기사 및 IoT 홈 네트워크 등 활용가능한 범위도 다양합니다. 구동을 위한 서버가 필요한 경우에는 라즈베리파이로 저비용으로 간단히 해결할 수 있습니다.
Node Red는 2013년 초 IBM의 Emerging Technology Services 그룹의 Nick O'Leary와 Dave Conway-Jonse의 부수 프로젝트로 개발 시작 되었고, 2016년 10월 JS Foundation의 창립 프로젝트 중 하나가 되면서 오픈 소스로 개발되었습니다.
Node Red는 가벼운 Node.JS를 기반으로 하기 때문에 라즈베리파이와 같은 낮은 하드웨어 및 열악한 클라우드 네트웍 환경에서도 실행이 가능합니다. 또한 Node의 패키지 저장소에 있는 22만 개 이상의 노드 패키지 모듈을 활용할 수 있는 장점이 있습니다.
Node Red에서 생성된 플로우는 JSON 형식의 데이터를 사용하여 저장되며, 자신이 디자인한 플로우를 JSON 포멧으로 온라인상에 공개하거나 다른 사람과 쉽게 공유할 수 있도록 디자인되었습니다.(Node-red 공홈 또는 깃허브 등). 이는 자신이 힘들게 처음부터 모든 Node를 다 구성할 필요 없으며 다른 사용자가 공유한 노드를 쉽게 추가 함으로써, 쉽고 빠르게 시스템을 구축할 수 있는 장점이 있습니다.
노드레드는 다양한 환경에서 설치 및 활용할 수 있는데요, 라즈베리파이, 비글본 블랙과 같은 저비용 하드웨어 뿐아니라, IBM클라우드, 아마존 웹 서비스, 마이크로소프트 애저와 같은 클라우드기반에서도 잘 작동됩니다.
그럼, 노드레드를 사용해보기에 앞서, Node.JS의 설치가 필요합니다. 링크 :https://nodejs.org/ko/download 링크에서 설치하려는 시스템에 맞는 Node.JS를 설치하세요. 여기서는 라즈베리파이에 설치하는 것으로 진행합니다만, 윈도 PC에서 라즈베리파이를 원격으로 접속해서 제어하기를 원한다면 윈도용 Node JS를 윈도 PC에 설치할 수도 있습니다. 혹은 라즈베리파이이와 하드웨어 모듈 같은 연결을 활용하지 않고 윈도용 NodeJS를 단순히 윈도 PC에 설치하여 Node-Red를 활용할 수도 있습니다.
참고로, 각 노드에서 함수 코드를 만들 때에는 자바스크립트(Java Script)를 기본 코딩 언어로 활용하게 됩니다.
그럼, 본격적으로 Node-Red의 세계로 출발해 보아요~!
※ 라즈베리파이에 Node-Red 설치하기
15년도부터 라즈베리파이 OS(라즈비안)에는 NodeJS와 Node-Red가 기본으로 설치가 돼있습니다. 즉, Node-Red와 업데이트만 진행하면 됩니다. 하지만 이것과 상관 없이 아래 명령어를 이용하여 설치하면 기존 설치된 혹은 구버전 NodeJS와 Node-RED를 자동 제거부터 하고 설치가 진행되니 그대로 진행해도 됩니다.
그럼, 아래처럼 최신 버전의 Node JS (v16.19.1)와 Node-RED (v3.0.2)가 설치됩니다. 만약 구버전이 있다면 자동 삭제 됩니다.
▶ 부팅시 Node-RED가 자동으로 실행되도록 하려면 아래 명령어를 실행해 주면 됩니다.
$ sudo systemctl enable nodered.service
- 만약 자동실행 설정을 해제하려면 아래 명령을 입력하세요.
$ sudo systemctl disable nodered.service
▶ node-red의 서비스 시작은 아래 명령어로 시작하면 됩니다. Node-RED의 서비스 시작은 터미널에서 명령어를 입력하거나, 라즈베리파이 메뉴에서(개발 》Node-RED) Icon을 클릭하여 실행 가능합니다. 명령어로는 $ node-red 또는 $ node-red start 하나를 입력하면 됩니다.
$ node-red start
▶ 이제 웹브라우저를 열어 Node-Red가 실행될 혹은 작업화면은 라즈베리파이의 IP 주소를 입력하면 되는데요, 기본 설치되어 있는 크롬미움 Chromium (크롬의 리눅스 버전)이나, 파이어 폭스(Fire Fox Web) 웹브라우저에서 아래 주소를 입력하면 됩니다. http://localhost:1880 또는 http://localhost:1880/ui/
혹은 ip를 직접 입력하여 http://192.168.138.130:1880 또는 http://192.168.138.130:1880/ui로 입력하면 아래처럼 Node-Red 에디터(편집) 창이 나타나는 것을 볼 수 있습니다. 이 공간에서 플로우를 개발한다고 생각하면 됩니다.
▶ Samba 툴을 설치하여 윈도우 PC에서 "원격 데스크톱 연결"을 통해서도 가능합니다. 라즈베리파이 원격 데스트탑 연결 내용은 아래 게시글을 참고해 주세요. ▷ 윈도PC에서 라즈베리파이 원격 제어하기 ( https://rasino.tistory.com/329 )
그리고 Node-RED 네트워크 사용자 추가나 Node-RED 기본 환경설정은 아래 명령어로 설정해 주면 되는데요,
$ node-red admin init
아래와 같은 내용이 나타나며, 아래 경로의 settings.js 파일에 설정내용이 저장됩니다.
/home/pi/.node-red/settings.js
엔터를 하면, 다음으로 진행이 되는데요, Yes와 No 메뉴 혹은 기타 선택 메뉴가 나타나면 키보드 화살표 위/아래 키로 선택해 주면 됩니다.
① Do you want to setup user security? Yes → User Security : id (예시: pi )와 password (8자 이상, 예시: raspberry) 입력 후 엔터, → 유저 추가 선택 (여기서는 No) 선택 (ID와 패스워드는 잘 기억해 두세요) → User permissions?full access를 선택 → Add another user?No 선택 (추후 선택 가능)
② 프로젝트 선택 : Do you want to enable the Projects feature?No 선택
③ Flow 파일 설정: Flow File settings?flows.json (기본값으로 저장)
④ 테마 에디터 및 텍스트 에디터 설정 : Select a theme for the editor default? 두 가지 모두 default로 설정
⑤ 외부 모듈 받아들일지 여부? : Allow Function nodes to load external modules?Yes (기본값으로 저장)
이와 같이 설정하면 무난하며, 추후에 명령어로 다시 변경 가능합니다.
이렇게 설정하고 재부팅하게 되면, 로그인 창이 뜨는데요, 조금 전에 만들어준 계정으로 로그인하면 됩니다.
아래는 NodeRED를 실행하고 간단한 문자(String) 출력과 함수 노드를 이용한 숫자 카운트를 해보는 모습입니다.
물론 같은 WiFi망 혹은 내부 네트워크에서 접속하는 것이라면, 아래처럼, 윈도 PC에서 라즈베리파이 주소를 입력하면 Node-RED 편집화면에 접속하여 실행시킬 수 있습니다. ( 예시, http://192.168.138.130:1880/ )
단, 윈도에서 노드레드를 실행하기 위해서는 윈도에 윈도용 Node JS가 설치되어 있어야 합니다. 링크 : https://nodejs.org/ko/download (LTS 안정화 버전을 다운로드하세요) node js 설치 확인 및 버전확인은 아래처럼 가능하며, 윈도에 설치한 NodeJS의 버전 확인은, 윈도》실행》 cmd 명령 프롬프트 실행 하여, node -v로 실치 및 버전을 확인할 수 있습니다. 또한, 라즈베리파이에서는 터미널에서 같은 명령어로 확인 가능합니다.
참고로, 윈도에서 Node-RED 실행은 아래 이미지와 같이 "node-red"를 입력하면 됩니다. Node-RED의 버전확인도 가능하고 Starting flows라고 표시되는 것을 확인할 수 있습니다.
마지막으로, ▶ Node-RED의 플로우 편집화면은 http://localhost:1880 또는 http://192.168.138.128:1880 형태의 주소로 접속하면 되며, ▶ Node-RED의 Dash Board(대시보드)결과 출력 혹은 컨트롤 화면은 주소 마지막에/ui를 붙인 주소를 입력하면 됩니다. (예시, http://localhost:1880/ui 또는http://192.168.138.128:1880/ui )
그럼, 차후에 Node RED를 이용해서 라즈베리파이에 연결된 모듈이나, MQTT 브로커와 연동된 통신 실습을 올려볼 예정입니다. 감사합니다.
아두이노 IDE 등을 사용하여 컴파일할 때 코드에서 사용되는 라이브러리를 분명히 제대로 설치하였음에도 불구하고, 아래처럼 " xxx.h: No such file or directory " 등의 에러를 내는 경우가 종종 있습니다.
또한 이전에 문제 없었던, WiFi.h 및 DHT.h 등 특정 라이브러리가 복수개로 충돌된다는 메시지도 보이는데요, 갑자기 이런 충돌 메시지를 받게 되면, 당황하여 괜히 잘 사용하던 기존 라이브러리를 삭제하거나 하여 다른 아두이노 코드 실행에도 악영향을 주게 됩니다.
실제 필요한 라이브러리는 제대로 설치가 된 상황이고 기존 라이브러리도 충돌 되지 않는 상황인데요, 문제의 원인은 우습게도, 아두이노 IDE를 사용할 때 예를 들어, 직전까지 우노 보드를 사용하다가 갑자기 D1보드나 esp32 보드 등 보드를 변경하였을 때, 아두이노 라이브러리의 보드 선택을 바꾸어 주지 않았을 경우 종종 이런 문제가 발생하게 됩니다. 실제 라이브러리 문제가 아님에도 말이죠. 따라서, 아두이노 IDE를 사용할 때 항상 컴파일 하기전에 사용할 보드선택을 먼저 하는 습관(체크)을 들이시면 좋을 것 같네요. 만약 그렇지 않고 자칫 해서 충돌 문제로 생각하고 이것 저것 라이브러리를 삭제하거나 건드려 놓아 엉키게 되면 또 이를 되돌려 놓는 것에도 진을 빼야 할 수도 있으니 주의하면 좋을 것 같네요.
아래 이미지는 보드 우노 보드 선택 시 에러가 났다는 것과 USB에 연결된 보드를 제대로 선택한 후 곧바로 에러 메시지가 사라지고 컴파일이 된 이미지입니다.
이번 시간에는 Blynk2.0 업그레이드 강의 네 번째 시간으로 저렴하고 강력한 ESP32 보드를 이용하여 LED와 LED 전등 & 콘센트 제어를 통한 가전기기들을 제어해 보도록 하겠습니다.
보드의 입출력 포트에 연결된 LED제어는 물론이고, 릴레이를 사용하면, 220V 전기를 사용하는 LED 전등 제어도 가능합니다. 뿐만 아니라, 릴레이 모듈을 Outlet 콘센트에 직접 연결해 놓으면 220V 전기를 사용하는 대부분의 가전제품을 On/Off 제어할 수 있습니다.
Blynk 서비스가 2.0으로 업그레이드 됨에 따라, 스마트폰뿐 아니라 웹(Web) 페이지에서도 제어가 가능하게 되어 더욱 활용성이 커졌습니다. 앱과 서로 실시간 연동은 당연히 되는데요, 이번 영상을 통해 자신만의 멋진 IoT 시스템을 만들어 보세요~
참고로, 이번 실습을 위해서는 Blynk 서비스 가입 및 기본 사용법 영상을 함께 참고하시면 좋습니다.
그럼 먼저, ESP32에 대해 간략히 알아볼게요
ESP32 칩은 Espressif Systems사에서 개발한 마이크로 프로세서인데요, ESP32 칩을 활용할 수 있도록 플래시 메모리 등의 부품을 넣어 만든 칩셋을 사용하게 됩니다. 이런 칩셋의 종류는 몇 가지 있지만 보편적으로 많이 활용 되는 칩셋이 ESP-WROOM-32입니다.
(아래) 또한 이런 칩셋을 이용해서 제품개발에 활용하기 좋도록 다양한 형태의 마이컴 보드들이 출시되었습니다.
그중에서 가장 기본 모델인 Do it DevKiT V1 보드를 가지고 실습을 진행합니다.
(아래) ESP32 보드의 가장 큰 특징은 블루투스와 WiFi를 이용해서 각종 기기들과 통신이 가능합니다. 이를 이용하여 저렴한 소형 ioT 기기 및 무선 제어 시스템을 구축할 수 있는 큰 장점이 있습니다.
(아래) 그럼, 일반적인 ESP32 보드의 스펙을 다른 보드와 함께 살펴보겠습니다.
보이는 것처럼 ESP32는 다른 보드들에 비해 뛰어난 기능을 제공하고 있습니다. Dual Core 이면서, 블루투스 기본 4.2 버전에 저전력 기능인 BLE까지 지원하고 있고, 많은 수의 GPIO(입출력) 핀과 기능 핀을 제공하고 있고 홀센서도 내장되어 있습니다. 가격 또한 저렴하여, ESP32 칩셋을 이용한 다양한 ioT 관련 장비들이 만들어지고 있습니다. 또한, 기존 아두이노 IDE 플랫폼을 사용하여 동일하게 개발할 수 있기 때문에 쉽게 사용 가능합니다.
① 이 번 실습의 결과물 ② 실습의 준비 ③ 회로 실습을 위한 연결 도면 ④ 실습을 위한 아두이노 IDE 필수 라이브러리 설치 ⑤ 실습 예제 파일로 테스트 ⑥ Blynk 2.0 웹 대시보드 만들기 (DataStream & Web Dashboard) ⑦ 아두이노 코드 토큰(Auth Token) 값 수정 후 업로드 하기 ⑧ WiFi 핫스팟 연결하여 동작시키기 ⑨ APP(앱) 제어 화면 만들기 & 동작 ⑩ IoT Outlet 콘센트로 가전기기(선풍기 예시)를 웹과 앱에서 제어해 보기 ⑪ 문제해결
【 ① 이 번 실습의 결과물 】
【 ②~③ 실습 준비와 회로 실습용 연결 도면 】
실습에 사용될 부품에 대한 자세한 내용은 아래 링크를 참고해 주세요 아래는 실습을 위한 연결 도면입니다. 회로는 크게 LED와 같은 부품을 GPIO포트로 직접 제어하는 기본 실습 부분과, 릴레이 모듈을 통해 220V로 동작되는 가전기기를 제어하는 응용 부분으로 되어있습니다.
[도면 1] LED Lamp 직접 연결한 도면,
지금처럼 전등 연결선을 작업하여 제어할 수도 있으나, 이는 가전기기마다 케이블 작업을 해야 하는 불편함이 있기 때문에 아래 '도면 2'처럼 콘센트(Outlet)를 개조하여 연결하게 되면, 가전기기마다 별도의 케이블 작업 없이 콘센트에 전자제품을 꽂는 것만으로 쉽게 제어할 수 있게 됩니다. 연결도에 보이는 재료를 준비하여 브레드보드에 연결해 주세요. (주의) ESP32 보드 중 DEVKIT V1이 아닌 경우, 핀 수 및 핀 배열이 다르므로 연결 시 확인이 필요합니다.
[도면 2] 콘센트(Power Outlet)에 릴레이(Relay)를 연결한 도면
LED와 같은 부품은 GPIO 출력 포트로 단순히 High, Low와 같은 신호로 제어가 가능합니다. 하지만, 220V 레벨의 큰 전기는 릴레이라는 부품(모듈)을 사용해야 제어할 수 있습니다. 도면의 릴레이는 LOW 신호에 동작하는 릴레이인데요(LOW level trigger), 동작을 위한 릴레이의 완전한 LOW 레벨 처리를 위해 트랜지스터(TR)를 사용하였습니다(FET 대체가능). D14로 신호가 출력되면 TR의 스위칭 작용으로 GND가(LOW) 릴레이의 IN으로 연결되는 구조입니다. 그럼, 실습에 사용될 LED 램프 소켓과 릴레이가 결합된 제어용 콘센트 제작 방법은 아래 링크를 통해 확인해 주세요. ★☆★ ④ 【 IoT 실습을 위한 Lamp & 콘센트 만들기 】 ★☆★ - 유튜브 자료 :https://youtu.be/5QBnhgkfkhE
【 ④ 실습을 위한 아두이노 IDE 필수 라이브러리 설치 (환경설정) 】
이번 챕터에서는 ESP32 보드 사용을 위한 전반적인 환경설정에 대해 다루고 있습니다. 이것이 ESP32 보드입니다. (DEVKIT V1 버전).
다른 버전의 esp32 보드와 기능과 성능은 거의 유사하지만, 핀 수나 조합이 조금씩 다릅니다. 다르게 말해서 esp32 보드는 여러 버전이 존재하지만, 사용법은 거의 유사합니다. DEVKIT V1 보드는 PC와의 통신을 위해 Silicon Labs사의 CP2102 통신칩을 사용하고 있습니다.(아래)
따라서, PC에 CP2102 통신칩 인식을 위한 드라이버를 먼저 설치해 주어야 보드를 인식할 수 있습니다. 제어판 혹은 '윈도 + X' 키를 눌러 '장치관리자'를 열어 보세요. CP2102 칩 드라이버가 문제없이 설치된 PC에는 이렇게 아래와 같이 COM 포트가 할 당 되는 것을 볼 수 있습니다.
만약 기존에 다른 보드에 대한 URL이 이미 존재한다면, 우측에 있는 윈도창 모양의 아이콘을 누르면, 팝업창이 하나 더 뜨는데요, 거기 기존 링크 아래에 추가로 붙여 넣기 하면 됩니다.
① 이제 Blynk 서비스를 이용하기 위해서는 , 아두이노 IDE의 "라이브러리 매니저"창에서 아래와 같이 'blynk'로 검색하여 라이브러리를 설치해 주세요. (이미 설치되어 있다면, 생략하면 됩니다)
② 툴 》 보드 》 보드매니저에서 "esp32"를 검색하여 패키지를 설치해 주세요
그럼 이렇게, ESP32 관련 보드 목록을 볼 수 있습니다. (아래)
목록에서, DOIT ESP32 DEVKIT V1을 선택해 주세요. 또한, 보드가 연결된 통신포트를 선택하세요.
【 ⑤ 실습 예제 파일로 테스트하기 】
[ 기본 실습 ]
▶ 파일 > 예제 > 01.Basics > Blink 예제를 선택하여 보드에 있는 LED를 깜빡여 볼게요.
보드 설정과 포트 설정을 한 번 더 확인하고 우선 업로드(&컴파일) 해 볼게요. (※ 주의!) esp32 보드에 코드를 업로드할 때는 보드에 있는 Boot 버튼을 몇 초간 눌렀다 떼어야 업로드가 시작됩니다.
[기본 실습 예제 파일 다운로드 ] 1. Blink (빌트인 LED 기본 깜빡이기)
2. GPIO23(D23) 포트에 직접 LED를 연결하고 깜빡이도록 하기
LED를 연결하고, 코드내용을 아래처럼 23으로 바꾸어서 실행해 보세요.
ESP32 보드도 기본적인 사용법은 아두이노와 동일하기 때문에 아두이노를 사용해 보았다면 쉽게 다룰 수 있습니다.
▶ WiFi 스캐닝 실습
그럼, ESP32의 핵심 기능인 WiFi를 사용해 볼 텐데요. 우선, WiFi 스캐너 예제를 통해서 WiFi 기능을 테스트해 볼게요.
아두이노 IDE 메뉴에서 예제 》 WiFi 》 WiFiScan 예제 파일을 불러옵니다. 이 예제 파일은 보드 주변에서 잡히는 WiFi신호를 스캐닝하여 보여주는 예제 파일입니다.
그다음, esp32 보드에 네트워크(WiFi)를 연결해 줄텐데요, 가장 편한 방법으로 폰의 핫스팟을 켜서 연결할 수 있습니다. 그럼 코드를 업로드하고 업로드 완료 되면, 시리얼 모니터를 열어서 확인해 봅니다. ( 마찬가지로, 코드 업로드 시에는 보드에 있는 Boot 버튼을 몇 초 길게 눌러주고, 코드 업로드 완료 후에는 재시작할 수 있도록 EN (enable) 버튼을 한 번 가볍게 눌렀다 떼주면 됩니다.)
[ WiFi Scan 코드 다운로드 ]
esp32의 WiFi 기능 테스트를 통해 주변 WiFi 신호를 스캐닝해 본 결과입니다. (아래)
【 ⑥ Blynk 2.0 웹 대시보드 만들기 (DataStream & Web Dashboard) 】
[ 응용 실습 ]
그럼, 본격적으로 esp32 보드에 회로를 구성하고 Lamp와 콘센트를 제어하는 실습을 진행해 볼게요.
준비 사항으로 Blynk.io 사이트에 회원가입 후, Cloud 제어화면(blynk.cloud)으로 접속을 해주세요. https://blynk.io & https://blynk.cloud
아래 연결도를 참고하여 연결해 주세요.
릴레이의 전원은 Vin핀을 통해 전원을 공급받을 수 있는데, 평소에는 Vin 핀은 보드를 동작시킬 수 있는 외부 전원공급 단자로 사용되기도 하지만, esp32 보드의 마이크로5핀 단자로 전원을 공급받게 되면, Vin단자로 5V(약 4.5v)의 출력이 나오게 되어 전원 Output 단자로 사용할 수 있게 됩니다.
회로 연결에 사용되는 브레드보드는 어떤 크기든 상관없고, 사이즈가 작다면 이렇게 두 개를 이어 붙여 사용할 수 있습니다. 다만 esp32보드의 폭이 다소 넓기 때문에, 브레드보드 하나를 사용하는 것보다 두 개 이상 붙여 사용하는 것이 작업상 편할 수 있습니다.
납땜을 제외하고 브레드보드에서 회로를 연결하는 방법에는 대략 아래 3가지 정도의 방법이 있습니다.
이 중에서 개인적으로 원하는 길이로 정확하게 잘라 쓸 수 있는 후크업(Hook-Up Wire) 와이어를 이용한 연결을 추천합니다. 이것은 회로를 더욱 간결하게 만들어 복잡한 회로도 파악하기 쉽도록 만들어 주며, 만들어진 결과물도 비록 납땜을 하지 않았지만, 단단히 잘 고정되어 있어 장기간 작품형태로 활용할 수 있어 좋습니다. 이때 이 세 가지의 선의 형태는 여러 가닥으로 뭉쳐진 연선이 아니라 하나의 단단한 단선이라는 것을 주의해 주세요. 일반적으로 브레드보드에 사용되는 단선의 내심 굵기는 22 AWG ~ 24 AWG 정도면 무난하게 사용할 수 있으며, 가급적 좀 더 굵은 22 AWG를 추천합니다. (AWG는 숫자가 작을수록 굵음)
아래는 회로 연결이 완성된 모습입니다.
콘센트(Outlet)의 전원을 연결하게 되면, 릴레이의 COM / NO 단자 쪽에 220V의 전기가 흐르기 때문에 손으로 직접 터치되지 않도록 감전에 주의해 주세요.
새 템플릿을 만들기 위한 기본 정보를 입력 및 선택해 주세요. HARDWARE에는 'ESP32' / CONNECTION TYPE에는 WiFi를 선택해 주세요
여기에서는 'Data Stream' 부분과 / Web Dashboard 부분만 설정해 주면 완성됩니다.
먼저, 아래는 Data Stream 부분을 설정해 주는 모습입니다.
아래처럼 LED1, LED2, Realy 이렇게 3개의 Data Stream을 만들어 주세요. 마지막에 Save 버튼을 눌러 마무리하면 됩니다.
'Data Stream'은 Blynk 웹(앱)의 버튼으로 제어하기 위한 입출력 핀의 설정을 해주는 것이며, 'web Dashboard'는 Blynk 웹을 통해 제어할 수 있는 버튼들을 디자인하는 메뉴입니다. 그럼, 이제, Web Dashboard로 가서 제어를 위한 버튼 설정을 해볼게요.
먼저 LED에 대한 버튼 설정입니다. 위 이미지처럼 LED 위젯을 적당한 크기로 배치해 주세요.
Data Stream 메뉴에서 설정해 놓은 항목이 자동으로 뜨기 때문에, 선택만 정확히 해주면 쉽게 설정 가능합니다.
Data Stream 메뉴에서 설정해 놓은 항목이 자동으로 뜨기 때문에, 선택만 정확히 해주면 쉽게 설정 가능합니다.
지금 설정하는 LED 위젯은 On/Off를 위한 확인기능이기 때문에, 이제 LED를 실제 켜고 끄기 위한 스위치를 설정해 볼게요.
그리고, LED 위젯과 마찬가지로 스위치(버튼) 위젯을 직접 끌어다 놓을 수도 있고, 어느 정도 설정된 위젯을 복제하여 좀 더 편하게 설정할 수도 있습니다. (아래)
아래와 같이 LED1 & Switch1 , LED2 & Switch2 위젯을 각각 배치해 주면 됩니다.
그럼 이제 릴레이(Relay)에 대한 위젯을 만들어 볼게요. 릴레이까지 다 동일한 방법으로 설정하게 되면 아래처럼 완성이 됩니다.
모든 위젯을 설정한 후에는 화면 우측 상단에 있는 Save 버튼을 반드시 눌러 주세요.
만약 다시 수정해야 한다면 이 버튼이 Edit 버튼으로 바뀌어 있을 것이고 따라서 Edit 버튼을 눌러 수정 후 다시 Save 하면 됩니다.
이렇게만 하면 템플릿은 완성이 됩니다.
Blynk를 활용하면 이렇게 복잡하지도 않고, 아주 쉽고 빠르게 웹 컨트롤 화면을 만들 수 있습니다.
【⑦ 아두이노 코드, 토큰(Auth Token) 값 수정 후 업로드 하기 】
그럼, 아두이노 IDE로 가서 핵심 응용회로를 위한 Blynk 파일을 열어 볼 텐데요, Blynk라이브러리를 설치하면, 함께 들어오게 되는 Blynk 예제 파일을 기본으로 조금만 수정해 주면, 제어용 코드가 쉽게 완성이 됩니다.
예제 》 Blynk 》 Boards_WiFi》 ESP32WiFi 예제를 클릭하여 여세요.
예제 파일을 열면 아래처럼 나타나는데요, 분홍 화살표 부분을 그 아래 이미지처럼 적절한 내용으로 바꾸어 주면 됩니다.
Blynk Cloud 사이트에서 아래 분홍색 부분에 해당하는 TEMPLATE_ID, DEVICE_NAME, AUTH_TOKEN 등을 복붙하면 됩니다.
【 아두이노 코드 다운로드 】
주변 WiFi 또는 스마트폰의 핫스팟을 관련 ID와 패스워드를 입력해 주세요. 그런다음, 통신포트와 보드 선택이 제대로 된 것인지 확인 후 코드를 esp32 보드에 업로드해 주세요. 코드 업로드 시, Connecting... 표시가 뜨면 esp32에 있는 'Boot'스위치를 눌러 주세요.
【⑧ WiFi 핫스팟 연결하여 동작시키기】
업로드 완료 후에는, 아두이노 IDE의 시리얼모니터 창을 열고서, esp32보드에 있는 'Reset'스위치를 눌러 esp32 보드를 재시작시켜줍니다. 그럼, 아래처럼, 스마트폰의 핫스팟으로 접속한 경우, 접속된 상황을 파악할 수 있습니다.
【⑧ WiFi 핫스팟 연결하여 동작시키기】
그럼, Blynk.cloud의 Search 탭으로 돌아가서 제어해 볼 텐데요. 아래 부분이 Online으로 되어 있어야 연결이 제대로 된 것입니다. 문제없이 Online이 되어 있다면, LED 스위치들을 On/Off 시켜보세요.
그럼, 이제 릴레이가 연결된 콘센트에 전원을 연결하고, LED전등을 연결하거나 테스트할 가전기기를 연결하여 On/Off가 잘 되는지? 테스트해보세요.
아래 모습은 USB선풍기이지만, 220V 어댑터를 사용하기 때문에 대부분의 가전제품은 동작시킬 수 있다고 보면 됩니다. 이번엔, LED전등과 선풍기를 모드 콘센트에 연결하여 한 번에 작동시켜 보세요.
네, 아주 잘 작동됩니다.
한 번에 작동시킬 수 있는 용량은 릴레이가 견딜 수 있는 용량(스펙)에 따라 결정되어집니다. 여기서는 250 VAC , 10A 짜리를 사용했습니다.
【⑨ APP(앱) 제어 화면 만들기 & 동작】
그럼 이번엔 Blynk App을 이용해서 스마트폰에서 제어해 볼게요.
스마트폰에서 Blynk iot 앱을 검색 후 설치하고 로그인해 주세요. Blynk 앱 메뉴 중에서 설정 메뉴를 터치하고 'Developer Mode'를 선택하세요.
여러 가지 위젯 중에서 'LED'를 선택하고, 2-3초간 눌러 적절한 위치에 끌어다 놓으세요.
그리고 위젯을 터치하면 세부 설정을 할 수 있습니다.
Blynk Cloud에서 설정해 놓은 DataStrem이 자동으로 뜨는 것을 볼 수 있는데요, 나머지도 똑같은 방법으로 LED와 스위치를 영상을 따라 설정해 주세요.
나머지도 똑같은 방법으로 LED와 스위치를 영상을 따라 설정해 주세요.
옵션 중에, 스위치 옵션에서 'Push'는 누르고 있는 동안만 On이 되는 방식이고, 'Switch'는 누를 때마다 On/Off가 토글 되는 방식입니다. (여기서는 터치할 때마다 On/Off가 교대로 되는 Switch 방식으로 선택했습니다.)
(아래) 마지막으로 뒤로 가기(←)와 'X'표시를 눌러 설정 메뉴를 빠져나오면 이제 실행할 수 있는 모드가 됩니다.
참고로, 스마트폰의 App과 웹에서는 동시에 연동이 됩니다.
【⑩ IoT Outlet 콘센트로 가전기기를 웹과 앱에서 제어해 보기】
아래는 동작을 실행한 모습인데요, App과 웹에서 서로 연동되며 잘 작동합니다.
【 ⑪ 문제해결】
본 실습을 진행하면서, 동작이 안 되는 놓치기 쉬운 몇 가지 부분에 대해 짚어드리고자 합니다. 가장 먼저, Blynk웹에서 esp32가 연동이 안 되는 Offline 상태가 되는 문제가 있습니다.
문제&해결법 1. 여러분의 esp32가 접속된 WiFi가 방화벽등 연결이 제한된 경우가 아닌지 확인해 보세요 (만약, 외부에서 집안에 있는(사설 IP) esp32 기기 제어는 WiFi 라우터의 포트-포워딩 또는 DMZ 설정을 해야 함)
문제&해결법 2. 점선 박스에 있는 TEMPLATE_ID 등의 내용이 코드와 일치하는지 확인해야 합니다.
이 부분이 일치하지 않으면, 서로 연결이 되지 않습니다. 또한, TEMPLATE_ID는 코드에서 제일 상단에 위치해 있어야 Blynk2.0 서비스로 제대로 인식하게 됩니다.
해결법 3. Templates 편집 메뉴가 아니라, Search 탭에 있는 Dashboard에서 실행하는 것입니다.
Templates 탭의 Web Dashboard는 편집 메뉴의 미리 보기 같은 것이기 때문에 실행하는 메뉴가 아닙니다.
이번 시간에는 Blynk2.0 업그레이드 강의 세 번째 시간으로 Nano 보드에 ESP01 WiFi 모듈을 연결하여 LED와 LED 전등 & 콘센트 제어를 통한 가전기기들을 제어해 보도록 하겠습니다. 보드의 입출력 포트에 연결된 LED제어는 물론이고, 릴레이를 사용하면, 220V 전기를 사용하는 LED 전등 제어도 가능합니다. 뿐만 아니라, 릴레이 모듈을 Outlet 콘센트에 직접 연결해 놓으면 220V 전기를 사용하는 대부분의 가전제품을 On/Off 제어할 수 있습니다.
그리고 더 놀라운 것은 스마트폰의 앱에서만 아니라 Blynk2.0으로 업그레이드되어 웹 접속이 되는 어느 곳이든 웹페이지에서도 실시간으로 제어하고 상태를 확인 할 수 있게 되었습니다. 더구나, 블링크(Blynk)는 시스템을 구축하기 위해 어렵고 복잡한 코딩이 필요치 않기에 누구나 손 쉽고 빠르게, 자신이 원하는 IoT 시스템을 만들 수 있어 매우 좋습니다.
그럼, 이번 영상을 통해 자신만의 IoT 시스템을 재미있게 만들어 보세요~!
참고로, 이 프로젝트를 위해서는 더보기에 링크해 드리는 두 개의 필수 영상을 함께 참고해야 합니다.
① 이 번 실습의 결과물 ② 실습의 준비 ③ 회로 실습을 위한 연결 도면 ④ 실습을 위한 아두이노 IDE 필수 라이브러리 설치 ⑤ 실습 예제 파일과 코드 해설 ⑥ Blynk 2.0 웹 대시보드(Web Dashboard) 만들기 (DataStream & Web Dashboard) ⑦ 아두이노 코드 토큰(Auth Token) 값 수정 후 업로드 하기 ⑧ WiFi 핫스팟 연결하여 동작시키기 ⑨ APP(앱) 제어 화면 만들기 & 동작 ⑩ Outlet 콘센트로 가전기기(선풍기 예시) 제어해 보기 ⑪ 최종 완성된 작품 두 가지를 하나의 앱과 웹에서 함께 동작시켜 보기
【 ① 이 번 실습의 결과물 】
【 ②~③ 실습 준비와 회로 실습용 연결 도면 】
실습에 사용될 부품에 대한 자세한 내용은 아래 링크를 참고해 주세요 아래는 실습을 위한 연결 도면입니다.
여기서는 ESP01-전용 어댑터를 이용해서 실습하게 되는데요, 만약, 이 어댑터가 없다면, 앞서 소개드린 영상이나, 아래 링크를 참고하면, 다른 방법으로도 해결할 수 있어요. #Blynk+Nano+Esp-01 풀코스 학습자료 : https://rasino.tistory.com/335 어댑터 모듈뿐 아니라 릴레이 모듈이나 다른 부품에 대해서도 상세한 설명이 나와 있으니 꼭 참고해 보세요.
【 ④ 실습을 위한 아두이노 IDE 필수 라이브러리 설치】
아두이노 IDE의 "라이브러리 매니저"창에서 아래와 같이 'blynk'로 검색하여 라이브러리를 설치해 주세요.
【 ⑤ 실습 예제 파일과 코드 해설 】
그럼, 나노 보드에 업로드할 코드에 대해 설명드릴게요. 먼저, Blynk 라이브러리를 설치하게 되면, Blynk 관련 예제 파일들이 설치되는데요, 화면에 보이는 ‘ESP8266_Shield’ 예제 파일을 열어서 약간만 수정하면 됩니다.
코드의 크기가 한 페이지도 안 되는 코드로 IoT 작품을 만들 수 있다니 정말 놀랍습니다.
중요한 점 몇 가지만 설명드릴 텐데요, 뒤에 나오는 Blynk Cloud에서 설정을 통해 얻게 되는 TEMPLATE ID와 NAME, AUTH TOKEN 값들을 이 부분에 복사, 붙여 넣기 해야 합니다. 그리고 이 값들은 Blynk 관련 라이브러리보다 위쪽에 배치해야 하는데요, 그렇지 않을 경우 Blynk2.0 서버가 아닌 이전(Legacy) 서버로 접속되어 제어되지 않게 됩니다. 하지만 그렇게 배치했음에도 불구하고 “Invalid auth token”에러를 계속 표시하며 서버로 접속되지 않을 때는 기존 예제 코드에서 이 부분, “blynk.cloud”, 80을 추가해 주면 해결됩니다.
이 부분에는 여러분이 접속 가능한 주변 WiFi 혹은 스마트폰의 핫스팟 ID와 패스워드를 입력하세요.
그리고, SoftwareSerial EspSerial(7,6)이 부분에는 나노에 연결된 ESP01 어댑터 모듈의 소프트웨어 시리얼 통신 핀 번호를 적어줍니다. 그리고, 여러분이 갖고 있는 esp01 모듈의 보-레이트(Boud-rate)를 정확히 적어주세요. #define ESP8266 BAUD 9600 이 보-레이트가 일치하지 않으면 WiFi 통신이 되지 않습니다. 보-레이트를 알기 어렵다면, 9600 또는 115200둘 중 하나로 해보세요. 그럼 이제, 조립된 작품에 코드를 업로드하고, Blynk.Cloud에서 웹 대시보드를 만들어 볼게요 코드는 앞서 안내해드린 것처럼, Blynk 라이브러리에 포함된 예제를 기본으로 조금 변경해 주면 되는데요, 아래가 편집된 코드 예시이니 참고하세요. 우선 아래 코드를 다운로드하고 Template ID, Auth Token , WiFi ID, 비번, ESP01 보-레이트 등등을 수정하여 업로드하면 됩니다.
//////////////////////////////////////////////////////////////////////////////////
// *** 라즈이노 IoT Blynk2.0 + Nano+ESP01 실습, 릴레이모듈+전등 제어하기 ***
// 실습 : Blynk 2.0 시스템에 릴레이 모듈을 연결하고 LED 및 220V용 LED전등을 제어해 보기!
// 사용방법 및 추가 자료 다운로드
// 게시글 : https://rasino.tistory.com/
// 유튜브영상 : https://www.youtube.com/channel/UClO79Cpq72VI63MwGi6VoQw
//////////////////////////////////////////////////////////////////////////////////
#define BLYNK_PRINT Serial
#define BLYNK_TEMPLATE_ID "TMPLtjtKWif1"
#define BLYNK_DEVICE_NAME "Nano ESP01 LED Control"
#define BLYNK_AUTH_TOKEN "DamL2Z3CQqS4NbU0UAlxbk86uE5VjSlK"
#include <ESP8266_Lib.h>
#include <BlynkSimpleShieldEsp8266.h>
char auth[] = BLYNK_AUTH_TOKEN;
char ssid[] = "myGalaxy";
char pass[] = "12345678"; // 만약 패스워드 없는 WiFi라면, ""로 입력하세요
#define EspSerial Serial1
#include <SoftwareSerial.h>
SoftwareSerial EspSerial(7, 6); // RX, TX , 나노에 연결된 소프트웨어 시리얼 통신 단자.
// 중요! 여러분이 갖고 있는 ESP01 모듈의 펌웨어에 설정된 보드레이트에 맞추어야 합니다
// 보통의 경우는 9600 이며, 안 되면, 115200으로 해보세요.(esp01 펌웨어 버전에 따라 다름)
// esp01-펌웨어 업뎃 및 AT통신 설정 관련 된 사항 참고 : https://rasino.tistory.com/297
#define ESP8266_BAUD 9600
ESP8266 wifi(&EspSerial);
void setup()
{
// 아두이노 IDE의 시리얼 모니터와의 통신속도입니다. 아무속도나 상관 없음
Serial.begin(9600);
delay(10);
EspSerial.begin(ESP8266_BAUD);
delay(10);
Blynk.begin(auth, wifi, ssid, pass, "blynk.cloud",80);
}
void loop()
{
Blynk.run();
}
Blynk 2.0 서버로 접속되지 않는 에러를 방지하기 위해, “blynk.cloud”, 80을 추가해 주세요.
《 코드 다운로드 》
Blynk를 이용하면, 보이는 것처럼, 아두이노 코드가 복잡하지 않아 매우 쉽게 작품을 구현할 수 있습니다.
【 ⑥ Blynk 2.0 웹 대시보드(Web Dashboard) 만들기 (DataStream & Web Dashboard) 】
그럼, 가입된 Blynk.Cloud 사이트에 접속 후 로그인하세요. 아래 이미지처럼, 화면 메뉴 좌측에 보이는 Templates 메뉴를 선택하세요.
중앙에 보이는 + New Template을 클릭하고, 이미지의 내용으로 입력해 주세요.
입력 완료 후, Done을 클릭하면 기본 템플릿이 만들어지는데요, 상단에 보이는 메뉴 중에서 Data Streams과 Web Dashboard 만 작업해주면 됩니다. 그럼 Data Streams 탭을 선택하고, +New Datastream에서 Digital 항목을 클릭하세요.
그리고 아래 이미지를 참고하여 내용을 입력하세요.
LED 2에 대해서도 같은 방법으로 만들어 주세요.
마지막으로 LAMP(전등)에 연결된 Relay 제어를 위해 Data Stream을 추가해 볼게요.
그럼, 이제 Web Dashboard로 가서 컨트롤 화면을 구성해 볼게요.
화면 구성은, LED 1, 2, LAMP에 대해 ON/OFF를 확인할 수 있는 LED 표시와 제어하는 스위치로 구성했습니다. 아래 이미지를 참고하여 설정해 보세요.
LED2에 대해서는 복제(복사)를 해볼 텐데요, 유사한 패턴의 경우 복제 버튼을 이용하면, 좀 더 편하게 작업할 수 있습니다.
그리고 복제된 위젯의 설정으로 들어가서 아래처럼 옵션을 선택, 입력해 주세요.
LED2의 스위치 세팅도 동일한 방법으로 해주시고,
Relay에 연결된 Lamp에 대한 표시등도 LED 위젯을 이용해서 만들어 주세요. 그리고 아래와 같이 Relay Lamp 켜고 끄기를 위한 스위치를 만들어 주세요.
아래 이미지처럼 완성이 되었다면, 이제 Search 탭으로 가서, + New Device를 클릭하고, 조금 전에 만든 Template를 연결해 주세요.
그럼, 이렇게 Autu Token 값 등이 만들어지고, 이 값들을 복사해서 아두이노 코드 상단에 붙여 넣기 합니다.
【 ⑦ 아두이노 코드 토큰(Auth Token) 값 수정 후 업로드 하기 】
이렇게 완성된 코드를 가지고 보드를 연결하고 코드를 업로드하세요.
ESP01 모듈이 연결되어 있는 상태에서 코드를 업로드할 경우 업로드 에러가 종종 발생하니, 잠시 제거하고 업로드해보세요.
’Window’키 + ‘X’ 단축키로 장치 관리자를 열어 Nano보드가 연결된 포트를 정확히 확인해 보세요.
네 26번 포트에 연결되어 있네요. 그럼, 업로드를 위해 보드와 포트를 정확히 선택해 주세요.
대부분의 호환 Nano 보드의 경우 프로세서는 “ATmega128P (Old Bootloader)를 선택해야 업로드됩니다
그럼, 업로드해 보세요.
【 ⑧ WiFi 핫스팟 연결하여 동작시키기 】
이제, ESP-01 모듈을 연결해 주세요. 코드에 입력한 대로, 주변 WiFi 또는 핫스팟을 연결해 주세요. Nano 보드의 리셋을 눌러주면, 핫스팟에 연결되고 시리얼 모니터를 통해 IP를 할당받는 것을 볼 수 있습니다. 잘 안된다면, 시리얼 모니터를 새로 열거나 ESP01 모듈을 제거 후 다시 연결해 보세요(접촉 불량 가능성) 네, 보이는 것처럼 Ping 테스트까지 완료되어야 연결에 문제가 없습니다
그리고 Search 탭에서(중요!) 동작시켜 보면, 아래처럼, LED가 화면 클릭할 때마다 동작이 잘 되는 것을 볼 수 있습니다.
그럼, 220V LED 램프도 테스트해보기 위해, 220V 전원을 연결하고 테스트해 보세요.
네, 위 이미지처럼, 동작은 잘하는데요, 다만, 스위치가 ON 신호에 램프가 꺼지고, 스위치 OFF 신호에 램프가 켜져서 반대로 동작합니다. 그 이유는 Relay 모듈이 Low신호에 동작하는 Active-Low 모듈이어서 그렇습니다. 이 문제는 DashBoard에서 On/Off 스위치 설정을 반대로 해놓으면 간단히 해결할 수 있습니다. 그럼, Templates 탭의 편집(Edit)으로 들어가서 Lamp 버튼의 설정을 바꾸어 볼게요.
ON과 OFF의 논리 값을 반대로 바꾸어 주세요 ( 1 -> 0 , 0 -> 1 )
컬러도 반대 효과를 주기 위해 검정식으로 바꾸어 볼게요 ( 검정 -> 꺼짐 , 흰색 -> 켜짐 )
저장하고 Search 메뉴에서 다시 실행해 볼게요.
네, 이제 ON OFF가 일치하며 잘 동작됩니다. 그럼, 이제 PC 연결 없이 배터리로도 IP 할당받으며 잘 동작하는지 아래 이미지처럼, 확인해 보세요.
그럼, 이제 앱 화면도 설정하여 제어해 볼게요. Blynk ioT ( 2.0 버전에 해당되는 앱) 앱을 다운로드하고 로그인하세요. Blynk Cloud에서 템플릿을 만들면 자동으로 같은 이름의 빈 템플릿이 보이는데요, 터치하세요.
개발자 모드로 진입하고, 바닥의 빈 공간 또는 + 키를 눌러 주세요.
앞서 보았던 동일한 모양의 위젯들이 보입니다. LED 위젯을 터치하세요.
위젯을 2~3초간 누르고 있으면 위치를 옮길 수 있고 사이즈 변경도 가능합니다.
LED 1에 대한 설정을 영상처럼 해주세요.
이어서, LED 2에 대한 설정도 동일하게 합니다.
이제, LED 1에 대한 스위치를 만들어 볼게요
PUSH 옵션은 계속 누르고 있을 때만 On 되는 옵션이며, SWITCH는 터치할 때마다 번갈아 On/Off 됩니다.
마지막으로 LAMP는 스위치만 만들어 볼게요.
역시 여기서도 LAMP 스위치는 Low 신호에 On 표시되도록 1과 0의 위치를 바꾸어 줍니다.
이제 개발자(설정) 모드에서 빠저나가기를 누르면 실행 모드가 됩니다.
【 ⑨ APP(앱) 제어 화면 만들기 & 동작 】
네, 아주 잘 작동되며, 웹과의 연동도 잘 됩니다.
【 ⑩ Outlet 콘센트로 가전기기(선풍기 예시) 제어해 보기】
그럼, 이전 영상에서 만들었던 Outlet 콘센트도 테스트해 보겠습니다.
Outlet 콘센트의 상세한 제작 영상은 더보기 링크를 참고해 주세요. 여기에도 똑같은 코드를 올려주면 되는데요, Esp01 모듈을 탈거하고 업로드해 볼게요.
ID와 Auth Token 값들이 일치하면 같은 화면에서 제어할 수 있습니다.
Outlet 작품도 배터리를 이용해서 동작시켜 볼게요.
현재 두 개의 WiFi 모듈이 접속(IP 할당) 되어 있는 것을 볼 수 있습니다.
그럼, Outlet에 대한 Data Stream을 템플릿 탭에서 추가해 볼게요.
Teamplate 탭에 있는 Edit(편집)를 누르고 영상을 따라 설정해 주세요.
Outlet에서도 켜고 끄는 스위치 버튼 하나만 추가해 볼게요.
네, 이제 모든 준비는 끝났고, 두 개의 다른 작품을 하나의 폰에서 제어해 볼게요.
미니 선풍기라 하더라도 220V 콘센트로 제어하기 때문에 220V 전기를 사용하는 거의 대부분의 가전기기도 제어된다고 보면 됩니다.
그럼, Outlet 콘센트 전원을 연결해 볼게요.
릴레이가 Low(꺼짐) 신호에 동작하니, Outlet 스위치 역시 반대로 설정해 볼게요.
네, 잘 동작되는데요, 폰에서도 스위치를 추가하여 제어해 볼게요.
여기서도 On / Off 설정을 반대로 바꾸어 놓을게요.
【 ⑪ 최종 완성된 작품 두 가지를 하나의 앱과 웹에서 함께 동작시켜 보기 】
그럼 실행시켜 볼게요.
네, 이렇게 해서 Blynk2.0을 이용해서 웹과 폰에서 LED, 전등, 가전기기 등을 제어해 보았습니다.
릴레이를 이용하면 220V와 같은 가전기기들의 On/Off를 제어할 수 있어, 응용하기 매우 좋습니다.
【 How to Display temperature& humidity of DHT11 on a smart phone! 】
# Blynk2.0 은 WiFi 컨트롤 기능을 App뿐 아니라, Blynk Cloud라 하여 웹에서도 제어할 수 있는 기능을 제공하고 있습니다. 또한, 복잡하고 어려운 코딩이나 함수 사용 없이 매우 쉽게 IoT 시스템을 구축해 주는 멋진 시스템입니다.
여기에서는 WiFi기능을 가진 나노 33 IoT 보드를 사용하고 있으며, ESP8266 보드류 혹은 ESP32 보드 등으로도 바로 적용 가능합니다.
이 강의는 시리즈로 제작되며, 전체 학습 내용은 아래와 같습니다. ====================================================== 시리즈 전체 실습 내용(예정) 1. Nano33 ioT & Blynk2.0으로 LED On/Off 하기. (업로드 완료) 2. Nano33 ioT & Blynk2.0 으로 DHT11 센서 온도/습도 출력하기.(본 게시글) 3. ESP01 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기. (예정) 4. ESP8266 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기.(예정) 5. ESP32 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기.(예정) ======================================================
【 주요 목차 】 ① Blynk 2.0 서비스 소개 & 사용 이유 ② 회로 연결 도면 및 실습 준비 ③ 실습을 위한 아두이노 IDE 필수 라이브러리 설치(4가지) ④ 기존 템플릿(Templates) 삭제 방법 ⑤ 데이터 스트림(Data Stream) 핀을 GPIO Pin으로 설정하기 설명 ⑥ Blynk Cloud (blynk.cc) 설정 & 웹 대시보드 만들기(Dash Board) ⑦ 버추얼 핀(Virtual Pin) 개념 설명 & 온도/습도 가상 핀 설정하기 ⑧ 웹 대시보드(Web Dashboard) 핀 설정하기 설명 ⑨ 새 디바이스(New Device) 추가하기 설명 ⑩ 실습을 위한 Nano33 & DHT11용 Blynk 예제 파일 만들기 ⑪ Nano33 ioT 보드에 코드 업로드 하기 & 핫 스팟 연결하기 ⑫ 동작 확인하기 (Arduino IDE Value & Web Dashboard) ⑬ Blynk IoT App에서 Dash Board(대시보드) 설정하기
【 ① Blynk 2.0 서비스 소개 & 사용 이유 】
최근 Blynk 서비스가 2.0으로 바뀜에 따라, 현재 가입하려는 분들은 반드시 2.0 시스템으로 사용법을 익히셔야 합니다. 기존에 사용하던 Blynk앱 시스템은 이용자의 폭주와 웹 연동 서비스를 제공하기 위해 Blynk 2.0 시스템을 오픈하였습니다.
물론 기존 Blynk 시스템도 유료 서비스를 이용하던 사용자가 있기 때문에 서비스가 유지되고 있지만, Blynk 신규 가입자는 반드시 Blynk2.0을 이용해야 합니다. 다만, Blynk2.0의 경우 국내 자료가 아직 부족하고 사용법이 기존과 달라 접근하기가 쉽지 않습니다. 그래서, 기본 사용법을 익히실 수 있도록 본 게시글을 준비했으니 차근차근 따라 해 보시기 바랍니다. 현재 Nano33 ioT 보드로 기본 실습들을 구성했지만, esp8266 보드나 esp32 보드 들도 이 글을 참고하면, 동일하게 활용 가능합니다.
Blynk 앱을 검색해 보면, 기존(legacy) 앱과 Blynk2.0인 Blynk IoT앱 두 가지를 볼 수 있습니다. Blynk 2.0에서는 Blynk Cloud라 하여 웹에서도 아래처럼 컨트롤 버튼을 만들어 제어할 수 있고,
Blynk의 가장 큰 장점은 어려운 앱 개발 코딩이 필요 없다는 것과 쉬운 클라우드 서버 툴을 제공하기 때문에 웹코딩이 필요 없으며, 센서 및 회로 제어에 필요한 복잡한 아두이노 함수들을 자체적으로 처리해 주기 때문에 매우 쉽고 빠르게 IoT 응용 작품들을 구축할 수 있습니다. 다만, 동시에 2개의 프로젝트(템플릿)까지만 무료로 제공되며, 추가적인 프로젝트나 고급 위젯 Box를 이용하고자 한다면, 일정 비용을 지불해야 합니다. ( 단, 먼저 만들어진 프로젝트를 삭제하면 새 프로젝트를 계속 만들 수 있어요) 물론, 월 이용료 등의 일정 비용을 지불하면 상업용으로도 손색없는 IoT 시스템을 구축할 수 있을 것으로 생각됩니다.
【 ② 회로 연결 도면 및 실습 준비 】
먼저, 화면과 같은 부품을 준비하여 회로를 연결해 주세요.
[ 연결도면 다운로드 ]
Nano33 ioT는 핀 배열이 Nano 보드와 거의 동일한데요, Nano 보드처럼 사용하기 쉽고 WiFi 모듈까지 내장되어 있어 활용하기 좋은 보드입니다. Nano33 ioT 보드의 상세 설명과 사용법은 위에 링크해 드린, “처음 사용설명서 #1~#2”편을 참고해 보세요.
【③ 실습을 위한 아두이노 IDE 필수 라이브러리 설치(4가지) 】
그럼, 아두이노 IDE에 필요한 필수 라이브러리 3가지 및 DHT11 센서 사용을 위한 라이브러리 추가로 해서 4가지를 설치해 주세요. 1. ‘보드 매니저’에서 SAMD 또는 NANO 33으로 검색해서 보드 인식을 위한 라이브러리를 설치합니다. nano 33으로 검색할 때는 중간에 공백을 주어야 합니다. 그리고, 라이브러리 매니저가 아니라 보드 매니저입니다. Nano 33 ioT는 SAMD21G18A 칩을 MCU로 사용하고 있는 보드입니다.
2. ‘라이브러리 매니저’에서 NINA 또는 WIFININA로 검색하여 WiFi 통신을 위한 라이브러리를 설치합니다.
그럼, 이제 모든 준비 사항은 끝났으며, LED1과 2를 웹과 앱을 통해 직접 제어해 볼게요.
아래는 실제 연결된 회로 모습입니다. 점퍼선을 이용해도 좋지만, 이렇게 굵은 단선으로 길이에 맞추어 연결하면 훨씬 간결하고 튼튼하게 오랫동안 유지됩니다.
《 DHT11 센서 스펙 》
만약, 좀 더 정밀한 데이터를 원한다면, 아래 이미지와 같은 소수 첫 째 자리까지 출력되는 DHT22 센서를 사용하면 됩니다.
【 ④ 기존 템플릿(Templates) 삭제 방법 】
Blynk 서비스는 템플릿(프로젝트) 2개까지는 무료로 이용할 수 있습니다. 따라서, 여러 가지 다양한 프로젝트 연습을 위해서는 기존 만들었던 템플릿을 삭제하면서 진행하면 되는데요, 삭제하는 방법에 대해 간단히 설명드립니다. 만약 현재 만들어 놓은 템플릿이 없더라도, 추후에 삭제 과정이 필요하니 미리 봐 두면 도움 될 것입니다. 템플릿 삭제하는 내용은 아래 게시글에 별도로 올려놓았으니 참고해 보세요.
【 ⑤ Blynk Cloud (blynk.cc) 설정 & 웹 대시보드 만들기(Dash Board) 】
먼저, 아래 이미지처럼 좌측의 템플릿 탭을 클릭하고 이미지 우측 상단에 보이는 + New Template를 클릭하세요.
이어서 나타나는 아래 이미지처럼 각각의 항목을 선택하고, DESCRIPTION에는 간단한 설명을 입력하면 되는데요, 제목과 디스크립션에는 특수 문자나 기호는 입력하면 에러가 나고 다음으로 넘어가지 않으니 특수문자 및 기호는 입력하지 마세요.
【 ⑥ 데이터 스트림(Data Stream) 핀을 GPIO Pin으로 설정하기 설명 】
이제, 데이터 스트림(DataStreams)과 웹 대시보드(Web Dashboard)만 설정해 주면 되는데요, 그전에 먼저, Digital 핀으로 로 사용 설정 시 선택해야 하는 핀 번호에 대해, 중요하니 짚고 넘어가 볼게요. 아래 이미지에 보이는 Digital Pin과 Analog Pin의 경우는 아두이노 보드의 물리적인 핀을 그대로 연결 사용한다는 의미를 가지는 데요,
직접 아두이노를 제어하듯 보드에 있는 핀 번호를 선택하면 블링크 서버(함수)를 통해 제어됩니다. 한 가지 주의해야 할 것은 DataStream의 Digital 핀 숫자는 보드 표면에 적힌 핀 번호가 아니라 GPIO 핀 번호와 일치되어 있습니다. 따라서 GPIO를 사용하는 nodeMCU와 같은 보드에서는 D0, D1, D2 등의 핀번호가 아니라, 입출력을 기준으로 매겨진 GPIO 핀 번호와 일치되어 있습니다. 즉, D1핀에 연결된 LED 같은 것을 제어하려 한다면, DataStream에서 숫자 1을 선택하는 것이 아니라, GPIO 핀 번호인 숫자 5(GPIO5)를 선택해야 제어가 되니 주의하세요. ( ※ 단, 우노와 나노 보드류는 GPIO 구분 없이 핀 번호 그대로 사용합니다 )
다음은 가상 핀(Virtual Pin)에 대한 설명입니다.
Virtual Pin의 경우 물리적 핀의 경우처럼 사용이 가능하지만, 주로 센서와 같은 값들을 WiFi를 통해 전달받아 앱 혹은 웹의 대시보드에서 쉽게 모니터링할 수 있도록 만든 가상 핀입니다. 마치 아두이노 IDE의 시리얼 모니터에서 센서 값을 확인하는 것처럼, WiFi 무선을 통해 확인하기 편하도록 한 것입니다. 또한, 가상 핀을 최대 256개까지(V0~V255) 사용할 수 있도록 되어 있어 확장성이 좋습니다. 따라서, 이번 실습에서는 이 가상핀을 이용해 DHT11의 온도와 습도 데이터를 전달받아, 앱과 웹의 대시보드에서 확인할 수 있도록 실습을 진행합니다.
【 ⑦ Blynk Cloud (blynk.cc) 설정 & 웹 대시보드 만들기(Dash Board) 】
아래 이미지를 따라, 각각의 내용을 입력해 주세요.
ALIAS는 NAME을 영문으로만 입력하면 자동으로 입력됩니다. 한글과 혼용 입력 시는, 직접 영문으로 Temp라고 입력해주면 됩니다. 가상 핀은 어떤 핀이든 사용하면 되고, Data type은 정수형(integer)을 선택하세요. 만약, DHT22와 같은 소수점 값 처리가 필요한 센서를 사용할 경우, Double을 선택하면 되고, 아두이노 코드에서는 Double 또는 float형을 사용하면 됩니다. 단위는 섭씨온도일 경우 Celsius(℃) , 화씨는 Fahrenheit(℉)를 검색하세요. 온도 값을 표시할 게이지의 전체 범위를 지정할 텐데요, 0℃ ~ 60℃의 범위로 지정해 볼게요.
마지막으로 Create를 클릭하면 온도 값 처리를 위한 DataStream이 하나 만들어집니다.
그럼, 습도에 대한 DataStream을 생성하기 위해 +New Datastream을 클릭하세요.
그럼, 이제 웹 Dash Board를 만들어 볼게요. 웹 Dashboard는 웹에서 컨트롤할 수 있는 제어 보드를 의미하고,추가적으로 앱에서도 연동하여 제어할 수 있는 대시보드를 폰에서 만들 수 있습니다.그럼, DHT11 센서의 온도와 습도를 표시해 줄 Gauge를 각각 만들어 볼게요. 아래 이미지에서 1번, 2번, 3번 순서대로 클릭하여 진행합니다.
왼쪽 위젯 박스 메뉴에서 Guage를 끌어다 놓으세요.
Guage의 제목은 ‘온도 Temp.’로 입력합니다. 그리고, Data Stream에서 설정해 놓았던 온도 Temp(V0) 항목을 선택하세요.
그리고 같은 방법으로 Guage를 끌어다 놓고, 습도에 대한 Guage를 만들어 줍니다. Guage의 제목은 ‘습도 Humi.’로 입력할게요. 그리고, Data Stream에서 설정해 놓았던 습도 Humi(V1) 항목을 선택하세요.
아래는 온도와 습도 게이지가 완성된 모습입니다.
그리고 위젯 박스에서 Label을 끌어다 놓고, 동일한 값을 Label로도 표시해 볼게요.
내용 입력과 선택은 Guage와 동일하게 해 볼게요(달라도 됨).
습도 Label도 아래처럼, 동일하게 만들어 주세요.
아래처럼 되어 있으면 Dash board 설정은 끝났으며, 최종 Save 버튼을 클릭하면, 완료됩니다.
그리고 언제든 화면 우측 상단에 있는, Edit를 눌러 Dash-Board나 Data-Stream을 다시 수정할 수 있습니다.
【 ⑨ 새 디바이스(New Device) 추가하기 설명 】
그럼, Search 탭을 눌러 +New Device를 추가해 볼게요.
화살표 순서에 따라 템플릿을 선택해 주세요. 이어서 나타나는 아래와 같은 창에서 위에서 만들어 놓은 'Nano33 ioT DHT11' 이름의 템플릿을 선택하고 Create를 클릭하세요.
그리고 아두이노 코드의 이 부분에 붙여 넣기 하면 됩니다. 코드의 이 세 가지 값이 blynk.cloud 값과 일치하지 않으면 에러가 나고 서버에 연결되지 않습니다. 여기서 주의할 것은 BLYNK_TEMPLATE_ID는 BLYNK 2.0 Cloud 서비스를 위해 생긴 것으로 <Blynk...> 라이브러리보다 상위에 배치되어야 합니다.
만약 그렇지 않을 경우 지금 보이는 것처럼 token 에러가 나며, Blynk2.0 서버로 접속되지 않아 제어할 수 없게 됩니다.
이 아두이노 코드는 Blynk 라이브러리에서 제공하는 코드를 기본으로 하여 수정한 것인데요. 코드의 위치는 ‘파일 》 예제 》 Blynk’ 메뉴에서 → ‘Boards_WiFi’ 항목으로 가서 Nano33 ioT의 경우 → ‘Arduino_MKR1010’ 예제를 열어 편집하여 사용하면 됩니다.
편집한 코드는 아래와 같습니다.
//*** 라즈이노 IoT Blynk2.0 + Nano IoT33 실습 2 , DHT11 센서로 온도/습도 출력하기***
// 실습 : Blynk 2.0 시스템에 DHT11 센서 연결하여 온도와 습도 값 디스플레이 하기!
#define BLYNK_PRINT Serial
// Blynk.Cloud 사이트에서 Nano33 IoT + DHT11에 대한 템플릿을 만든 후
// 나타나는 대시보드에서 아래 3줄의 내용을 복붙복 하세요 */
#define BLYNK_TEMPLATE_ID "TMPLMRt6yA8Z"
#define BLYNK_DEVICE_NAME "Nano33 ioT DHT11"
#define BLYNK_AUTH_TOKEN "ZM-i3ALE2fMFsUZ5V5kh2JZg_X4LDFVi"
#include <SPI.h>
#include <WiFiNINA.h> // 라이브러리 매니저창에서 WiFiNINA로 검색 후 설치할 것
#include <BlynkSimpleWiFiNINA.h> // 라이브러리 매니저창에서 blynk로 검색 후 설치할 것
#include <DHT.h> // 라이브러리 매니저창에서 DHT로 검색 후 설치할 것(by Adafruit 버전)
char auth[] = BLYNK_AUTH_TOKEN;
// 접속 가능한 WiFi ID와 패스워드를 입력하세요
char ssid[] = "myGalaxy";
char pass[] = "12345678";
BlynkTimer timer;
#define DHTPIN 13 // DHT11 센서가 연결 된 핀 번호
#define DHTTYPE DHT11 // DHT11 센서 사용 (DHT22 센서는 DHT22로 수정)
DHT dht(DHTPIN, DHTTYPE);
void sendSensor() {
int t = dht.readTemperature(); // 섭씨 온도, 화씨는 readTemperature(true), 만약 DHT22센서 사용시 float형으로 바꿀 것
int h = dht.readHumidity();
if (isnan(t) || isnan(h)) {
Serial.println("Failed to read from DHT sensor!");
return;
}
Serial.print("Temp:");
Serial.print(t);
Serial.print("\t");
Serial.print("Hum:");
Serial.print(h);
Serial.print("\n");
delay(300);
Blynk.virtualWrite(V0, t); // 온도값 전달을 위한 V1 가상포트 지정
Blynk.virtualWrite(V1, h); // 습도값 전달을 위한 V2 가상포트 지정
}
void setup()
{
Serial.begin(9600);
Blynk.begin(auth, ssid, pass);
dht.begin();
// 일반적으로 Blynk에서 ESP32 보드(혹은 아두이노와 같은 보드)에게 매 1초마다
// 데이터를 요구하는 방식이지만, 아래와 같은 타이머(timer) 코드를 사용하면
// ESP32 보드에서 Blynk로 일방적으로 데이터를 보낼 수 있음.
timer.setInterval(1000L, sendSensor);
}
void loop()
{
Blynk.run();
sendSensor();
timer.run();
}
그럼, 연결시킬 WiFi 핫스팟을 준비해 주세요. (주변 연결 가능한 WiFi 또는, 스마트폰 핫스팟 등등 가능)
핫스팟에 여러분의 Nano33 ioT 보드가 IP를 할당받고 연결 된 것을 볼 수 있으며, 만약 연결이 안 된다면, 리셋키를 한 두번 눌러주면, 이렇게 핫스팟에 연결되는 것을 볼 수 있습니다.
【 ⑫ 동작 확인하기 (Arduino IDE Value & Web Dashboard) 】
그리고 아래 이미지처럼 아두이노 IDE의 시리얼 모니터를 열어, 출력되는 데이터를 바로 확인할 수 있도록 하였습니다.
아래 이미지처럼, Blynk의 Search탭에 있는 Dash-Board에 가보면 동일한 데이터가 표시되는 것을 볼 수 있어요.
【 ⑬ Blynk IoT App에서 Dash Board(대시보드) 설정하기 】
그럼, Blynk ioT App에서도 Dash-Board를 만들어 볼게요. 먼저 스마트폰에서 다운로드하고 설치한 Blynk ioT를 실행시키고 로그인합니다. 웹에서 Nano33 DHT11이라는 이름으로 대시보드를 이미 만들었기 때문에, 앱에서도 Nano33 DHT11라는 이름의 템플릿이 생성되어 있을 거예요( 내용은 비어 있으며, 위젯 배치는 폰에서 새로 만들어야 함) 그럼, 그 템플릿을 선택하세요. 아래 공구 모양의 이미지(개발 모드 전환)를 터치해서 위젯들을 배치해 볼게요.
이어서 앱의 바닥 빈 곳을 터치하거나 화면 우측 상단에 있는 '+' 표시를 터치하면, 우측에 위젯 메뉴들이 나타나는데요, Guage 위젯을 찾아 선택해 주세요.
이번엔 습도용 게이지를 만들기 위해 Guange 위젯을 하나 더 선택하세요.
먼저, 왼쪽 위젯을 선택해서 설정을 해 볼게요. 아래 이미지들을 참고하여, 온도와 습도에 대해 설정해 보세요.
그럼, 아래와 같은 형태가 되며, 아래 화살표를 터치하여 화면을 빠져나오면, 데이터가 연동되는 실행 모드가 됩니다.
현재, Arduino IDE Serial Value =Web Cloud Value =App Value 값들이 모두 연동되어 일치되는 것을 볼 수 있습니다.
그럼, 주변 온도 및 습도 변화에 제대로 반응하는지 빠르게 확인해 보기 위해, 아이스팩과 히터를 이용해 볼게요.
아이스팩을 센서 주변에 붙여보니, 온도가 상온보다 빠르게 떨어지고, 습도 또한 냉각으로 인하여 낮아지는 것을 볼 수 있습니다.
이번엔, 아래 이미지처럼, 미니 히터를 대어 보았는데요, 히터의 경우 온도가 빠르게 올라가며, 습도 또한 건조해져 떨어지는 것을 볼 수 있었습니다.
네, 이렇게 아주 잘 작동하고 있습니다. 오늘 이렇게 DHT11이라는 온습도 센서를 WiFi 기능이 기본 지원되는 나노ioT33 보드에 연결하고, Blynk 2.0(블링크) 서비스를 이용해서 웹과 앱에서 데이터를 실시간으로 확인(출력) 해보는 실습을 진행해 보았습니다. 블링크 서비스의 장점은, 어렵고 복잡한 코딩 과정 없이 실생활에 바로 응용할 수 있는 ioT 작품들을 매우 쉽고 빠르게 구축해 주는 것이라 생각됩니다.
그럼, 본 게시글이나 아래 링크해드리는 유튜브 영상을 함께 참고하여, 직접 여러 형태로 재미있게 활용해 보세요~ ^^&
Blynk2.0 은 WiFi 컨트롤 기능을 App뿐 아니라, Blynk Cloud라 하여 웹에서도 제어할 수 있는 기능을 제공하고 있습니다. 또한, 복잡하고 어려운 코딩이나 함수 사용 없이 매우 쉽게 IoT 시스템을 구축해 주는 멋진 시스템입니다.
이런 Blynk 2.0을 이용하여 휴대폰과 웹에서 Nano33 IoT 보드에 연결된 LED를 WiFi 무선으로 제어해 보는 실습을 준비했습니다.
여기서는 나노 33 IoT 보드를 사용하고 있지만, ESP8266 보드류 혹은 ESP32 보드 등으로도 바로 적용 가능합니다.
이번 학습은 시리즈로 제작되며, 전체 학습 내용은 아래와 같습니다. ====================================================== 시리즈 전체 실습 내용(예정) 1. Nano33 ioT & Blynk2.0 으로 LED On/Off 하기. (본 영상) 2. Nano33 ioT & Blynk2.0 으로 DHT11 센서 온도/습도 출력하기. 3. ESP01 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기. 4. ESP8266 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기. 5. ESP32 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기. ======================================================
【 이 실습에서의 주요 목차 】 ▶ ① Blynk 2.0 서비스 소개 ▶ ② 회로 연결도면 및 실습 준비 ▶ ③ 실습을 위한 아두이노 IDE 필수 라이브러리 설치 ▶ ④ 실습을 위한 Nano33용 Blynk 예제 파일 열기 ▶ ⑤ Blynk Cloud (blynk.cc) 설정 & 웹 대시보드 만들기(Dash Board) ▶ ⑥ 아두이노 IDE에 Auth Token & TEMPLATE ID & WiFi정보 입력하기 ▶ ⑦ Nano33 IoT WiFi 접속시키고 IP 할당 받음 확인하기 ▶ ⑧ Blynk IoT App에서 Dash Board(대시보드) 설정하기 ▶ ⑨ Blynk App & Cloud , 앱과 클라우드에서 LED 컨트롤 하기!
【 ① Blynk 2.0 서비스 소개 】
최근 Blynk 서비스가 2.0으로 바뀜에 따라, 현재 가입하려는 분들은 반드시 2.0 시스템으로 사용법을 익히셔야 합니다. 기존에 사용하던 Blynk앱 시스템은 이용자의 폭주와 웹 연동 서비스를 제공하기 위해 Blynk 2.0 시스템을 오픈하였습니다.
물론 기존 Blynk 시스템도 유료 서비스를 이용하던 사용자가 있기 때문에 서비스가 유지되고 있지만, Blynk 신규 가입자는 반드시 Blynk2.0을 이용해야 합니다. 다만, Blynk2.0의 경우 국내 자료가 아직 부족하고 사용법이 기존과 달라 접근하기가 쉽지 않습니다. 그래서, 기본 사용법을 익히실 수 있도록 본 게시글을 준비했으니 차근차근 따라 해 보시기 바랍니다. 현재 Nano33 ioT 보드로 기본 실습들을 구성했지만, esp8266 보드나 esp32 보드 들도 이 글을 참고하면, 동일하게 활용 가능합니다.
Blynk 앱을 검색해 보면, 기존(legacy) 앱과 Blynk2.0인 Blynk IoT앱 두 가지를 볼 수 있습니다. Blynk 2.0에서는 Blynk Cloud라 하여 웹에서도 아래처럼 컨트롤 버튼을 만들어 제어할 수 있고,
Blynk의 가장 큰 장점은 어려운 앱 개발 코딩이 필요 없다는 것과 쉬운 클라우드 서버 툴을 제공하기 때문에 웹코딩이 필요 없으며, 센서 및 회로 제어에 필요한 복잡한 아두이노 함수들을 자체적으로 처리해 주기 때문에 매우 쉽고 빠르게 IoT 응용 작품들을 구축할 수 있습니다. 다만, 동시에 2개의 프로젝트(템플릿)까지만 무료로 제공되며, 추가적인 프로젝트나 고급 위젯 Box를 이용하고자 한다면, 일정 비용을 지불해야 합니다. ( 단, 먼저 만들어진 프로젝트를 삭제하면 새 프로젝트를 계속 만들 수 있어요) 물론, 월 이용료 등의 일정 비용을 지불하면 상업용으로도 손색없는 IoT 시스템을 구축할 수 있을 것으로 생각됩니다.
【 ② 회로 연결 도면 및 실습 준비 】
먼저, 화면과 같은 부품을 준비하여 회로를 연결해 주세요.
Nano33 ioT는 핀 배열이 Nano 보드와 거의 동일한데요, Nano 보드처럼 사용하기 쉽고 WiFi 모듈까지 내장되어 있어 활용하기 좋은 보드입니다. Nano33 ioT 보드의 상세 설명과 사용법은 위에 링크해 드린, “처음 사용설명서 #1~#2”편을 참고해 보세요.
【 ③ 실습을 위한 아두이노 IDE 필수 라이브러리 설치 】
그럼, 아두이노 IDE에 필요한 필수 라이브러리 3가지를 설치해 주세요. 1. ‘보드 매니저’에서 SAMD 또는 NANO 33으로 검색해서 보드 인식을 위한 라이브러리를 설치합니다. nano 33으로 검색할 때는 중간에 공백을 주어야 합니다. 그리고, 라이브러리 매니저가 아니라 보드 매니저입니다. Nano 33 ioT는 SAMD21G18A 칩을 MCU로 사용하고 있는 보드입니다.
2. ‘라이브러리 매니저’에서 NINA 또는 WIFININA로 검색하여 WiFi 통신을 위한 라이브러리를 설치합니다.
3. ‘라이브러리 매니저’에서 blynk로 검색하여 BLYNK 라이브러리를 설치합니다.
그럼, 이제 모든 준비 사항은 끝났으며, LED1과 2를 웹과 앱을 통해 직접 제어해 볼게요.
아래는 실제 연결된 회로 모습입니다. 점퍼선을 이용해도 좋지만, 이렇게 굵은 단선으로 길이에 맞추어 연결하면 훨씬 간결하고 튼튼하게 오랫동안 유지됩니다.
【 ④ 실습을 위한 Nano33용 Blynk 예제 파일 열기 】
이제 ‘파일 》 예제 》 Blynk’ 메뉴에서 → ‘Boards_WiFi’항목으로 가서, Nano 33 ioT와 동일하게 사용할 수 있는 → ‘Arduino_MKR1010’ 예제를 열어 사용합니다.
ESP32 보드 및 ESP8266 보드들은 여기 예제들을 사용하면 됩니다.
기본 내용에 있는 것을 그대로 두고, 주석문 등을 확인해 본 후 필요 없는 부분을 정리해 보세요. 그리고 적당한 이름으로 저장합니다. 지금 아래 화살표 부분에 Blynk Cloud에서 템플릿 ID 등을 복붙복해올 예정입니다. (뒤에 다시 자세히 내용이 나옵니다)
【 ⑤ Blynk Cloud (blynk.cc) 설정 & 웹 대시보드 만들기(Dash Board) 】
1. 그럼, Blynk.CC 사이트에서 메일 주소로 간단히 회원 가입을 하세요.
그리고, Blynk.cloud로 접속하면 영상과 같은 모습을 볼 수 있습니다. 작업 순서는 1. 템플릿 탭에서 먼저 탬플릿을 만들고. 2. 찾기(Search) 탭에서 만들어진 템플릿에 보드 장치를 추가해주는 식으로 진행됩니다.
그럼, 템플릿(Templates) 탭을 클릭한 후 +New Template를 클릭하세요.
NAME에는 특수문자를 제외한 적당한 템플릿 이름을 입력하세요. 여기서는 Nano33 ioT LED로 이름을 적었습니다. HARDWARE 항목에는 Arduino를 선택하고, Connection Type에는 WiFi를 선택하세요. 마지막으로 Description에는 적당한 설명을 입력하고 Done을 클릭합니다.
설명란에도 특수 문자가 입력되면 이렇게 에러가 나니, 특수 문자를 빼고 작성하세요.
그럼 아래처럼, 여러 가지 탭으로 나누어진 메뉴가 보입니다.
여기서 주로 사용하는 탭은 Info / Data Streams / Web Dashboard 정도입니다.
그럼, Data Streams 탭으로 가서 +New Data Streams을 클릭하세요. 그리고, Digital 항목을 클릭합니다.
화면에 보이는 회로 연결을 참고하여 선택하세요. 마찬가지로 D5(GPIO 5)에 연결된 LED도 설정해 줍니다.
이제 Web Dashboard에서 컨트롤 패널을 만들어 주면 됩니다.
Display 항목에 있는 LED를 보드에 끌어다 놓고 크기를 정당히 조절해 줍니다.
기어 모양의 설정을 클릭하세요.
TITLE에 LED 1로 적고, Data Stream에는 2번 Pin으로 지정된 LED 1(2)을 선택해 주세요
두 번째 LED에 대해서도 동일하게 진행하면 됩니다. TITLE에 LED 2로 적고, Data Stream에는 5번 Pin으로 지정된 LED 2(5)를 선택해 주세요.
그럼 이제, 컨트롤(Control) 항목에 있는 스위치(Switch)를 끌어다 놓으세요.
마찬가지로, 설정을 눌러 스위치 이름을 정하고, 스위치를 누를 때 작동(연결되는) 시킬 LED를 선택해 줍니다 → LED 1 (2번 Pin)
필요한 경우, 스위치가 작동될 때, ON / OFF 글자를 표시하게 할 수도 있습니다. Save를 눌러 저장하고, 2번째 스위치에 대해서도 동일하게 진행하면 되는데요, 이번에는 좀 더 간편하게, 이미 만들어진 스위치 위젯을 복사하여 사용해 볼게요.
Switch 2 이름과 DataStream을 → LED 2 (5번 Pin)로 바꾸어 주면 됩니다.
그리고 반드시 저장(Save)을 눌러 주세요!
추후에 연결이 잘못되거나 변경을 원할 경우, 다시 Edit 버튼을 눌러 변경해 주면 됩니다.
이제 Search 탭으로 갑니다. 기존에 ESP32 보드를 추가해서 사용하던 장치가 보이는데요.
지금은 Nano33 보드를 추가하기 위해 + New Device를 클릭하고, From Template를 클릭하세요.
TEMPLATE 항목에 Nano33 ioT LED가 보일 텐데요, 선택하고 Create를 클릭하세요.
그럼, 바로 이 프로젝트에 대한 템플릿 ID와 이름, Auth Token 값들이 생성됩니다. 클립보드로 복사하기를 눌러 주세요.
방금 복사된 내용을 아두이노 IDE 코드에 붙여 넣으면 대부분의 작업은 끝이 납니다.
이제 코드에 수정해 주어야 할 부분들만 바꾸어주면 되는데요, char auth [ ] = BLYNK_ATTH_TOKEN으로 바꾸어 주세요. 접속 가능한 WiFi(핫스팟)의 char ssid [ ] = “-----” 와 비번(ssid [])을 바꾸어 주세요.
아두이노 코드입니다.
/* Nano33 IoT + Blynk 2.0 LED On/Off 실습 */
#define BLYNK_PRINT Serial
/* Blynk.Cloud 사이트에서 Nano33 IoT + LED에 대한 템플릿을 만든 후 대시보드에서 아래 3줄의 내용을 복붙복 하세요 */
#define BLYNK_TEMPLATE_ID "TMPL8FZBJtS4"
#define BLYNK_DEVICE_NAME "Nano33 ioT LED"
#define BLYNK_AUTH_TOKEN "3_no_kJo46jNhiMRzlpfPRlMELvHU-g4"
#include <WiFiNINA.h> // 라이브러리 매니저창에서 WiFiNINA로 검색 후 설치할 것
#include <BlynkSimpleWiFiNINA.h> // 라이브러리 매니저창에서 blynk로 검색 후 설치할 것
#include <DHT.h> // 라이브러리 매니저창에서 DHT로 검색 후 설치할 것(by Adafruit 버전)
char auth[] = BLYNK_AUTH_TOKEN;
// 접속 가능한 WiFi ID와 패스워드를 입력하세요
char ssid[] = "myGalaxy";
char pass[] = "12345678";
void setup()
{
Serial.begin(9600);
Blynk.begin(auth, ssid, pass);
}
void loop()
{
Blynk.run();
}
[ 아두이노 코드 다운로드 ]
필요한 아두이노 코드는 이것이 전부입니다. 코드가 정말 간단하죠? 네, 모든 작업은 끝났으며, 저장하고 코드를 아두이노에 업로드하면 됩니다.
만약, 컴파일(업로드) 과정에서 에러가 난다면, 툴 》 보드 》 Nano ioT 33 보드를 선택, 연결된 Com 포트를 제대로 선택했는지? 확인하세요.
이제 폰 핫스팟으로 WiFi 연결을 지원하고, Web Dashboard와 앱으로 제어가 되는지? 볼게요.
먼저, Nano33 보드의 리셋 버튼을 한 두 번 눌러 주세요.
그럼, 이 부분에 여러분의 Nano33 보드가 연결되는지? 확인할 수 있습니다.
터치해 보면, 핫스팟으로부터 할당받은 IP 주소도 확인할 수 있습니다.
이 상태에서는 이미 Web Dashboard에서는 Online 연결되어 있어 제어가 가능합니다.
그럼, 미리 설치하고 로그인되어 있는 Blynk ioT 앱을 실행시켜 볼게요. 아래처럼, Nano33 ioT 템플릿을 터치하면,
앱에서는 아래처럼 대시보드를 만들지 않았기에 만들 수 있는 메뉴가 나옵니다.
그럼, 이미지를 보고 위젯을 배치하며 대시보드를 만들어 보세요. 아래 이미지에서 화살표로 가리키고 있는 줄 세 개의 포인트를 터치하면, 위젯이라고 하는 박스들이 나옵니다.
아래 UPGRADE라고 표시되어 있는 위젯들은 일정 비용을 지불해야 이용 가능합니다.
하지만, 무료 위젯 만으로도 기본적인 프로젝트들은 어느 정도 만들어 볼 수 있습니다. 아래쪽으로 내려서, LED 위젯이 보이면 선택하세요.
터치를 좀 길게 하면 위젯의 위치를 옮길 수 있습니다.
크기를 조절하고, LED 위젯을 하나 더 불러오세요.
첫 번째 LED 위젯을 터치하면, 설정 화면이 보이는데요, 제목 : LED 1 / 색 : 블루 / DataStream : LED 1로 선택하세요.
뒤로 가기를 눌러 줍니다.
다음, 두 번째 LED 위젯을 터치하세요. 제목 : LED 2 / 색 : 그린 / DataStream : LED 2로 선택하세요.
LED 위젯은 LED의 On/Off 상태만 보여주기 때문에, LED를 켜고 끄기 위해서는 버튼(스위치)과 같은 위젯이 필요합니다.
같은 방법으로 위젯 박스 중에서 스위치 위젯을 꺼내어 배치하고 설정으로 들어가세요.
PUSH 버튼과 스위치의 차이는 PUSH 버튼은 누르고 있는 동안만 ON(1)이 되며, 떼면 OFF(0) 되는 방식입니다. 스위치는 한 번 터치할 때마다 ON(1)과 OFF(0)가 번갈아 바뀌는 방식입니다. 여기서는 SWITCH로 선택하세요.
버튼의 색상을 자유롭게 선택해 주세요. 여기서는 연결한 LED 색을 기준으로 동일하게 했습니다. LED1 은 파란색, LED2는 녹색을 사용했어요.
두 번째 버튼에 대해서도 설정해 주세요.
이제 위젯 설정도 끝이 났으며, 여기서 한 번 더 뒤로 가기를 터치하면 실행 모드가 됩니다. 아래 이미지는 대시보드에 배치가 완료된 최종적으로 완료된 모습입니다.
【 ⑨ Blynk App & Cloud , 앱과 클라우드에서 LED 컨트롤 하기! 】
자 그럼, App에서 스위치를 작동시켜 볼게요. ※ 참고 : 스위치 위에 있는 LED는 현재의 LED On/Off 상태를 알려주는 역할입니다. 이번에는, 웹의 Dash Board에서 스위치를 작동시켜 볼게요.
네, 아주 잘 작동되는 것을 볼 수 있습니다.
또한, 웹 대시보드에 있는 버튼(스위치)도 마우스로 클릭해 보세요. 스마트폰과 실제 LED가 동일하게 연동되어 작동됩니다.
여기서 중요한 것은, 아래처럼, 분홍색 체크 부분이 Online으로 되어 있어야 합니다.
아두이노 IDE 시리얼 모니터에서도 아래처럼, Ping 테스트 시간까지 표시되어야 합니다.
만약, 대시보드에 표시가 Off line 이거나, 아래처럼 아두이노 시리얼 모니터에 “Invalid auth token”에러 메시지를 띄우며 실행되지 않는다면, 작동되지 않습니다.
자 이렇게 Blynk 2.0 시스템을 이용해서 Nano33 ioT 보드에 연결된 LED를 제어해 보았습니다. Blynk 서비스가 한 번에 무료로 만들 수 있는 프로젝트는 2개 까지지만 기존 프로젝트를 삭제하면 계속해서 다시 만들 수 있기 때문에 ioT 테스트나 학습용으로 활용하기 아주 좋습니다. 또한 어렵고 복잡한 코딩 없이 매우 쉽게 IoT 시스템을 구축할 수 있는 장점이 큽니다.
【영상으로 학습 하기】
그럼, 다음 영상에서 센서 혹은 릴레이를 사용하여 좀 더 실용적인 제어를 해 보도록 할게요.