[Suggestion] Optimise layout of MeeCast's Event-View

[FingusDE]

Missing Column in Event-View on Jolla C2, Jolla Tablet, Redmi 5 Plus

My suggestion is to stretch it to full width or add another day as column to it. The same for the Landscape-Display.

[Olf0]

@FingusDE, thank you very much for filing this issue here. I categorised this as a suggestion, because it aims at beautifying the look, but everything is already fully functional.

As already denoted, IMO there is no space left for another icon (mind, that some empty space to the right screen border must be kept): The number of icons is currently 4 in portrait and 8 in landscape orientation, as you can easily see when you turn your device from portrait to landscape orientation.

To stretch this row of icons should be technically possible (with QML / Qt), but this is an "expensive" operation, i.e. it is slow and battery consuming.

IMO the elements of MeeCast's Event-View should be arranged as follows to look better:

1. Create a centred column with equal margins (free space) to the left and right, and the necessary margins to the top and below (the latter may be 0, IDK).
2. Place the icon displaying the current weather in the top left corner (i.e. left- and top-aligned, with no extra margin) of this column.
3. Place the location (here: Havixbeck) centred in the column, with no or very little margin at its top.
   Use the same text element for the textual representation of the current weather (here: Bedeckt) in a smaller font size (the current one is fine, IMO) and separated by a line break (it is likely already implemented this way).
4. Centre the row of weather forecast icons in the box, with a little margin at its top. IMO, currently there is slightly too little margin between the textual representation of the current weather and the icon-row (which is more pronounced in my screenshots below). Maybe this can be implemented as part of the element described in 3.
5. Right-align the status message for the last poll time: IMO there is nothing to do, it currently looks excellent. But I wonder, why the left and right margin (of the column) seem to differ: The right margin appears to be almost double as wide as the left margin.

Side note: I wrote down these considerations before looking at the QML code: Many aspects are already implemented this way, and my considerations are better adapted to the current code-base than the other way around. Main point of my considerations is: This is how I imagine a better look, I do not care how this is achieved.

Other ideas for optimising the layout of MeeCast's Event-View are welcome, even more so a Pull Request which performs these optimisations. The corresponding QML code is here: sailfishos/meecast/event-components/WeatherBanner.qml

P.S.: Screenshots of the current look of MeeCast's Event-View v1.11.7 on an Sony Xperia X with SailfishOS 3.2.1:

• In landscape orientation
  
• In portrait orientation
  

[pagism]

The old Jolla weather app was displaying 5 icons in portrait mode. Personally I think 5 icons makes more sense than 4, especially when on the right there is a noticeable gap. Also in horizontal view I would prefer to have 7 (week) instead of 8. Maybe having the size of icons smaller will fit a 5th icon?

In addition on 10iii the font size of the first line of the weather location does not match the rest of the event screen especially when the date is also displayed at the top.

[Olf0]

Maybe having the size of icons smaller will fit a 5th icon?

It sure would, but I have not seen vector graphic sources (e.g. in SVG format) of these icons (maybe I missed them). Scaling bitmap icons (e.g. PNG format) results in either ugly or blurred results (no matter if they are already scaled embedded in MeeCast or if MeeCast lets Qt scale them).

But that is a different topic than rectifying the visual layout of MeeCast's Eventview: Making the left and right borders equally large, plus centring the city name, textual weather indicator and the icon row.

Also in horizontal view I would prefer to have 7 (week) instead of 8.

I do not concur, I want as many as possible with a given icon size.

[pagism]

I am not a GUI expert, the jolla weather app event view layout is good and simple imo.

The top line is centered, symbol size and location fonts are larger than other text lines around.

Then for the second line it looks like each day-cell is split vertically to 4 rows, i.e. day, temp max, symbol, temp min. This allows to reduce the width of that cell to the icon size only. It does not have a fixed number of days, depending or screen resolution/scale, it can range from 4-6, and I guess on landscape will fit as many days as that horizontal space allows.

I do not know much about the icon graphics, but I get the impression that some of those sets have too much detail that might not help with scaling.

[Olf0]

I am not a GUI expert, the jolla weather app event view layout is good and simple imo.

This is definitely looking good. (Side note: I never used Foreca's proprietary weather app due to privacy; AFAIR it transmits the device's location to Foreca, Foreca is the only weather data provider available and Foreca's forcast data is in my experience less reliable than weather.com.)
But as MeeCast has only a single maintainer who has very little time (I am merely supporting him with infrastructure work), any major redesign is out of scope, unless someone (you?) contributes it.

Hence, lets us focus on slightly rearranging the extant icons and look (which I actually like a bit better than Foreca's), so it does not look awkward any longer. Even that might require a contribution, as I do not have any time for that this year and I doubt @vasvlad can spare any either for this; ultimately it is just a beautification, the functionality is there (i.e. nothing is broken: it is a feature-request, not a bug).

[panositi]

@Olf0 yes it's an improvement not a bug. I have no experience in QML but I will give it a try when I get more time to setup the dev environment and will let you know.

[Olf0]

I have no experience in QML but I will give it a try when I get more time to setup the dev environment and will let you know.

The nice and convenient thing about QML / QtQuick is that it is just JavaScript using Qt functions, and the excellent documentation by the Qt company and also third parties.

• As it is JavaScript, i.e. an interpreted language, there is no need for a developer environment: Simply edit WeatherBanner.qml on your device (should be at /usr/lib/qt5/qml/Sailfish/Weather/WeatherBanner.qml; much more conveniently when logging in to your device via SSH) and restart lipstick (systemctl --user restart lipstick), then you will see the effect of your changes.
• Mind to use the documentation for Qt 5.6: By the Qt company, its sub-page for QML, and the functions reference at devdocs.io which provides specific sections for "Qt QML" and "Qt Quick".

The inconvenient thing about QML is that it is JavaScript using Qt functions, for me: I hate to code in JavaScript, never became accustomed to it and I am not proficient in using Qt.

[pagism]

I am almost ignorant in QML and I never liked javaScript either lol. Anyway, it's really slow trial and error process here. I managed to fix the top line, the second one is more complicated as requires a very fine placement and alignment of items which I do not understand yet.

The reason we have that gap on the right is that alignment starts from left and for portrait and landscape mode the number of days is fixed to 4 and 8 respectively. For higher resolution screens (?) that is not enough to fill the entire line hence the gap.

[Olf0]

I am almost ignorant in QML and I never liked javaScript either lol. Anyway, it's really slow trial and error process here. I managed to fix the top line, the second one is more complicated as requires a very fine placement and alignment of items which I do not understand yet.

I feel with you: That reflects exactly my experiences with QML. It should be "so easy" (maybe it is for web-page programmers accustomed to JavaScript), the Qt documentation is really well done, but I always struggle hard. Some "quick wins" are indeed easy to achieve, but in order to obtain a QML page layout as I imagined it, I ultimately struggle.

The reason we have that gap on the right is that alignment starts from left and for portrait and landscape mode the number of days is fixed to 4 and 8 respectively. For higher resolution screens (?) that is not enough to fill the entire line hence the gap.

Yes, exactly. I always wondered if this effect is really (or "really only") dependent on the screen-resolution, especially as QML should (just as HTML) be resolution-independent.

Hence I believe it is a wrong approach trying to adjust the layout depending on the screen resolution.
Thus my suggestion to keep it simple and just centre the row with the (4 or 8) weather forecast icons horizontally in order to rectify the look.

[vasvlad]

Hi.
I'm glad to see this discussion. My code (QML-part) for Event-View is not optimal (and most likely ugly). I coded it very quickly when Jolla had only one device(and one display resolution) I hope I'll find time to refactor it. @pagism please send patch or pull request of your current work.

[pagism]

I am struggling with the second line margins, slow process on that, I will send you my patch once it looks ok.

Is three anyway to find out whats in silica.weather lib tho? That would be useful, silica seems to provide customised blocks for weather apps including icons too, but it's hard to find more on that.