iOS12 compatibility

[Camatobe]

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.

[pkissling]

i run the card successfully on different iOS devices. i cannot reproduce the issue.
the error message Custom element doesn't exist: clock-weather-card indicates that the card is not properly configured in home assistant. can you please double check your configuration? https://github.com/pkissling/clock-weather-card#installation-and-tracking-with-hacs

[Camatobe]

Checked the configuration twice.
It is properly working on all of my other iOS Devices, Laptops etc.

iOS12-Home-Assistant App is forced to use an older Safari WebKit Version, wich only supports older JS-compatibility (I think it was ES5?)

I guess the iOS Devices you were testing on are iOS13 and above?
The "Custom element doesn't exist: clock-weather-card" - error also appears on custom cards not compatible with this older JS / WebKit Version.

[pkissling]

yes, true. i checked on iOS 16.

gonna try to find the lowest ES version which i can use without changing the code.

[pkissling]

with little code changes I was able to downgrade to ES2015.
can you install the manually and give it a spin?

clock-weather-card.zip

[Camatobe]

Thanks @pkissling !
It's definetely a progress!

The card gets recognized. – Weather Icon and Time are visible now, but the Tmp Min-Max-Bars aren't visible tho..

Do you know, how I can view console errors from the home assistant companion webview on iPad? – Maybe I can provide that errors to you.

edit:
Bars are visible, just misaligned.
Found the bars below a transparent card on my dashboard.
Maybe some css alignement which is not supported on older safari iOS Webviews.

[Camatobe]

Tested it on a separate View, the dot on the current day is missing and bars are moved down, attached an unprofessional screenshot 😂

edit:
Was able to fix the indicator dot, by adding: "width: 20px" to <forecast-temperature-bar-current-indicator-dot> aspect-ratio seems not supported.

I still search for the big space in between.

edit2:
clock-weather-card-forecast { display: block !important; } fixed the space in between for me. – I was messing around with card_mod to find this by trial and error.

[pkissling]

oh wow, great you found it. i don't have an iOS 12 device, hence was not able to reproduce the issue.
so we can merge the code changes and include it in the next release?

[Camatobe]

Sounds great! Thanks for the absolutely beautiful work and the fast response!

In case my changes don't break other stuff (only tested on iOS 12): ship it 🥳

Maybe some things need tweaking (for example no absolute width for the current indicator. (Use rem instead)

[pkissling]

hi @Camatobe
the following version contains the mentioned css changes.
can you please try this version? if this makes your card work on iOS 12 (without card-mod), then i will include this change in the next release

clock-weather-card.js.zip

[Camatobe]

Looks good so far.
The current day temp indicator dot is still missing tho.

In my modded Version I added width: 1.5rem; to this tag:
<forecast-temperature-bar-current-indicator-dot>
as the used css aspect-ratio is not supported.

edit: spotted also a misalignement of the top Text part. I will add my used card_mod css below the screensot.
(but care, I also added some things, to make the clock look nicer on my wall tablet)

I added a screenshot (Modded one on top).

card_mod:
  style: >
    forecast-temperature-bar-current-indicator-dot {
      width: 1.5rem;
    }

    clock-weather-card-forecast {
      display: block !important;
    }

    ha-card {
      background: transparent;
      box-shadow: none;
    }

    clock-weather-card-today-right-wrap-center {
      font-size: 7.7rem !important;
      font-weight: 700;
      opacity: 0.2;
      height: 5rem !important;
    }

    clock-weather-card-today-right-wrap-top,
    clock-weather-card-today-right-wrap-bottom {
      font-size: 1.5rem;
      font-weight: 500;
    } 

    clock-weather-card-today-right-wrap-top { 
     width: 100%; 
     text-align: end;
     display: block !important; 
    }

and without the clock stuff:

card_mod:
  style: >
    forecast-temperature-bar-current-indicator-dot {
      width: 1.5rem;
    }

    clock-weather-card-today-right-wrap-top { 
     width: 100%; 
     text-align: end;
     display: block !important; 
    }

[pkissling]

cool, thanks for your help in fixing the issue remotely :D
the following zip now includes all 3 changes:

• dot: width
• wrap-top: text-align
• clock-weather-card-forecast: display: block

clock-weather-card.js.zip

[Camatobe]

tested it, worked like a charm.

Next time, when I have time, I will do the proper way and do a PR ;D Thanks for fixing it!