위젯 레퍼런스
IronFlock 보드는 위젯으로 구성됩니다. 각 위젯 유형은 라이브 데이터 표시에서 사용자 입력 캡처까지 특정 목적을 수행합니다. 위젯 패널에서 보드 캔버스로 드래그하여 위젯을 추가한 다음 설정 패널을 통해 구성합니다.
위젯은 네 가지 그룹으로 나뉩니다: 차트 및 상태 표시를 위한 데이터 시각화, 정적 및 리치 콘텐츠를 위한 콘텐츠 및 미디어, 입력 캡처 및 명령 전송을 위한 입력 및 제어, 보드 페이지 간 이동을 위한 내비게이션.
데이터 시각화
라이브 및 과거 데이터를 차트, 게이지, 상태 표시로 변환하는 위젯.
카테시안 차트
시계열 또는 범주형 데이터를 라인 차트, 바 차트, 또는 조합으로 표시합니다. 동일한 차트에서 여러 데이터 시리즈를 지원합니다.
사용 시점: 시간에 따른 센서 값 추세 분석, 여러 신호 나란히 비교, 일일 합계를 막대로 표시.
구성 항목:
- 하나 이상의 데이터 시리즈, 각각 앱의 데이터 컬럼을 가리킴
- 시리즈별 차트 유형: 라인, 바, 또는 버블
- X축 유형: 시간 기반 또는 범주형
- Y축 레이블 및 시간 창(예: 분별로 집계된 지난 5분)
- 시리즈별 색상
게이지
색상으로 구분된 임계값 영역이 있는 단일 라이브 값을 표시하는 방사형 게이지.
사용 시점: 온도, 압력, 충전 수준, 또는 녹색/노란색/빨간색 영역으로 한눈에 상태를 확인하려는 모든 값.
구성 항목:
- 읽을 데이터 컬럼(항상 가장 최근 값을 표시)
- 단위 및 소수점 정밀도
- 색상 영역 경계(예: 안전: 0–60, 경고: 60–80, 위험: 80–120)
- 선택 사항: 노이즈를 줄이기 위해 마지막 N개 읽기 평균
값 표시
레이블과 단위가 있는 하나 이상의 단일 값을 표시합니다. 깔끔하고 최소화 — KPI 타일에 이상적입니다.
사용 시점: 현재 온도, 가동 시간, 마지막 이벤트, 또는 핵심 메트릭을 숫자로 표시.
구성 항목:
- 하나 이상의 데이터 컬럼, 각각 레이블과 단위 포함
- 소수점 정밀도
- 값별 텍스트 색상
신호
현재 값에 따라 색상이 변경되는 컴팩트한 상태 지시기 — 원 또는 사각형 — 로 한눈에 파악할 수 있는 상태 보드를 제공합니다.
사용 시점: 디바이스 온라인/오프라인 보드, 여러 자산의 정상/경고/오류 상태, 임계값 기반 상태 표시등.
구성 항목:
- 하나 이상의 신호, 각각 데이터 컬럼을 읽음
- 신호별 색상 매핑 규칙: 정확한 일치(예:
ONLINE) 또는 숫자 비교(예:>=70) - 레이아웃(수평 또는 수직) 및 모양(원 또는 사각형)
- 선택적 제목 및 부제목
도넛 차트
비례적 세그먼트를 보여주는 원형 차트.
사용 시점: 분포 표시 — 예: 온라인 vs 오프라인 디바이스, 제품 유형별 생산 점유율.
구성 항목:
- 세그먼트, 각각 레이블, 색상, 데이터 컬럼(또는 고정 값) 포함
- 컷아웃 크기(내부 구멍 직경 제어)
테이블
구성 가능한 컬럼이 있는 표 형식으로 데이터 행을 표시합니다.
사용 시점: 기계 목록, 최근 이벤트, 검사 레코드, 또는 구조화된 데이터 세트 표시.
구성 항목:
- 컬럼, 각각 헤더, 데이터 컬럼, 표시 유형 포함
- 행 높이 및 헤더 폰트 크기
- 표시할 행 수
컬럼 표시 유형: 일반 텍스트, 숫자, 상태(값을 색상에 매핑), 부울, 이미지, 또는 버튼(클릭 가능한 링크).
히트맵
두 차원에 걸쳐 강도를 시각화하는 그리드 기반 히트맵.
사용 시점: 시간대 및 요일별 에너지 소비, 교대 근무별 기계 가동률, 시간에 걸친 이상 패턴.
구성 항목:
- X축(예: 시간대) 및 Y축(예: 요일) 컬럼
- 열 강도를 위한 값 컬럼
- 최솟값/최댓값 스케일 및 연속형 또는 단계형 색상 그라디언트 사용 여부
상태 이력
시간에 따른 상태 변화를 보여주는 수평 타임라인, 자산별 하나의 행.
사용 시점: 기계 상태 이력(실행 중 / 중지 / 유지보수), 교대 로그, 이벤트 타임라인.
구성 항목:
- 상태 이름 및 색상(예: 실행 중 = 녹색, 장애 = 빨간색)
- 타임스탬프, 상태 값, 자산 이름에 대한 데이터 컬럼
지도
인터랙티브 지도에 지리적 데이터를 표시합니다. 원 마커 및 추적 라인을 지원합니다.
사용 시점: 디바이스 위치 표시, 차량 추적, 현장 자산 위치.
구성 항목:
- 지도 스타일(라이트 또는 다크)
- 하나 이상의 시리즈: 원(최신 위치 마커) 또는 라인(이동 경로)
- 위도 및 경도에 대한 데이터 컬럼
- 디바이스 또는 자산별 데이터 분할을 위한 피벗 컬럼
SCADA
ThingsBoard SCADA 라이브러리의 인터랙티브 산업용 SVG 심볼 — 펌프, 밸브, 탱크, 모터, 파이프, 게이지 — 을 라이브 데이터 바인딩 및 상태 기반 색상과 함께 렌더링합니다.
사용 시점: 공정 다이어그램 및 플랜트 모방 화면 — 개략도에서 펌프, 밸브, 탱크, 흐름의 라이브 상태 표시.
구성 항목:
- 표시할 심볼 유형
- 심볼의 상태를 구동하는 데이터 바인딩(실행 중/중지, 열림/닫힘, 유체 수준)
- 상태 색상(실행 중, 중지, 경고, 위험) 및 기타 심볼별 스타일
전체 공정 화면 구축을 위해서는 SCADA를 참조하세요.
콘텐츠 및 미디어
정적 및 리치 콘텐츠를 위한 위젯 — 이미지, 서식 있는 텍스트, 임베드된 웹 페이지.
이미지
URL에서 정적 이미지를 표시합니다. 로고, 다이어그램, 또는 안내 그래픽에 유용합니다.
이미지 오버레이
배경 이미지 위에 라이브 데이터 값을 배치합니다 — 평면도, 다이어그램, 개략도에 이상적입니다.
사용 시점: 공장 평면도에 온도 오버레이, 탱크 다이어그램에 충전 수준 표시.
구성 항목:
- 배경 이미지 URL
- 오버레이 핀: 이미지의 상대적 좌표에 배치된 진행 막대 또는 텍스트 레이블
- 각 핀에 대한 데이터 컬럼(라이브 값 또는 고정)
Markdown
Markdown(CommonMark 및 GitHub Flavored Markdown)을 구문 강조 코드 블록 및 라이브 변수 보간과 함께 렌더링합니다.
사용 시점: 서식 있는 텍스트와 라이브 데이터 값을 혼합하는 문서 패널, 지침, 또는 동적 노트.
구성 항목:
- Markdown 소스 텍스트
{{variableName}}을 통해 텍스트에서 참조되는 변수, 각각 데이터 컬럼 또는 고정 값에 바인딩
레이블
타이포그래피 및 정렬을 완전히 제어할 수 있는 단일 구성 가능한 텍스트 레이블을 표시합니다.
사용 시점: 섹션 제목, 캡션, 정적 주석, 또는 텍스트로 렌더링된 단일 동적 값.
구성 항목:
- 표시할 텍스트(줄 바꿈이 유지됨)
- 폰트 크기, 색상, 굵기, 스타일
- 수평 및 수직 정렬, 배경 색상
임베드
격리된 iframe에 외부 웹 콘텐츠를 임베드합니다 — 단일 페이지 또는 반응형 그리드에 배치된 여러 페이지.
사용 시점: 서드파티 대시보드, 문서, 외부 도구, 또는 웹 접근 가능한 페이지를 보드 내에 통합.
구성 항목:
- 임베드할 URL(대상 사이트가 iframe 임베딩을 허용해야 함)
- 콘텐츠 위에 표시되는 선택적 제목
- 멀티 임베드 모드: 구성 가능한 간격으로 그리드에 배치된 여러 URL
입력 및 제어
사용자 입력을 캡처하거나 플랫폼으로 명령 및 필터를 전송하는 위젯.
폼
사용자 입력을 앱의 데이터 백엔드에 다시 기록하는 구성 가능한 데이터 입력 폼.
사용 시점: 수동 데이터 캡처 — 검사 레코드, 유지보수 로그, 운영자 입력, 파라미터 설정값.
구성 항목:
- 다양한 유형의 폼 필드: 텍스트, 숫자, 체크박스, 텍스트 영역, 드롭다운, 날짜/시간
- 필드별 옵션: 레이블, 필수 여부, 기본값, 유효성 검사, 최솟값/최댓값, 대상 데이터 컬럼
- 선택적 제목, 부제목 및 폼이 다이얼로그로 열리는지 여부
스위치
라이브 값을 반영하고 전환 시 디바이스 액션을 트리거하는 하나 이상의 Material Design 토글 스위치.
사용 시점: 장비 켜기/끄기, 이진 디바이스 설정 전환, 대시보드에서 제어 명령 전송.
구성 항목:
- 하나 이상의 스위치, 각각 데이터 컬럼을 읽음
- ON/OFF 상태 매핑: 정확한 값 또는 숫자 비교(예:
>50) - 전환 시 호출되는 대상 앱, 디바이스, 액션 토픽
- 스위치별 레이블 및 값 색상
필터 드롭다운
다른 위젯이 사용할 수 있도록 선택한 값을 필터 파라미터로 게시하는 사전 정의된 옵션의 드롭다운.
사용 시점: 사용자가 디바이스 유형, 라인, 위치, 또는 임의의 카테고리로 전체 보드를 필터링하도록 허용.
구성 항목:
- 드롭다운 위에 표시되는 레이블
- 다른 위젯이 데이터 쿼리에서 참조하는 파라미터 키
- 각각 레이블과 값이 있는 옵션 목록
필터 캘린더
단일 날짜 또는 범위 — 선택한 타임스탬프를 다른 위젯의 필터 파라미터로 저장하는 날짜/시간 범위 선택기.
사용 시점: 시계열 대시보드, 과거 데이터 분석, 사용자가 선택 가능한 시간 창이 있는 보고서.
구성 항목:
- 시작 및 종료 파라미터 키(단일 날짜 모드에는 하나, 범위에는 둘 다 사용)
- 한 번에 표시되는 월 수(1–3)
- 입력 레이블
내비게이션
다중 페이지 보드의 페이지 및 섹션 간 이동을 위한 위젯.
내비게이션 바
클릭 가능한 제목 또는 브랜드와 여러 라우팅된 항목이 있는 수평 상단 내비게이션 바.
사용 시점: 다중 페이지 보드의 페이지 간 최상위 내비게이션.
구성 항목:
- 제목/브랜드 텍스트 및 목적지 라우트
- 내비게이션 항목, 각각 레이블, Material 아이콘, 라우트 포함
- 폰트 크기, 굵기, 색상
{{variable}}치환을 통한 동적 라우트 세그먼트
내비게이션 버튼
다른 페이지로 라우팅하거나 브라우저 뒤로 가기 내비게이션을 수행하는 단일 클릭 가능한 버튼.
사용 시점: 뒤로 가기 버튼, 행동 유도 링크, 또는 특정 보드 뷰로 이동.
구성 항목:
- 버튼 레이블 및 선택적 Material 아이콘
- 목적지 라우트(자동 뒤로 가기 내비게이션을 위해 비워 둠)
- 폰트 크기 및 색상
{{variable}}치환을 통한 동적 라우트 세그먼트
사이드 내비게이션
Material 아이콘과 현재 항목의 라우트 기반 강조 표시가 있는 수직 사이드 메뉴.
사용 시점: 여러 섹션 또는 뷰가 있는 대시보드의 고정 사이드 내비게이션.
구성 항목:
- 선택적 라우트가 있는 제목
- 내비게이션 항목, 각각 레이블, Material 아이콘, 라우트 포함
- 현재 라우트를 기반으로 한 활성 항목 강조 표시
- 폰트 크기, 굵기, 색상