위젯 레퍼런스

IronFlock 보드는 위젯으로 구성됩니다. 각 위젯 유형은 라이브 데이터 표시에서 사용자 입력 캡처까지 특정 목적을 수행합니다. 위젯 패널에서 보드 캔버스로 드래그하여 위젯을 추가한 다음 설정 패널을 통해 구성합니다.

위젯은 네 가지 그룹으로 나뉩니다: 차트 및 상태 표시를 위한 데이터 시각화, 정적 및 리치 콘텐츠를 위한 콘텐츠 및 미디어, 입력 캡처 및 명령 전송을 위한 입력 및 제어, 보드 페이지 간 이동을 위한 내비게이션.

데이터 시각화

라이브 및 과거 데이터를 차트, 게이지, 상태 표시로 변환하는 위젯.

카테시안 차트

시계열 또는 범주형 데이터를 라인 차트, 바 차트, 또는 조합으로 표시합니다. 동일한 차트에서 여러 데이터 시리즈를 지원합니다.

사용 시점: 시간에 따른 센서 값 추세 분석, 여러 신호 나란히 비교, 일일 합계를 막대로 표시.

구성 항목:

• 하나 이상의 데이터 시리즈, 각각 앱의 데이터 컬럼을 가리킴
• 시리즈별 차트 유형: 라인, 바, 또는 버블
• X축 유형: 시간 기반 또는 범주형
• Y축 레이블 및 시간 창(예: 분별로 집계된 지난 5분)
• 시리즈별 색상

게이지

색상으로 구분된 임계값 영역이 있는 단일 라이브 값을 표시하는 방사형 게이지.

사용 시점: 온도, 압력, 충전 수준, 또는 녹색/노란색/빨간색 영역으로 한눈에 상태를 확인하려는 모든 값.

구성 항목:

• 읽을 데이터 컬럼(항상 가장 최근 값을 표시)
• 단위 및 소수점 정밀도
• 색상 영역 경계(예: 안전: 0–60, 경고: 60–80, 위험: 80–120)
• 선택 사항: 노이즈를 줄이기 위해 마지막 N개 읽기 평균

값 표시

레이블과 단위가 있는 하나 이상의 단일 값을 표시합니다. 깔끔하고 최소화 — KPI 타일에 이상적입니다.

사용 시점: 현재 온도, 가동 시간, 마지막 이벤트, 또는 핵심 메트릭을 숫자로 표시.

구성 항목:

• 하나 이상의 데이터 컬럼, 각각 레이블과 단위 포함
• 소수점 정밀도
• 값별 텍스트 색상

신호

현재 값에 따라 색상이 변경되는 컴팩트한 상태 지시기 — 원 또는 사각형 — 로 한눈에 파악할 수 있는 상태 보드를 제공합니다.

사용 시점: 디바이스 온라인/오프라인 보드, 여러 자산의 정상/경고/오류 상태, 임계값 기반 상태 표시등.

구성 항목:

• 하나 이상의 신호, 각각 데이터 컬럼을 읽음
• 신호별 색상 매핑 규칙: 정확한 일치(예: ONLINE) 또는 숫자 비교(예: >=70)
• 레이아웃(수평 또는 수직) 및 모양(원 또는 사각형)
• 선택적 제목 및 부제목

도넛 차트

비례적 세그먼트를 보여주는 원형 차트.

사용 시점: 분포 표시 — 예: 온라인 vs 오프라인 디바이스, 제품 유형별 생산 점유율.

구성 항목:

• 세그먼트, 각각 레이블, 색상, 데이터 컬럼(또는 고정 값) 포함
• 컷아웃 크기(내부 구멍 직경 제어)

테이블

구성 가능한 컬럼이 있는 표 형식으로 데이터 행을 표시합니다.

사용 시점: 기계 목록, 최근 이벤트, 검사 레코드, 또는 구조화된 데이터 세트 표시.

구성 항목:

• 컬럼, 각각 헤더, 데이터 컬럼, 표시 유형 포함
• 행 높이 및 헤더 폰트 크기
• 표시할 행 수

컬럼 표시 유형: 일반 텍스트, 숫자, 상태(값을 색상에 매핑), 부울, 이미지, 버튼(클릭 가능한 링크), 또는 편집 버튼(행의 키를 URL 파라미터에 기록하여 같은 페이지의 폼이나 필터에 전달).

버튼의 링크가 /machines/press-1 같은 경로이면 보드의 다른 페이지를 열고, 전체 웹 주소이면 새 브라우저 탭을 엽니다. 편집 버튼은 폼에서 레코드를 편집하는 방법입니다.

히트맵

두 차원에 걸쳐 강도를 시각화하는 그리드 기반 히트맵.

사용 시점: 시간대 및 요일별 에너지 소비, 교대 근무별 기계 가동률, 시간에 걸친 이상 패턴.

구성 항목:

• X축(예: 시간대) 및 Y축(예: 요일) 컬럼
• 열 강도를 위한 값 컬럼
• 최솟값/최댓값 스케일 및 연속형 또는 단계형 색상 그라디언트 사용 여부

상태 이력

시간에 따른 상태 변화를 보여주는 수평 타임라인, 자산별 하나의 행.

사용 시점: 기계 상태 이력(실행 중 / 중지 / 유지보수), 교대 로그, 이벤트 타임라인.

구성 항목:

• 상태 이름 및 색상(예: 실행 중 = 녹색, 장애 = 빨간색)
• 타임스탬프, 상태 값, 자산 이름에 대한 데이터 컬럼

지도

인터랙티브 지도에 지리적 데이터를 표시합니다. 원 마커 및 추적 라인을 지원합니다.

사용 시점: 디바이스 위치 표시, 차량 추적, 현장 자산 위치.

구성 항목:

• 지도 스타일(라이트 또는 다크)
• 하나 이상의 시리즈: 원(최신 위치 마커) 또는 라인(이동 경로)
• 위도 및 경도에 대한 데이터 컬럼
• 디바이스 또는 자산별 데이터 분할을 위한 피벗 컬럼

SCADA

ThingsBoard SCADA 라이브러리의 인터랙티브 산업용 SVG 심볼 — 펌프, 밸브, 탱크, 모터, 파이프, 게이지 — 을 라이브 데이터 바인딩 및 상태 기반 색상과 함께 렌더링합니다.

사용 시점: 공정 다이어그램 및 플랜트 모방 화면 — 개략도에서 펌프, 밸브, 탱크, 흐름의 라이브 상태 표시.

구성 항목:

• 표시할 심볼 유형
• 심볼의 상태를 구동하는 데이터 바인딩(실행 중/중지, 열림/닫힘, 유체 수준)
• 상태 색상(실행 중, 중지, 경고, 위험) 및 기타 심볼별 스타일

전체 공정 화면 구축을 위해서는 SCADA를 참조하세요.

콘텐츠 및 미디어

정적 및 리치 콘텐츠를 위한 위젯 — 이미지, 서식 있는 텍스트, 임베드된 웹 페이지.

이미지

URL에서 정적 이미지를 표시합니다. 로고, 다이어그램, 또는 안내 그래픽에 유용합니다.

이미지 오버레이

배경 이미지 위에 라이브 데이터 값을 배치합니다 — 평면도, 다이어그램, 개략도에 이상적입니다.

사용 시점: 공장 평면도에 온도 오버레이, 탱크 다이어그램에 충전 수준 표시.

구성 항목:

• 배경 이미지 URL
• 오버레이 핀: 이미지의 상대적 좌표에 배치된 진행 막대 또는 텍스트 레이블
• 각 핀에 대한 데이터 컬럼(라이브 값 또는 고정)

Markdown

Markdown(CommonMark 및 GitHub Flavored Markdown)을 구문 강조 코드 블록 및 라이브 변수 보간과 함께 렌더링합니다.

사용 시점: 서식 있는 텍스트와 라이브 데이터 값을 혼합하는 문서 패널, 지침, 또는 동적 노트.

구성 항목:

• Markdown 소스 텍스트
• {{variableName}}을 통해 텍스트에서 참조되는 변수, 각각 데이터 컬럼 또는 고정 값에 바인딩

레이블

타이포그래피 및 정렬을 완전히 제어할 수 있는 단일 구성 가능한 텍스트 레이블을 표시합니다.

사용 시점: 섹션 제목, 캡션, 정적 주석, 또는 텍스트로 렌더링된 단일 동적 값.

구성 항목:

• 표시할 텍스트(줄 바꿈이 유지됨)
• 폰트 크기, 색상, 굵기, 스타일
• 수평 및 수직 정렬, 배경 색상

임베드

격리된 iframe에 외부 웹 콘텐츠를 임베드합니다 — 단일 페이지 또는 반응형 그리드에 배치된 여러 페이지.

사용 시점: 서드파티 대시보드, 문서, 외부 도구, 또는 웹 접근 가능한 페이지를 보드 내에 통합.

구성 항목:

• 임베드할 URL(대상 사이트가 iframe 임베딩을 허용해야 함)
• 콘텐츠 위에 표시되는 선택적 제목
• 멀티 임베드 모드: 구성 가능한 간격으로 그리드에 배치된 여러 URL

입력 및 제어

사용자 입력을 캡처하거나 플랫폼으로 명령 및 필터를 전송하는 위젯.

폼

사용자 입력을 앱의 데이터 백엔드에 다시 기록하는 구성 가능한 데이터 입력 폼.

사용 시점: 수동 데이터 캡처 — 검사 레코드, 유지보수 로그, 운영자 입력, 파라미터 설정값.

구성 항목:

• 다양한 유형의 폼 필드: 텍스트, 숫자, 체크박스, 텍스트 영역, 드롭다운, 날짜/시간
• 필드별 옵션: 레이블, 필수 여부, 기본값, 유효성 검사, 최솟값/최댓값, 대상 데이터 컬럼
• 선택적 제목, 부제목 및 폼이 다이얼로그로 열리는지 여부(버튼으로, 또는 테이블의 편집 버튼이 설정하는 URL 파라미터로. 폼 참조)

스위치

라이브 값을 반영하고 전환 시 디바이스 액션을 트리거하는 하나 이상의 Material Design 토글 스위치.

사용 시점: 장비 켜기/끄기, 이진 디바이스 설정 전환, 대시보드에서 제어 명령 전송.

구성 항목:

• 하나 이상의 스위치, 각각 데이터 컬럼을 읽음
• ON/OFF 상태 매핑: 정확한 값 또는 숫자 비교(예: >50)
• 전환 시 호출되는 대상 앱, 디바이스, 액션 토픽
• 스위치별 레이블 및 값 색상

필터 드롭다운

다른 위젯이 사용할 수 있도록 선택한 값을 필터 파라미터로 게시하는 사전 정의된 옵션의 드롭다운.

사용 시점: 사용자가 디바이스 유형, 라인, 위치, 또는 임의의 카테고리로 전체 보드를 필터링하도록 허용.

구성 항목:

• 드롭다운 위에 표시되는 레이블
• 다른 위젯이 데이터 쿼리에서 참조하는 파라미터 키
• 각각 레이블과 값이 있는 옵션 목록

필터 캘린더

단일 날짜 또는 범위 — 선택한 타임스탬프를 다른 위젯의 필터 파라미터로 저장하는 날짜/시간 범위 선택기.

사용 시점: 시계열 대시보드, 과거 데이터 분석, 사용자가 선택 가능한 시간 창이 있는 보고서.

구성 항목:

• 시작 및 종료 파라미터 키(단일 날짜 모드에는 하나, 범위에는 둘 다 사용)
• 한 번에 표시되는 월 수(1–3)
• 입력 레이블

내비게이션

다중 페이지 보드의 페이지 및 섹션 간 이동을 위한 위젯.

내비게이션 바

클릭 가능한 제목 또는 브랜드와 여러 라우팅된 항목이 있는 수평 상단 내비게이션 바.

사용 시점: 다중 페이지 보드의 페이지 간 최상위 내비게이션.

구성 항목:

• 제목/브랜드 텍스트 및 목적지 라우트
• 내비게이션 항목, 각각 레이블, Material 아이콘, 라우트 포함
• 폰트 크기, 굵기, 색상
• {{variable}} 치환을 통한 동적 라우트 세그먼트

내비게이션 버튼

다른 페이지로 라우팅하거나 브라우저 뒤로 가기 내비게이션을 수행하는 단일 클릭 가능한 버튼.

사용 시점: 뒤로 가기 버튼, 행동 유도 링크, 또는 특정 보드 뷰로 이동.

구성 항목:

• 버튼 레이블 및 선택적 Material 아이콘
• 목적지 라우트(자동 뒤로 가기 내비게이션을 위해 비워 둠)
• 폰트 크기 및 색상
• {{variable}} 치환을 통한 동적 라우트 세그먼트

사이드 내비게이션

Material 아이콘과 현재 항목의 라우트 기반 강조 표시가 있는 수직 사이드 메뉴.

사용 시점: 여러 섹션 또는 뷰가 있는 대시보드의 고정 사이드 내비게이션.

구성 항목:

• 선택적 라우트가 있는 제목
• 내비게이션 항목, 각각 레이블, Material 아이콘, 라우트 포함
• 현재 라우트를 기반으로 한 활성 항목 강조 표시
• 폰트 크기, 굵기, 색상