Data Viewing

대시보드는 데이터 조회와 시스템 제어를 하나의 사용자 정의 가능한 화면으로 결합합니다.

데이터 조회 도구~

실시간 측정값~

활성화된 모든 입력(Input)·함수(Function) 컨트롤러의 최신 데이터를 표시합니다. 로그인 후 가장 먼저 보이는 페이지입니다.

비동기 그래프~

주/월/년 단위의 장기 데이터 분석에 적합하며, 각 확대 수준에 필요한 데이터 포인트만 불러와 큰 데이터에서도 빠르게 동작합니다.

대시보드~

위젯을 통해 데이터 조회와 시스템 제어를 결합한, 완전히 사용자 정의 가능한 페이지입니다. 대시보드 위젯은 정보와 상호작용을 함께 제공합니다 — 센서 추세 모니터링(차트·게이지), 하드웨어 빠른 제어(슬라이더·스위치), 환경 데이터 조회(날씨·GIS 지도), AI 기반 인사이트 확인 등에 활용합니다.

탭~

대시보드는 상단의 탭 바에 표시되는 탭으로 구성됩니다. 각 탭은 자체 위젯과 배치를 가진 독립적인 대시보드이므로, 용도별로 화면을 나눌 수 있습니다 — 예를 들어 "온실 A" 탭, "관수" 탭, "전체 개요" 탭처럼요. 모든 위젯은 정확히 하나의 탭에 속합니다.

탭은 탭 바에서 관리합니다:

• 탭 만들기 — 탭 바 왼쪽의 + 버튼을 클릭합니다. 새 탭("Dashboard N")이 생성되어 열립니다.
• 이름 변경 / 삭제 / 복제 — 탭 바 오른쪽의 톱니바퀴(설정) 아이콘을 클릭해 대시보드 설정을 엽니다. 이름을 수정(중복 불가)하고 저장하거나, 복제(탭과 모든 위젯을 함께 복사)·삭제를 사용합니다. 마지막 남은 탭을 삭제하면 새 탭이 자동으로 생성됩니다.
• 탭 순서 변경 — 탭을 탭 바에서 좌우로 드래그합니다. 순서는 자동 저장됩니다.
• 탭 잠금 — 대시보드 설정에서 잠금을 클릭하면 배치가 고정되고 편집 컨트롤이 숨겨집니다. 잠금 해제를 클릭하면 다시 편집할 수 있습니다. 잠금은 탭별로 적용됩니다.

위젯 추가와 배치~

현재 탭이 잠금 해제 상태일 때:

• 위젯 추가 — 드롭다운에서 위젯 종류를 선택하고 위젯 추가를 클릭합니다. 위젯이 현재 탭에 배치됩니다.
• 이동 / 크기 조절 — 위젯을 끌어 위치를 옮기거나, 모서리를 끌어 크기를 조절합니다. 위치는 자동 저장됩니다.
• 위젯 설정 — 위젯의 톱니바퀴 아이콘을 클릭하면 화면 오른쪽에서 설정 드로어가 슬라이드로 열립니다(폰에서는 하단 시트로 열립니다). 대부분의 위젯은 별도의 저장 버튼이 없습니다 — 옵션을 바꾸면 잠시 뒤 자동으로 적용·저장되고, 위젯이 그 자리에서 다시 그려집니다. 바꾼 결과가 마음에 들지 않으면 드로어 하단의 되돌리기 버튼을 눌러 드로어를 열었을 때의 상태로 모든 옵션을 되돌릴 수 있습니다. 위젯을 처음부터 다시 만들어야 하는 일부 옵션 — 예: AoT 지도 위젯의 기본 지도나 3D 렌더 모드 — 은 여전히 기존의 저장 버튼이 필요합니다. 아래 AoT 지도를 참고하세요.
• 위젯을 다른 탭으로 이동 — 위젯 설정 드로어에서 탭 드롭다운(탭이 둘 이상일 때 표시)에서 다른 탭을 선택합니다. 다른 옵션과 마찬가지로 이동도 자동으로 저장됩니다.

주요 위젯~

기본 차트·제어 외에도 AoT는 기능이 풍부한 여러 위젯을 제공합니다. 대표적인 위젯은 아래와 같으며, 전체 목록은 지원 위젯을 참고하세요.

AoT 지도~

여러 동·구역에 흩어진 센서와 장치를 지도 한 장 위에서 보고 바로 제어합니다. 색이 다른 마커를 클릭하면 최근 측정값을 보거나 출력을 바로 켜고 끌 수 있습니다. MapLibre GL 기반이라 GIS 오버레이 레이어, 3D 지형·시설 렌더링, 부드러운 확대/축소를 지원합니다.

주요 옵션

• 지도 — 저장된 지도를 선택하거나, 대체 위도/경도와 확대 수준을 설정합니다.
• 3D 지도 — 기본 피치·베어링·시설 렌더 모드(기본 / 솔리드 / 와이어프레임 / 성능)를 설정합니다.
• 장치 — 지도에 표시할 입력·출력·함수 장치를 선택합니다.
• 측정값 패널 — 측면 데이터 패널에 표시할 측정값을 선택합니다.
• 라벨 — 라벨 표시 마스터 스위치와 함께 충돌 방지, 간격, 글자 크기를 설정합니다.
• 센서 라벨 — 마커 스타일(원 또는 텍스트), 소수 자릿수, 클릭 시 열리는 24시간 차트 팝업.
• 도형 — 사이트 / 구역(zone) / 시설 / 장비 / 장치 폴리곤 표시를 토글합니다.

특징: 실시간 센서 값이 3D 구조물 위에 표시되며, 전역 AI가 설정된 경우 최신 AI 조언이 지도 상단에 클릭 가능한 칩으로 나타납니다. 옵션 전체 목록과 상세 설명은 AoT_map 위젯 상세 문서를 참고하세요.

AoT Plot~

구획 하나의 상태 — 단계 타임라인, 목표와 나란히 보이는 현재 측정값, 추세, 누적 적산온도 — 를 대시보드에 상주시킵니다. 지도에서 매번 클릭해 들어가는 대신, 한 작기 내내 눈여겨보고 싶은 구획을 위한 위젯입니다. 장치 제어는 일부러 담지 않습니다(그건 지도·시설 위젯의 몫). 어떤 구획을 볼지는 설정 드로어가 아니라 위젯 본체의 검색 가능한 드롭다운에서 고릅니다. 전체 사용법은 AoT Plot 위젯 문서를 참고하세요.

시퀀스 컨트롤러~

시퀀스 함수(예: 급수 펌프 + 밸브를 순서대로 여는 관수 루틴)를 만들었다면, 이 위젯으로 대시보드에서 켜고 끄고, 지금 몇 번째 단계가 진행 중인지, 어느 요일에 실행할지를 한눈에 보고 조작할 수 있습니다. 별도 관리 화면에 들어갈 필요 없이 대시보드에서 바로 밸브 순서를 바꾸거나 요일을 껐다 켤 수 있습니다.

위 화면은 실제 운영 중인 관수 시퀀스입니다. 상단 체크박스로 요일별 실행 여부를 켜고 끄고, 시작·종료·주기를 확인하며, 아래 동작 목록에서는 밸브들이 (같은 색으로 묶인 것은 장치 그룹) 순서대로 나열됩니다. 제목 옆 토글로 시퀀스 전체를 즉시 활성화·비활성화할 수 있습니다.

주요 옵션

• 시퀀스 함수 — 제어할 시퀀스를 선택합니다.
• 새로고침(초) — 위젯 갱신 주기.
• 동작 목록 표시 — 동작 목록의 기본 표시 여부.
• 시퀀스 설정(동기) — 시작 시각, 종료 시각, 사이클 주기, 시작 지연, 스텝 교차 시간. 이 값들은 기저 시퀀스를 수정하며 시퀀스와 양방향으로 동기화됩니다.

특징: 위젯 본문에 요일별 스케줄이 표시됩니다 — 요일별 활성화 체크박스와 탭하여 편집하는 요일 칸으로, 시퀀스가 실행될 요일을 대시보드에서 바로 설정할 수 있습니다.

AoT 타이머~

출력을 정해진 시간만큼 켠 뒤 자동으로 끕니다 — 별도의 시퀀스 함수를 만들지 않고도 펌프나 팬 하나를 가장 간단하게 자동화하는 방법입니다. 예를 들어 사이클 모드로 실행 20분·휴식 1시간 40분을 설정하면, 한 화단에 2시간마다 20분씩 정해진 횟수만큼 반복해서 물을 줄 수 있습니다. 단순 모드는 대신 한 번만 실행합니다(0 = 중지할 때까지 계속 실행).

주요 옵션

• 출력 — 제어할 출력 채널.
• 동기화(초) — 위젯이 서버에서 현재 동작 상태를 다시 불러오는 주기.
• 타이머 — 켜짐(기본값): 아래 시간 설정 컨트롤을 표시합니다. 꺼짐: 토글이 실행/휴식/사이클/예약 시작 설정과 무관하게 단순히 이 출력을 켜고 끄는 스위치로만 동작합니다 — 이 출력을 단순 On/Off 스위치로만 쓰고 싶을 때 사용하세요.
• 동작 모드 — 단순(기본값, 1회 실행, 0 = 중지할 때까지 실행) 또는 사이클(실행/휴식을 정해진 횟수만큼 반복).
• 사이클 설정 — 이 출력에서 처음 타이머를 시작할 때 쓸 실행 시간·휴식 시간·반복 횟수입니다. 한 번이라도 시작한 뒤에는 위젯이 실제로 사용한 값을 기억해 다시 보여주므로, 이 기본값은 최초 1회만 나타납니다.
• 예약 시작(hh:mm) — 장치 시간대 기준 벽시계 시각(00:00 = 즉시 시작, 과거 시각은 다음 날로 예약).
• 상태 표시 — 현재 단계(실행 중/휴식 중/예약됨)를 제목 표시줄에 표시합니다.

특징: 서버의 백그라운드 워커가 실행/휴식 사이클을 구동하므로 대시보드 탭을 닫아도 멈추지 않습니다. 예약 시작을 기다리는 중에 앱이 재시작되면 다음에 대시보드가 상태를 확인할 때 그 예약이 자동으로 다시 설정됩니다 — 다만 재시작 시점에 이미 실행 중이거나 휴식 중이던 사이클은 자동으로 이어지지 않으니, 앱 재시작 후에는 해당 출력을 직접 확인하세요.

AoT 그래프~

여러 측정값을 한 그래프에 겹쳐서 보고 서로 어떻게 연관되는지 확인할 때 사용합니다(Highcharts Stock 기반). 예를 들어 한 하우스의 기온·습도(입력)를 VPD(함수 측정값), 관수 밸브의 작동 시간(출력)과 함께 그리면 온도가 튄 시점이 관수 사이클과 겹치는지 한눈에 확인할 수 있습니다.

주요 옵션

• 시간축 — 새로고침 간격, X축 기간과 단위(일 / 시간 / 분), 자동 새로고침, 라이브 창으로 되돌아가는 X축 리셋.
• 데이터 소스 — 입력·함수·출력·PID·노트 태그 측정값 다중 선택(Ctrl / ⌘을 눌러 여러 개 선택). 개수 제한은 없지만 색상 팔레트가 약 16색이라, 그 이상을 더하면 남는 시리즈들이 같은 대체색을 공유합니다.
• 그래프 스타일 — 헤더 버튼·제목·내비게이터·내보내기·기간 선택기·범례 토글, 요소별 글자 크기, 모바일 축 라벨 숨김 옵션.
• 시리즈별(설정 모달) — 사용자 지정 색, 시리즈 타입(선 / 스텝 / 막대), 데이터 그룹화 토글, Y축 최소/최대 수동 설정(같은 단위를 쓰는 시리즈끼리 Y축을 공유합니다).

특징: 이력이 온디맨드로 로드됩니다 — 위젯은 평소 설정된 창만 보유하지만, 기간 버튼(1m … 3mo / All)이나 확대를 사용하면 이전의 다운샘플된 데이터를 불러와 병합합니다. 리셋 버튼은 라이브 슬라이딩 창으로 되돌립니다. 더 긴 기간의 이력 분석은 비동기 그래프를 참고하세요.

AoT 원형 게이지~

단일 측정값을 색상 밴드가 있는 원형 게이지로 표시합니다.

주요 옵션

• 측정값 — 표시할 입력·함수·PID 측정값.
• 최소 / 최대 값 — 게이지 범위.
• 색 구간 수 — 원호를 나눌 색상 밴드 개수(각 구간의 색과 시작 값은 설정 모달에서 편집).
• 프리셋 구성 — 사용자 지정, 온도, 습도, VPD. 프리셋은 최소/최대를 자동 설정하고 전역 밴드 색을 따릅니다.
• 표시 — 소수 자릿수, 데이터/단위 글자 크기와 굵기, 값 위치 오프셋.

특징: 프리셋은 전역 5밴드 팔레트(설정 → Custom UI)에서 가져오며, 게이지의 구간 색을 그 전역 밴드 색으로 되보낼 수도 있습니다. 올바르게 표시하려면 최대 값이 최상단(High) 구간과 일치해야 합니다.

함수 상태~

설정에서 고른 함수(Function)·조건문(Conditional)·PID 컨트롤러의 실시간 상태를 표시합니다. 위젯의 상세 버튼을 클릭하면 해당 컨트롤러의 현재 상태를 보여주는 모달이 열리고, 편집 권한이 있으면 그 자리에서 설정도 바로 바꿀 수 있습니다 — On/Off 옵션은 토글 스위치로, 나머지는 숫자·문자 입력칸으로 보입니다. PID 컨트롤러는 AoT PID 위젯 자체의 상세 화면과 같은 방식으로 평소 쓰는 튜닝값(설정값, P/I/D 게인, 주기, 밴드, 적분기 한계)을 보여줍니다. 변경 사항은 모달에서 바로 저장되므로, 대시보드를 벗어나지 않고도 동작 중인 컨트롤러를 조정할 수 있습니다.

사용자 정의 위젯 개발~

AoT는 사용자 정의 위젯 가져오기를 지원합니다. 모듈은 aot/widgets/에 있습니다.

사용자 정의 위젯을 만들려면 Javascript를 특정 위치에 배치해야 합니다. 다음 구조는 여러 위젯이 대시보드에서 어떻게 결합되는지 보여줍니다:

<html>
<head>
  <title>Title</title>
  <script>
    {{ widget_1_head }}
    {{ widget_2_head }}
  </script>
</head>
<body>

<div id="widget_1">
  <div id="widget_1_titlebar">{{ widget_title_bar }}</div>
  {{ widget_1_body }}
</div>

<div id="widget_2">
  <div id="widget_2_titlebar">{{ widget_title_bar }}</div>
  {{ widget_2_body }}
</div>

<script>
  {{ widget_1_js }}
  {{ widget_2_js }}

  $(document).ready(function() {
    {{ widget_1_js_ready }}
    {{ widget_2_js_ready }}
  });
</script>

</body>
</html>

[!NOTE] AI 에이전트를 위한 구조화된 위젯 카테고리와 시각화 정보는 ai_docs/data_viewing.json에 있습니다.