HomeAssistant HTC Flipclock with Weather card

HTC Flip clock with weather for Home Assistant

White theme

Dark theme

With custom entity

With a theme

Support

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

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.2.0
       type: module

Simple install

• Not yet available. I'll see how to upload it to HACS (Home Assistant Community Store)

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.