iamBiB / lovelace-htc-flipclock-weather

HTC Flipclock with Weather card
24 stars 12 forks source link

HomeAssistant HTC Flipclock with Weather card

HTC Flip clock with weather for Home Assistant

White theme

image

Dark theme

image

With custom entity

image

With a theme

image

Support

Hey dude! If you like it .. well :beers: or a :coffee: would be nice :D

coffee

Notes

This version requires jQuery (already in the package). I'll probably do a version with no jQuery without the flip clock animation.

Install

REQUIREMENTS

The time is based on time_date sensors. In order for the plugin to work you need to create the following sensors in your HA

platform: time_date
display_options:
    - time
    - date
    - date_time
    - date_time_utc
    - date_time_iso
    - time_date
    - time_utc
    - beat

CLI install

  1. Move into your config/www/custom_ui directory

  2. Download lovelace-htc-flipclock-weather repo and add the htc-weather to step 1 folder.

  3. Add a reference to htc-flipclock-weather.js inside your ui-lovelace.yaml or through the raw config editor gui.

    resources:
      - url: /local/custom_ui/htc-weather/htc-flipclock-weather.js?v1.3.2
        type: module

Simple install

Updating

  1. Simple, do the steps from CLI Install again :D

Using the card

Options

Card options

Name Type Default Description
type string required custom:htc-weather-card
entity string required The entity_id from an entity within the weather domain.
name string optional Set a custom name.
lang string optional Set a language (ro/en/nl/cz available).
am_pm string optional Set clock in AM/PM format.
svrOffset int optional If you need offset on time (seconds).
renderForecast bool optional Render forecast (only 4 days).
renderClock bool optional Render clock.
renderDetails bool optional Render sunt details and wind.
high_low_entity bool optional Replace high / low temperature with a custom entity. Params available entity_id, name. Default high / low temperature today
renderDetails bool optional Render sunt details and wind.
theme.name optional Change theme (default/dusk).
theme.weather_icon_set optional Change theme icon set. For default you have picto alternative. For dusk you have htc alternative

Example usage

Standard card

  type: 'custom:htc-weather-card'
  entity: weather.home
  sun: sun.sun

With custom high_low_entity entity

  type: 'custom:htc-weather-card'
  entity: weather.dark_sky
  sun: sun.sun
  high_low_entity:
    entity_id: sensor.time_utc
    name: UTC Time

Using a theme

  type: 'custom:htc-weather-card'
  entity: weather.dark_sky
  high_low_entity:
    entity_id: sensor.time_utc
    name: UTC Time
  renderForecast: true
  sun: sun.sun
  theme:
    name: dusk
    weather_icon_set: default

Using a theme with custom icons

  type: 'custom:htc-weather-card'
  entity: weather.dark_sky
  high_low_entity:
    entity_id: sensor.time_utc
    name: UTC Time
  renderForecast: true
  sun: sun.sun
  theme:
    name: dusk
    weather_icon_set: htc

Problems?

There might be :D .. So give me a shout for issues or even updates :D

License

This project is under the MIT license.