Карточка автомобиля для дашборда¶
Интеграция поставляет кастомную карточку CARTelemetry Car Card: автомобиль видом сверху с сенсорами прямо на кузове и плитками управления под ним.
Установка¶
- Обновите интеграцию до v3.0.13+ — карточка копируется в
www/community/cartelemetry-card/(каталог конфигурации HA), ресурс регистрируется автоматически (/local/community/cartelemetry-card/car-card.js). - Если карточка не появилась в списке — добавьте ресурс вручную:
Настройки → Панели управления → ⋮ → Ресурсы → добавить
JavaScript Moduleс URL/local/community/cartelemetry-card/car-card.js. - Обновите страницу браузера (Ctrl+F5).
Настройка¶
Минимальный конфиг (YAML-редактор дашборда):
type: custom:cartelemetry-car-card
car: my_car # car_name как в entity_id (sensor.my_car_speed)
title: Мой автомобиль # опционально
vehicle_type: suv # опционально: car | hatchback | suv | pickup | van | truck | moto
Плитки управления по умолчанию подбираются автоматически (климат, замок, обогрев зеркал). Свой набор:
type: custom:cartelemetry-car-card
car: my_car
vehicle_type: suv
tiles:
- entity: switch.my_car_ac_state
name: Климат
icon: mdi:air-conditioner
- entity: lock.my_car_remote_lock_state
name: Замок
icon: mdi:car-key
Что показывается на машине¶
- Точки-индикаторы: двери (4), капот, багажник, окна (4) — красные, когда открыто, зелёные — закрыто; серые, если данных нет.
- Бейджи: температура двигателя (капот), температура за бортом (зад), SOC (% заряда) — по центру.
- Статусная строка: едет/стоит (по скорости), SOC, диапазон.
- Иконка типа авто (слева сверху): base64-силуэт по
vehicle_type.
Vehicle Card (спидометр + binding-точки)¶
Вторая карточка — custom:cartelemetry-vehicle-card — универсальная: силуэт
автомобиля/грузовика/мотоцикла, сенсоры и кнопки по binding-точкам на кузове,
спидометр, панели сенсоров/управления/дверей. Иконки-изображения (PNG, CC0) лежат в
www/community/cartelemetry-card/assets/ (копируются при установке).
type: custom:cartelemetry-vehicle-card
vehicle: car # car | truck | motorcycle
device: binary_sensor.my_car_online # статус онлайн/офлайн
name: Мой автомобиль
sensors: # маппинг на ваши сущности
temperature: sensor.my_car_engine_coolant_temp
fuel: sensor.my_car_soc
battery: sensor.my_car_device_battery
mileage: sensor.my_car_range
doors: # binary_sensor: on = открыто
left: binary_sensor.my_car_driver_door
right: binary_sensor.my_car_passenger_door
trunk: binary_sensor.my_car_trunk
hood: binary_sensor.my_car_bonnet
controls: # lock/switch/button; horn может быть binary_sensor-индикатором
lock: lock.my_car_doors_lock
engine: switch.my_car_drl
lights: switch.my_car_fog
horn: binary_sensor.my_car_low_beam # индикатор состояния (on/off) или button-кнопка
speedometer: # опционально
entity: sensor.my_car_speed
max: 220
image_url: /local/community/cartelemetry-card/assets/car-silhouette.png # своя картинка
binding_overrides: # позиции иконок (x/y в % от картинки)
temperature: { x: 45, y: 30 }
fuel: { x: 45, y: 50 }
battery: { x: 30, y: 50 }
mileage: { x: 48, y: 66 }
lock: { x: 60, y: 50 }
engine: { x: 83, y: 64 }
lights: { x: 95, y: 50 }
horn: { x: 73, y: 43 }
left: { x: 30, y: 35 }
right: { x: 60, y: 35 }
trunk: { x: 10, y: 50 }
hood: { x: 85, y: 50 }
Позиции точек на кузове переопределяются через binding_overrides (например,
binding_overrides: { fuel: { x: 50, y: 60 } }). Формат значений сенсоров берётся
из unit_of_measurement сущности (SOC в %, диапазон в км, температура в °C — как в
интеграции).
Редактор карточки (в интерфейсе HA)¶
У карточки есть визуальный редактор (кнопка «⋮» на карточке → «Редактировать»):
- Тип транспорта, имя, устройство, маппинги сущностей — выбор сущностей через нативный поиск HA (можно набирать имя/entity_id).
- Ссылка на картинку (
image_url) — своё изображение (путь/local/...илиhttps://…); если не указана — встроенный силуэт поvehicle. - Позиции иконок — раздел «Позиции на изображении»: ползунки
x/y(0–100 %) для сенсоров, дверей и кнопок; пустое значение возвращает стандартную позицию. - Управление — слот «Гудок/Сигнал» автоматически подстраивается:
button— кнопка,switch/light— переключатель,binary_sensor— индикатор состояния (on/off).
Эквивалент в YAML:
type: custom:cartelemetry-vehicle-card
vehicle: car
image_url: /local/my-car.png
binding_overrides:
fuel: { x: 50, y: 60 }
lock: { x: 50, y: 20 }
Вид сверху: оснастка SVG¶
Карточка берёт изображение из папки www/community/cartelemetry-card/ (в каталоге
конфигурации HA) в таком порядке:
- Вариант состояния
car_top_<state>.svg— если открыты двери/окна/люк/ багажник/капот:doors_open,windows_open,sunroof_open,boot_open,bonnet_open, при нескольких —all_open. - База
car_top.svg. - Вшитый fallback — base64 (текущий вид по умолчанию).
Картинки можно подложить самим (например, красивее или в фирменных цветах) —
без пересборки: просто положите файл в
<каталог конфигурации HA>/www/community/cartelemetry-card/ (например, car_top.svg,
car_top_doors_open.svg) и обновите страницу. Исходники-дефолты лежат в
custom_components/cartelemetry/www/ интеграции — при её обновлении они копируются заново.
Где взять картинки¶
- Вид сверху (free commercial):
- svgrepo: https://www.svgrepo.com/vectors/car-top-view/ (напр. https://www.svgrepo.com/svg/166983/car-top-view)
- freesvg: https://freesvg.org/top-view-car-vector
- Vecteezy: https://www.vecteezy.com/free-svg/car-top-view (проверьте атрибуцию)
- Иконки типов авто (для
vehicle_type): папкаwww/community/cartelemetry-card/icons/(SVGcar.svg,suv.svg, …). mdi-аналоги для HA: https://pictogrammers.com/library/mdi/ (mdi:car,mdi:car-hatchback,mdi:car-sport,mdi:car-pickup,mdi:van-passenger,mdi:truck,mdi:motorbike).
Размер SVG вида сверху — любой (карточка масштабирует по ширине, ~320px).
Альтернатива: picture-elements (без кастомной карточки)¶
Если не хотите кастомные карточки — ядро HA позволяет собрать то же на
picture-elements. Изображение: /local/community/cartelemetry-card/car_top.png.
type: picture-elements
image: /local/community/cartelemetry-card/car_top.png
elements:
- type: state-label
entity: sensor.my_car_soc
style: { top: 50%, left: 50% }
- type: state-icon
entity: binary_sensor.my_car_driver_door
style: { top: 38%, left: 6% }
tap_action: { action: more-info }
Позиции подбираются вручную; подсветки состояний нет — только значения.