iambib / lovelace-htc-flipclock-weather

HTC Flipclock with Weather card

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.3.2
       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.

lovelace-htc-flipclock-weather's Issues

Time_Date Platform 'beat' depreciated

I have just read that 'beat' was depreciated over 6 months ago and has been removed.

Does this have any impact on the card, as per your instructions it needs to be added to the date_time sensor?

just cosmetic, lower 'layer' by 16 pixels

line 203 this.content.style.padding = '0 16px 16px'; I think it would be nicer if you also add 16 pixels from the top

so it would look like:

line 203 this.content.style.padding = '16px 16px 16px';

just a suggestion
regards Frank

Norwegian language

Great work!

Tried to add a language, Norwegian. Finally got it to work after clearing all Firefox site cache data for HA to get the new regional.js file loaded.
(Danish is similar to Norwegian for date and day names)

'no': {
	monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
	dayNames: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
	lang: 'no'
},

FR: Integrate German

Please, can you integrate the german localization like:

'de': {
	monthNames: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sept', 'Okt', 'Nov', 'Dez'],
	dayNames: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
	lang: 'de'
        windDirections: ['N','NNO','NO','ONO','O','OSO','SO','SSO','S','SSW','SW','WSW','W','WNW','NW','NNW','N'],
	},

Thank you very much!

NOT AN ISSUE - Portuguese (pt) regional settings

'pt':{
monthNames: ['Jan', 'Feb', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dec'],
dayNames: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
lang: 'pt'
}

Winddirection abbreviations still in english

Hello,

Thank you for your great work, and recent update..

I wonder if it would be possible to translate the wind abbreviations (N, NE, NNW etc)
in the selected language.

it also could be in the regional.js file
I already translated the Dutch (nl) part, the rest is still in english

regards Frank

export const regional = {
	'ro': {
		monthNames: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sept', 'Oct', 'Noi', 'Dec'],
		dayNames: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sam'],
		windDirections: ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'],
		lang: 'ro'
	},
	'en': {
		monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		windDirections: ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'],
		lang: 'en'
	},
	'nl' : {
		monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
		dayNames: ['Zon', 'Maa', 'Din', 'Woe', 'Don', 'Vrij', 'Zat'],
		windDirections: ['N', 'NNO', 'NO', 'ONO', 'O', 'OZO', 'ZO', 'ZZO', 'Z', 'ZZW', 'ZW', 'WZW', 'W', 'WNW', 'NW', 'NNW', 'N'],
		lang: 'nl'
	},
	'cz':{
		monthNames: ['Led', 'Ún', 'Bře', 'Dub', 'Kvě', 'Črv', 'Čvc', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
		dayNames: ['Ne', 'Po', 'Út', 'Stř', 'Čt', 'Pá', 'So'],
		windDirections: ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'],
		lang: 'cz'
	},
	'sv':{
		monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
		dayNames: ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör'],
		windDirections: ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'],
		lang: 'sv'
	},
	'pl':{
		monthNames: ['Sty', 'Lu', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
		dayNames: ['Nie', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
		windDirections: ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'],
		lang: 'pl'
	},
	'it':{
		monthNames: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
		dayNames: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
		windDirections: ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'],
		lang: 'it'
	}
};

No icons

After install i got no icons....

unable to install

i followed your guide but i cant get it working

Custom element not found: htc-weather-card

Hey,

Love this card, loved the HTC Time and Weather widget, I want it! :)
BUuuut......
I am getting "Custom element not found: htc-weather-card" with this card.

I am running core-2021.10.6
Card

type: custom:htc-weather-card
entity: weather.climacell_daily
sun: sun.sun

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

For the life of me I cannot figure it out, all other custom cards are working OK.

Cheers

Brent

Card overlaps

Hi Bogdan,
I think this is the best looking weather and clock card for HA.
When I try to integrate this card with horizontal-stack, vertical-stack or custom layout card I notice that lovelace-htc-flipclock-weather card is overlapping with other entities/cards. I am not sure where is the problem. Do you have some similar observations?

French language

Great job, thank you.
Is it possible to integrate the French language:

        'fr': {
		monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		dayNames: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
		windDirections: ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSO','SO','OSO','O','ONO','NO','NNO','N'],
		lang: 'fr'
	},

Request - sorry to be a pain

Any chance on getting some direction on how to change "Home" above temp to "Outside", and have it reference an outdoor sensor (entity sensor.jewell_air_temperature)? Thanks.

AM/PM & Wrong time on iPad

Hi,
Just found this card and love it.

I have 2 issues that I am not able to solve:

1. I have set "am_pm: false" but at the bottom of the card that shows when sun is rising and going down it is still AM/PM, can this be configured?
2. The clock is OK on my computer, but on my iPad it is 2 hours in front. I have checked the region of my iPad to be Sweden and also that the clock is right, any ideas?

Thanks,
Ase

Not autoscaling

Hello, you know about the subject. But if a solution has been found, we ask for your help.

Not Working On Home Assistant 2022.7

Showing as following:

Too big on iPhone, and slow rendering

Love this design! But on a iPhone the images are too big and make the other cards shrink, it also takes a long time to render. Is there a solution to this?

Kind regards.

Dead end of the clock?

I tried to add it as good as i could.
but still it does not reecognise the 'custom:htc-weather-clock' item.

HACS would make it simple for everyone, but i guess you have given up the project?

Windows size out of range...

Windows size out of range in my Sony Xperia XZ2.
Is there a simple resizing option ?
Thanks a lot for this excellent job.
Can we hope to find it one day on HACS ?

Italian language

regional.js.zip
I added the Italian language in the regional.js file but unfortunately it doesn't work.
What else needs to be changed?

Forecast issue

Great plugin!!
I'm having an issue with the four day forecast showing today's date on all, can you point me as to where I'm going wrong, using the dark sky weather as source 🤪

HACS

Can you please add to HACS. Would like to get gramps and granny using this and HACS makes it so much easier. Thank you.

ToDo: Responsive

Working on a responsive css for the flipclock. Ill let you know when its done

Time is lagging when running in "fully kiosk app"

Hi,

I managed to install htc flipclock weather, but after an hour the clock is several minutes behind when I view the module in the fully kiosk app an my androdi 10 go tablet (hanging on the wall). I assume that the app is stopping java script when going into screen saving mode :-(

Install help

hi, I´m new to HA, just started yesterday and would love to implement the htc flipclock. But I´m lost on how to do this. Is it possible to help me?

I have created in the configuration.yaml:

• platform: time_date
  display options
  And those seem to work for a different clock.

but where do I create all the other settings? I have installed File Edititor, i guess that is needed for the code.

Sorry for all these basic questions
thanks in advance
Steve

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'attributes')

Hi Bogdan,

first, thank you very much for your work!

After integration your card, i get following JS-errors:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'attributes')
    at HtcWeather.render (htc-flipclock-weather.js?v1.3.0:195:40)
    at HtcWeather.shouldUpdate (htc-flipclock-weather.js?v1.3.0:167:18)
    at HtcWeather.performUpdate (updating-element.js?module:473:14)
    at HtcWeather._enqueueUpdate (updating-element.js?module:437:25)

and the card is not show on the lovelance-Dashboard.

I control the integration many times.
I clear the browser-cache.

What should i do?

Can you help me please

Thank you!

Best regards!
Gerd

forecast not working for me

please can you help me fix this? also can you change size to 400px not 470px

Casting weather not working

Need help getting my Dashboard to cast correctly via the google cast add in. dashboards work fine in the browser but when i use Google CAST to send to nest hub the images on the weather card are broken.

Responsive

I am trying the flipclock and it is very nice but unfortunately it is not resposive.
On the computer the full screen is ok but on the tablet the card overlaps the others.
Is it possible to solve this problem?

Install issue -Blank Card

I copied the files, added the resource, and dropped yaml code for card without too much issue but the card loads blank. Console errors attached. Network tab looks like its loaded the js cleanly.

Thanks for your help

Double wind speed in wind direction

https://github.com/ibBogdan/lovelace-htc-flipclock-weather/blob/baaaf8f34860ee0770cfce2784f21c2c15d6d97c/htc-flipclock-weather.js#L587

The wind speed is double in the wind direction

Language de not working

Thank you for integration of the german language in the regional.js

When i add

lang: de

The flipclock dissapear. It is working with the language till to the italian language. The language no, dk, de, fi won´t work.

Do you have a solution?

Thank you and best regards

Peer

Custom element doesn't exist: htc-weather-card.

Hi, Bogdan!
I've noticed you fantastic card (years ago I had an HTC smartphone with that widget on the home page... Sigh! ;-P). I've followed your installation guide, but right now I didn't be able to make it works... I'm running Home Assistant Core on Raspbian. Could you help me?

Not an issue, more a request instead of darksky to implement Climacell

Hi,

Sorry didnt know where to put my question, but I like to see that your outstanding piece of work works with Climacell (its called Tomorrow nowadays https://www.tomorrow.io/) instead of Darksky,

Regards Frank

edit:
Ok, not that I understand it how to implement but I guess I can set my weather provider in HA with some thing like
entity: weather.dark-sky

I installed dark sky but no weather is showing up, Can some one give me some pointers.....

edit:
So I understand now that there is a HA 'build in' dark-sky and buienradar and open wathermap option. The modules that you can integrate as a sensor do not work!!..

Install broken

Install this code via hacks does not work due to invalid path in main java script.

This line is wrong, but even when I fix this there is no forecast, instead it display "wtf" ....

widgetPath: '/local/custom_ui/htc-weather/',