skuethe/MMM-Spotify

Feature request - Controls size

testbughub opened this issue · 6 comments

First of all, thank you for this module. I love it to bits, and looks so good on my screen.

My only issue is that, because I use the official 7" display, the controls are very small.
So if it would be possible to have an option to increase the size of them, it would be great!

Hey there. Sorry for the late reply, I missed the notification.

Thank you for the idea. Currently the buttons are hold up on a flex box - so unfortunately there is no fixed size (for the buttons) we can just increase without breaking the layout.
Did you try to play around with the config setting moduleWidth? This will increase the overall width of the module and therefor the size of the buttons. Of course, this option is limited to the screen size.

Besides this config option: do you have any suggestions how the increased buttons should behave? As mentioned above, if we just give an option to increase the size of the buttons, that will push some of the buttons into "the next line", making the design break.

Another approach would be to only show selective buttons, increasing them in size the fever are displayed. But that, of course, will make you miss out on functionality.

Yet another option would be to give an option to "outsource" the control buttons into the already implemented MMM-Modal module. Downside: another module and you would need to make one more click for every control you want to do.

So, ideas how to handle this in a good way are welcome.

No problem! I uploaded a picture with a AA battery as a size reference here.
As you can see, they are really small.
I can understand the dilemma. I did try messing around it the settings and css file, but css/javascript/node is still very new to me so it made little difference.
As I've never used MMM-Modal before, I'm not really sure how much input I can provide for that, but I like the idea of "outsourcing" them.
Maybe if I (just thinking out loud here) could outsource them to a new window with, let's say MMM-SmartWebDisplay, that would probably be enough. That way I could use the main module in "center_top", and the controls in "center_bottom".

This is not really a huge deal though, because I recently decided to build myself a "real" magic mirror, so I was thinking of using a screen from a broken laptop I got (17.3") from a friend. It's still in the planning stages however.
But I kinda liked the idea of using the official touchscreen for the Pi, and having it on a dresser or something.
If it's not a major hassle to implement it, I think it would make it more usable if used together with the smaller screens.
I understand that this is a very specific case though, so I wouldn't blame you for dismissing it!

Looking at the image I would suggest the following quick workaround:
Implement multiple pages and move MMM-Spotify to it's own page. There you can start it in position: "top_center" and work with the config: { moduleWidth: xxx } setting.

This is how I handle it in my 10" setup. So to be more exact:

  • use MMM-pages for multiple pages. Perfect module for touch screens!
  • use some module to be able to switch pages - a perfect module would be MMM-Touch
  • configure MMM-Spotify to have a maximum width
  • bonus: add MMM-page-indicator for an indication on which page you are on

MMM-pages example:

    {
      module: "MMM-pages",
      position: "fullscreen_below",
      config: {
        modules: [
          [ "clock", "[YOUR-MENU-MODULE-HERE]" ],
          [ "MMM-Spotify" ],
        ], 
      }
    },

MMM-Touch example:

    {
      // Have this at the bottom, or else it will "push" down other modules comming after it, even tho it is "hidden"
      module: "MMM-Touch",
      position: "top_right",
      config: {
        useDisplay: false,
        defaultMode: "normalOperation",
        gestureCommands: {
          "normalOperation": {
            // work with MMM-pages - next page
            "SWIPE_LEFT_1": (commander, gesture) => {
              commander.sendNotification("PAGE_INCREMENT")
            },
            // work with MMM-pages - previous page
            "SWIPE_RIGHT_1": (commander, gesture) => {
              commander.sendNotification("PAGE_DECREMENT")
            },
          },
        }
      }
    },

MMM-Spotify example:

    { 
      module: "MMM-Spotify",
      position: "top_center",
      config: {
        style: "default",
        moduleWidth: 450,
        control: "default",
      }
    },

Addition:

If that is still not helping out much, you could use style: "mini" in MMM-Spotify config as it then has better usage of the horizontal display

Where you able to test the setup @testbughub ?

Now it's my time to say sorry for the delay! ^^
I haven't really had any time to try it, but I was kinda hoping to use in one screen.
But don't worry about it, I just wanted to ask if it was feasible.
Like I mentioned earlier, I'm planning on making a "real" magic mirror, so I won't have any touch capabilities anyway.
But I appreciate you taking the time to respond!