Thank you for your donation!


Cloudsmith graciously provides open-source package management and distribution for our project.


Idea: Coverart UI customization
#21
I tested centered metadata text and it doesn't look very good on typical displays or Pi Touch because of the way word-break happens, however ultra-wide displays like the one you are working with could possibly be handled (to a point) in a CSS Media query but I'd need to know it's viewport size in order to test it in a sim. 

Run the command below and then in System config restart Local display, or if the display has touch capability then Menu, Refresh. It will show the viewport size of the display in a popup. 

Code:
# Show viewport size on page refresh
moodeutl -q "update cfg_system set value='viewport' where param='pkgid_suffix'"

# Revert the setting
moodeutl -q "update cfg_system set value='' where param='pkgid_suffix'"
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#22
@Tim Curtis

this is what I've got:

   

it says:

viewport
1919x479

I hope this can help
Reply
#23
Here is how it could look with the CSS media query. If you plan to use it's touch capabilities (if it has any) then a few other UI elements including the popup volume control and audio info screen need to be sized appropriately.

With Playbar hidden
   

With Playbar showing
   
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#24
(10-15-2022, 05:59 PM)Tim Curtis Wrote: Here is how it could look with the CSS media query. If you plan to use it's touch capabilities (if it has any) then a few other UI elements including the popup volume control and audio info screen need to be sized appropriately.

With Playbar hidden


With Playbar showing

That is AWESOME!

Thank you ro much. My monitor has not any touchscreen, so I don't tink that is going to be an issue.

I honestly do prefer with the Playbar.

Can't wait for the next release Smile
Reply
#25
Thank you Tim 

You've done a really good work! 

   

It looks perfect 

Great
Reply
#26
(10-26-2022, 08:26 PM)manolomalele Wrote: Thank you Tim 

You've done a really good work! 



It looks perfect 

Great

Except for a regression that causes the top border on the Playbar to be visible :-0

It's fixed for upcoming 8.2.3 release :-)

If you want to get rid of it now run the command below. It's one long line.

Code:
sudo sed -i s"/#menu-bottom{bottom:0;height:5.3rem;width:100%;z-index:9997;background-color:var(--btnbarback);border-top:1px solid var(--btnshade2);display:none}/#menu-bottom{bottom:0;height:5.3rem;width:100%;z-index:9997;background-color:var(--btnbarback);display:none}/" /var/www/css/styles.min.css
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#27
(10-26-2022, 09:07 PM)Tim Curtis Wrote:
(10-26-2022, 08:26 PM)manolomalele Wrote: Thank you Tim 

You've done a really good work! 



It looks perfect 

Great

Except for a regression that causes the top border on the Playbar to be visible :-0

It's fixed for upcoming 8.2.3 release :-)

If you want to get rid of it now run the command below. It's one long line.

Code:
sudo sed -i s"/#menu-bottom{bottom:0;height:5.3rem;width:100%;z-index:9997;background-color:var(--btnbarback);border-top:1px solid var(--btnshade2);display:none}/#menu-bottom{bottom:0;height:5.3rem;width:100%;z-index:9997;background-color:var(--btnbarback);display:none}/" /var/www/css/styles.min.css

Ciao Tim, 
Honestly I thought that was made pourposly... it doesn't look bad Smile

However, I will use the code you've pasted on the previous post.

Thanks again and I hope that his new visualization option could be useful for many other users and inspire them for new amazing projects!
Reply


Forum Jump: