HA-Animated-cards는 “홈 어시스턴트 대시보드를 애니메이션화”하기 위한 준비된 카드 컬렉션(이 글이 작성될 때 67개의 모델)입니다. 특히 이미 Mushroom을 사용하고 있다면 더더욱 유용합니다. 아이디어는 어디에나 반짝이를 흩뿌리는 것이 아닙니다: 애니메이션은 다소 미묘하고 깔끔하며 의미가 있을 때만 활성화됩니다. 세탁기가 전기를 소비할 때만 “회전”하고, 팬은 실제로 작동할 때만 회전하며, 플러그는 전력을 소모할 때만 “빛납니다” 등입니다.

기쁜 점은: 이것은 엄청난 JavaScript를 추가하는 대형 사용자 정의 카드가 아닙니다. 이 프로젝트는 주로 Mushroom을 기반으로 하며, card-mod를 사용하여 스타일(CSS)과 애니메이션을 주입합니다. 결과: 가벼운 구조로 이미 존재하는 대시보드에 매우 잘 통합됩니다.

홈 어시스턴트에서 흥미로운 이유

대시보드는 몇 번이고 빠르게 확인하게 됩니다. 실제로 “상태를 한눈에” 보는 것이 종종 “값을 읽는 것”보다 더 중요할 수 있습니다. HA-Animated-cards는 정확히 이러한 즉각적인 인식을 제공합니다.

세 가지 매우 구체적인 상황을 살펴보겠습니다.

세탁기가 “켜져” 있습니다, 맞습니다… 하지만 실제로 회전하고 있나요? 전력(W)에서 발동되는 애니메이션을 통해 사이클이 진행 중인지, 세탁기가 단순히 대기 중인지 즉시 알 수 있습니다.

23%의 배터리: 눈에 보입니다. 하지만 충전 중인지도 이해하고 싶을 것입니다, 세부 내용을 알아보지 않고도. “battery/progress” 모델은 “충전기” 센서가 활성화되면 다르게 행동할 수 있습니다(일반적으로 스마트폰에 해당).

온도/습도: “environment” 카드는 임계값에 따라 시각적으로 반응할 수 있으며, 시간을 기준으로 추세를 이해할 수 있는 대화형 그래프도 표시할 수 있습니다(샤워 후 습도가 상승하거나, 밤에 온도가 떨어지는 등).

즉, 가독성이 향상되고, 대시보드를 더 즐겁게 사용하게 됩니다(네, 이는 실제 주장이 됩니다… 우리가 좋아하는 대시보드는 항상 최신 상태로 유지합니다!).

필요 조건

저자가 제안하는 기본 요소는 간단합니다: HACS, Mushroom(카드 및 테마), 그리고 card-mod(HACS를 통해 2회 클릭으로 설치 가능).

모델에 따라 mushroom-legacy-template-card (종종 유용한 종속성으로 언급됨)도 사용할 수 있고, 특정 “그래프 있는” 변형을 위해 mini-graph-card 및 vertical-stack-in-card와 같은 보조 카드를 사용할 수 있습니다.

머리카락을 뽑지 않기 위한 세부 사항: 대시보드의 Sections 또는 Masonry 모드를 사용하는 것이 좋으며, 애니메이션이 작동하지 않는 것 같으면 보기 유형을 변경하는 것이 문제를 해결할 수 있습니다.

설치: HA-Animated-cards의 논리(간단)

HA-Animated-cards는 전통적인 홈 어시스턴트 통합처럼 설치되지 않습니다. 원칙은 “복사-붙여넣기”: Mushroom 카드를 생성하고(모델에 따라 수동 카드), 이를 일반적으로 구성한 후(엔티티, 이름, 아이콘 등), 제공된 스타일/애니메이션 블록을 card_mod 섹션에 붙여넣습니다.

중요합니다: 플러그인을 설치하는 것처럼 “HACS에 리포지토리를 추가하려고” 하지 마세요. 여기서는 카드를 붙여넣기 위해 YAML + 스타일 조각을 가져오는 것입니다.

단계별 설정

실제로 설정하는 것은 매우 간단합니다:

대시보드를 열고 카드가 배치될 뷰에서 Mushroom 테마를 적용합니다(명확히 권장됩니다).

기본 카드를 추가하며, 보통은 Mushroom Entity Card(또는 조명용 Mushroom Light Card)입니다.

표준 필드(엔티티, 이름, 아이콘, 정보 등)를 설정한 후, 코드 편집기로 전환하고 HA-Animated-cards에서 제공한 card_mod 섹션의 스타일을 붙여넣습니다.

복사한 코드에서 요구된 엔티티를 교체합니다. 특정 모델의 경우 “두 곳에서” 필요할 수 있습니다(전형적인 예: 환경 카드 + 그래프).

그리고 귀하의 집에 맞도록 온도, 와트, 백분율의 임계값을 조정합니다. 세탁기, 통풍기, 또는 라디에이터는 모두 전력 소비의 서명이 다르기 때문에, 바로 그 점에서 이 카드가 “스마트”해집니다.

예제 1: 전력으로 제어되는 “스마트 플러그” 카드

매우 직관적인 사용 사례: 세탁기, 건조기, 3D 프린터, 또는 서버에 연결된 플러그입니다.

플러그의 엔티티(switch)에 대해 Mushroom Entity Card를 생성합니다. 그런 다음, 해당 애니메이션을 붙여넣고 “스마트”하게 만듭니다: 애니메이션은 더 이상 상태 On/Off에만 의존하지 않고, 전력(W) 센서에 기반하게 됩니다. 전력이 임계값을 초과하면(종종 0W가 충분합니다) 애니메이션이 시작됩니다. 필요에 따라 비교 연산자를 변경할 수도 있습니다.

중요한 세부 사항: card-mod가 색상을 올바르게 가져오기 위해 저자는 실제 아이콘 색상을 선택하고 “primary” 또는 “accent” 옵션을 피할 것을 권장합니다.

예제 2: 대화형 그래프와 함께하는 환경 카드(온도/습도)

여기에서 “좋아, 이거 멋지네”라고 말하게 만드는 카드입니다.

보여주는 방법은 매우 직관적입니다: 대시보드에 수동 카드를 추가하고, 모델의 YAML을 붙여넣은 다음, 지정된 위치에서 센서의 엔티티를 교체합니다(전형적으로 주요 표시와 그래프에 한 번씩). 그런 다음, 값의 최소/최대 또는 사용된 임계값을 조정하여 귀하의 방에 맞게 스케일을 조정합니다(습기 있는 지하는 침실과는 다르게 조정되지 않습니다…).

공간을 절약하기 위한 요령은 두 카드가 나란히 있는 Grid Card(2열)를 통해 결합하고, 카드의 높이와 그래프의 너비를 조정하여 전체가 컴팩트하게 유지되도록 하는 것입니다.

예제 3: 배터리/백분율 카드(스마트폰, 센서, 다운로드 등)

이 모델은 배터리 백분율을 나타내는 모든 것에 적용됩니다: 전화기 배터리, Zigbee 센서 배터리, 3D 인쇄 진행, 다운로드 진행 등입니다.

데모는 배터리 센서에서 시작하는 Mushroom Entity Card를 제안하며, 사용자 정의 아이콘을 강요하지 않고 색상은 기본 흰색/연회색으로 설정합니다. 그런 다음, 선택한 모델의 card_mod 부분을 붙여넣습니다.

전화기의 경우, 멋진 보너스가 있습니다: “충전기” 센서를 추가하여 충전할 때 특정 애니메이션을 표시할 수 있습니다.

개인화 측면에서도 구체적입니다: 텍스트 크기(주요/부), 아이콘 크기, 그리고 “구석에 위치”를 좋아하지 않으면 주석처리/삭제할 수 있는 줄이 있습니다.

팁 및 일반적인 함정

애니메이션이 “작동하지 않는” 경우 두 가지 매우 간단한 사항을 확인하세요: 대시보드의 보기 유형(일부 사람들은 보기 변경이 상황을 반전시킬 수 있음을 관찰합니다) 및 뷰에서 Mushroom 테마를 사용하는지 여부.

카드가 색상에 의존하는 경우(조명, 색상을 찾아야 하는 아이콘), 설정 안내에 주의하세요: 특정 유형에서는 아이콘 색상을 지정하지 않고, 다른 유형에서는 실제 색상(기본/강세가 아님)을 요구합니다.

숫자 값(와트, 온도, 습도)을 기반으로 애니메이션을 제어하는 경우, 2분 동안 장비에 해당하는 임계값을 선택하세요. 이 설정이 애니메이션을 “장난감”에서 실제로 유용한 지표로 변화시킵니다.

모델을 찾고 더 나아가려면

프로젝트는 GitHub에서 중앙 집중화되어 있으며, 철학은 간단합니다: 카드를 선택하고, YAML/스타일을 복사한 후, 엔티티를 교체하고, 조정하십시오.

비디오 형식을 좋아하신다면, 저자는 단계별로 매우 많은 데모를 게시하며, 정기적으로 새로운 모델(커뮤니티에서 요청한 카드, 더 콤팩트한 변형, 그래프가 있는 버전 등)이 업데이트됩니다.