Data Viewing

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

데이터 조회 도구~

실시간 측정값~

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

비동기 그래프~

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

대시보드~

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

탭~

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

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

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

위젯 추가와 배치~

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

• 위젯 추가 — 드롭다운에서 위젯 종류를 선택하고 위젯 추가를 클릭합니다. 위젯이 현재 탭에 배치됩니다.
• 이동 / 크기 조절 — 위젯을 끌어 위치를 옮기거나, 모서리를 끌어 크기를 조절합니다. 위치는 자동 저장됩니다.
• 위젯 설정 — 위젯의 톱니바퀴 아이콘을 클릭해 설정을 엽니다.
• 위젯을 다른 탭으로 이동 — 위젯 설정에서 탭 드롭다운(탭이 둘 이상일 때 표시)에서 다른 탭을 선택하고 저장합니다.

주요 위젯~

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

AoT 지도~

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

주요 옵션

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

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

시퀀스 컨트롤러~

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

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

주요 옵션

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

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

AoT 타이머~

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

주요 옵션

• 출력 — 제어할 출력 채널.
• 동기화(초) — 위젯이 서버에서 현재 상태를 다시 확인하는 주기.
• 동작 모드 — 사이클(실행/휴식을 정해진 횟수만큼 반복) 또는 단순(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) 구간과 일치해야 합니다.

사용자 정의 위젯 개발~

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에 있습니다.