pkissling / clock-weather-card Goto Github PK
View Code? Open in Web Editor NEWA Home Assistant Card indicating today's date/time, along with an iOS inspired weather forecast for the next days with animated icons
License: Other
A Home Assistant Card indicating today's date/time, along with an iOS inspired weather forecast for the next days with animated icons
License: Other
Is your feature request related to a problem? Please describe.
Part of weather forecast, besides temperature, is "will there be rain? and how much?"
Describe the solution you'd like
It would be great if besides temperature and a weather icon, also the amount of precipitation could be displayed. This weather card (https://community.home-assistant.io/t/lovelace-weather-card-with-chart/88816) has a very nice feature to display amount of rain also not only as a number but an additional bar. That makes it very easy on the first look to see if there is days with some/a lot of rain upcoming.
I really love the “Clock Weather Card” and it works for me on almost every device perfect 😊!
But on my iPad mini 2 in the Mobile App it looks like on the attached screenshot. The whole weather part is missing. Is there a possibility to fix it on my side or is there an update form your side necessary?
{
"common": {
"invalid_configuration": "Neplatná konfigurace.",
"entity_missing": "chybí entita",
"invalid_forecast_days": "forecast_days musí být větší než 0.",
"invalid_time_format": "time_format musí být '12' nebo '24'.",
"invalid_hides": "'hide_today_section' a 'hide_forecast_section' nesmí být současně povolené."
},
"weather": {
"clear-night": "Jasno",
"cloudy": "Zataženo",
"fog": "Mlha",
"hail": "Kroupy",
"lightning": "Bouřky",
"lightning-rainy": "Bouřky s deštěm",
"partlycloudy": "Částečně zataženo",
"pouring": "Silný déšť",
"rainy": "Déšť",
"snowy": "Sníh",
"snowy-rainy": "Sníh s deštěm",
"sunny": "Slunečno",
"windy": "Vítr",
"windy-variant": "Prudký vítr",
"exceptional": "Chaos"
},
"day": {
"0": "Ne",
"1": "Po",
"2": "Út",
"3": "St",
"4": "Čt",
"5": "Pá",
"6": "So"
}
}
The Layout does not work with weather.openweathermap entity.
Version: 1.0.4
Openweathermap is configured in mode hourly and language en.
I would love to use this on my wall mounted iPad Air (iOS12)
currently it is not supported:
"Custom element doesn't exist: clock-weather-card"
Deleted Frontend-Cache, Restarted Home-Assistant, restarted the iPad.
Maybe some JS functions wont work on iOS12?
Maybe you can ensure iOS12 compatibility somehow? – when I can provide anything, let me know.
I have set "animated_icon: false" but icon still animated.
Thanks for your custom card, I really like the layout.
One thing I have noticed though is that the time is not auto updating. On page load it shows the current time at when the page loaded. If I leave that page open though, the time does not update and stays on the same time as when the page loaded.
I have only tested it on Chrome at this stage.
As of now every additional translation (json
) requires changes in src/localize/localize.ts
.
Goal: Find a way to load the translations generically.
Checklist:
Release with the issue:
v1.09
Last working release (if known):
v1.0.9
Browser and Operating System:
chromium, archlinux,
Description of problem:
Is the black dot on the today's forecast bar meant to be tracking time? If it's tracking time, it seems to be tracking UTC time and not local time. What I see at 21:49 local time is bright sunshine which is not as it is right now.
Javascript errors shown in the web inspector (if applicable):
![image](https://user-images.githubusercontent.com/49336389/200116495-6bf7fc86-2f63-48a0-9bc4-60e84d82f5d3.png)
Additional information:
Currently the font-size of the clock is set to a fixed value. Depending on the resolution and viewport, there is a lot of wasted space.
Task: Find a solution to make the clock font-size grow dynamically with the space of the surrounding div.
Options:
I have HA language and location in Spanish but card shows the data in English. I have set locale card property to "es" to try to force the change but card still displays weather text in english.
Rain animation isn't working for me with Firefox. Sun, clouds, etc. do work. It works with Chrome and mobile though
Checklist:
Release with the issue:
Version: 1.0.9
Last working release (if known):
Browser and Operating System:
Browser: Firefox on Arch
HA: HA Core on Unraid
Description of problem:
Without any locale specified in the card config, the console errors below showed up continuously. The readme shows locale: en
under the "Full Configuration" section, but that produced the same error. It wasn't until changing it to locale: en-US
when the error stopped appearing. No other functionality seemed affected though.
Javascript errors shown in the web inspector (if applicable):
clock-weather-card - Locale not supported: en
getDateFnsLocale clock-weather-card.js:239
date clock-weather-card.js:239
renderToday clock-weather-card.js:206
render clock-weather-card.js:185
Checklist:
Release with the issue:
Last working release (if known):
Browser and Operating System:
Description of problem:
If the current temperature is lower than today's minimum temperature, the indicator showing the current temperature is not displayed.
And are there any options I need to set to apply hourly weather? I applied hourly weather entity so hourly weather information is not displayed.
Javascript errors shown in the web inspector (if applicable):
Additional information:
Checklist:
Release with the issue:
1.0.5
Last working release (if known):
N/A
Browser and Operating System:
Chrome on Windows 11 - HA Running on HAOS
Description of problem:
The snow icon on the forecast is broken/non-exsistent. Top picture is of the custom card, and the bottom is when clicking to view more details.
Javascript errors shown in the web inspector (if applicable):
N/A
Additional information:
I set this card up last Tuesday. Today we have Sunday, but I always saw and still see Tue-Sat. Why?
The card stops working in the evening with environment Canada integration but comes back the next day. My assumption is this happens when the integration stops reporting the current days high temperature ( temperature: null)
Hi, where is point in BAR graph like you have on main picture https://raw.githubusercontent.com/pkissling/clock-weather-card/1.0.7/.github/assets/card.gif. I not have it.
I have this settings in HA:
type: custom:clock-weather-card
entity: weather.domov
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 5
locale: cz
time_format: 24
hide_today_section: false
hide_forecast_section: false
Thank you
Thank you for creating this card, it seriously looks BEAUTIFUL!
That said, it would be nice to ditch the leading 0 on 12 hour time, as it isn't needed.
I am using the TomorrowIO integration to provide met with two entities for forecast, a daily variant and a hourly variant.
The daily variant is working perfectly with this card. When selecting the hourly version, I only get the days bars within the forecast range (based on hours).
Can you also support hourly forecasts, where an hour would be a line?
Is your feature request related to a problem? Please describe.
I find the fact that a current condition of "exceptional" is translated to "chaos" as very confusing. I expect the weather services to provide clear condition indicators. I had to go looking into the source code to figure out why my testing of this card was showing a spinning vortex instead of a exclamation triangle and saying the current condition is chaos when my standard weather card just said exceptional!
Describe the solution you'd like
The weather conditions should be translated as expected and not to cutesy versions
Describe alternatives you've considered
While I like the look of the card, if it is not clear and concise to the end user what is going on then it is not useful and I will need to use a more generic card. I can't be training everyone that may see the card (it would be used in a short term rental unit as well as my home) what things like that mean.
As it is possible to format the date (great feature :-) ), is it possible to change the default formatting to "eee, P" and remove the hardcoded weekday at the start of the line?
Checklist:
Release with the issue:
Last working release (if known):
Browser and Operating System:
Description of problem:
If the lowest temperature is 0 degrees, the graph will not show the lowest temperature. The graph shows the highest temperature as the lowest temperature.
Javascript errors shown in the web inspector (if applicable):
Additional information:
Please, add a Russian translation.
{
"common": {
"invalid_configuration": "Неверная конфигурация",
"entity_missing": "Отсутствует сущность погоды",
"invalid_forecast_days": "Количество дней прогноза должно быть больше 0",
"invalid_time_format": "Значение 'time_format' должно быть '12' или '24'",
"invalid_hides": "Опции 'hide_today_section' и 'hide_forecast_section' нельзя включать одновременно!"
},
"weather": {
"clear-night": "Ясно",
"cloudy": "Облачно",
"fog": "Туман",
"hail": "Град",
"lightning": "Гроза",
"lightning-rainy": "Дождь с грозой",
"partlycloudy": "Переменная облачность",
"pouring": "Проливной дождь",
"rainy": "Дождь",
"snowy": "Снег",
"snowy-rainy": "Мокрый снег",
"sunny": "Солнечно",
"windy": "Ветер",
"windy-variant": "Сильный ветер",
"exceptional": "Буря"
},
"day": {
"0": "Пн",
"1": "Вт",
"2": "Ср",
"3": "Чт",
"4": "Пт",
"5": "Сб",
"6": "Вс"
}
}
Many thanks!
#This is the vi.json code of Vietnamese language. Hope the author will update
{
"weather": {
"clear-night": "Trời xanh",
"cloudy": "Nhiều mây",
"fog": "Sương mù",
"hail": "Mưa đá",
"lightning": "Giông bão",
"lightning-rainy": "Mưa giông",
"partlycloudy": "Mây rải rác",
"pouring": "Ẩm ướt",
"rainy": "Trời mưa",
"snowy": "Tuyết rơi",
"snowy-rainy": "Mưa tuyết",
"sunny": "Trời nắng",
"windy": "Trời có gió",
"windy-variant": "Gió mạnh",
"exceptional": "Khắc nghiệt"
},
"day": {
"0": "Th2",
"1": "Th3",
"2": "Th4",
"3": "Th5",
"4": "Th6",
"5": "Th7",
"6": "CN"
}
}
Please add hungarian localisation to the card.
Is your feature request related to a problem? Please describe.
I use NWS and Openweather on 2 cards. There is no way to tell which card is NWS and which is Openweather
Describe the solution you'd like
entry in the config for Lable
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
Probably day, night (icon) mode using sun.sun entity is not working after HA update.
The sun.sun entity itself works fine.
Is your feature request related to a problem? Please describe.
No, just some more options to reduce the overall height of the card.
Describe the solution you'd like
Describe alternatives you've considered
Reducing forecast days is helpful, but empty real-estate around upper section is (optionally) unnecessary
Additional context
n/a
Hi,
It would be great to be able to define the format of the date (currently mm/dd/yy) to other formats.
For example:
dd/mm/yy
dd/mm/yyyy
Thanks for all your work on this card, it looks awesome!
Regarding this, #86 , is it possible to set the same locale as configured with the locale configuration for this card?
I am trying to make a grid-layout that has fixed dimensions. For right now I have a grid layout with 4 columns and 4 rows. The grid layout is set to 100% of the screen. I am placing the clock-weather-card along the top using a grid-area. It doesn't seem to mater what I specify the clock-weather-card grows well outside of the size of the row. I can't figure out what to modify with card-mod top make it stay within its bounds. Any help appreciated..... here is an example of my code and in image. If you look at the image you can see that the top set of boxes is the grid area.... but as you can also see the clock-weather-card is well outside of those boxes. Thanks
- title: New
path: new-new
type: custom:grid-layout
layout:
height: calc(100vh - 64px)
width: 100%
margin: 0
grid-gap: 15px
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: 100px 1fr 1fr 1fr
grid-template-areas: |
"header header header header"
". . . ."
". . . ."
"footer . . ."
cards:
- type: custom:mod-card
view_layout:
grid-area: header
card:
type: grid
columns: 1
square: false
cards:
- type: custom:clock-weather-card
entity: weather.openweathermap
- type: custom:mod-card
view_layout:
grid-area: footer
card:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
entity: switch.lamp1
url: /hacsfiles/clock-weather-car/clock-weather-card.js
should be
url: /hacsfiles/clock-weather-card/clock-weather-card.js
Currently the clock-weather-card breaks if one uses the hourly forecast option of a certain weather provider (Pirate weather, OpenWeather).
To make the hourly forecast optional work, additional logic is required to aggregate the hourly forecasts by day and create the avg/min/max values for it.
Would it be possible to add additional weather info, like humidity, pressure and wind direction/speed?
Hi Patrick.
Is it possible to add german Language?
I created a translation (de.json), maybe you can add it.
Thanks
Marcel
Really nice card,
Also would be great to add in forecasted rain in the future
The (very beautiful) widget doesn't show the min/max-temperature for the current day. The weather-provider delivers this data as shown in the standard ha-widget.
Please add the Ukrainian language
{
"common": {
"invalid_configuration": "Помилка конфігурації.",
"entity_missing": "Відсутня необхідна сутність погоди.",
"invalid_forecast_days": "значення днів прогнозу має бути більше 0.",
"invalid_time_format": "формат часу має бути '12' або '24'"
},
"weather": {
"clear-night": "Ясно",
"cloudy": "Хмарно",
"fog": "Туман",
"hail": "Грім",
"lightning": "Грози",
"lightning-rainy": "Дощові грози",
"partlycloudy": "Мінлива хмарність",
"pouring": "Злива",
"rainy": "Дощ",
"snowy": "Сніг",
"snowy-rainy": "Мокрий сніг",
"sunny": "Сонячно",
"windy": "Вітряно",
"windy-variant": "Дуже вітряно",
"exceptional": "Буря"
},
"day": {
"0": "Нд",
"1": "Пн",
"2": "Вт",
"3": "Ср",
"4": "Чт",
"5": "Пт",
"6": "Сб"
}
}
I really like your work. I'm from Ukraine. Please add Ukrainian language support. Thanks in advance
Checklist:
Release with the issue:
..Last working release (if known):
1.0.4
Browser and Operating System:
iOS HA App / Windows Edge
Description of problem:
Just added the card, it just shows an error. On the browser I get "Cannot read properties of undefined (reading 'locale')", in the HA app it shows "undefined is not an object (evaluating 'this.config.locale')". The same message is shown in the console.
Javascript errors shown in the web inspector (if applicable):
Additional information:
Is your feature request related to a problem? Please describe.
it would be great if you could change the tap_action. like other cards.
Good day. The card does not work. OpenWeather weather operator, everything is written:
type: custom:clock-weather-card
entity: weather.irpin
animated_icon: true
forecast_days: 5
locale: en
although it may or may not be necessary. Installation via Hacs
Hello. An error occurred in the translation. In Russia, the week starts on Monday, not Sunday.
It is necessary to move the table down one day.
"day": {
"0": "Вс",
"1": "Пн",
"2": "Вт",
"3": "Ср",
"4": "Чт",
"5": "Пт",
"6": "Сб",
Thanks!
Originally posted by @Microbeen in #58 (comment)
The current weather and clock are the first things I look at on the screen. Could you make them both adjustable?
Also, dumb question, but what do the colored sections mean on the forecast for each day?
Feature request to hide/show parts of the card which is basically only two parts. So if I want I could just show the top portion of the card with the clock, date, and current temp information or I could just show the bottom portion of the card with daily forecast. The default would be to show the entire card as it is.
Besides that the cards works awesome and I haven't had any issues. I want to use it for my custom:sidebar-crd but I need to style:
it a little bit so it fits because the side bar is only 25% of my screen and small than a "normal" column. I don't think that will be a problem though.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.