저번에 아이콘이 큰 것은 적용이 안되서
차라리 다른 사진을 넣을 수 있지 않을까해서 찾던 도중에
이 깃허브를 찾았다.
https://github.com/custom-cards/button-card#styling
custom-cards/button-card
❇️ Lovelace button-card for home assistant. Contribute to custom-cards/button-card development by creating an account on GitHub.
github.com
버튼 클릭시 자기 마음데로 액션을 추가 수정 할 수있어서 아주 마음에 들었는데
몇 몇 분들이 사진을 아이콘으로 사용하니 뭔가 예뻐보였다.
뿐만 아니라 마침 애플 홈킷 디자인처럼 설정이 가능했다.
(애플 디자인은 역시는 역시니까)
그래서 이 것을 본게 밤11시 였지만
너무너무 보고싶어서 계속하다가 4시에 점들었다가 이제 쓴다.
만들어진 결과다.
꽤 예쁘지 않나? 나만 그런가....?
(밑에 선은 아이패드 홈바 다.)
이것도 저번 글이랑 방법은 거의 같다.
https://dazabamuker.tistory.com/24
홈어시스턴트 lovelace 커스텀 카드 추가하기
홈 어시스턴트는 기본적으로 오버 뷰에서 간단하게 ui로 설정도 가능하지만 카드를 내 마음데로 커스터 마이징도 가능하다. 근데 그게 좀 복잡? 하다 그렇지만 인터넷상에는 특히 깃허브에는 킹
dazabamuker.tistory.com
만약 보는 사람이 있다면 추가 방법은 귀찮으니 위 글을 참고하기 바람
ㅋㅋㅋㅋㅋㅋ
쓰고 싶은 아이콘 사진은 /config/www/에 넣으면 된다.
이 카드는 정말 여러가지 조절이 가능해서 내부 변수도 무지하게 많고
따로 공부해야 되나? 싶을 정도인데 그만큼 자기가 원하는데로 가능하다.
아래 코드가 내가 원하는 모양으로 만든것이다.
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: switch.bul
name: '불'
entity_picture: '/local/light-bulb-off.png'
show_entity_picture: true
state:
- value: 'on'
entity_picture: '/local/light-bulb-on.png'
styles:
card:
- background: radial-gradient(circle, rgba(255,234,11,0.5) 10%, rgba(255,240,170,0.5) 60%)
- filter: opacity(100%)
show_state: true
aspect_ratio: '1/1'
styles:
card:
- background: rgba(128, 128, 128, 0.5)
border-radius: 10%
padding: 10%
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- color: white
- font-weight: bold
- text-shadow: 0px 0px 5px black
- text-transform: lowercase
state:
- justify-self: start
- padding-left: 0px
hold_action:
action: 'more-info'
haptic: 'light'
- type: 'custom:button-card'
entity_picture: '/local/blog.png'
show_entity_picture: true
aspect_ratio: '1/1'
size: 80%
name: "티스토리 블로그"
label: "https://dazabamuker.tistory.com"
show_label: true
tap_action:
action: 'url'
url_path: "https://dazabamuker.tistory.com"
haptic: 'light'
confirmation:
text: "Are you sure?"
styles:
card:
- background: rgba(128, 128, 128, 0.5)
border-radius: 10%
padding: 10%
text-align: center
entity_picture:
- filter: opacity(100%)
name:
- justify-self: start
- color: white
- font-weight: bold
- align-self: start
- text-shadow: 0px 0px 5px black
- width: 100%가로 스텍카드에 같은 정사각형의 모양으로 넣어서 사이즈를 조절했다.
하나는 원래 있던 우리방 불 스위치인데 모양을 커스텀했고
하나는 블로그 링크 버튼이다.
내가 사용한 변수 위주로 말을해보겠다.(깃허브는 넘길기두하고 잘 모른다 사실)
(영어로 된 설명은 깃허브에 다 있다.)
우리방 불 카드
- type: 'custom:button-card'
entity: switch.bul
name: '불'
entity_picture: '/local/light-bulb-off.png'
show_entity_picture: true먼저 카드 형식을 불러온다음
엔티티를 지정했다.
이름은 변수를 생성하지 않아도 엔티티 이름이 있어서 굳이 필요하지는 않지만
닉을 만들거나 bold체 등의 특징을 심어주기 위해서 지정했다.
(전체 폰트 설정으로 가능은 하지만 다른 텍스트랑 구분하기 위해서 만들었다.)
다음 내가 원하는 것이던 아이콘을 사진으로 변경하기 위해서
entity_picture 변수를 만들고 경로를 지정했다.
show_entity_picture: true를 하지 않으면 안나타나니 반드시 해줘야한다.
tensorflow session()만큼이나 중요하다.
state:
- value: 'on'
entity_picture: '/local/light-bulb-on.png'
styles:
card:
- background: radial-gradient(circle, rgba(255,234,11,0.5) 10%, rgba(255,240,170,0.5) 60%)
- filter: opacity(100%)
show_state: true
aspect_ratio: '1/1'이 부분이 상태가 달라졌을 때 바뀌는 것을 설정하는 부분인데
이렇게 배경이나 이미지 바꾸는 것도 가능하지만
아이콘, 카드 스핀도 가능할 정도로 설정 가능한 것이 많다(선풍기 같은데 쓰면 간지)
- value: 'on'은 if문이랑 같다.
entity_picture: '/local/light-bulb-on.png' 이미지르 켜진 전구로 바꾸었다.
styles가 css랑 같아서 변수명이 거의 같다.
여기서는 카드의 배경을 바꾸었는데
우리는 rgb 코드 값 잘 모르니까 cssGradient에서 확인가능하다.
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
여기서 ui로 모양을 만들면 아래에 코드가 있다.
복붙하면 된다.
- filter: opacity(100%)는 카드 투명도인데 기본적으로 100%라 굳이 쓸 필요가 없는데
처음에 만들어볼때에 실험한다고 넣었었다......
show_state는 내가 만든 카드 제일 하단 처럼 상태가 on인지 off인지 등을 나타낼때 사용한다.
aspect_ration는 카드의 가로세로 비이다.
나는 정사각형이라 1/1이다. '가로 / 세로'
styles:
card:
- background: rgba(128, 128, 128, 0.5)
border-radius: 10%
padding: 10%
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- color: white
- font-weight: bold
- text-shadow: 0px 0px 5px black
- text-transform: lowercase
state:
- justify-self: start
- padding-left: 0pxstate랑 같은 위치에서 존재하는 styles는 기본적인 카드 모양을 만든다.
- card:에서 background는 배경색이고
rgba(128,128,128,0.5)는
기본 색이 회색이며투명도를 포함한다. rgba(r, g, b, 투명도)로 이루어진다.
border_radius는 모서리 어느정도 둥글게 할 건지를 결정한다.
padding은 content와 border 사이 간격이다.
grid는 '격자'로 요소들을 위치 크기등을 결정지어 준다.
i: img_cell
n: name
l:label
s: state다.
grid-template-areas: 요소들의 위치를 나타내는데
- grid-template-areas: '"i n s" "i n s" "i n l"'가 아래 모양이다
.container { grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }
은 아래의 모양을 결정한다.
위 코드이 img_cell 코드는 정렬코드다.
justify_self는 축(grid로 만들어진)을 따라 배치치 되도록한다.
img_cell은 button-card.js에 기본적으로 들어있다.
넘 간단한 것은 넘어가고
text-transform: 은 텍스트 전체를 대문자(uppercase)로 할건지 소문자(lowercase)로 할건지 결정한다.
hold_action:
action: 'more-info'
haptic: 'light'꾹 눌렀을때에
사용되는 액션을 지정한다.
여기서는 추가 정보로 했다.
haptic은 아이폰에서 말하는 그 햅틱이다.
기본적으로는 버튼 카드라서 한번 터치할때가
tap_action으로 기본적으로 들어있고 toggle이 기본 설정으로 되어있다.
우리방 불 카드 설정을 끝이났따.
블로그 링크 버튼
size: 80%
name: "티스토리 블로그"
label: "https://dazabamuker.tistory.com"
show_label: true
tap_action:
action: 'url'
url_path: "https://dazabamuker.tistory.com"
haptic: 'light'
confirmation:
text: "Are you sure?"살펴본 것은 제외하였다.
size는 아이콘과 사진의 크기를 설정하는 것인데
기본설정이 40%라 100%하면 엄청 커진다.
name 말고도 label이 설정 가능하고 역시나 show_label을 해주어야한다.
여기서 나는 tap_action의 기본 설정을 바꾸어 url로 하였다.
그러면 링크로 이동이 가능하다.
액션은 more-info, toggle, call-service, none, navigate, url 이렇게 6가지 변수가있다.
confirmation은 클릭시 알림으로 떠서 실행 할지 말지 묻는 것으로 사용이 가능하다.
styles:
card:
- background: rgba(128, 128, 128, 0.5)
border-radius: 10%
padding: 10%
text-align: center
entity_picture:
- filter: opacity(100%)
name:
- justify-self: start
- color: white
- font-weight: bold
- align-self: start
- text-shadow: 0px 0px 5px black
- width: 100%코드를 보기에 앞서
이것 때문에 4시에 잤다.....
글이 외쪽으로 치우쳐져있다.
padding-left: 0px을 한 것도 아닌데......
padding-left: 20px를 하면 화면 크기가 달라였을 경우 마찬가지로 이상해지는건 당연했다.
텍스트라서 text-align: center를 해 보아도 변하지 않았다.
구글에서 열심히 찾아 비슷한 구문을 넣어도 역시나 그대로였다.
card: 에서도 text-align이 보이는데 이 친구로 해결이 되지 않았다.
(안되서 여기 저기 넣어보다 안지웠다.)
그래서 text 정렬이 안되는것은 이상하고..
곰곰히 생각해보니 텍스트 필드가 좌측으로 치우쳐져서 그런가 싶어서 확인하려고
크롬에서 검사를 열어 css 선택 툴로 확인해보았다.
역시나 텍스트 필드가 왼쪽으로 치우쳐져있었다.
그래서 텍스트 크기를 고정하면 되겠구나 해서 width: 100%로 해보니
원하는 모양이 되었다.
박수!!!!!
이제 다른 것도 적용해 봐야징~~~~~
추가적으로 ui-lovelace에서
views:
- title: Home
icon: mdi:home
path: home
background: center / cover no-repeat fixed url("/local/background.jpg")대시보드 배경은 위의 background:~~~~~
로 파일 경로 바꾸서 넣으면 배경사진이 적용된다.
물론 파일은 /config/www/에다 넣고 ㅋ
'스마트 홈 > 홈어시스턴트(Home Assistant)' 카테고리의 다른 글
| Esp32 - 동생 컴퓨터 감시 장치 (0) | 2022.02.08 |
|---|---|
| 홈어시스턴트(Home Assistant) 코로나 확진자수 스크랩(크롤링)(2) (0) | 2022.02.03 |
| 홈어시스턴트 lovelace 커스텀 카드 추가하기 (0) | 2021.07.06 |
| 홈어시스턴트(Home Assistant) 아이콘 추가하기 (0) | 2021.07.06 |
| 홈어시스턴트(Home Assistant) Entity 아이콘 바꾸기 (0) | 2021.07.04 |