Отображение времени в обзоре

Введение

Отображение текущего времени и даты на панели обзора Home Assistant - это отличный способ сделать интерфейс более информативным и удобным. В этой инструкции мы рассмотрим несколько способов добавления часов на главную панель.

💡 Совет: Вы можете настроить отображение времени в различных форматах, включая 12-часовой и 24-часовой форматы, а также добавить дату и день недели.

Способ 1: Использование сущности времени

Home Assistant имеет встроенную сущность sensor.time, которая отображает текущее время. Давайте создадим красивую карту для её отображения.

Шаг 1: Создание карты времени

Добавьте следующий код в вашу конфигурацию Lovelace:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 20px;
      padding: 30px;
    }
card:
  type: entity
  entity: sensor.time
  name: Текущее время
  icon: mdi:clock
  style: |
    :host {
      --ha-card-background: transparent;
    }
                    

Шаг 2: Добавление даты

Вы также можете отобразить дату, используя сущность sensor.date:

type: horizontal-stack
cards:
  - type: entity
    entity: sensor.time
    name: Время
    icon: mdi:clock-outline
  - type: entity
    entity: sensor.date
    name: Дата
    icon: mdi:calendar
                    

Способ 2: Использование Mushroom Cards

Mushroom Cards - это популярный набор кастомных карт для Home Assistant с красивым дизайном. Для начала установите Mushroom через HACS.

✓ Требование: Убедитесь, что у вас установлен HACS и добавлен репозиторий Mushroom Cards перед продолжением.

Настройка Mushroom Chips Card

Создайте красивую карту времени с помощью Mushroom:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.time
    icon_color: blue
    icon: mdi:clock
  - type: entity
    entity: sensor.date
    icon_color: purple
    icon: mdi:calendar
  - type: entity
    entity: sensor.time
    content_info: last-changed
    icon_color: green
                    

Способ 3: Пользовательская конфигурация

Для более продвинутых пользователей можно создать собственные сущности времени в configuration.yaml.

Создание шаблона времени

Добавьте следующий код в ваш configuration.yaml:

# Сенсоры времени
sensor:
  - platform: template
    sensors:
      time_formatted:
        friendly_name: "Форматированное время"
        value_template: >-
          {{ now().strftime('%H:%M') }}

      date_formatted:
        friendly_name: "Форматированная дата"
        value_template: >-
          {{ now().strftime('%d.%m.%Y') }}

      day_of_week:
        friendly_name: "День недели"
        value_template: >-
          {{ now().strftime('%A') }}
                    

⚠️ Внимание: После добавления кода в configuration.yaml необходимо перезагрузить Home Assistant или выполнить перезагрузку конфигурации.

Способ 4: Использование карточек из HACS

Существуют специализированные карточки для отображения времени, доступные через HACS:

Atomic Calendar Revive

Эта карточка отображает не только время, но и события календаря:

type: custom:atomic-calendar-revive
enableModeChange: true
calendars:
  - entity: calendar.personal
    name: Личный календарь
card_mod:
  style: |
    ha-card {
      border-radius: 15px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
                    

Кастомизация стилей

Вы можете изменить внешний вид карты времени, добавив пользовательские стили:

type: entity
entity: sensor.time
name: Время
icon: mdi:clock
style:
  top: 50%
  left: 50%
  width: 100px
  height: 100px
  border-radius: 50%
  background: >-
    linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%,
                   rgba(118, 75, 162, 0.3) 100%)
  font-size: 24px
  font-weight: bold
  color: white
                    

Полезные советы

1. Форматирование времени

Используйте различные форматы времени в зависимости от ваших предпочтений:

%H:%M - 24-часовой формат (14:30)
%I:%M %p - 12-часовой формат (02:30 PM)
%H:%M:%S - с секундами (14:30:45)

2. Локализация

Для отображения дня недели на русском языке настройте локализацию в Home Assistant:

# В configuration.yaml
homeassistant:
  time_zone: Europe/Moscow
  language: ru
  country: RU
                    

3. Анимация

Добавьте анимацию для более динамичного отображения:

card_mod:
  style: |
    ha-card {
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.8; }
    }
                    

Устранение проблем

Время не отображается

Возможные причины:

Сущность sensor.time не включена
Некорректная конфигурация в YAML
Проблемы с часовым поясом

Решение: Проверьте статус сущности в разделе "Разработчик" → "Состояния" и убедитесь, что sensor.time доступен и обновляется.

Неверный часовой пояс

Если время отображается неверно, проверьте настройки часового пояса в настройках Home Assistant (Настройки → Система → Общие).

Примеры реализаций

Пример 1: Компактные часы

Простая и компактная карта времени:

type: vertical-stack
cards:
  - type: glance
    show_name: false
    entities:
      - entity: sensor.time
        icon: mdi:clock
        style: |
          :host {
            --mdc-icon-size: 40px;
            font-size: 24px;
          }
                    

Пример 2: Информационная панель

Полная информационная панель с датой и временем:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
      color: white;
    }
card:
  type: entities
    entities:
      - entity: sensor.time
        name: Текущее время
      - entity: sensor.date
        name: Сегодняшняя дата
      - entity: sensor.time
        attribute: day_of_week
        name: День недели
                    

Дополнительные ресурсы

Для более глубокого изучения темы рекомендуем следующие ресурсы:

Заключение

Отображение времени на панели обзора Home Assistant не только улучшает визуальный интерфейс, но и делает его более функциональным. Вы можете выбрать любой из описанных выше способов в зависимости от ваших потребностей и уровня опыта.

✓ Готово! Теперь ваш интерфейс Home Assistant станет более информативным и удобным в использовании.