코딩정보

● HA작업) Home Assistant icon 형태 button-card 와 Slider Button Card button card 적용 정보

♨ 카랜더 일정 : 2023년06월11일
  • 링크
    https://www.youtube.com/watch?v=5Pi21pqfbxA&t=80s 121 회 연결
    https://github.com/custom-cards/slider-button-card 121 회 연결
    https://cafe.naver.com/koreassistant/10454 107 회 연결
    https://cafe.naver.com/koreassistant/1246s 회 연결
  • 첨부

    • 작성자 정보

    컨텐츠 정보

    본문

    ●  HA작업) Home Assistant   icon 형태 button-card  와 Slider Button Card button card 적용  정보

    haos > home assistant 6.1 버전

    설치 >> hacs >  Fronted > button-card  와 Slider Button Card 가 설치 된 상태

    <기본 슬라이더 스위치 설정 사례>

    3232235521_1686549752.437.png

    기본 스위치 와 스라이트 스위치 수평 배열 스위치 비교

    3232235521_1686551233.3031.png


    <기본 설치 상태 확인>

    3232235521_1686548178.5466.png


    예제)

    기본 모아놓은   2열 카드 기본 예제

    3232235521_1686548671.1598.png

    아래 코드 편집기 보기로  붙여넣기 합니다

    그리고 

    1) 카드의 나열 형태 변경

      type: vertical-stack

        - type: horizontal-stack

    또는

    2) 카드 형태 변경

          - type: custom:slider-button-card

    또는

          - type: custom:button-card

    3) 아이콘을 변경

       icon: mdi:lightbulb


    4)  동작할 기기 엔티티 입력

        entity: switch.serja_light

    ==================

    사용카드 > silder button card  이용합니다.

    3232235521_1686566316.7056.png

    ====================

    이하 전체 복사후 수정하세요

    ======================

    
type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:slider-button-card
        entity: switch.serja_light
        name: 서재 불
        icon: mdi:lightbulb
        aspect_ratio: 1/1
        state_color: true
        slider:
          direction: left-right
          background: solid
        action_button:
          mode: toggle
      - type: custom:slider-button-card
        entity: light.light_living_light_5
        name: 복도 불
        icon: mdi:lightbulb
        aspect_ratio: 1/1
        state_color: true
      - type: custom:slider-button-card
        entity: switch.bogdo_hwajangsil_bul
        name: 복도 화장
        icon: mdi:lightbulb
        aspect_ratio: 1/1
        state_color: true
      - type: custom:slider-button-card
        entity: switch.serja_light
        name: 서재 불
        icon: mdi:lightbulb
        aspect_ratio: 1/1
        state_color: true
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: switch.serja_light
        name: 서재 불
        icon: mdi:lightbulb
        aspect_ratio: 1/1
        state_color: true
        slider:
          direction: left-right
          background: solid
        action_button:
          mode: toggle
      - type: custom:button-card
        name: 1/1
        icon: mdi:lightbulb
        aspect_ratio: 1/1
      - type: custom:button-card
        name: 1/1
        icon: mdi:lightbulb
        aspect_ratio: 1/1
      - type: custom:button-card
        name: 1/1
        icon: mdi:lightbulb
        aspect_ratio: 1/1

    ============

    기본정보 

    https://www.home-assistant.io/dashboards/vertical-stack

    3232235521_1686565963.713.png

    
type: vertical-stack
cards:
  - type: picture-entity
    entity: group.all_lights
    image:  /local/house.png
  - type: horizontal-stack
    cards:
      - type: picture-entity
        entity: light.ceiling_lights
        image: /local/bed_1.png
      - type: picture-entity
        entity: light.bed_light
        image: /local/bed_2.png
    주)  image:  /local/house.png
    는 /local/ 는 www 폴더 입니다.
    1. 커스텀카드 설치해보기

    해외 HA 포럼에는
    개발자들이 무수히 많은 커스텀카드를 개발하고 공유하고 있습니다.

    그중에 저희는 상위랭크되어 있는 버튼카드를 설치해보려고 합니다.


    위 링크에 들어가셔서 아래에 최신 버전
    button-card.js 파일을 다운 받아줍니다.

    =========================================
    동영상 정보


    3232235521_1686544945.6561.png


    ☞ https://11q.kr 에 등록된 자료 입니다. ♠ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다♠1.png

    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2
    office view

    관련자료

    댓글목록

    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    Dwains Dashboard - 1 CLICK install Dashboard for desktop, tablet and mobile - V3.1.0
    https://community.home-assistant.io/t/dwains-dashboard-1-click-install-dashboard-for-desktop-tablet-and-mobile-v3-1-0/168593

    답변
    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    버튼카드로 난방기 카드 (climate card) 만들기
    https://cafe.naver.com/koreassistant/4997

    답변
    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:slider-button-card
            entity: switch.serja_light
            name: 서재 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.jageunbang_bul
            name: 작은방
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.jageunbang_osjang
            name: 옷장
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.moniteo
            name: 모니터
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
      - type: horizontal-stack
        cards:
          - type: custom:slider-button-card
            entity: light.light_living_light_5
            name: 복도 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.jubang_jubang_bul
            name: 주방 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.jubang_sigtag_bul
            name: 식탁 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.anbang_bul
            name: 안방 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
      - type: horizontal-stack
        cards:
          - type: custom:slider-button-card
            entity: light.light_living_light_1
            name: 거실 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: light.light_living_light_2
            name: 거실2 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: light.light_living_light_4
            name: 앞 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: light.light_living_light_3
            name: 뒷 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
      - type: horizontal-stack
        cards:
          - type: custom:slider-button-card
            entity: switch.hwajangdae_bul
            name: 화장대 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.anbang_hwajangsil_bul
            name: 안방 화장실 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.anbang_hwajangsil_syaweo_bul
            name: 안방 화장실샤워 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.anbang_hwajangsil_paen
            name: 안방 화장실 팬
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
      - type: horizontal-stack
        cards:
          - type: custom:slider-button-card
            entity: switch.cimdae_bul
            name: 침대 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.seutaendeu_bul
            name: 스탠드 불
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.tv
            name: TV
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle
          - type: custom:slider-button-card
            entity: switch.wifi_switch_1ch_socket_1
            name: 컴퓨터
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            state_color: true
            slider:
              direction: left-right
              background: solid
            action_button:
              mode: toggle

    답변
    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    https://github.com/custom-cards/button-card#light-entity-color-variable

    답변
    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    https://github.com/wxt9861/esxi_stats/blob/master/examples/button-card-example.yaml

    답변
    목록 답변

    ♥간단_메모글♥

    최근글

    새댓글

    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-05-16 04:26:33

    오늘의 홈 현황

    • 현재 접속자♨ 325 명
    • 오늘 가입자※ 1 명
    • 어제 가입자※ 4 명
    • 주간 가입자※ 11 명
    • 오늘 방문자 1,020 명
    • 어제 방문자 1,597 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,325,350 명
    • 전체 게시물※ 8,570 개
    • 전체 댓글수※ 24,612 개
    • 전체 회원수 10,968 명

    QR코드

    ☞ QR코드 스캔은 kakao앱 자체 QR코드
    알림 0








    최신글↑