search

mlamberts78 / weather-chart-card

Custom weather card with charts.
MIT License
305 stars 38 forks source link

No weather icons with 2024.8 #222

Closed Maddin1684 closed 2 months ago

Maddin1684 commented 2 months ago

With Core Update 2024.8 no weather-icons are shown.

Desktop (please complete the following information):

knuckleheadsmiff commented 2 months ago

I’m seeing the same thing on my iPad running the home assistant app. Im also running the very latest home assistant core that has changes to be new section layout page where I use this view.

Maddin1684 commented 2 months ago

Can confirm, only on iPad companion app. iPhone or safari browser on iPad works fine.

knuckleheadsmiff commented 2 months ago

On the iPhone and in the safari browser things look slightly better but the weather icons are still not showing. You can see the space for them above the wind direct forecasts below but they are blank.

IMG_4780

The HA app on the iPad looks like the original post. HA Core is 2024.8.0

(I have another oddity in with fireremote only on the iPad where layout and scaling is completely messed up and with another standard Lovelace plugin for a weather gauge where the background is also messed up compare with using the browser so there might be multiple bugs here?)

nvdael commented 2 months ago

Same here. Only iPad companion app, Safari on iPad is broken. Android Phone and Windows Desktop both with Edge no problems. No themes loaded.

vlado05 commented 2 months ago

Same here. Fully kiosk browser on NSPanel pro.

Kanecaine commented 2 months ago

Having this problem since the update to HA 2024.8 on iPad using the official companion app. On same iPad with Safari everything is ok. I can produce the error already in the card selection:

IMG_0872

I inspected the rendered HTML and found out that it might has to come from the rendered style-Tag right before the ha-card-tag. The big "25" (same as the "50" in comment #1) comes from the icon-size. When i change the default value in the ui config of the card from "25" to "24" than a big 24 is rendered instead. It gets even more strange when i delete the icon-size in the ui config: in this case, the big "25" and the following little "25" is not shown (it is rendered instead of a card-title if it is set. So the optional card-title is never rendered).

IMG_0873

This is the correspondig code from the card js:

  ha-icon {
    color: var(--paper-item-icon-color);
  }
  img {
    width: ${config.icons_size}px;
    height: ${config.icons_size}px;
  }
  .card {
    padding-top: ${config.title ? '0px' : '16px'};

Every variable value is rendered directly into the html. The first variable is config.icon_size which renders the first (big) "25". Then in the next line it is again config.icon_size which renders the second (little) "25". After that the variable config.title is evaluated. When i define a title (that again is never rendered) it shows "0px" otherwise "16px" as in the image above. So it seems to be some strange escaping issue. Unfortunately i cannot inspect the html within the companion app.

Kanecaine commented 2 months ago

Seems to be a bug in the ios companion app as some rendering issues are mentioned in the bug tracker, see the link above.

knuckleheadsmiff commented 2 months ago

I have the issue shown in the link too (with rireremite) BUT even on a regular browser not in the companion app I can’t see the hourly status icons. If you look at my post above you can see the icons missing even though the card mostly looks correct. Again, that image of mine above was NOT in the companion app.

Kanecaine commented 2 months ago

@knuckleheadsmiff Which browser are you using? I suppose this is something different. Maybe the missing icons can be brought back by clearing the browser cache - in Firefox pressing STRG + R works like wonders in some situations like this.

edit: tried it with Safari 17.5 and i see the icons. So i really think this could be a browser cache problem, so try CMD + R.

knuckleheadsmiff commented 2 months ago

@knuckleheadsmiff Which browser are you using? I suppose this is something different. Maybe the missing icons can be brought back by clearing the browser cache - in Firefox pressing STRG + R works like wonders in some situations like this.

It is the same on the HA iPhone app running on the iPhone and on the safari browser on the iPad or iPhone. It’s not a cache issue.

nvdael commented 2 months ago

@knuckleheadsmiff Which browser are you using? I suppose this is something different. Maybe the missing icons can be brought back by clearing the browser cache - in Firefox pressing STRG + R works like wonders in some situations like this.

edit: tried it with Safari 17.5 and i see the icons. So i really think this could be a browser cache problem, so try CMD + R.

As I mentioned in my post yesterday, I experienced it on safari and the companion app. Both are first runs on a fresh installed iPad, so cache cannot be an issue.

https://github.com/mlamberts78/weather-chart-card/issues/222#issuecomment-2276275773

Kanecaine commented 2 months ago

Ok, I understand. However, I think that these are maybe 2 different problems that need to be distinguished.

(1) In one case, css-styles (like "16px 28 100") are rendered and as a result other things like the title, all information above the graph as well as icons, wind speed and direction underneath the graph are not displayed. This problem only occurs in the companion app. This is described in the original post https://github.com/mlamberts78/weather-chart-card/issues/222#issue-2454452068 ... does anyone have this outside the app in another browser?

(2) In another case, the daily weather icons are missing (which at least i cannot confirm on my devices). This problem occurs both in the app and in the Safari browser on the iPad and looks as described here https://github.com/mlamberts78/weather-chart-card/issues/222#issuecomment-2276197711 ...

@vlado05 confirmed a faulty display in the Fully Kiosk browser on an NSPanel. I assume this refers to the second case where only the icons are missing?

knuckleheadsmiff commented 2 months ago

2 above is also on the iPhone (ha app and safari browser).

jzielke84 commented 2 months ago

Possibly related to https://github.com/home-assistant/iOS/issues/2908

Kanecaine commented 2 months ago

Here is a workaround: if you are using card mod, paste this yaml into a new card and place this new card before the one that is buggy:

type: custom:weather-chart-card
entity: 'bad'
card_mod:
  style: |
    ha-card {
     display: none;
    }

It's important not to use the UI editor, as it may attempt to auto-correct the incorrect YAML. Simply paste the lines above and hit "Save." Due to card mod, this faulty card will not be displayed, but it prevents the display bug in your card.

Credits go to this thread: https://github.com/home-assistant/iOS/issues/2908#issuecomment-2282785629

edgarveersel commented 2 months ago

Thank you, @Kanecaine, this indeed works. After checking the original thread, I now only put in this, which also works:

type: custom:weather-chart-card
entity: 'bad'

It does however create a box.

Scherm­afbeelding 2024-08-16 om 13 20 32

Seems it can be hidden when you have card-mod installed. I didn't try that myself.

mlamberts78 commented 2 months ago

PR from @piitaya was partly working, icon and text sizes where messy after update. reopened.

mlamberts78 commented 2 months ago

Fixed with latest IOS APP update 2024.8

greg520820 commented 2 months ago

Version 2.4.9 still doesn't render correctly on an Android tablet running fully kiosk. Core version 2024.8.3 Get the following display:

image

knuckleheadsmiff commented 2 months ago

It’s because HA core says that you have a legacy browser. They fixed the iPad issue in the front end update. Why they changed the legacy browser support is beyond me.

greg520820 commented 2 months ago

It’s because HA core says that you have a legacy browser. They fixed the iPad issue in the front end update. Why they changed the legacy browser support is beyond me.

According to the link and quote below there may not be any plans to fix it in HA and instead needs to be fixed in the custom card code.

"As a fix, The custom card code needs to use static styles and adapt the style using css variables and classes (classMap and styleMap) instead of using dynamic style with template literals. I don't think we can fix it on the HA side."

https://github.com/home-assistant/iOS/issues/2908#issuecomment-2293615805

knuckleheadsmiff commented 2 months ago

Yea, well they also broke a bunch of unmaintained cards like the weather radar card on browsers where it worked. I don’t under their legacy browser policy but I think it’s broken in how they close to not support (or define) legacy browsers.

jzielke84 commented 2 months ago

Version 2.4.9 still doesn't render correctly on an Android tablet running fully kiosk. Core version 2024.8.3 Get the following display:

Confirmed