- Raspberry Pi에 Dashboard 설치하기
- UI(User Interface) 생성하기
- UI(User Interface) 생성 예
- Raspberry Pi와 Node-RED Dashboard 관련 페이지 보기
- Dashboard 설치하기
- 아래 명령으로 Node-RED 실행을 정지한다.
- 아래 명령으로 Node-RED user directory로 이동한다.
- 아래 명령으로 Old dashboard version "node-red-contrib-ui-i"을 삭제한다.
- Raspberry Pi 터미널(Putty)에서 다음 명령을 실행하여 Node-RED Dashboard를 설치하고 Paspberry Pi를 Reboot 한다.
- Web browser(PC 등)에서 다음과 같이 Node-RED가 설치된 Raspberry Pi에 접속(Port 번호: 1880)한다.
- Dashboard 정상 설치 여부를 확인하기
Node-RED 대시 보드는 네트워크에 연결된 장치의 제어(버튼, 스위치 등을 사용)와 상태(측정 결과를 게이지, 차트 등으로 표시)을 그래픽으로 브라우저에 표시할 수 있도록 하는 추가 기능 모듈이다. Node-RED 대시 보드는 선택적 모듈이기 때문에 추가로 설치하여야 한다.
참고자료: Node-RED site
참고자료: Dashboard GitHub
pi@raspberry:~ $ bash node-red-stop
pi@raspberry:~ $ cd ~/.node-red
pi@raspberry:~/.node-red $ sudo npm uninstall node-red-contrib-ui
주: node-red-contrib-ui는 더 이상 지원 되지 않기 때문에 설치되어 있는 경우 삭제하고 Node-RED Dashboard를 설치하는 것이 좋다.
pi@raspberry:~/.node-red $ sudo npm install node-red-dashboard
sudo reboot
http://Raspberry_Pi_IP_ADDRESS:1880
정상적으로 설치가 완료되면 Node-RED 페이지의 좌측 팔레트(Palette) 창에 Dashboard 카테고리가 추가 된다.
주: 만약 Node-RED가 정지되어 접속되지 않는 경우에는 아래 명령으로 Node-RED를 실행한다.
pi@raspberrypi:~ $ node-red-start
Web browser(PC 등)에서 다음과 같이 Node-RED가 설치된 Raspberry Pi에 접속(Port 번호: 1880)한다.
http://Raspberry_Pi_IP_ADDRESS:1880/ui
예: 192.168.0.18:1880/ui
Dashboard가 정상으로 설치된 경우 Web browser 예
- Dashboard 개요
- 탭(Tab): 대시 보드(Dashboard)는 브라우저에 표시되는 페이지(Tab)를 여러개 가질 수 있다. 브라우저에 표시되는 서로 다른 페이지는 탭 이름(Tab name)으로 구분 된다.
- 그룹(Gropup): 각 디스플레이 페이지(Tab)는 여러개의 그룹(Gropup)으로 구성 될 수 있다.
- Dashboard node를 Flow canvas에 배치하면 Display tab 과 Display group을 편집하여야 한다.
- Dashboard Layout
- Tab 과 Group 생성하기
- Tab 생성하기
- Node-RED 창의 오른쪽 상단에는 Dashboard Tab을 선택하고, Dashboard 창에서 Layout를 선택하면 Dashboard Layout 창이 열린다.
- 사용자 인터페이스에 Tab을 추가하려면 +tab 버튼을 클릭한다.
- 사용자 인터페이스에 Tab이 생성되면 편집 버튼을 클릭하여 Tab을 편집 할 수 있다.
- Group 생성하기
- Tab 이름 위에 커서를 가져가면 "+group" Button 버튼이 표시된다. "+group" Button을 한번 클릭하면 하나의 Group이 생성된다.
- Tab 이름을 클릭하면 생성된 Group이 표시된다.
- 위젯을 추가하려면 하나 이상의 그룹을 만들어야 한다.
- Tab 편집하기
- Tab 편집 버튼을 클릭하면 아래와 같은 Tab 편집창이 열린다.
- Tab 이름과 Icon 이름을 편집한다.
- 아이콘 이름은 "Material Design icon", "Font Awesome icon", "Weather icon" 중 하나에서 제공하는 이름을 사용(Tab node 편집창 아래에 아이콘 제공 사이트에 대한 안내가 있음)하여야 한다. 아래 Link 예는 "Angular Material"의 Link 이다.
- Group 편집하기
- Group 이름 위에 커서를 가져가면 "edit" Button 버튼이 표시된다.Group 편집 버튼을 클릭하면 아래와 같은 Group 편집창이 열린다.
- Group 이름을 편집한다.
- Group이 속한 Tab을 선택한다. Group을 포함할 Tab은 먼저 생성되어 있어야 한다.
- Dashboard Theme
- Dashboard 창에서 Theme Tab을 클릭하면 아래와 같은 Dashboard Theme 편집창이 열린다.
- Node-RED Dashboard에는 기본적으로 흰색 배경과 하늘색 막대가 있다. 다음 그림과 같이 오른쪽 상단의 테마 탭에서 색상을 편집 할 수 있다.
- Dashboard Site
- Dashboard 창에서 Site Tab을 클릭하면 아래와 같은 Dashboard Site 편집창이 열린다.
- 이 창에서 Dashboard의 속성을 편집할 수 있다.
- 아직 Dashboard에 아무것도 추가하지 않았기 때문에 지금은 속성을 편집하여도 큰 차이가 없다. 그러나 UI에 위젯을 추가한 다음 속성을 변경하면 변경 사항을 확인 할 수 있다.
대시 보드(Dashboard)는 Chrome 브라우저를 사용하여 Node-RED와 Dashboard가 설치된 컴퓨터에 아래와 같은 명령으로 접속하면 브라우저에 표시 된다.
http://Raspberry_Pi_IP_ADDRESS:1880/ui
Chrome 브라우저에 출력된 Dashboard 예
chrome 웹 브라우저에서 아래 명령을 참고하여 Raspberry Pi Node-RED에 연결 한다.
http://Raspberry_Pi_IP_address:1880
좌측의 팔레트(Palette) 창을 아래로 스크롤하면 다음 그림과 같이 Dashboard Node 집합이 표시(실제는 세로 1줄로 표시됨. 여기서는 편의를 위하여 2줄로 편집함)된다. Dashboard 창의 Node는 애플리케이션 UI 에 표시되는 위젯을 제공한다.
사용자 인터페이스는 Tab과 Group으로 구성된다. Tab은 브라우저의 여러 다른 페이지를 구분하기 위하여 사용된다. 각 Tab에는 위젯(Widget)을 구성 할 수 있도록 Tab을 여러 섹션으로 나누는 Group이 있다.
모든 위젯은 위젯이 사용자 인터페이스에 표시되어야하는 위치를 결정하는 관련 그룹에 연결되어야 한다.
Tab 과 Group 생성을 위한 Dashboard 창 예
Icon: Angular Material Icons
Tab node 편집창 예
Group node 편집창 예
Dashboard Theme 편집창 예
Dashboard Site 편집창 예
- UI(User Interface) 생성하기 과제 개요
- 이 Dashboard 예는 2개의 Tab(Room 과 Garden)이 있다.
- Room Tab에는 2개의 그룹(Switch 와 Slider)이 있고,
- Garden Tab에는 1개의 Group(Gauge)이 있다.
- Tab과 Group 생성하기
- Node-RED 창의 오른쪽 상단에는 Dashboard Tab을 선택한다.
- Layout Tab을 클릭하여 Layout 창을 열고 +tab 버튼을 사용하여 새 Tab(Room)을 생성한다.
- Name: Room
- Icon: tv
- +group Button을 사용하여 2개의 Group(Group1 , Group 2)을 생성한다.
- +tab 버튼을 사용하여 새 Tab(Room)을 하나 더 생성한다.
- Name: Garden
- Icon: pool
- +group Button을 사용하여 Group(Group1)을 생성한다.
- Flow에 위젯(Widget) 추가하고 배포하기
- 아래와 같이 Flow에 3개의 위젯(Switch, Slider, Gauge)을 추가한다.
- Dashboard node(위젯)를 Flow canvas에 배치하면 아래의 3 항목을 설정하영야 한다.
- 그룹(Gropup) 이름
- Label name: Dashboard에 표시되는 이름
- Name: Flow workspace에서 이름
- Switch를 Double click 하면 Switch 위젯 편집창이 열린다. 이 편집창에서 아래와 같이 Group을 Room Group 1으로 설정한다.
- Slider를 Double click 하면 Slider 위젯 편집창이 열린다. 이 편집창에서 아래와 같이 Group을 Room Group 2으로 설정한다.
- Gauge를 Double click 하면 Gauge 위젯 편집창이 열린다. 이 편집창에서 아래와 같이 Group을 Garden Group 1으로 설정한다.
- "배포하기"를 클릭한다.
- 배포하기가 성공적으로 실행되면 아래 명령으로 Node-RED Dashboard 페이지를 Web browser(PC 등)에서 연결한다.
- Tab(Room 과 Garden)과 Group의 선택에 따라 아래와 같이 Web browser에 설계된 Dashboard가 출력된다.
이 예는 자신 만의 대시 보드를 만들고 편집하는 예 이다. 이 예에서는 실제로 위젯에 기능을 추가하지 않는다. 위젯에 기능을 추가하는 예는 다른 프로젝트에서 수행 할 것임.
2의 Tab(Room 과 Garden)과 Group을 생성한 Dashboard layout 예
Flow에 3개의 위젯(Switch, Slider, Gauge)을 추가한 예
위젯 편집창(Switch node 속성 편집창 예) 예
http://Raspberry_Pi_IP_ADDRESS:1880/ui
Tab 선택 창과 Room Tab Dashboard 예
Room Tab Dashboard 예
Garden Tab Dashboard 예
주: Dashboard의 실제 사용 예는 "ESP8266/ESP32 DHT11 온습도 센서 - MQTT와 Node-RED 이용"을 참고하기 바람.
