통신/Node-RED

[Node-RED] 슬라이더와 게이지를 통한 dashboard 간단 사용 방법

귀뚜래미 2022. 9. 6. 14:31
728x90

슬라이더와 게이지 노드를 각각 드래그앤 드랍 후 노드를 연결해준다.
슬라이더 노드를 더블클릭하여 최소값, 최대값을 지정한다. 마찬가지로 게이지 노드도 색상이 변화할 특정 값을 지정해준다.
우측 정보창에서 Dashboard 화면을 열어 Tab과 Group을 하나 추가한다.
다시 슬라이더 노드를 더블클릭하여 방금 생성한 그룹으로 지정해준다. 마찬가지로 게이지 노드도 같은 방법으로 그룹을 지정해준다.

 

이후 Deploy를 눌러 완료되면 http://localhost:1880/ui/로 작업 내용을 확인할 수 있다.

슬라이더 값에 따라 게이지의 변화를 확인할 수 있다.

 

페이지를 두 개 이상으로 하려면 Flow를 하나 더 추가해준다.

 

이번에는 슬라이더와 차트 노드를 추가 후 서로를 연결시켜준다.

 

새로운 탭과 그룹을 추가해준다. 이전과 마찬가지로 각각의 노드들을 더블클릭하여 새로 생성한 그룹으로 연결시켜준다.
다시 Deploy를 진행 후 ui 화면을 보면 새로 만든 탭을 확인할 수 있다.
결과 확인

 

서버 아이피 주소:1880/ui 경로를 통해 모바일로도 확인이 가능하다.

728x90