HTC Flip Clock with weather

JB007 · August 22, 2023, 11:19pm

Hello new here to home assistant… im designing my dashboard & I can’t get this card to work to save my life… I tried everything even copying others code & it always shows up the same… can some one please help!!!

Here’s how it shows up & heres my code

JB007 · August 23, 2023, 12:46am

How it look on my dashboard

)

peerkn · August 23, 2023, 3:30pm

Hello,
Have you changed the weather-service?
Try openweathermap or a weather-service you want.
First you have to install a weatherservice. Look in intergrations. There you can find several weatherservices. Install one you wish.
After that go to your dashboard with flipclock.
Edit dashboard, 3 dots upper right.
Edit flipclock.
Change the entity: for example weather.openweathermap.

JB007 · August 24, 2023, 9:00am

Thanks for the response… I use the AccuWeather integration… I believe the weather entity I used in the code is tied into that but I’m not entirely sure… I will check that out & I will try exactly what u said & or 1 of the other weather services. I will let u know after I try it thanks again

JB007 · August 26, 2023, 9:33pm

Still doesn’t work!!!

peerkn · August 27, 2023, 3:04pm

Have you version 1.3.2 installed?
Is the path in your config folder www/custom_ui?
Here you have to add the folder htc-weather
Did you add the resource?
/local/custom_ui/htc-weather/htc-flipclock-weather.js?v1.3.2
You can do it in settings → dashboard → three dots upper right → resources. During adding it, choose javascript-modul.

JB007 · August 28, 2023, 6:00am

I have the latest version 1.32… I installed it thru HACS
I also added the resource before thru the settings in the dashboard… but I do need to check the configuration folder & see what’s in there

peerkn · August 28, 2023, 9:52am

You find it in your config folder → www/custom_ui → htc-weather.

JB007 · August 28, 2023, 4:21pm

I found the file in my configuration & everything is there but still doesn’t work here is the path file name of my files in resources

peerkn · August 28, 2023, 5:05pm

This is what i added under resources.
/local/custom_ui/htc-weather/htc-flipclock-weather.js?v1.3.2

Delete your resource and add this.

/local/custom_ui/htc-weather/htc-flipclock-weather.js?v1.3.2

Click type js-modul and save.

Look also here: GitHub - iamBiB/lovelace-htc-flipclock-weather: HTC Flipclock with Weather card

Scroll down to CLI Install.

Don´t forget to add the time_date platform in your config.yaml.
Copy paste the lines above cli_install.

SackOHammers · November 28, 2023, 10:31pm

I have it installed. I have tried a couple different weather providers available in HomeAssistant Integrations; such as National Weather Servers (NWS), and OpenWeatherMap.
As shown in the screenshot, these are the four problems. They appear to be the same problems as shown on the post from August 20, 2020 by user “myle”.
I’ll upload my own screenshot, here.

The minimum and maximum temperature do not correctly display below the time.
The labels for the days are not correct. It always shows two days, two times. For example, Tue Tue Wed Wed, even though the data below the labels is different
The minimum and maximum temperature for the forecast days do not display correctly
The size is very large on a 10.1" tablet. It consumes 1/3 of the screen.

Can you help?

SackOHammers · November 28, 2023, 10:56pm

For those looking for a little more installation help, I have some suggestions:

Click on your user profile in HomeAssistant and enable “Advanced Mode”
Install the “File Editor” and the “Advanced SSH Web Terminal” Add-ons
Configure the SSH Terminal to allow SFTP. You have to set username “root” and some password.
Create the directory “config/www/custom_ui/ htc-weather” in homeassistant. If you don’t already have it, you may need to create the www and custom_ui directories.
Download the HTC Fllip Clock files from the Github Repo and unzip them. Use an SFTP client on your computer to connect to the SFTP server you set up in the Add-on I mention above. I used WinSCP. Then upload the files to the “htc-weather” directory you created.
Add the resource. Couple ways to do this. You can go to any dashboard, edit it, click the three buttons in the upper-right, choose “Manage Resources”. Or, you can just browse here http://homeassistant.local:8123/config/lovelace/resources. Then add a “Javascript Module” resource with value “/local/custom_ui/htc-weather/htc-flipclock-weather.js?v1.3.2”. Yes, the value differs slightly than the actual path where you SFTP’d the files.
Use the “File Editor” Add-on to manually adjust the config/configuration.yaml file and add in the following. You should have only one “Sensor:” heading in this yaml file, so if you already have one, add to it. If not, create one. Note that the single quotes are required.

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

Next, create a weather service in your homeassistant. Go to Settings>Devices and Services to add a new integration. When adding a new integration, search for “weather” to see some options and choose one. Some will require you to create an account with the 3rd party weather provider, then create an API key. The important part is to understand the name of the “entity” you create with your weather service inside homeassistant. It’ll be named like “weather.something”. The integration will choose its own name, but you can edit the entity and pick a value you want. This is the weather entity you will specify when creating your card.
The last thing you need to do is add a custom card to a dashboard page. Start by using the simplest example for a test, then add features one by one.

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

BDV · December 3, 2023, 7:55pm

Did you find a solution to the problem? I seem to be stuck with the same issue.
First installed via HACS, then tried to move the files to the suggested location and update the link in the resources accordingly but without succes.

The weather integration works fine as seen in the card below

Any help is appreciated! Maybe there is an alternative card that can be used?

mattmon · December 20, 2023, 5:12pm

There’s this one, though it might need a little restyling.

BDV · December 29, 2023, 2:36pm

Thanks for the response! I tried several of these flip clocks but when displaying onto multiple hubs these card tend to get out of sync, lagging several minutes behind per day.

So I ended up dropping the hole flip clock idea and created just a simple weather clock with mushroom cards.

mattmon · December 29, 2023, 3:57pm

Wow, a couple minutes is pretty bad.

Could have sworn I read in the code that its synced to system time. I guess not.