# 대시보드 구성 요소

> 대시보드 구성 요소가 무엇인지입니다. 종류의 목록, 그것들이 묶는 주소, 읽은 값이 어떻게 그려지는지, 그리고 모든 종류가 함께 쓰는 속성 구역입니다.

**구성 요소**는 대시보드 위의 한 항목입니다. 무엇인가를 그리는 격자 칸의 직사각형입니다. 대부분의 구성 요소는 실시간 주소 공간을 읽어 보여 주고, 몇 개는 거기에 쓰며, 몇 개는 그리기만 합니다. [대시보드 편집기](view-editor) 도구 창의 **추가** 구역에서 하나를 놓습니다. 정확한 칸으로 끌어다 놓거나 클릭해서 첫 빈 칸을 차지하게 하면, 설정할 수 있도록 속성에서 열립니다.

종류마다 자기 참고 페이지가 있고, [카탈로그](#the-catalog)와 이 묶음 자신의 목록에 나열되어 있습니다. 이 페이지는 그것들이 모두 함께 가지는 것을 담습니다. 묶는 주소, 읽은 값이 어떻게 그려지는지, 그리고 모든 종류에 되풀이되는 속성 구역입니다. 어느 역할이 조작 요소를 누를 수 있는지, 그리고 로그인한 역할이 누를 수 없을 때 구성 요소가 다는 잠금 표시는 [View와 대시보드](home)에 있습니다.

## 카탈로그 {#the-catalog}

추가 팔레트는 카탈로그를 분류로 묶고, 분류는 그 갈래가 무엇을 하는지 말합니다. **표시**는 알리는 모든 것입니다. 그냥 읽어 주는 것들과 표, 램프, 그리고 포인트를 시간에 따라 따라가거나 나란히 견주는 차트입니다. **조작**은 쓰기에 바쳐진 갈래입니다. 그 구성 요소는 하나하나가 포인트에 값을 놓기 위해 있습니다. 다만 운전자가 누르는 면이 그것만인 것은 아닙니다. **경보**는 미처리 등록부를 화면으로 데려오고, 그 배너에서 줄마다 그리고 한꺼번에 확인합니다. **미디어**는 그림과 라이브러리의 표시와 산업 도형을 놓습니다. **배치**는 화면의 나머지 뒤에서 한 구역을 묶습니다.

| 분류 | 구성 요소 |
|---|---|
| 표시 | [텍스트](component-label) · [값 표시](component-value) · [포인트 표](component-point-table) · [상태 표시등](component-status-led) · [선 차트](component-line-chart) · [막대 차트](component-bar-chart) · [원형 차트](component-pie-chart) · [계기](component-gauge) · [지표 카드](component-kpi-card) · [진행 표시](component-progress) |
| 조작 | [토글](component-toggle) · [입력란](component-input) · [버튼](component-button) · [선택기](component-selector) · [설정값 슬라이더](component-setpoint-slider) · [증감 키](component-step-keys) |
| 경보 | [경보 배너](component-alarm-banner) |
| 미디어 | [이미지](component-image) · [아이콘](component-icon) · [심볼](component-symbol) |
| 배치 | [프레임](component-frame) |

이 묶음의 세 페이지는 구성 요소가 아니라 [유닛 패널](view-unit-panels)의 부분을 설명합니다. [인터록](component-interlock) 알림 띠, [발생 기록 목록](component-occurrence-list), [코멘트 타임라인](component-comment-timeline)입니다. 유닛 패널이 자기 유닛을 위해 이것들을 그립니다. 화면에 놓이는 일은 없고, 추가 팔레트에도 나오지 않습니다.

미디어 종류가 그리는 그림과 표시와 도형은 Logic 페이지에 있는 스테이션 자신의 라이브러리에서 옵니다. [자산 라이브러리](logic-assets)가 이미지와 아이콘과 색을 담고, [심볼](assets-symbols)이 [심볼](component-symbol) 구성 요소가 고르는 카탈로그를 담으며, 그 연결이 그려지는 연결점도 거기에 있습니다.

## 주소와 실시간 읽기 {#addresses-and-live-readings}

살아 있는 구성 요소는 **주소**에 묶입니다. 스테이션의 실시간 주소 공간으로 들어가는 뿌리 있는 이름이며, Logic이 읽는 것과 같은 공간입니다([Logic 페이지](logic) 참조). 주소는 포인트 하나를 부르며, 그것이 어디에 살든 마찬가지입니다.

| 주소의 모양 | 부르는 것 |
|---|---|
| `Connector.<Driver>.<Device>.<Tag>` | Connector 태그의 공학값이며, 장치가 어느 폴더에 정리되어 있으면 드라이버와 장치 사이에 그 폴더가 들어갑니다([Connector 페이지](connector) 참조) |
| `Variables.<name>` | Logic 변수(내부 값이거나 계산된 값) |
| `Alarms.<name>` | 경보의 발생 상태 |
| `Assets.Icons.<name>` | 아이콘 라이브러리의 표시 하나 |
| `Process.<Model>.<Unit>.…` | 유닛의 실행 포인트입니다. 읽은 값, `Commands.*`, `Next.<field>`, `Commands.Comment` |

주소 입력란은 제안이 붙은 자유 입력입니다. 목록은 살아 있는 포인트 목록에서 뽑고, 최대 50줄이며, 그 입력란이 쓰는 값의 갈래로 좁혀지고(계기는 숫자를 제안하고, 토글은 부울 포인트를 앞에 세우며, 쓰는 조작 요소는 쓸 수 있는 것만 나열합니다), 줄마다 형식이 표시됩니다. 목록이 내놓지 않는 주소도 언제든 적을 수 있고, 아직 존재하지 않는 주소도 마찬가지입니다. 입력란이 포인트를 부르고 나면 편집기가 그 아래에 **그 포인트가 지금 무엇을 읽는지** 보여 줍니다. 숫자를 스스로 그리지 않는 구성 요소가 줄 수 없는 확인입니다. Process 모델 위에 정의된 화면에서는 모델의 추상 채널이 모든 목록의 앞머리에 섭니다. 그 가운데 하나를 고르면 채널이 바인딩되고, 유닛은 어떤 유닛이 그 화면을 열 때 답해집니다.

캔버스는 스테이션 자신의 창에서는 150 ms마다, 원격 브라우저에서는 400 ms마다 주소 공간에서 구성 요소를 새로 읽으며, 그 값은 로직 주기가 내놓은 것입니다. 살아 있는 모든 구성 요소에 두 가지 규칙이 섭니다.

- **낡은 값은 결코 없습니다.** 읽기를 멈춘 포인트는 그 구성 요소 자신의 자리 표시로 떨어집니다(결측 줄표, 속이 빈 램프, 차트의 결측). 마지막 숫자를 남기지 않습니다.
- **읽기 실패 표시는 하나입니다.** 묶인 포인트를 *읽지 못하는* 구성 요소(주소가 아무것도 가리키지 않거나, 포인트가 나쁜 품질로 답하는 경우)는 하나의 공통 표시를 답니다. 칸을 두른 점선의 주의 윤곽과, 오른쪽 위 모서리의 작은 동그라미 `!` 배지입니다. 모든 종류가 같은 표시를 달므로 한 번만 배우면 됩니다. 주소가 풀리고 품질이 정상인데 *값이 없는* 포인트는 실패가 아니므로(실행 사이의 작업대, 사이클 밖의 계수기), 구성 요소는 조용한 자리 표시를 지키고 표시는 켜지지 않습니다. **묶이지 않은** 주소는 누구의 잘못도 아닙니다. 아직 조립 중인 화면이 경고투성이 화면으로 읽히는 일은 없습니다.

## 값 표시 방식 {#value-display}

읽은 값을 얼마나 크게 그리는지는 캔버스 위의 모든 글자 면(읽기 표시, 문구, 키의 얼굴, 상태 낱말)이 함께 쓰는 하나의 약속이 다스립니다.

- 모든 면은 **자동**이거나 **정한 크기**입니다. 자동은 칸이 크기를 정하되 그 면이 밝힌 것(자릿수, 소수 자릿수, 단위, 또는 적어 넣은 낱말)이 잡아 둔 너비 안에서 정하는 것이고, 정한 크기는 포인트로 적어 주는 크기(9에서 144)입니다. 정한 크기는 문자 그대로여서 어느 칸에서든 그 크기로 그려지고 내용을 넣으려고 줄어드는 일이 결코 없습니다. 크기에 관한 어떤 것도 마침 도착한 값을 따라가지 않으므로, 네 글자와 여섯 글자 사이를 오가는 숫자가 글자 크기를 움직이는 일은 없습니다.
- **숫자는 결코 잘린 채로 그려지지 않습니다.** 온전히 보여 줄 수 없는 곳에서는(입력란이 밝힌 것보다 자릿수가 많거나, 정한 크기가 칸보다 넓은 경우) 면이 `####`를 그립니다. 값에 비해 좁은 칸을 가리키는, 스프레드시트와 DCS의 표시이며, 읽은 값 전체는 도구 설명에 있습니다.
- **자유롭게 적은 글은 말줄임표로 줄여 쓰고** 전체는 도구 설명에 담습니다. 낱말은 결코 숫자의 표시를 달지 않습니다.
- **읽지 못하는** 포인트는 또 다른 사실입니다. 결측 줄표이고, 그 침묵이 진짜 실패인 곳에서는 공통 읽기 실패 표시가 붙습니다. 읽은 값이 없는 것과 자리가 없는 것은 결코 서로의 표시를 빌리지 않습니다.
- 숫자는 자기 입력란의 오른쪽에, 폭이 고른 숫자꼴로 놓이므로 읽은 값의 세로줄이 저희끼리 맞습니다.

11 px의 가독성 바닥은 어디에서나 지켜지고, 공통 **내용 배율** 손잡이는 정해진 크기에 곱해집니다. 줄이는 쪽은 언제나 그대로 적용되고(그래도 바닥은 지킵니다), 키우는 쪽은 줄이 잘리지 않고 들어가는 데까지만 커집니다.

## 함께 쓰는 속성 구역 {#the-shared-property-sections}

구성 요소를 고르면 그 속성이 열립니다. 구성 요소 자신의 종류를 위한 구역이 먼저 오고(내용, 데이터, 형식) 그것은 그 구성 요소의 페이지에서 설명합니다. 그 둘레에서 모든 구성 요소는 같은 구역을 함께 씁니다. 그 구역을 그리는 패널, 모든 주소 입력란 아래의 실시간 읽기, 그리고 종류를 넘나들며 되풀이되는 조작 요소(표시 크기, 읽는 형식, 눈금 구간, 차트 도구 모음)는 [대시보드 편집기](view-editor)에서 설명합니다.

**식별**은 화면을 편집하는 사람을 위해 구성 요소의 이름을 부릅니다. 이름은 속성 패널의 머리에 서고, 구성 요소 목록의 줄에 붙으며, 그 검색에 답합니다. 운전자의 화면에는 그것을 그리는 것이 없습니다. 그것은 모양 구역의 제목입니다.

**모양**은 구성 요소의 상자입니다.

| 항목 | 하는 일 | 값 | 기본값 |
|---|---|---|---|
| 테두리 보이기 | 구성 요소 자신의 윤곽을 그립니다. | 켬 / 끔 | 끔 |
| 테두리 두께(px) | 그 윤곽이 얼마나 굵은지입니다. 1 px는 카드의 가장자리이고, 굵은 선은 두 번째 색을 쓰지 않고도 한 무리를 그 둘레와 갈라 줍니다. | 1에서 4 | 1 |
| 배경 보이기 | 구성 요소의 직사각형을 색 짝으로 채워 카드로 만듭니다. 끄면 격자가 비쳐 보입니다. | 켬 / 끔 | 끔 |
| 배경색 | 테마마다 반쪽씩인 짝이며, 두 반쪽을 한꺼번에 고칩니다. 어느 쪽이 화면에 나오는지는 돌고 있는 테마가 정하기 때문입니다. | 각각 `#RRGGBB` | 밝게 `#FFFFFF` · 어둡게 `#2B2B2B` |
| 제목(모서리) | 구성 요소 자신의 모서리 문구이며, 이 카드가 *무엇인지*를 그 종류가 그리는 것 위에 적습니다. 비우면 제목 줄이 없습니다. | 자유 입력 | 비어 있음 |
| 제목 크기(px) | 비워 두면 카드마다 자기 칸에 맞추어 제목 크기를 스스로 정하고, 정한 크기는 문자 그대로여서 화면 전체의 제목이 서로 맞습니다. 더 들어가지 않는 부분은 말줄임표로 줄이고 제목 전체는 도구 설명에 담습니다. | 11에서 96, 또는 비움 | 비움(자동) |
| 제목 색 | 제목의 색 짝입니다. 건드리지 않으면 제목은 테마 자신의 조용한 색조를 따릅니다. | 각각 `#RRGGBB` | 밝게 `#6B6B6B` · 어둡게 `#A0A0A0` |
| 내용 배율 | 내용이 자기 상자를 얼마나 차지하는지입니다. 그려 놓은 칸이 이미 내용의 크기를 정하고, 이 손잡이는 격자를 다시 그리지 않고 칸 안에서 그것을 조절합니다. 그림은 기하학으로, 읽기 표시는 글자로 답합니다. | 0.25에서 3 | 1 |

**위치와 레이어**는 숫자로 적는 X / Y / 너비 / 높이, 레이어(Z), 그리고 **맨 앞으로** / **맨 뒤로** 짝을 담습니다. **고급**은 자주 쓰지 않는 여벌이 있는 종류에만 나옵니다. **액션**은 구성 요소를 복제하거나 제거합니다.

**Ctrl**을 누른 채로 구성 요소를 여럿 골라 공통 속성을 편집할 수 있습니다. 모양의 입력란이 고른 것 전체에 퍼지고(값이 서로 다른 입력란은 "섞임"이라고 말합니다), 레이어 명령은 묶음 안의 앞뒤 순서를 지키며, 복제와 제거는 모두에게 작용합니다. 종류별 항목은 구성 요소를 하나만 골라야 합니다.