Navigation style updates #2303
Open
Navigation style updates #2303
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mark9064
added
enhancement
|
Build size and comparison to main:
|
|
Rebase to fix build CI, sorry (same for other PRs) |
|
one last rebase please. The GitHub Actions are now fixed. Sorry for the inconvenience |
No worries. I noticed the base-ref-size change in main, and tried my luck with #2301 first :-) |
Having the distance in a pretty dark green on a black background is pretty hard to read, especially in a "I need to make that turn" situation. So increase the contrast a bit by making it yellow.
The current navigation layout starts from the center of the screen for
flag, narrative and distance.
With the current offsets, this puts the flag in coordinates
(80,20 - 159,99)
on a 240x240 PineTime display, leaving 20px unused space above it.
If the display of the device is bigger, that unused space would be even
bigger.
With space for navigation information at a premium, lets start a bit of
reorganization to make more room, starting with aligning the flag from
the top and only use 2px of empty space above it.
Use LV_HOR_RES as the size-base for the progress-bar instead of hard- coding a 200px size. We also don't need to spend valuable screen space below the bar, so move it down to 2px from the bottom and adjust the borders on each side to the same distance.
When using the navigation on the road (i.e. on a motorcycle) readability becomes key. When only a short glance is possible, icon + distance are the key information, with the narrative being an additional source for when there is a second more time. So it makes sense to keep both icon and distance together so the users eyes don't need to wander across the display. So move the countdown-distance up near the flag and instead of hard-coding coordinates, align it 2px below the icon. Move the narrative text between the distance and progress bar and by making it the last element in the code, we can profit from the alignment information of the other elements and set the height calculated from the position information of distance and progress-bar. By reducing the slightly excessive spaces between elements, the narrative gets to be 97px height and can even hold a 4th line of text.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Some updates for the navigation display coming from having a PineTime strapped to the handlebar off a motorbike and using it for navigation :-) .
After the change, the display looks like:
Of course style is always perceived differently, so I'm of course open for suggestions.