EASY DASHBOARD로 실시간 화면 만들기: 데이터베이스 연결부터 위젯 구성까지
현장에서 데이터를 실시간으로 보고 싶어도 전용 화면이 없으면 불편합니다. 값은 데이터베이스에 잘 쌓이고 있는데, 정작 확인하려면 매번 쿼리를 돌려야 하는 상황이 그렇습니다.
터치 패널이나 SCADA를 도입하는 방법이 있지만 설치와 구성이 복잡하고 비용도 만만치 않습니다. 화면 몇 개만 있으면 되는데 시스템 전체를 들이는 셈이 되기 쉽습니다.
EASY DASHBOARD는 실행 후 통신 프로토콜과 위젯만 설정하면 브라우저에서 실시간 데이터를 바로 확인할 수 있게 해 줍니다. 이 글에서는 EASY-LINK 시리즈가 수집해 데이터베이스에 저장한 데이터를 불러와 화면으로 만드는 전 과정을 다룹니다.
데이터베이스 저장 설정이 아직이라면 그 부분을 먼저 진행하셔야 합니다. 대시보드는 이미 쌓인 데이터를 읽어 오는 도구입니다.
전체 흐름
현장 센서 · PLC
↓ RS-485 / 이더넷
EASY-LINK (수집)
↓ MQTT 또는 직접 저장
데이터베이스 (MySQL)
↓ 쿼리
EASY DASHBOARD (화면)
대시보드는 가장 마지막 단계입니다. 앞 단계에서 데이터가 제대로 쌓이지 않으면 화면도 비어 있습니다. 순서대로 확인하시는 편이 빠릅니다.
Step 1. 설치 및 실행
제공받은 EASY_DASHBOARD 설치 파일을 실행합니다.
우측 상단의 DATA SOURCES에서 데이터 수집 방식을 설정합니다. 현장의 EASY-LINK 시리즈가 송신하는 통신 방식에 맞춰 적절한 데이터 수집 경로를 선택해야 합니다.
Step 2. 통신 방법 설정
EASY-LINK의 데이터베이스 저장 설정 내용입니다. 여기서 지정한 테이블 이름을 기억해 두십시오. 뒤에서 쿼리에 그대로 넣어야 합니다.
EASY-LINK가 데이터베이스에 저장한 데이터를 읽어오기 위해 데이터 소스를 MySQL로 설정합니다.
기본적인 데이터베이스 접속 정보를 입력한 후 쿼리문을 입력합니다. 다음 두 가지를 주의하십시오.
첫째, 엔드포인트 주소
http://127.0.0.1:5000/mysql-query
EASY DASHBOARD가 실행되고 있는 PC의 IP입니다. 로컬이면 127.0.0.1 을 씁니다. 다른 PC에서 접속하신다면 그 PC의 실제 IP로 바꾸셔야 합니다.
둘째, 쿼리문
SELECT * FROM dashboard1 ORDER BY id DESC LIMIT 10
dashboard1— 테이블 이름입니다. EASY-LINK 저장 설정에서 지정한 이름과 같아야 합니다.ORDER BY id DESC— 최신 데이터가 위로 오도록 정렬합니다.LIMIT 10— 가져올 수량입니다. 화면에 몇 건을 보여줄지에 맞춰 조정하십시오.
LIMIT을 크게 잡으면 그만큼 매번 많은 데이터를 읽어옵니다. 표로 최근 값만 보실 거라면 10~50 정도로 충분합니다. 추이 그래프를 그리실 때만 늘리십시오.
SAVE로 저장한 후 설정된 주기로 새로고침되는지 확인합니다. 여기서 데이터가 보이지 않으면 위젯을 만들어도 비어 있으니, 이 단계를 반드시 통과하고 넘어가십시오.
Step 3. 위젯 설정
화면 상단의 ADD PANE을 선택합니다.
위젯이 생성되면 + 버튼으로 타입을 선택합니다.
위젯 종류와 쓰임새
| 위젯 | 용도 |
|---|---|
| Text | 실시간 숫자·문자열을 간단히 표시 |
| Gauge | 아날로그 계기판 형태로 값 시각화 |
| Sparkline | 작은 선 그래프로 추이 표시 |
| Pointer | 바늘형 계기판 |
| Picture | 이미지 삽입 |
| Indicator Light | 상태 표시용 ON/OFF 신호등 |
| Google Map | 지도 위에 위치·데이터 표시 |
| HTML | 사용자 정의 HTML 출력 |
| Horizontal Linear Gauge | 수평 바형 게이지 |
| Time series (Highcharts) | 시간 그래프 (라인 차트) |
| Slider | 값을 조절하는 슬라이더 |
| Text Send | 사용자 입력값 전송 |
| Button | 클릭 시 명령 실행 |
| Color Threshold Plugin | 구간별 색상 표시 |
| Color Value Plugin | 값에 따라 색상 자동 변경 |
| Tabulator Table | 표 형태 데이터 테이블 |
| Page Button | 화면(페이지) 전환 |
Slider · Text Send · Button은 값을 보내는 위젯입니다. 설비를 실제로 움직이는 데 쓰신다면 현장 인터록과 권한 관리를 함께 검토하십시오.
예시: Tabulator Table 구성
테이블 제목은 임의로 설정한 후 데이터 소스를 이미지를 참조해 설정합니다.
설정은 완료되었지만 위젯의 가로폭이 좁아 보기가 불편합니다. 상단의 스패너 표시를 눌러 COLUMNS를 4로 변경합니다.
데이터 소스에 설정한 대로 최신 10개의 데이터가 표시됩니다.
다른 위젯 예시
같은 방법으로 여러 위젯을 구성할 수 있습니다.
Text — 값 하나를 크게 보여줄 때 씁니다.
Gauge — 정상 범위가 있는 값에 적합합니다.
Linear Gauge — 가로 공간이 넉넉할 때 여러 개를 나란히 두기 좋습니다.
Threshold Plugin — 기준을 넘었는지 색으로 즉시 구분됩니다.
Time series — 추이를 봐야 하는 값에 씁니다.
동작 영상
화면을 잘 만드는 요령
위젯을 많이 붙일수록 좋은 화면이 되지는 않습니다. 실제로 쓰이는 화면은 대체로 단순합니다.
- 한 화면에 한 가지 질문만 — "지금 정상인가"를 보는 화면과 "어제 무슨 일이 있었나"를 보는 화면은 나누십시오.
- 이상을 색으로 — 숫자만 나열하면 이상을 눈으로 찾아야 합니다. Threshold를 걸어 두면 한눈에 들어옵니다.
- 추이가 필요한 값만 그래프로 — 모든 값을 그래프로 만들면 정작 중요한 그래프가 묻힙니다.
- 갱신 주기는 필요한 만큼만 — 1초마다 새로고침해야 하는 값은 생각보다 적습니다.
잘 안 될 때 확인할 것
- 데이터가 아예 안 나온다 — Step 2에서 SAVE 후 갱신되는지부터 확인합니다. 여기가 안 되면 위젯 문제가 아닙니다.
- 접속 오류가 난다 — 엔드포인트 IP가 대시보드 실행 PC와 맞는지 확인합니다.
- 테이블이 없다는 오류 — 쿼리의 테이블 이름이 EASY-LINK 저장 설정과 다릅니다.
- 값이 갱신되지 않는다 — EASY-LINK가 데이터베이스에 실제로 쓰고 있는지 확인합니다. 데이터베이스에서 직접 조회해 보시면 구분됩니다.
- 화면이 느리다 —
LIMIT값이 너무 크거나 갱신 주기가 너무 짧습니다.
도입을 검토하신다면
이 글의 구성은 EASY-LINK 시리즈만 있으면 그대로 재현할 수 있습니다. 현장 조건에 맞는 모델 선정이나 프로토콜 적용 가능 여부가 궁금하시면 문의해 주세요. 사용 중인 PLC 기종과 수집하려는 데이터만 알려주시면 구성안을 잡아 드립니다.
- 제품 라인업 살펴보기 — EASY-LOGGER · EASY-LINK · EASY-RELAY · EASY-TEMP
- 도입 문의
- 기술 블로그 전체 글