[아두이노#385] (릴레이제어#11) 노드레드(node-red)와 IoT스케쥴러3부(UI_TEMPLATE으로 입력창을 팝업으로 구성해보기)(녹칸다/포로리야공대가자)
프로그래밍/N채널릴레이와 자동화매크로 2021. 11. 24. 23:51
회로도는 없음!
(릴레이제어#11) 노드레드(node-red)와 IoT스케쥴러3부(UI_TEMPLATE으로 입력창을 팝업으로 구성해보기)
녹칸다의 N채널 릴레이를 제어하기 위한 시리즈이다!
이번편 부터는 1~8편에서 진행한 내용에서 한단계 더 진화된 내용을 다루어 보도록 한다!
1~8편에서는 아두이노나 사물인터넷보드(esp8266/wemos d1r1)가 스스로 일정을 관리하면서 N채널 릴레이를 제어하고 외부에서 일정을 입력하거나 변경해주는 형태로 구성을 했었다!
그러나 9편부터는 IoT보드로만 구성해서 완벽하게 외부에서 일정을 관리하고 보드는 명령을 받아서 N채널 릴레이를 개별적으로 제어하는 것을 목표로 한다!
그러기 위해서는 유저로 부터 입력을 받거나 현재 상황을 출력하기 위한 유저인터페이스(UI)가 필요하고 스케쥴 관리를 할 수 있는 시스템이 필요한데 한큐에 해결할 수 있는 노드레드(node-red)라는 툴을 활용하다록 한다!
그러나 노드레드로 원하는 결과물을 만드는 것은 그렇게 호락호락하지 않다! (호락호락 하지 않은것을 해결하기 위해서 녹칸다가 일부 해법을 마련해둔 채로 시작한다)
너무 많은 내용을 한편에 담기 어려울 것 같아서 전체 내용을 4부로 쪼개어서 진행하도록 하는데 정확하게 분리하기 어려운 내용들이라 개념적으로 쪼개었다 하더라도 시간을 보면서 탄력적으로 조정을 하도록 한다!(오늘 내용을 내일 하거나, 내일 내용을 오늘 할 수도있음)
그리고 IoT스케쥴러는 스마트폰 화면에서 유저의 입력을 받고 지정된 스케쥴에 해당하는 시간이 도래하면 지정된 IoT보드에게 작동명령이 가도록 해야한다!
이번편에서는 노드레드(node-red)에서 사용자의 입력을 받기 위한 UI를 구현해보도록 한다!
사용자의 입력은 textbox로 간단히 구현할 수 있지만 textbox를 사용하게 되면 스마트폰이나 태블릿의 키패드가 작동되게 된다!
키패드가 등장하게 되면 전반적인 UI를 가리게 되어서 사용하기가 약간 불편할 것이라 예상된다!
그러므로 노드레드에서 UI-template을 이용해서 팝업 입력창을 구현하고 IoT스케쥴러에 필요한 입력값을 입력받을 수 있도록 해보자!
아래와 같은 문제를 해결해야할 것 같다!
-팝업으로 입력시 모든필드 초기화
-디바이스아이디4자리 채널번호 3자리정도
-팝업입력창이 채워지지않으면 넘어가면안된다
-팝업입력창은 입력루 모든칸이 클리어된다
1.버튼을 누르면 팝업이 뜬다
2.입력칸에 키패드를 클릭하면 순차적으로 길이에 맞게 입력이된다
3.잘못입력해서 중간값을 입력할 수 있어야한다
4.팝업을 그냥 닫을 수 있어야한다(버튼/외곽클릭)
5.전체 입력칸을 초기화 할 수 있어야한다
6.입력버튼을 누르면 table에 값을 입력하되 조건에 맞지 않으면 출력하지 않는다
(팝업코드 레퍼런스)
https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/8
(내일해야할 숙제)
1.노드레드가 있는 로컬호스트의 웹브라우저가 아닌 다른 디바이스에서 UI를 출력했을때 업데이트가 되어야할 타이밍을 확실히 해야할 필요가 있다!
2.원격호스트에서 테이블 내용을 삭제했을때 다른 UI에서 반영이 안되고있다!
3.원격호스트에서 경우에따라서 새로고침(F5)가 아닌 화면을 리플레시할수 있는 버튼을 하나 둬서 reload할수있도록 할것!
(사물인터넷보드용 코드는 384편과 동일함)
