나타내는 타입(Display Types)

나타내는 타입(Display Types)은 기능 보여짐(Capability Presentations)에서 쓰입니다. SmartThings 앱에서 기능(Capability)을 보여주는 데에 쓸 수 있는 여러 비주얼 표현을 받아 읽습니다. 각 기능 보여짐(Capability Presentations)의 보기방식들(대시보드 보기, 디테일 보기(detailView), 자동화 보기)은 이 곳에서 말하고 있는 여러 나타내는 타입(Display Types)을 쓸 수 있습니다.

## 대시보드의 나타내는 타입(Display Types)

### `pushButton`

pushButton 의 나타내는 타입(Display Types)은 기능(Capability)을 대시보드에서의 버튼의 생김새로 렌더링해서 만들어냅니다. 이 나타내는 타입(Display Types)에는 관련 명령(command)이 필요하며 보내야하는 인수(argument)가 있을 수 있습니다.

```
"pushButton": {
    "command": "setButton",
    "argument": "push"
}
```

### 스위치

스위치에는 여러 나타내는 타입(Display Types)이 있습니다. 모든 스위치는 비슷한 구조를 따르지만 SmartThings 앱에서는 나타내는 타입(Display Types)마다 다르게 렌더링되어 보여집니다. 쓸 수 있는 타입은 다음과 같습니다.

* `switch` - 켜짐/꺼짐 아이콘의 생김새로 렌더링합니다.
* `toggleSwitch` - 미닫는 스위치(토글 스위치, Toggle Switch)의 생김새로 렌더링합니다.
* `standbyPowerSwitch` - renders with an on/standby icon
* `statelessPowerToggle` - renders with a stateless on/off icon

아래의 예시 대시보드 스위치는 미닫는 스위치(토글 스위치, Toggle Switch)를 보여줍니다.

```
"toggleSwitch": {
    "command": {
        "name": "setSwitch",
        "on": "on",
        "off": "off"
    },
    "state": {
        "value": "switch.value",
        "on": "on",
        "off": "off",
        "label": "My Switch",
    }
}
```

### `playStatus`

`playStatus` 는 스위치 타입과 비슷하지만 대시보드에 재생, 일시 중지/중지 아이콘으로 보여집니다. 렌더링 옵션에는 `playStop` 과 `playPause`를 가지고 있습니다. 둘 다 플레이어의 상태를 설명하기 위한 페이로드(payload) 구조를 가지고 있습니다.

```
"playPause": {
    "command": {
        "name": "setPlaybackStatus",
        "play": "playing",
        "pause": "paused"
    },
    "state": {
        "value": "playbackStatus.value",
        "play": "playing",
        "pause": "paused",
        "label": "Music player: {{playbackStatus.value}}",
        "alternatives": [
            {
                "key": "playing",
                "value": "playing",
                "type": "active"
            },
            {
                "key": "paused",
                "value": "paused",
                "type": "inactive"
            }
        ]
    }
}
```

## 디테일 보기(detailView)의 나타내는 타입(Display Types)

### `pushButton`

이 나타내기 타입(Display Type)은 대시보드의 나타내기 타입(Display Type)에 있는 pushButton의 보여주기 포맷을 따릅니다.

### 스위치

```
"switch": {
    "command": {
        "on": "on",
        "off": "off"
    },
    "state": {
        "value": "switch.value",
        "on": "on",
        "off": "off",
        "label": "{{switch.value}}",
        "alternatives": [
            {
                "key": "on",
                "value": "On",
                "type": "active"
            },
            {
                "key": "off",
                "value": "Off",
                "type": "inactive"
            }
        ]
    }
}
```

### `playPause`

```
"playPause": {
    "command": {
        "name": "setPlaybackStatus",
        "play": "playing",
        "pause": "paused"
    },
    "state": {
        "value": "playbackStatus.value",
        "play": "playing",
        "pause": "paused",
        "alternatives": [
            {
                "key": "playing",
                "value": "Playing",
                "type": "active"
            },
            {
                "key": "paused",
                "value": "Paused",
                "type": "inactive"
            }
        ]
    }
}
```

### `playStop`

```
"playStop": {
    "command": {
        "name": "setPlaybackStatus",
        "play": "playing",
        "stop": "stopped"
    },
    "state": {
        "value": "playbackStatus.value",
        "play": "playing",
        "stop": "stopped",
        "alternatives": [
            {
                "key": "playing",
                "value": "Playing",
                "type": "active"
            },
            {
                "key": "stopped",
                "value": "Stopped",
                "type": "inactive"
            }
        ]
    }
}
```

### `playStatus`

이 나타내기 타입(Display Type)은 대시보드의 나타내기 타입(Display Type)에 있는 playStatus의 보여주기 포맷을 따릅니다.

### `slider`

`slider` 는 값의 범위 안에서 값을 고르는 데에 쓸 수 있습니다. 이것은 온도나 볼륨에서 잘 쓸 수 있습니다.

```
"slider": {
    "value": "volume.value",
    "unit": "volume.unit",
    "command": "setVolume",
    "range": [
        0,
        100
    ],
    "step": 1
}
```

### `list`

list를 써서 기능(Capability에 쓰일 수 있는 여러 옵션을 보여주고 고를 수 있습니다. list는 페이로드의 `alternatives` 섹션에 설명되어 있습니다. 다음은 온도 조절기에 대한 나타내기 타입(Display Type)에서 list가 짧게 쓰인 예입니다.

```
"list": {
    "command": {
        "name": "setThermostatMode",
        "alternatives": [
            {
                "key": "heat",
                "value": "Heat mode"
            },
            {
                "key": "cool",
                "value": "Cool mode"
            },
            {
                "key": "fan",
                "value": "Fan mode"
            }
        ],
        "supportedValues": "supportedThermostatModes.value"
    },
    "state": {
        "value": "thermostatMode.value",
        "alternatives": [
            {
                "key": "heat",
                "value": "Heat mode"
            },
            {
                "key": "cool",
                "value": "Cool mode"
            },
            {
                "key": "fan",
                "value": "Fan mode"
            }
        ]
    }
}
```

### `textField`

`textField`는 텍스트 쓰기와 나타내기에 쓰입니다. 이 보기에는 UI에서 렌더링된 "편집" 버튼을 가지고 있습니다. 이 버튼을 누르면 유저의 텍스트를 쓰는 칸, "취소"와 "확인" 버튼이 있는 텍스트 쓰기 창(다이얼로그)을 엽니다.

```
"textField": {
    "command": "setLightColor",
    "value": "lightColor.value"
}
```

### `numberField`

텍스트를 쓰는 칸에 정수 값을 쓸 때는 `textField`보다는 `numberField` 를 쓰는 것이 좋습니다. 최소값과 최대값을 고를 수 있습니다.

```
"numberField": {
    "command": "setVolume",
    "value": "volume.value",
    "unit": "volume.unit",
    "range": [0, 100]
}
```

### `stepper`

```
  "stepper": {
    "command": {
      "name": "setVolume",
    },
    "value": "volume.value",
    "step": 1,
    "range": [0, 100]
}
```

### `state`

```
"state": {
    "label": "PM2.5: {{fineDustLevel.value}}",
    "unit": "fineDustLevel.unit"
}
```

## 자동화의 나타내는 타입(Display Types)

자동화의 나타내는 타입(Display Types)은 조건(Conditions)과 액션(Actions)이 따로 골라진다는 점에서 대시보드의 나타내기 타입과 디테일보기(detailView)의 나타내기 타입과는 다릅니다 (조건(Conditions)이라면 `”value”`, 액션(Actions)이라면 `”command”`).

### 조건(condition)에서의 `slider`

```
"slider": {
    "value": "volume.value",
    "unit": "volume.unit",
    "range": [
        0,
        100
    ],
    "step": 1
}
```

### 액션(Action)에서의 `slider`

```
"slider": {
    "command": "setVolume",
    "unit": "volume.unit",
    "range": [
        0,
        100
    ],
    "step": 1
}
```

### 조건(condition)에서의 `list`

```
"list": {
    "value": "thermostatMode.value",
    "alternatives": [
        {
            "key": "heat",
            "value": "Heat mode"
        },
        {
            "key": "cool",
            "value": "Cool mode"
        },
        {
            "key": "fan",
            "value": "Fan mode"
        }
    ],
    "supportedValues": "supportedThermostatMode.value"
}
```

### 액션(Action)에서의 `list`

```
"list": {
    "command": "setThermostatMode",
    "alternatives": [
        {
            "key": "heat",
            "value": "Heat mode"
        },
        {
            "key": "cool",
            "value": "Cool mode"
        },
        {
            "key": "fan",
            "value": "Fan mode"
        }
    ],
    "supportedValues": "supportedThermostatMode.value"
}
```

### 조건(condition)에서의 `numberField`

```
"numberField": {
    "value": "volume.value",
    "unit": "volume.unit",
    "range": [0, 100]
}
```

### 액션(Action)에서의 `numberField`

```
"numberField": {
    "command": "setVolume",
    "unit": "volume.unit",
    "range": [0, 100]
}
```

### 조건(condition)에서의 `textField`

```
"textField": {
    "value": "lightColor.value"
}
```

### 액션(Action)에서의 `textField`

```
"textField": {
    "command": "setLightColor",
    "range": [10, 20]
}
```