Lovelace: Weather card with chart

sloma · May 7, 2021, 10:00pm

OK, fixed it. When adding a resource to Lovelace all you need to do is make sure it doesn’t contain:

“resources: - type: module url:” but just the link to the card.

The question still stands, can I replace weather humidity and pressure with my own sensor data?

DavidFW1960 · May 7, 2021, 10:41pm

If the card uses the weather entity no. There are custom cards you can use that will let you though.

Mariusthvdb · May 31, 2021, 9:43am

beta 2021.6 throws a warning on. raised an issue in the repo

bar chart: "scales.[x/y]Axes.maxBarThickness" is deprecated. Please use "dataset.maxBarThickness" instead

I dont know yet how to replace that in the resource, so Ive commented the line completely, and seeing no difference

however, it might be nice to know how to correct the code, so if anyone would be able to help out here?
thanks!

Update

I did add this in the datasets list:

          {
           maxBarThickness: 15,
          },

and see no errors. However, I dont see anything changed either, so not sure this does anything at all…

it is loaded correctly alright:

Mariusthvdb · June 30, 2021, 10:38pm

just as a FYI: this card is broken as of 2021.7, because of changed core charts.
Dont have details yet, but running the beta now, and it is chartless

Mariusthvdb · July 12, 2021, 9:10am

and 2 fixes are live!:

PR by @koying Bump to ChartJs3 (mandatory for 2021.7). Fixes #59 by koying · Pull Request #60 · Yevgenium/lovelace-weather-card-chart · GitHub
and a fork by @fancygaphtrn GitHub - fancygaphtrn/lovelace-weather-card-chart: Custom weather card with charts

now that this is fixed, I notice my ll(str) doesnt work, and it always shows the locale.en… guess because my HA instance uses the English language I never noticed, but I do in fact have a weather-card-chart config using:

      type: custom:weather-card-chart
      title: Woensdrecht
      weather: weather.buienradar
      temp: sensor.buienradar_feel_temperature
      locale: nl

so I want it to display the nl strings. Anyone else notice this?

should this line:

this.lang = this._hass.selectedLanguage || this._hass.language;

be changed to use the this.config.locale ?

edit, yes, it should:

    this.lang = this.config.locale || this._hass.language;

does the trick… cant believe we never stumbled over this before?

here’s my adaptation with animated icons:

gist.github.com

https://gist.github.com/Mariusthvdb/02d72a869990fbba9e666aad536fa702

animated weather-card-chart.js

console.info(
  `%c  WEATHER-CARD-CHART  \n%c  Version 0.3 animated `,
  'color: orange; font-weight: bold; background: black',
  'color: white; font-weight: bold; background: dimgray',
);

const locale = {
  da: {
    tempHi: "Temperatur",
    tempLo: "Temperatur nat",

This file has been truncated. show original

Peet · July 25, 2021, 10:01am

Installed your animated adaption, but somehow my tooltip-dates are a day off…
Today (sunday) the chart is from monday until friday, but the tooltip dates are for tuesday until saturday.
Data in the chart is however correct

Mariusthvdb · July 25, 2021, 10:42am

this is what I see:

dates, days and values seem ok?

Peet · July 26, 2021, 4:13am

Mariusthvdb · July 26, 2021, 7:20am

you certainly dont have the animated version
and you don’t have the pressure entity either?

depending on the weather entity you are using, you might have different forecast settings.
So, I guess the question is: what is your config?

Marco_Lupieri · July 26, 2021, 1:42pm

Hi, i have a problem with tooltip date. Problem

And, another question, it’s possible to move the actual temperature at right side.
Thanks

Mariusthvdb · July 26, 2021, 1:55pm

yes, change to:

        .main div {
          cursor: pointer;
          position: absolute;
          right: 0.5em;
        }

on the tooltip error: do you see anything in inspector?

Marco_Lupieri · July 26, 2021, 3:04pm

Chenge the line, now the temperature is on the right, but missing all animated icon.

Mariusthvdb · July 26, 2021, 3:11pm

you’re a bit brief in your descriptions, so maybe check this My adapted animated weather-card-chart · GitHub

which works for me

Marco_Lupieri · July 26, 2021, 5:18pm

Ok, works now.
I had probably misspelled. What editor do you use to edit the .js file?
if I wanted to reduce the space between the forecast icon and the part with the wind, sunrise and sunset data, what should I change?

Marco_Lupieri · July 26, 2021, 6:55pm

If you want, can you add a Italian translate:

  it: {
    tempHi: "Temperatura Massima",
    tempLo: "Temperatura Minima",
    precip: "Precipitazioni",
    uPress: "hPa",
    uSpeed: "Km/h",
    uPrecip: "mm",
    uVisib: "km",
    cardinalDirections: [
      'N', 'N-NE', 'NE', 'E-NE', 'E', 'E-SE', 'SE', 'S-SE',
      'S', 'S-SO', 'SO', 'O-SO', 'O', 'O-NO', 'NO', 'N-NO', 'N'
    ]
  },

Yevgeniy · August 10, 2021, 2:09pm

Hello.
In my spare time, I make a new card. I would like to make it more customizable and cleaner. I’m going to publish the source code on github, so your feedback is very important to me. Is the new design better? Or is the current version preferable for you? Or maybe you can suggest something completely different? Thanks.

Screenshots (new design)

Screenshots (current design)

Posreg · August 10, 2021, 10:34pm

I would definetely go for the new version!

Marco_Lupieri · August 13, 2021, 12:55pm

New version is more beautiful.
Can you add animated icon, how did he do Mariusthvdb?
Thanks

Yevgeniy · August 13, 2021, 7:32pm

Yes. In the new version it will be possible to use the amCharts and MDI icons.

Screenshot

Anyone have any advice on a nice set of weather icons? (except for the amCharts icons which have already been tested)

Marco_Lupieri · August 13, 2021, 9:50pm

Nice… it’s possible to test it?