Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maximize use of real estate in Home view of Watch app #41

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from

Conversation

aug0211
Copy link
Contributor

@aug0211 aug0211 commented Apr 21, 2024

  • Bigger fonts in the Watch app Home view
  • Re-organize the sequence of info shown in the Watch app Home view
  • Include mm:ss format since last reading in the Watch app Home view
  • Tested in Apple Watch Ultra (1) and Apple Watch Series 7 (41mm)
    image

aug0211 added 3 commits April 21, 2024 10:43
* Bigger fonts in the Watch app Home view
* Re-organize the sequence of info shown in the Watch app Home view
* Include mm:ss format since last reading in the Watch app Home view
* Minor tweak to height of trend arrow in Watch Home view for better alignment
* Adjust the trend arrow size in the Watch Home view from 35.0 down to 25.0
* It was previously too large, particularly for diagonal arrows
@aug0211 aug0211 changed the title Maximize real estate in Home view of Watch app Maximize use of real estate in Home view of Watch app Apr 22, 2024
@aug0211
Copy link
Contributor Author

aug0211 commented Apr 30, 2024

Note, this is most valuable when changing the refresh timer to 1s. This effectively allows the home screen to update every second (like a stopwatch app does) to easily understand how close or far we are from the next expected BG reading.

@gestrich
Copy link
Collaborator

gestrich commented May 1, 2024

I think if we want to show seconds precision, the seconds should stay up-to-date automatically. Otherwise the UI appears immediately stale. I notice it updates like every 20 -30 seconds which is probably when SwiftUI randomly decides to refresh the view. The update button is a workaround but it seems we should make the seconds update automatically for the user. That refresh button was meant more to force it to fetch the latest data from Nightscout, not refresh the UI.

Here's one way to keep it up-to-date

I think the "ago" text could be removed with that change, as I think it will be obvious it is a time if it were incrementing.

@gestrich
Copy link
Collaborator

gestrich commented May 1, 2024

Note, this is most valuable when changing the refresh timer to 1s. This effectively allows the home screen to update every second (like a stopwatch app does) to easily understand how close or far we are from the next expected BG reading.

I just saw this note after I wrote my above note. I'd not adjust the timer in RemoteDataServicesManager as that timer is meant for controlling how often we download from Nightscout and not really a UI refresh control. I'd suggest instead looking at that link above I shared and adding a 1-second refresh in the HomeView to recalculate the minutes:seconds since last reading.

@gestrich
Copy link
Collaborator

gestrich commented May 1, 2024

Just to mention the coloring of text elements seems a randomly organized (red vs white things). Maybe make the reading, arrow and change all the same color (red in that case). Then the bottom text the same (white in that case).

Screenshot 2024-05-01 at 6 59 32 PM

@aug0211
Copy link
Contributor Author

aug0211 commented May 1, 2024

Yes that coloring is weird! I need to look in my branch that I run and see what I did, I suspect I have already changed that because it doesn't look great!

At one point I had deltas and trend arrows colored too, for example - it was way too busy and not helpful.

I think I may have just gone to all white, other than BG - for less business. Especially since the strike through handles stale indicator.

Will take a look and touch this up!

@aug0211
Copy link
Contributor Author

aug0211 commented May 2, 2024

I do in fact have the same color setup on my "live" branch.

I think all white (other than BG) is the cleanest. I'll touch that up.

I did not get to look at the clock seconds timer you recommended yet and suspect it'll be a bigger change, but it's probably a better way to refresh, like you said. Though, I actually started with the 1s refresh time in the iOS LCG app months ago, before touching the watch app. I forgot I had even done it, and it turned out to be a nice side effect in the watch app. I originally just wanted the BG updated in the iOS app as soon as it was available and didn't want to wait at all 😅 I didn't notice any negative side effects from it. I wonder if it's worth leaving in place?

Lastly, I'll play with the "ago" text and see how it looks without. I think somehow it provides some good context but maybe it'll be cleaner and still obvious without it.

@aug0211
Copy link
Contributor Author

aug0211 commented May 2, 2024

A few options here.

I cleaned up the timer text so it is always white.

I also played with the "ago" text. Wife likes it better without, so clearly you were correct 😂

What I think is most interesting though is this alternate view, which copies the same layout and format of the rectangle widget view. I just increased font sizes slightly.

Personally I prefer this new option. It's somehow visually more balanced for me, and using the same format as the widget makes it more natural for my brain to immediately know which data is where.

At one point I was also showing IOB and COB on this screen, and there's space for that (or other info) eventually. I have taken it out since we're using iAPS these days and the different APIs mean LCG does not have this info available for iAPS users.imageimageimageimageimage

@aug0211
Copy link
Contributor Author

aug0211 commented May 2, 2024

After just minutes of using this new design, I like it drastically more.

It feels incredibly fluid to tap the widget which is in this layout and immediately launch into the app which follows the identical layout. The design language is the same, we just get slightly more data (realtime seconds counter) in the app vs widget, and a slightly bigger view.

This design also leaves ample space above and below (or lots of space all above or all below if we wanted) for future components. Like buttons to add carbs/boluses/overrides or a graph, etc.

I've reworked this and updated the PR to the style shown in the final 2 screen shots above.

* Layout now mimics rectangle watchOS widget
* Text sizes increased by 20% compared to widget
* Includes seconds in counter
* Stripped "ago" text for timer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants