Comments (12)
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?
from clock-weather-card.
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
from clock-weather-card.
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
from clock-weather-card.
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
from clock-weather-card.
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.
from clock-weather-card.
yes, true. i checked on iOS 16.
gonna try to find the lowest ES version which i can use without changing the code.
from clock-weather-card.
with little code changes I was able to downgrade to ES2015.
can you install the manually and give it a spin?
from clock-weather-card.
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.
from clock-weather-card.
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.
from clock-weather-card.
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)
from clock-weather-card.
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;
}
from clock-weather-card.
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!
from clock-weather-card.
Related Issues (20)
- New Time Pattern option doesn't refresh seconds HOT 2
- something wrong in the display of the card HOT 1
- Humidity HOT 3
- "Error when unsubscribing weather forecast: [object Object]" --> high cpu usage on clients (4096 pending messages) HOT 39
- How to implement Ordinal date so 1st, 2nd, 5th, 22nd etc. HOT 1
- New version breaks display of national weather service on desktop. HOT 5
- New version not working with OpenWeatherMap HOT 7
- Can't get days visible HOT 2
- Recurrence of issue from #287 HOT 4
- The forecast_rows block randomly disappears HOT 14
- Updated to new HA update and can’t load my ui now HOT 4
- Invalid DateTime HOT 5
- Allow selection of different weather forecasts to show in rows
- time_format option is ignored HOT 1
- Time in the bar is not aligned with HA time system HOT 2
- Temperature_sensor extra number after the decimal point HOT 1
- Termperature nearby weather image HOT 1
- Get all CSS style elemts HOT 17
- Show also today in forecast part. HOT 1
- Could You add lithuanian language?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from clock-weather-card.