Home Assistant 를 운영하면서 필요한 장비들이 등록이 되니~
이제 슬슬 이쁘게 사용해 보고 싶다.
Home Assistant 의 기본 대쉬보드 카드들은 기본적으로 투박하기에
이쁜 카드들로 만들어 보려고 한다.
도전해 볼 카드 모양은(아래)
왼쪽:꺼진모습, 오른쪽:켜진모습
이러한 모양을 만들기 위해서는 커스텀 카드를 등록해야 한다.
등록할 커스텀 카드는 버튼 카드이다.
버튼 카드를 아래 사이트에서 다운로드 해준다.(아래)
압축을 해제하고 hass(Home Assistant) 커스텀 카드를 넣는 경로에 넣어준다.
경로는 (시놀로지 기준)
docker -> hass.io -> homeassistant -> www 에 card-mod.js 파일을 저장하면 된다.
이제 hass 에서 설정을 해줘야 한다.
Home Assistant 어플에 들어가서 내 계정에 들어가 ‘고급 모드’ 를 켜준다.(아래)
이렇게 ‘고급 모드’를 켜줘야지만 card-mod.js 리소스를 추가해 줄 수 있다.
그리고 리소스를 등록해 준다.
설정 -> lovelace 대쉬보드 -> 리소스(상단에 있음) 여기에서 리소스를 등록해 준다.
+버튼을 눌러 주고 URL 에 커스텀 카드의 경로를 입력 후 만들기를 눌러준다.
경로는 www 폴더에 바로 저장 했으면 /local/card-mod.js 로 입력해 주고
중간에 폴도가 있으면 /local/폴더/card-mod.js 로 입력하면 된다.(아래)
이제 lovelace 대쉬보드에 카드를 만들어 볼 차례이다.
대쉬보드에 점점점을 누르고 ui구성을 누른다.
+버튼이 나오는데~ +버튼을 누르고 직접 작성을 누른다.
그리고 코드를 작성해 준다.(아래)
아래 작성할 코드는 이렇다.(아래)
#사용하고자 하는 스위치나 장비를 적어준다.
entity: switch.tv_press
#버튼에 사용될 그림의 경로를 적어준다. local은 www 폴더를 이야기 한다.
entity_picture: /local/images/tv.png
hold_action:
action: more-info
name: TV
show_entity_picture: true
show_label: true
show_last_changed: false
show_state: true
size: 30%
state:
- styles:
card:
- box-shadow: '0px 0px 10px 1px #FFFF8F'
state:
- color: '#FFFF8F'
value: 'on'
- styles:
card:
- filter: opacity(30%)
name:
- color: red
value: unavailable
styles:
#카드 사이즈 조절을 위해서 아래 px를 조절한다.
card:
- border-radius: 12px
- height: 97px
- width: 97px
img_cell:
- align-self: left
- text-align: start
- margin-right: 45px
name:
- justify-self: start
- padding-left: 11px
- font-size: 17px
state:
- font-size: 14px
- padding: 1px 12px
- justify-self: start
- text-transform: capitalize
- padding-left: 13px
tap_action:
action: toggle
type: 'custom:button-card'
위에 #을 지우고 설명에 맞춰 코드를 넣어주면 된다.
카드를 일렬로 늘어 놓고 싶다면 수평 쌓기로 작성 해 주면 된다. (아래)
유로 아이콘도 있고 무료 아이콘도 있으니 원하는 것을 골라 사용하면 된다.
끝~
총평
버튼이 켜져있는지 알려면
밝은색 배경보다는 어두운 배경에 만드는 것이 좋겠다.
더 이쁜 커스텀 카드를 만들고 싶다면 (아래)
장난감놀이님이 직접 만드신 버튼 카드가 많이 있다.