Music: Redesign Part 2 #2337

tituscmd · 2025-07-26T19:18:51Z

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:

Alarm: Simplify alarm alerting screen (InfiniTimeOrg#2211)

…music_redesign

…oach to switching between skipping and volume buttons

… buttons

…music_redesign

github-actions · 2025-07-26T19:24:39Z

Build checks have not completed. Possible reasons for this are:

The checks need to be approved by a maintainer
The branch has conflicts
The firmware build has failed

…o music_redesign_2

src/displayapp/screens/Music.cpp

dariusarnold · 2025-08-25T18:11:18Z

@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 · 2025-08-25T18:16:12Z

@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 · 2025-08-25T18:26:38Z

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

…matting commit

…matting commit (ironically one more)

tituscmd · 2025-08-25T21:32:16Z

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 · 2025-08-25T21:42:47Z

tituscmd · 2025-08-25T21:49:36Z

liamcharger · 2025-08-25T23:52:27Z

Looking good, @tituscmd!

Thanks for your work on this!

tituscmd · 2025-09-06T13:51:03Z

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

LinuxinaBit · 2025-09-06T17:42:19Z

Ooh, what if the progress bar was blue?

tituscmd · 2025-09-13T11:51:15Z

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 · 2025-09-13T13:26:19Z

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 · 2025-10-06T21:00:56Z

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 · 2025-10-06T21:34:02Z

@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.

tituscmd · 2025-10-30T17:54:59Z

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.

Not quite sure what you mean by this. Care to elaborate?

tituscmd · 2025-10-30T17:55:19Z

@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.

Agreed. Should be all good to merge from my side I think.

mark9064

Looking good :)

Haven't tested locally or ran clang-tidy yet

mark9064 · 2025-11-02T10:45:03Z

.vscode/settings.json

        "streambuf": "cpp",
        "cinttypes": "cpp",
-        "typeinfo": "cpp"
+        "typeinfo": "cpp",


Could this change be moved to another PR

Totally accidental - not even sure how it happened but VSC seems to do that sometimes. I'll remove it ASAP

src/displayapp/screens/Music.cpp

mark9064 · 2025-11-02T10:47:13Z

src/displayapp/screens/Music.cpp


 void Music::UpdateLength() {
+  int remaining = totalLength - currentPosition;
+  if (remaining < 0)


Could you add braces here

Do you mean

int remaining = (totalLength - currentPosition);

?

On the if statements:

if (remaining < 0) { ... }

Right, makes sense. I'll do that as well as soon as I get the time to

mark9064 · 2025-11-02T10:53:14Z

src/displayapp/screens/Music.cpp

+  bleState = bleController.IsConnected();
+  if (bleState.Get() == false) {
+    SetDisconnectedUI();
+    lastConnected = false;


Could lastConnected be avoided by relying on bleState.IsUpdated()?

mark9064 · 2025-11-02T11:01:24Z

src/displayapp/screens/Music.cpp

+  }
+}
+
+void Music::SetDisconnectedUI() {


If the state variables (playing, artist, track, album etc) were updated here, could we get rid of force? I think the UI will be more robust if the state variables are always kept up to date, that way connection/disconnection don't need special handling

Would also need handling during in the constructor

mark9064 · 2025-11-02T11:05:26Z

src/displayapp/screens/Symbols.h

        static constexpr const char* sleep = "\xEE\xBD\x84";
        static constexpr const char* calculator = "\xEF\x87\xAC";
        static constexpr const char* backspace = "\xEF\x95\x9A";
+        static constexpr const char* swap = "\xef\x81\xb9";


Is this used anywhere?

Nope, unused symbol from the experimental "Swap Controls"-button. I'll remove it ASAP

mark9064 · 2025-11-02T11:06:41Z

src/displayapp/screens/Music.h

-
        Pinetime::Controllers::MusicService& musicService;
+        const Controllers::Ble& bleController;
+        Pinetime::Controllers::DateTime& dateTimeController;


Time controller unused?

mark9064 · 2025-11-02T11:08:16Z

src/displayapp/screens/Music.h

+        const Controllers::Ble& bleController;
+        Pinetime::Controllers::DateTime& dateTimeController;

        std::string artist;


Looks like these could all use DirtyValue

Co-authored-by: mark9064 <[email protected]>

tituscmd and others added 25 commits January 21, 2025 13:50

Merge pull request #26 from InfiniTimeOrg/main

c73f016

Alarm: Simplify alarm alerting screen (InfiniTimeOrg#2211)

music app redesign

3a79fc6

Merge branch 'InfiniTimeOrg:main' into music_redesign

bf83698

removed an empty line

5ccbaad

Merge branch 'music_redesign' of github.com:tituscmd/InfiniTime into …

c85e99c

…music_redesign

Some tweaks for the default texts, as well as adding a different appr…

e97cb58

…oach to switching between skipping and volume buttons

formatting

db1a0ad

more formatting

e633015

Merge branch 'main' into music_redesign

441399e

revert back to swiping as a gesture to switch between skip and volume…

ee276b5

… buttons

remove all unneccessary references to the motor controller

43aa932

formatting

29cc0eb

Merge branch 'main' into music_redesign

ba976b6

removed accidental change

18894a6

Merge branch 'music_redesign' of github.com:tituscmd/InfiniTime into …

6b1e277

…music_redesign

Merge branch 'main' into music_redesign

012fa8d

Merge branch 'main' into music_redesign

1ad75d0

correct color of the buttons

cbc9625

remove redundant initialisers for trackName and albumName

e44aac1

Merge branch 'main' into music_redesign

f76c9d4

Merge branch 'main' into music_redesign

73f991d

Merge branch 'main' into music_redesign

628fd16

add progress bar

ef74a00

Update settings.json

fcea150

Merge branch 'main' into music_redesign_2

8eb080e

tituscmd added 4 commits July 28, 2025 22:43

formatting

052dad2

Merge branch 'music_redesign_2' of github.com:tituscmd/InfiniTime int…

b691fe3

…o music_redesign_2

formatting

65ae129

more formatting

ed30e53

version with buttons up top

e2514b0

dariusarnold reviewed Aug 25, 2025

View reviewed changes

src/displayapp/screens/Music.cpp Outdated Show resolved Hide resolved

clean up code

1f902b1

tituscmd added 5 commits August 25, 2025 20:39

finally got a formatting extension, so this is hopefully the last for…

2201ee8

…matting commit

finally got a formatting extension, so this is hopefully the last for…

3e18fcb

…matting commit (ironically one more)

some final spacing optimizations

0b3427e

remove some more (now) unused lines

b965144

lots of code optimization, mainly to get the reconnection smoother

a1cef42

tituscmd mentioned this pull request Sep 13, 2025

Adds page indicator to music app #1875

Merged

tituscmd and others added 2 commits September 13, 2025 13:48

remove unused emoji

4d34f70

Merge branch 'main' into music_redesign_2

9483662

Merge branch 'main' into music_redesign_2

6fcf5e0

mark9064 reviewed Nov 2, 2025

View reviewed changes

LinuxinaBit mentioned this pull request Nov 4, 2025

Add Scroll Bar to the Music App #1391

Closed

1 task

Update Music.cpp

08c5596

Co-authored-by: mark9064 <[email protected]>

Uh oh!

Music: Redesign Part 2 #2337

Are you sure you want to change the base?

Music: Redesign Part 2 #2337

Uh oh!

Conversation

tituscmd commented Jul 26, 2025

Uh oh!

github-actions bot commented Jul 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

dariusarnold commented Aug 25, 2025

Uh oh!

tituscmd commented Aug 25, 2025

Uh oh!

tituscmd commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tituscmd commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tituscmd commented Aug 25, 2025

Uh oh!

tituscmd commented Aug 25, 2025

Uh oh!

liamcharger commented Aug 25, 2025

Uh oh!

tituscmd commented Sep 6, 2025

Uh oh!

LinuxinaBit commented Sep 6, 2025

Uh oh!

tituscmd commented Sep 13, 2025

Uh oh!

LinuxinaBit commented Sep 13, 2025 via email

Uh oh!

0x0000ff commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LinuxinaBit commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tituscmd commented Oct 30, 2025

Uh oh!

tituscmd commented Oct 30, 2025

Uh oh!

mark9064 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tituscmd Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tituscmd Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tituscmd Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 26, 2025 •

edited

Loading

tituscmd commented Aug 25, 2025 •

edited

Loading

tituscmd commented Aug 25, 2025 •

edited

Loading

0x0000ff commented Oct 6, 2025 •

edited

Loading

LinuxinaBit commented Oct 6, 2025 •

edited

Loading

tituscmd Nov 20, 2025 •

edited

Loading

tituscmd Nov 20, 2025 •

edited

Loading

tituscmd Nov 20, 2025 •

edited

Loading