MMM-pages & MMM-pages-indicator - Lightweight module pages on your mirror!

[edward-shen]

Ever want your mirror to have pages of modules, similarly to how the screens on your phone work?

I would like to present to you all MMM-pages!

Here’s a youtube example!

You can set what apps modules you want on each page and what modules you want always on. In the example, I have the clock and weather modules always shown (as well as the page indicator), while switching out the rest.

I originally wanted to add animations (slide left/right) to the modules, but I’m actually very satisfied with how it looks right now. Leave a comment/issue on github if you’d really want those.

Please note that this does not provide manual page changing functionality! You need to have a module that sends a specific notification to change the page!

It’s difficult to implement some form of input recognition when there’s dozens of input methods encapsulated in their own modules. That would require me to basically have some variant of that module in this module, which would bloat it to no end. Asking your module input authors to send a request on a specific action instead is keeps everything relatively bloat free.

Download link:
[card:edward-shen/MMM-pages]

While you’re at it, you may want something to indicate which page you’re on, so here’s something to help with that!

MMM-page-indicator!

No need to worry about what page you’re on! With MMM-pages-indicator, you can see what page you’re on! You don’t even have to worry about configuring it, MMM-pages automatically configures it for you! Just add it to your modules!

Download:
[card:edward-shen/MMM-page-indicator]

Quick FAQ:
Why separate the two? Why not make it one thing?

It would make sense to, wouldn’t it? But I wanted this to be modular so that if you don’t like my pages module, you can still use the pages-indicator module for something else. I hated it when I’d love to take a single feature but couldn’t because it was so tightly integrated with the entire thing, so I’m trying to avoid that.

Can I make a pull request to add features?

Please do.

It doesn’t work!

Please be more specific.

How come it changes by itself in the video?

I actually have a separate module set up to read input from a skywriter, but it’s not ready yet for public release.

[shbatm]

Very nice module!

I actually worked on something similar with a fork of MMM-Carousel with clickable indicators and arrow buttons here: https://github.com/shbatm/MMM-Carousel

After working on a few modules for navigation I can totally understand walking the fine line between features and bloat. Feel free to take a look and borrow anything you want… I’m also open to any suggestions for improvement.

[edward-shen]

Hey! that looks pretty slick! I especially like your indicator design. I actually considered forking MMM-carousel too, but after taking a look at the code, it seemed like it would be easier to just make my own. Yours definitely seems more fleshed out, especially with the advanced module slides settings.

I think our projects have different audiences: mine lets people quickly get going, while yours definitely provides more features for those who really want to customize their mirror. If I had known about yours, I definitely would have just used yours instead! :D

[AgilesChroms]

This post is deleted!

[AgilesChroms]

This post is deleted!

[jchenaud]

@edward-shen said in MMM-pages & MMM-pages-indicator - Lightweight module pages on your mirror!:

mande d’extraction pour ajouter des fonctionnalités?

hey sorry for this wake up :)
i need to acces for id to curent page. i think its possible but i dont find :(.
because i need change page if one action have been made juste if im not already on this page

i am realy beginner whith js.

sorry for this bad English

[edward-shen]

@jchenaud

Bonjour, je parle un peu français, mais on peut voir que ce n’est pas bon.

Le code suivant réagit à une demande de modification du numéro de page.

notificationReceived: function(notification, payload) {
  if (notification === 'PAGE_CHANGED') {
      if (typeof payload === 'number') {
        // le payload est le numéro de page.
      }
  }
}

Je recommande de stocker ce nombre et de le comparer lorsque vous avez besoin de faire votre action.

S’il vous plaît laissez-moi savoir si c’est suffisant. La base de code est actuellement gelée parse que je n’ai pas de miroir pour la tester.

[jchenaud]

@edward-shen
merci !! je n’est pas utilisée votre code car je ne vois pas trop comment il diffère de :

	 if (this.curPage != payload )
  	 {
     
    switch (notification) {

avec ce if sa semble éviter les rechargement de la page. mais cette solution me conviens pas vraiment en effet : elle ne permet pas de stopper les notification. il faudrait que je puise accéder a curPage depuis un autre module pour éviter d’émettre d’est notification inutile.

[jchenaud]

up please

[edward-shen]

@jchenaud
Je suis désolé pour le délai, mais j’ai ajouté une nouvelle réponse de notification pour vous. Envoyez simplement un QUERY_PAGE_NUMBER et MMM-pages va envoyer un PAGE_NUMBER_IS notification. Ajoutez cela à switch cas dans la notificationRecieved fonction, et vous devriez être tous ensemble!