Music: Redesign Part 2

[tituscmd]

Hey everybody,

Since creating PR #2292 and introducing a small little redesign of the music app, I've had some more time on my hands and finally came around to creating a better version of it.

I've moved the artist and track name up a bit to add a new progress bar that shows the progress of the song you're listening to, with the time that has passed shown on the left and the time remaining shown on the right.
Sadly, I've had to remove (comment out) the disc animation in the top right because of space issues. If anyone is especially fond of the disc I'm sure space can be made to fit it back in. It is definitely not a final decision by me, hence why it's only commented out and not removed altogether.
But now that I've temporarily removed the disc animation, the top of the screen seemed quite empty to me. And after some thinking and digging through the code, I stumbled upon these lines of code in the Music.cpp:

294 - // Let's assume it starts playing instantly
295 - // TODO: In the future should check for BT connection for better UX

And so I thought "why not do that?" and I added an indicator text at the top telling you if you are connected via bluetooth. Please share your opinion on this.

Finally, here are some pictures of it all:

[github-actions]

Build size and comparison to main:

Section	Size	Difference
text	379748B	-384B
data	944B	0B
bss	22544B	0B

Run in InfiniEmu

[tituscmd]

These are the UI guidelines I was going off of. That's why the gap is bigger. The pixels on the images I uploaded aren't exactly the same because, for whatever reason, they were rendered as 288x288 instead of 240x240.

[LinuxinaBit]

Those are so old they don't even show the taller height buttons used on the stopwatch etc. I think that, especially when combining buttons in the same UI, consistency within the UI and general usability are far more important.

[tituscmd]

Those are so old they don't even show the taller height buttons used on the stopwatch etc. I think when combining buttons in the same UI, consistency within the UI is far more important anyway.

Very fair.

[tituscmd]

I'll send a picture of the two "final" versions (volume buttons on top vs. bottom) and then maybe we can get some more opinions before we settle on one?

[tituscmd]

(spacing)

.

If you like the left version more, vote the thumbs up. If you like the version on the right more, vote the thumbs down

[dariusarnold]

@tituscmd Can I ask about the Track/Artist info (currently placeholder "Some Track")? Is the "Disconnected" replaced with the artist when connected? I liked the two line design from the first post, since it would reduce text scrolling.

---

The current commit ed30e5 from https://github.com/InfiniBros/InfiniTime/tree/music_redesign_2 makes InfiniSim crash on my end when entering the music app. It happens reliably with the following callstack:

draw_indic(lv_obj_t * bar, const lv_area_t * clip_area) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_widgets/lv_bar.c:498)
lv_bar_design(lv_obj_t * bar, const lv_area_t * clip_area, lv_design_mode_t mode) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_widgets/lv_bar.c:378)
lv_refr_obj(lv_obj_t * obj, const lv_area_t * mask_ori_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:895)
lv_refr_obj(lv_obj_t * obj, const lv_area_t * mask_ori_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:935)
lv_refr_obj_and_children(lv_obj_t * top_p, const lv_area_t * mask_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:837)
lv_refr_area_part(const lv_area_t * area_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:768)
lv_refr_area(const lv_area_t * area_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:510)
lv_refr_areas() (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:400)
_lv_disp_refr_task(lv_task_t * task) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:199)
lv_task_exec(lv_task_t * task) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_misc/lv_task.c:386)
lv_task_handler() (/workspaces/InfiniTime/src/libs/lvgl/src/lv_misc/lv_task.c:134)
Pinetime::Applications::DisplayApp::Refresh(class Pinetime::Applications::DisplayApp * const this) (/workspaces/InfiniTime/src/displayapp/DisplayApp.cpp:260)
Pinetime::Applications::DisplayApp::Process(void * instance) (/workspaces/InfiniTime/src/displayapp/DisplayApp.cpp:149)
sdl_function_wrapper(void * instance) (/workspaces/InfiniSim/sim/task.cpp:61)
libSDL2-2.0.so.0![Unknown/Just-In-Time compiled code] (Unknown Source:0)
libc.so.6!start_thread(void * arg) (pthread_create.c:447)
libc.so.6!clone() (clone.S:100)

The debugger (gdb) prints

Thread 37 "displayapp" received signal SIGFPE, Arithmetic exception.
[Switching to Thread 0x7fb1d7fff6c0 (LWP 5533)]
0x00005625e98d981c in draw_indic (bar=0x7fb1cc001d58, clip_area=0x7fb1d7ffe8f8) at /workspaces/InfiniTime/src/libs/lvgl/src/lv_widgets/lv_bar.c:498
498	        anim_start_value_x = (int32_t)((int32_t)anim_length * (ext->start_value - ext->min_value)) / range;

I can see that the issue is caused by range being zero when attached in gdb. I am not familiar enough with InfiniSim + LVGL to diagnose this quickly though. It might be a simulator-only issue as well, I have been using an earlier commit of this on the watch for some time now where it worked well.

[tituscmd]

@tituscmd Can I ask about the Track/Artist info (currently placeholder "Some Track")? Is the "Disconnected" replaced with the artist when connected? I liked the two line design from the first post, since it would reduce text scrolling.

Yes, sure!
The "Some Track" text is just for testing right now, so you can get an idea of how the UI would look like with a song playing (since I can't simulate that in InfiniEmu)

In the actual version. When your watch is not connected to any bluetooth device, it would just show "Disconnected" and the upper text would be blank.
When you are connected to a bluetooth device, the field that is now showing "Some Track" would show the song's name and the field saying "Disconnected" would be replaced by the artist.

On another note, I can tell that we're going with the first option where the music buttons are up top, so I'll be pushing that in a bit. Once that's done, I'll also show a picture of both states on device and remove all the commented out code

[tituscmd]

The current commit ed30e5 from https://github.com/InfiniBros/InfiniTime/tree/music_redesign_2 makes InfiniSim crash on my end when entering the music app. It happens reliably with the following callstack:

draw_indic(lv_obj_t * bar, const lv_area_t * clip_area) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_widgets/lv_bar.c:498)
lv_bar_design(lv_obj_t * bar, const lv_area_t * clip_area, lv_design_mode_t mode) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_widgets/lv_bar.c:378)
lv_refr_obj(lv_obj_t * obj, const lv_area_t * mask_ori_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:895)
lv_refr_obj(lv_obj_t * obj, const lv_area_t * mask_ori_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:935)
lv_refr_obj_and_children(lv_obj_t * top_p, const lv_area_t * mask_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:837)
lv_refr_area_part(const lv_area_t * area_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:768)
lv_refr_area(const lv_area_t * area_p) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:510)
lv_refr_areas() (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:400)
_lv_disp_refr_task(lv_task_t * task) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_core/lv_refr.c:199)
lv_task_exec(lv_task_t * task) (/workspaces/InfiniTime/src/libs/lvgl/src/lv_misc/lv_task.c:386)
lv_task_handler() (/workspaces/InfiniTime/src/libs/lvgl/src/lv_misc/lv_task.c:134)
Pinetime::Applications::DisplayApp::Refresh(class Pinetime::Applications::DisplayApp * const this) (/workspaces/InfiniTime/src/displayapp/DisplayApp.cpp:260)
Pinetime::Applications::DisplayApp::Process(void * instance) (/workspaces/InfiniTime/src/displayapp/DisplayApp.cpp:149)
sdl_function_wrapper(void * instance) (/workspaces/InfiniSim/sim/task.cpp:61)
libSDL2-2.0.so.0![Unknown/Just-In-Time compiled code] (Unknown Source:0)
libc.so.6!start_thread(void * arg) (pthread_create.c:447)
libc.so.6!clone() (clone.S:100)

The debugger (gdb) prints

Thread 37 "displayapp" received signal SIGFPE, Arithmetic exception.
[Switching to Thread 0x7fb1d7fff6c0 (LWP 5533)]
0x00005625e98d981c in draw_indic (bar=0x7fb1cc001d58, clip_area=0x7fb1d7ffe8f8) at /workspaces/InfiniTime/src/libs/lvgl/src/lv_widgets/lv_bar.c:498
498	        anim_start_value_x = (int32_t)((int32_t)anim_length * (ext->start_value - ext->min_value)) / range;

I can see that the issue is caused by range being zero when attached in gdb. I am not familiar enough with InfiniSim + LVGL to diagnose this quickly though. It might be a simulator-only issue as well, I have been using an earlier commit of this on the watch for some time now where it worked well.

This seemed to have been caused by some 0 division on the progress bar. Should be fixed by latest commit - works for me in InfiniEmu now

[tituscmd]

Latest commit makes the UI switch on reconnection much smoother, since we now force fetch the data and update the UI if we just reconnected - otherwise we only fetch new data if it changed.
While adding that I also optimized the code a bit, putting stuff into separate functions so the code is cleaner and less cluttered. I'll send photos of the 3 UI states and a video showcasing the new reconnection shortly

[tituscmd]

[tituscmd]

[liamcharger]

Looking good, @tituscmd!

Thanks for your work on this!

[tituscmd]

This PR should be ready for review from my side :)

[LinuxinaBit]

Ooh, what if the progress bar was blue?

[tituscmd]

Ooh, what if the progress bar was blue?

I personally like the gray and don't see any big improvement in terms of readability with a blue one.

[LinuxinaBit]

Yeah, not a big deal. Though it isn't really for readability; it's just about adding some visual flair to an otherwise colorless interface :)

…

On September 13, 2025 6:51:38 AM CDT, Titus ***@***.***> wrote: tituscmd left a comment (InfiniTimeOrg/InfiniTime#2337) > Ooh, what if the progress bar was blue? > <img alt="image" width="288" height="288" src="https://private-user-images.githubusercontent.com/105567407/486444645-b6306cba-8a26-40c4-8c07-f548655c74d7.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTc3NjQxNTQsIm5iZiI6MTc1Nzc2Mzg1NCwicGF0aCI6Ii8xMDU1Njc0MDcvNDg2NDQ0NjQ1LWI2MzA2Y2JhLThhMjYtNDBjNC04YzA3LWY1NDg2NTVjNzRkNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwOTEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDkxM1QxMTQ0MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01OWIxZWJmNDkxMDVhYzNmN2FjMDM4N2Y5NTcxMjY1MTRmZDExODY4YzdjOGRkMGYyZWQwMmI5MGQ2MjcyODlhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.lfZgOm-T2nHsqv1aP-lkOgWbtc8dktR47Pqy8nZbCFM"> I personally like the gray and don't see any big improvement in terms of readability with a blue one. -- Reply to this email directly or view it on GitHub: #2337 (comment) You are receiving this because you were mentioned. Message ID: ***@***.***>

[0x0000ff]

I'm of the belief that track info isn't needed on a watch or should be at least be minimized to a progress bar. The buttons could them be laid out in a way that would make them easier to press.

Just my 2 cents.

[LinuxinaBit]

@0x0000ff
Something like #558 is always an option, to achieve a similar effect to what you're talking about without removing UI elements that other people (like me!) want.

That being said, I think it's more important at this point to get the UI merged so people can actually start using it when the next version of InfiniTime is released... More changes can always be made in the future.