RemorseTimer: Limit content to a square so the gauge stays square#114
RemorseTimer: Limit content to a square so the gauge stays square#114moWerk wants to merge 1 commit into
Conversation
| Item { | ||
| id: gaugeArea | ||
| anchors.centerIn: parent | ||
| height: Math.min(parent.width, parent.height) |
There was a problem hiding this comment.
Should that be parent.height + flatTireHeight?
There was a problem hiding this comment.
ow, good catch. Thanks for checking thoroughly.
There was a problem hiding this comment.
Ah I'm surprised you don't have to use DeviceSpec. as prefix, did you test that it works like that?
There was a problem hiding this comment.
ugh, got me, i was not testing the last pushed before suspending.
Correcting and testing soon.
…a circle On non-square screens the countdown gauge got stretched into an oval. This wraps the arc and labels in a centered Math.min(width, height) square so it stays circular also when the component is not fullscreen. Re AsteroidOS#44.
37e02ae to
4bc9b21
Compare
| // parent is not full-screen. | ||
| Item { | ||
| id: gaugeArea | ||
| anchors.centerIn: parent |
There was a problem hiding this comment.
Actually now that I think about it some more, if we have a 400x300 screen (flat tire of 100px) this would create a 400x400 square and then center it onto a 400x300 screen so the square would be offset by 50 pixels out of screen.
When it comes to the flat tire we should use a different method. Iirc we typically use the anchors offsets for this.
Anyway, this is hairy and complex enough that I feel qml-asteroid should provide abstractions for all these layout cases. This needs extra thinking (and documentation) but there are UI patterns that keep popping up to account for round/boxy, flattire/none, rectangular/square. Maybe we would need a clever Layout item that has a few attributes like "ignoreFlatTire" or "fitAsSquareInCircles" or "fitAsSquareInRectangle" and what not (those proposed attribute names are bad but you get the idea...) then we should be able to rationalize all of those weird edge cases and avoid having to think about those extra offsets ever again. I feel that we keep getting them wrong over and over again.
There was a problem hiding this comment.
Good discovery. Happy now my confusion served as a pointer, ha.
Shall we move this into an issue and involve @dodoradio since he worked on that a lot already?
I am eager to act on this swiftly tbh.
2 participants
On beluga the remorse countdown gauge was stretched into an oval. This wraps the arc + labels in a centered Math.min(width, height) square and sizes them against that square instead of te former Dims, so it renders as a proper circle again.
It drops Dims from this component, which is the direction Dodo outlined in #44: Dims assumes fullscreen and breaks as soon as a component is sized any other way (e.g. the watchface/settings preview).
Tested on beluga.
Fixes: #96