[PROBLEM] Horizontal scrolling in tag view

[MJR42]

I've got a small Waveshare touchscreen in portrait mode (480x600) running as a local display, and everything appears to be functional, except... When I set the display into "Tag" view, I see two columns: Artist, and Albums by Artist. I do not see the Genre view, even though it is set to display. On the very left of the screen are some white pixels that correspond to the vertical alphabet index of what is probably the Genre view. The touchscreen is working fine for everything else, but I cannot get the Genre column to scroll into view when I swipe right.

On my cell phone browser, I see the virtually identical display, but when I swipe right, the genre column appears. I'm sure that the phone is a higher resolution screen, so is there something that disables the horizontal scrolling when the display is 480 wide?

[Tim Curtis]

The Browser doesn't see the physical screen resolution it only sees whats called a viewport.

Run the command below to show the viewport size after menu > refresh.

Code:

# Show viewport size
moodeutl -q "update cfg_system set value='viewport' where param='pkgid_suffix'"

# Hide viewport size
moodeutl -q "update cfg_system set value='' where param='pkgid_suffix'"

[MJR42]

It says VIEWPORT 479x799, P/R=1

The physical screen is 480x800.

[Tim Curtis]

Thats the correct viewport size. It's typically 1 less than physical resolution.

The white pixels on the left that you reported are pretty odd.
Maybe the screen does not support the swipe gesture?

[MJR42]

I can swipe vertically to scroll through the Artists list, the Albums list on the top half, and the Track list on the bottom half, so either there's something about the direction allowed by a touch/swipe, or there's something in the screen config that prevents the horizontal scroll. I'd really like to be able to access the Genre list!

Can you remind me - is the screen configuration set in the CSS files? Where are those located in 9.1.4?

[Tim Curtis]

Your best bet is to visit the Git repo for moode and learn the locations of code files. There is a www/css subdirectory.
https://github.com/moode-player/moode

The WebUI layout and style is generally defined in html and css files but its updated dynamically by javascript files (www/js)

The swipe handler is in www/js/scripts-panels.js

Code:

       // Load swipe handler for top columns in library (mobile)
       if (UI.mobile && SESSION.json['library_show_genres'] == 'Yes') {
           $(function() {
               $("#top-columns").swipe({
                   swipeLeft:function(event, direction, distance, duration, fingerCount) {
                       $('#top-columns').animate({left: '-50%'}, 100);
                   }
                 });
               $("#top-columns").swipe({
                   swipeRight:function(event, direction, distance, duration, fingerCount) {
                       $('#top-columns').animate({left: '0%'}, 100);
                   }
               });
           });
       }

Beware though, the main Javascript files playerlib, scripts-panels, scripts-configs and scripts-library have never been refactored due to lack of project bandwidth and so they are not the easiest to follow :-0

[MJR42]

Sounds like a project! I'll keep you posted if I learn anything useful.

[MJR42]

I've managed to get the development system working on my Windows 11 machine with Visual Studio Code. I've also discovered that if I zoom in on the development webpage (Chrome on Windows), I can get the viewport to come close to the same as on my small Pi screen. 

I want to test the swipe left/right functionality in the development environment. Does anyone know how to emulate a swipe without a touch screen? If not, would it work if I move everything to a laptop with a touch screen?

Having reviewed the scripts-panels.js section you suggested, I wonder if the screen is not being identified as a mobile, which appears to be necessary to enable the left/right swipe. Is there a function to pop up a message on the UI if I want to display some values? I'm not sure I'm up to figuring out how to use the debug functions in Visual Studio.

[Tim Curtis]

You can do a lot of debugging with just the desktop Browser Console.

Chrome has View > Developer > Inspect Elements or alternatively right-click on the WebUI (any part) and the context menu should have "Inspect". This brings up the Browser Javascript console where you can view and change the CSS/HTML, enter variable names and see their values etc.

Inspect also allows the exact viewport x,y to be entered (Responsive)

   

Or choose a specific device (but horizontal swipe does not work)

   

Moode considers a viewport < 480 width to be a Smartphone (mobile) device and sets a global variable named UI.mobile to true. You can test the value of this variable in the Browser console.

[MJR42]

Thanks for the reminder about the Chrome DevTools - another way to get to them is to simply hit F12.

The value of UI.mobile is indeed being set to "True". I can then see exactly what's on the Pi Waveshare screen. If I click and drag, the screen moves so that the Genre column comes in on the left, and the Albums column goes out on the right.

The touchscreen is emulating a left mouse click, right? Do you think that by setting UI.mobile=true and enabling the left/right swipes, the touch "mouse click" is being ignored? I can comment out the swipe handler, but what's the simplest way to try it out on the Pi? I'm hoping for something like "build on Windows, transfer file x to Pi, and restart".

Otherwise, am I going to have to do a full development build on the Pi?