Resolve design/layout issues with long texts about kindle-weather-dashboard

[matopeto]

Hi @nokia-lmt Can you please attatch screenshot or photo of wrongly fitted texts on your kindle. And what kindle model do you have? Thank you

[nokia-lmt]

Good day, Thanks a for a quick response! See attached pictures with broken formatting if Russian language is in use. This is Kindle PaperWhite 3 (2015) WiFi. [image: image.png] [image: image.png] Recently I've noticed similar issue with English as well, if current weather or its forecasts are described with the following pretty long sentence: "light intensity shower rain". My proposal is either to truncate such long records, or change font size automatically (decrease it) in order to fit it within available space. Some general questions to you if possible. Have you considered to extend functionality of your app? I mean openweathermap.com portal contains a lot of additional weather data, e.g. maps, graphs etc. Theoretically with redisign of the main screen yoou can introduce some buttons and by pressing on them navigate to additional local webpages where to display such details. With some additional work your current app could become complete weather station with very unique design and a lot of usefull functionality. Consider this possibility please! I'm ready to assist you with testing and ideas if required. ср, 18 авг. 2021 г. в 11:11, matopeto ***@***.***>:

…

Hi @nokia-lmt <https://github.com/nokia-lmt> Can you please attatch screenshot or photo of wrongly fitted texts on your kindle. And what kindle model do you have? Thank you — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBOMCULOKOUYODEARQLT5NTLDANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[nokia-lmt]

P.S. Not sure whether pictures were safely delivered to you as attachments to email. Adding them again directly from GitHub portal. See below:

[matopeto]

@nokia-lmt thank for images

I will try to modify CSS to show better longer texts. But now i have little time so i cannot guarantee any fix time.

Some general questions to you if possible. Have you considered to extend
functionality of your app? I mean openweathermap.com portal contains a lot
of additional weather data, e.g. maps, graphs etc. Theoretically with
redisign of the main screen yoou can introduce some buttons and by pressing
on them navigate to additional local webpages where to display such
details. With some additional work your current app could become complete
weather station with very unique design and a lot of usefull functionality.
Consider this possibility please! I'm ready to assist you with testing and
ideas if required.

Sorry I have no plan to extend functionality in any way. I was doing it for myself with simplicity in mind. It is good for my use as is. (all other changes is too complicated to maintain and test)

But if you want you can fork this repo and extend by yourself or use any other responsive weather webpage and show in your kindle

[nokia-lmt]

Good day, Well noted your answer. Thanks a lot in advance if you'll be able to fix formatting issues. Would be nice to see Russian as an option on your config screen as well. I believe this solution could resolve similar cases as well, e.g. "light intensity shower rain" weather status in English. Will be impatiently waiting for a fix. I'm ready to assist you with tests if required. Thank you and have a good day! ср, 18 авг. 2021 г. в 12:01, matopeto ***@***.***>:

…

@nokia-lmt <https://github.com/nokia-lmt> thank for images I will try to modify CSS to show better longer texts. But now i have little time so i cannot guarantee any fix time. {quote} Some general questions to you if possible. Have you considered to extend functionality of your app? I mean openweathermap.com portal contains a lot of additional weather data, e.g. maps, graphs etc. Theoretically with redisign of the main screen yoou can introduce some buttons and by pressing on them navigate to additional local webpages where to display such details. With some additional work your current app could become complete weather station with very unique design and a lot of usefull functionality. Consider this possibility please! I'm ready to assist you with testing and ideas if required. {quote} Sorry I have no plan to extend functionality in any way. I was doing it for myself with simplicity in mind. It is good for my use as is. (all other changes is too complicated to maintain and test) But if you want you can fork this repo and extend by yourself or use any other responsive weather webpage and show in your kindle — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBPIXWT5G2FDSWDKFUTT5NZGTANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[nokia-lmt]

P.S. If you're going to make changes, please check why weather forecast icons are touching the time labels? Can you realign them? Thanks!

[nokia-lmt]

The same as above.

Current weather icon is overlapping with current temp (in portrait mode):

Suggest to use slightly decreased fonts or better separate two blocks. Thanks!

[nokia-lmt]

Good day,

As short clarification question: why there are two values of last update time? Sometimes they are identical, sometimes not. What idea is hidden behind them? Thank you!

[matopeto]

@nokia-lmt hi, first time is when was last update made, second time is time from last update date. E.g. 16:39/16:00 means that dashboard was updated 16:39 but data returned from backend is from 16:00

[nokia-lmt]

hi, first time is when was last update made, second time is time from last update date. E.g. 16:39/16:00 means that dashboard was updated 16:39 but data returned from backend is from 16:00

OK, I see. And in case if I'm running a local instance (all files are stored in Kindle's internal memory and index.html is started as file://..... method), these times will be always identical? If yes, can you point me where backend part could be commented out to display only first update time? If possible I would like to add some text before it as well, e.g. "Last updated: <update_time>"

[matopeto]

Second time is returned from open weather. So not will be always identical.

You can modify this line of code:

https://github.com/matopeto/kindle-weather-dashboard/blob/master/index.html#L192

and set it to whatever value you want

Eg if you want to display time of the data (from API) it should be something like this:

lastUpdate.innerHTML = "Last updated: " + momentWithCorrectUtcOffset(new Date(data.dt * 1000)).format(timeFormat);

[nokia-lmt]

Perfect! Thank you very much. This is exactly what I wanted to achieve!

P.S. Seeing you instant replies, I humbly hope that you finally have some free time and will assist with initial issue with long text formating we are discussing here. Thanks in advance! :)

[matopeto]

Unfortunately i will have no time in next month(s) for refactoring. But I am thinking about it.

[nokia-lmt]

Well noted. But I'm still not losing a hope. :) пт, 20 авг. 2021 г., 11:33 matopeto ***@***.***>:

…

Unfortunately i will have no time in next month(s) for refactoring. But I am thinking about it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBOKCUUUM6ABHFBHCF3T5YHL7ANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[matopeto]

@nokia-lmt i did two minor changes in CSS, fixing aligment of "large description" below temperature and cropping anything bigger then forecast cell so longer texts would not interfere bottom row.

I also added russian language option to config.

It is deployed also in demo site so you can try.

PS: for bigger refactoring design still have not time

[nokia-lmt]

Hi matopeto,

Thanks a lot for your efforts! However... I'm not sure whether new mod is working as it should. What I see while running it is not truncation of exceeding text, but rather ommiting of its part leaving some artifacts on the screen. See examples below. Instead of complete description "Переменная облачность" only first word is visible and only a part of second word is visible. If we are talking about truncation, maybe truncated part should be replaced by "..." instead?

Weather description still overlapping with update time.

[matopeto]

@nokia-lmt

it was only quick fix of some CSS properties to not to ruin layout so much. Truncation of the text will be next step. I am waiting till my Paperwhite returns to me. So i can proper test it.

[nokia-lmt]

Well noted. Will be waiting for the next release. вс, 22 авг. 2021 г., 14:35 matopeto ***@***.***>:

…

@nokia-lmt <https://github.com/nokia-lmt> it was only quick fix of some CSS properties to not to ruin layout so much. Truncation of the text will be next step. I am waiting till my Paperwhite returns to me. So i can proper test it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBNGZ7FZBCLQVPBHYJLT6DOITANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[nokia-lmt]

Hi again,

Yet another idea how to resolve this matter. Maybe it will be easier and more practical to avoid truncating, but maintain a list of "long" descriptions which do not fit in place and use some acronims of such statuses? E.g. if API returns "light intensity shower rain", let's replace this status with "shower rain" for example. This is because "light intensity ..." status which will be displayed as a result of truncation doesn't make sense at all to be honest.

A problem here is how to maintain translations of such acronims. I suppose some serious changes in logic will be required.

[matopeto]

@nokia-lmt It is not possible to shortcut description even for english. In your case it is working but i don't known all combination of description comes from API. It is black box to me. And you have right. Trim description only to first line is not the solution. I am thinking about make space to two lines for small description (and hope most of description will fit). Or maybe hide it completly.

Big description maybe i will keep as is and last update move little bit down.

If you want to hide small descriptions completely, simply add

display: none to .colDesc CSS style:

change from:

.colDesc {
    font-size: 20px;
    font-size: 2.8rem;
}

to:

.colDesc {
    font-size: 20px;
    font-size: 2.8rem;
    display: none;
}

[nokia-lmt]

Hi, Thanks for the clarification, now it is completely clear. I think this is the way to go in such case:

I am thinking about make space to two lines for small description (and

hope most of description will fit). I would say there is still space available for a 2nd line, you just need to rise the whole table up a little bit. вс, 22 авг. 2021 г. в 14:56, matopeto ***@***.***>:

…

@nokia-lmt <https://github.com/nokia-lmt> It is not possible to shortcut description even for english. In your case it is working but i don't known all combination of description comes from API. It is black box to me. And you have right. Trim description only to first line is not the solution. I am thinking about make space to two lines for small description (and hope most of description will fit). Or maybe hide it completly. Big description maybe i will keep as is and last update move little bit down. If you want to hide small descriptions completely, simply add display: none to .colDesc CSS style: change from: .colDesc { font-size: 20px; font-size: 2.8rem; } to: .colDesc { font-size: 20px; font-size: 2.8rem; display: none; } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBKQK5CFADEVPL3ZYGDT6DQYTANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[matopeto]

I have my PW for testing. I resolve most of the design issue, but it break Kindle 4 support. When i resolve those i will post/publish update.

[nokia-lmt]

Very promising news! Thanks and keep me posted please. пн, 30 авг. 2021 г., 12:47 matopeto ***@***.***>:

…

I have my PW for testing. I resolve most of the desing issue, but it break Kindle 4 support. When i resolve those i will post/publish update. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBN3K4NB3AKNXZE7ZR3T7NHSTANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[nokia-lmt]

Good morning, any updates or progress with a new version? Thanks!

[matopeto]

@nokia-lmt HI. I create Draft/WIP Pull request for that. see PR #11 or branch 10-better-responsive-design

Now only forecast cells are resolved on PW (but broken on K4 :))

You can watch this issue, when some else i will have ready to publish i will push to the branch.

[nokia-lmt]

Good morning,

Installed updated version today. So far looks very good - this is a huge step forward! Congratulations! I will report all discovered issues (if any). Thank you very much for your hard work! Well done!

P.S. In landscape mode I've added "gradus" symbol for the current temperature. There is plenty of space for it available and overall it looks much better if it there. Consider to modify landscape template at your end as well. Not sure about portrait mode though as I'm not using it at all.

[nokia-lmt]

Good day,

Wanted to share latest developments of this case. Today it was necessary to reboot my Kindle and it decided to upgrade its firmware to the latest version (5.13.7 if I remember correctly). This introduced yet another one issue with layout. See attached screenshot. There is a new "arrow" on the top of the screen. This is a shortcut to settings. This is a new display element which never existed before. It is always visible and is taking some space on the screen. In result, the whole design of weather forecast is broken as it doesn't fit the screen anymore: additional scrollbars on the bottom of the page acknowledges this. Can you please fix this? I hope this is a minor issue for you? Thanks a lot in advance! Have a great weekend ahead!

[matopeto]

@nokia-lmt thanks for report.

When i will have a time i will update my paperwhite and look at this. But i cannot promise any deadline

But arrow is probably the Kindle browser UI, but scrollbar may be solvable.

[nokia-lmt]

Hi again,

But arrow is probably the Kindle browser UI, but scrollbar may be solvable.

No, it is always visible. Even on the main screen when browser is switched off. Stupid design changes I would say... They limited already small display even more.... пт, 5 нояб. 2021 г. в 14:56, matopeto ***@***.***>:

…

@nokia-lmt <https://github.com/nokia-lmt> thanks for report. When i will have a time i will update my paperwhite and look at this. But i cannot promise any deadline But arrow is probably the Kindle browser UI, but scrollbar may be solvable. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBLKG5C3XWODY2YXMGDUKPH7PANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[nokia-lmt]

Good day,

Sorry to be annoying.... Any news about this topic?

[matopeto]

Thanks for asking..

Yesterday i charged my kindle and today it was updated to new firmware and checked the problem. I am not sure it can be resolved. Seems like bug in the browser, when viewport of page is smaller than kindle report to the responsive css.

I will look at this today or tomorow but i cannot promise that i can resolved this

(also i must keep nonresponsive support for old kindle 4, so it is difficult)

[matopeto]

Also "google.com" is scrolling in the new browser 👀 🤔 🤦

[matopeto]

@nokia-lmt Scrollbar is definitely a kindle browser bug, it can't be resolved

even empty HTML

<!DOCTYPE html>
<html>
    <body></body>
</html>

shows scrollbar :( and scrolls empty page

[matopeto]

The whole new firmware seems to be buggy, the main menu disappears, the browser crashes, only a part of the screen is rendered ....

I hope there will be a fix/pach from the Amazon

[matopeto]

@nokia-lmt Hi. I don't try it, don't know if works with every PW models or firmwares, but for fullscreen you can try this: https://github.com/PaulFreund/WebLaunch (it require jailbreak and KUAL to work)

[nokia-lmt]

Hi, Thanks a lot, but unfortunately my Kindle does not have jailbreak... :(( сб, 4 дек. 2021 г. в 19:51, matopeto ***@***.***>:

…

@nokia-lmt <https://github.com/nokia-lmt> Hi. I don't try it, don't know if works with every PW models or firmwares, but for fullscreen you can try this: https://github.com/PaulFreund/WebLaunch (it require jailbreak and KUAL to work) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBKEGMNUKYDVU3URCM3UPJILJANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[matopeto]

I hope there will be a fix/pach from the Amazon

Just updated to latests 5.14.2 firmware, but scrollbars problem still exists in this firmware :(

[nokia-lmt]

Hi, Bad news indeed. The main problem here is in fact that you can't go back and downgrade firmware version. At least I'm not aware how to achieve this... :( чт, 17 февр. 2022 г., 20:01 matopeto ***@***.***>:

…

I hope there will be a fix/pach from the Amazon Just updated to latests 5.14.2 firmware, but scrollbars problem still exists in this firmware :( — Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHCZBJJYMNFR4UAUWW3TKLU3UZYFANCNFSM5CJX4QUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>