Skip to content

yfands/lovelace-htc-flipclock-weather

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 🍻 or a ☕ 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.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.

About

HTC Flipclock with Weather card

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%