홈어시스턴트 lovelace 커스텀 카드 추가하기

홈 어시스턴트는 기본적으로

오버 뷰에서 간단하게 ui로 설정도 가능하지만

카드를 내 마음데로 커스터 마이징도 가능하다.

근데 그게 좀 복잡? 하다

 

그렇지만 인터넷상에는 특히 깃허브에는 킹 갓 금손 형님들의 작품들이 많고

우리는 것을 가져와 사용하면 의외로 쉽다.

 

나의 경우 하우스 개폐기를 설정하도록 대시보드를 설정했지만

정말이지 모양이 형편없다.

그리고 내가 원하는 만큼 조절하려면 한번 클릭해서 들어가서

이런 식으로 번거로운 과정을 거쳐 설정 해야한다.

아이콘을 변경하여 보았지만 못생긴건 여전하다.

 

그래서 바꾸어보려고 찾아보니

https://github.com/Deejayfool/hass-shutter-card

Deejayfool/hass-shutter-card

마침 이런게 존재했다.

직관적이고 카드상에서 바로 조절도 가능해서 마음에 들었다.

깃허브다 보니 설명이 되어있는데 

영어로 되어있어 한번 잘못해석하는 바람에 애를 많이 먹었다.

---

카드를 바로 적용하기 전에 lovelace 활성화를 해주어야한다.

이 친구를 열어줘야 맘대로 바꾸고 할 수있다.

---

1. hass.io-file editor에 들어가서 configuration.yaml에 접속한다.

2.그런 다음 밑의 빈 칸에 다음 코드를 추가하여 활성하를 시켜주자.

#lovelace
lovelace:
    mode: yaml

난 이렇게 주석으로 내가 원하는 것의 위치를 알기 쉽게 표시한다(색이 다르니까)

  물론 다른 분들도 당연히 하시겠지만.....

이 과정을마치면 lovelace가 활성화되지만 아직 끝이 아니다.

 

3.새로운 파일을 생성하고 이름을 ui-lovelace로 설정한다.

 

4.그런 뒤에 인터넷 창에서 새탭으로 창을하나더 생성한 뒤에 마찬가지로 홈어시스턴트로 접속하고 창을 반반 나누어 본다

(코드를 복붙 할거다. 하나는 ui-lovelace로 하고 하느는 오버뷰 대시보드로 둔다.)

 

5. 그런 다음 edit dashboard로 들어가서 쓸만한 카드들을 골라 edit을클릭한다음

 

6. show code editor를 클릭한 다음 내부 코드 들을 복사한다. 

난 지금 대시보드에 접속이 안되서 사진을 구글링으로 가지고왔다....

7. ui-lovelace로 와서 아래 코드를 알아서 작성한다음 코드 복붙 열심히 하면 된다.

title: Our Awsome House #대시 보드 이름이다
views: #대시보드 내부 일종의 탭이다. 종류별로나 방별로 모아 관리 할 수있다.
  - title: Home #뷰 이름
    icon: mdi:home #뷰 타이틀 옆 아이콘
    path: home #위치
    cards: #이 아래에서 이제 카드들을 붙여넣기 한다(들여쓰기 조심하자)

이제 사전 준비는 마쳤다.

리부트해서 확인한번해보자

아, configuration.yaml에 lovelace활성화하고 

리부팅 후에는 ui-lovelace에서 저장 버튼 클릭후 바로 적용하여 확인이 가능하다.

개꿀~ 매번 리쿠트 할 필요가없다.

잘 들어왔으면 된거다

못보던 카드는 좀이따가 추가해볼 커스텀 카드다

간쥐~~~!!

바아아앙로 레츠기릿!!!!

---

 

아까 shutter-card 깃허브에 접속하고

아래로 스크롤하면 밑처럼 설치 방법이 나오는데

hacs를 이용한 간단한 방법이 있지만

hacs는 아직 미지의 영역이라 무서워서 메뉴얼로 한다.

페이지에 접속하여 

install 부분을 보면

you can downloadjs file from latest release가 보인다

1.파란 링크르 타고 들어가서 카드 자바스크립트 파일을내려받아준다.

여기서는 hass-shutter-card.js 다.

2.file editor로 config/에 www 폴더를 추가한뒤에 다운 받은 hass-shutter-card.js를 업로드한다.

3. file editor-configuration.yaml에서 lovelace에 아래 코드를 추가한다.

resources:
  - url: /local/hass-shutter-card.js
    type: module

4. ui-lovelace.yaml에서 아래 코드를 추가한 다음 적절히 수정한다.

type: 'custom:shutter-card'
title: My shutters
entities:
  - entity: cover.left_living_shutter
    name: Left shutter
    buttons_position: left
    title_position: bottom

      - type: 'custom:shutter-card'
        title: 
        entities:
          - entity: cover.gaepyegi
            name: 하우스 개폐기
            buttons_position: left
            title_position: bottom
            invert_percentage: false

invert_persentage: true 이면 100%가 닫힘 0%이 열림

invert_persentage: false 이면 100%가 열림 0%가 닫힘이다.

그러고 나면 뙇!!

쌉 간지다.

---

다음은 태양 카드다 ㅋ 간지용

https://github.com/AitorDB/home-assistant-sun-card

AitorDB/home-assistant-sun-card

마찬가지로 원하는 카드 찾아서 깃허브에 접속한다음 문서를 읽어본다.

sun이 활성화 되어야한단다.

그럼 한다(링크 타고 들어가면 알려준다)

configuration.yaml에 다음 코드 추가한다.

#Sun
sun:

준비는 끝이다.

이제 아까처럼하면된다.

이 친구도 hacs 지원이지만 나는 도망치고 메뉴얼로 한다.

링크 타고 들어가서 home-assistant-sun-card.js 다운받고

파일을 업로드하면 되는데

여기서 나는 좀 시간이 걸렸다.

설명에서는 같은 아까랑 같은 경로인 /config/www/에 넣으라고 하더니

넣으라는 코드를 보면 url추가하는 부분에 community가 끼어있다.

내가 이걸 생각못하고 파일을 www폴더에 넣었다......

이 글을 혹시하도 읽는 사람이 있으면 나랑 같은 실수 해서 시간허비 하지 말길 바란다.

이후는 동일하다. configuration.yaml-lovelace에

- url: /local/community/home-assistant-sun-card.js
        type: module

추가하고

#lovelace
lovelace:
    mode: yaml
    resources:
      - url: /local/hass-shutter-card.js
        type: module 
      - url: /local/community/home-assistant-sun-card.js
        type: module

ui-lovelace.yaml에

      - type: 'custom:sun-card'
        title: Sun          # 알아서
        darkMode: false     # 어시스턴트 다크모드일 때에 true로 해야 글자가 보인다.
        language: 'en'      # 아직 한글(ko)은 없다
        showAzimuth: true   # 방위
        showElevation: true # 고도
        timeFormat: '12h'   # '12' 나 '24' 중 택일

아래 코드 수정해 넣으면 끝난다.

 

이것도

뙇!!!

16분 뒤에 해뜬다 ......

잠이 넘 많이 온다.....

 

 

끝

 

---

만약 카드 json file이 업데이트되어 파일을 변경하였다면 configuration.yaml에서 경로를 조금 수정해주어야한다.

lovelace:
    mode: yaml
    resources:
      - url: /local/hass-shutter-card.js
        type: module

에서

lovelace:
    mode: yaml
    resources:
      - url: /local/hass-shutter-card.js?v=1
        type: module

로 url의 .js뒤에 ?v=1을 추가해주어야한다.