MMM-Page-Selector: A page switcher that can set positions of modules

Smotx · Sep 18, 2018, 6:26 PM

Hi,

Anyone have real exemple to use this ?

robiv8 · Oct 23, 2018, 8:53 PM

a example of the config from Veldrovive want be nice

robiv8 · Oct 25, 2018, 9:43 PM

Good news for al beginers :-)
Veldrovive has published an config example on his github page.
Look there under issues.

Peter_Froberg · Nov 8, 2018, 1:14 PM

I can’t get this to work on my mirrror.
I don’t know what can be missing.
I have installed both MMM-Page-Selector and MMM-page-indicator. The Indicator shows up nice and easy, but I have create 3 pages and it only shows 2 and when I click one of the circles from MMM-Page-indicator it does not switch page.

I have tried to use MMM-Pages and there it works just fine.

My config is for MMM-Page_selector is:

{
			module: "MMM-Page-Selector",
			position: "top_bar",
			config: {
				defaultPage: "domoticz",
				displayTitle: true,
				 selectPageNotif: ["SELECT_PAGE"],
				 incrementPageNotif: ["PAGE_UP"],
				 decrementPageNotif: ["PAGE_DOWN"]
			}
		},

and my config for MMM-page-indicator is:

{
        module: "MMM-page-indicator",
        position: "bottom_bar",
        pages: "all",
		config: {
			 pages: 3,
                 }
    }

I have tried with and without pages:3 in the MMM-page-indicator config

Greatful for some guidens

/Peter

Veldrovive · Nov 4, 2018, 4:17 PM

Sorry for taking a bit to get back to you.
You shouldn’t need to put the pages: 3 in the Page Indicator config as that should be handled automatically.
In order to get at the root of the problem, I would need to have the configs for you other modules since all pages are implicitly declared to exist inside the pages object of your modules.
For example:

{
    module: "MMM-a-module",
    position: "bottom_center", 
    pages: {"pageOne": "top_center", "pageTwo": "bottom_left"},
    config: {}
},

is defining two pages with the names pageOne and pageTwo and then saying that this module will appear at the top_center and bottom_left positions on those two pages respectively.
I am assuming that something went wrong with the pages objects which is causing some problems.
If you post those I will probably be able to figure out the problem.

robiv8 · Nov 4, 2018, 5:49 PM

Hello Veldrovive,
I also have a hard time with the config. But am still on the build.
The implementation is very complicated with many modules the overview is lost. All lines must also be marked with “” signs.

But that’s just the way with the codes :-)

What would be great if you had a main config and for each additional page its own config which is then read out.
Would make the whole course very clear.
Even more if you did not need to provide the entire modules and each line with extra signs.

That’s just wishful thinking, of course. ;-)

Nevertheless! A great module
Thank you

Veldrovive · Nov 4, 2018, 6:20 PM

Hey Robiv8,
First, I will address a couple of things.

All lines must also be marked with “” signs:
To be clear, it is not necessary to put quotes around page names or props. For example:
"pages": {"main": "top_right", "fun": "top_left"} is exactly the same as
pages: {main: "top_right", fun: "top_left"}
I just believe that it is more clear for everything to be specified as strings.

Even more if you did not need to provide the entire modules and each line with extra signs:
Could you elaborate a little bit about what this means? What do you mean when you say each line with extra signs?

What would be great if you had a main config and for each additional page its own config which is then read out:

I’m still very much open to developing this further and possibly adding more ways to create pages.
I think I get the idea that when you have many modules it can be hard to keep track of what modules have been put on what pages and where, but I am unclear on what exactly you are suggesting.

One idea that I had during development was to have a pages section in the config.js like this:

address: "localhost",
port: 8081,
ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],
modules: [
    ...
],
pages: {
    "main": {
        "calendar": "top_left",
        "MMM-Bob-Ross": "bottom_left",
        "clock": "top_right",
        "weatherforecast": "bottom_right",
        "newsfeed": "bottom_center"
    },
    "fun": {
        "clock": "top_left",
        "MMM-Lunartic": "bottom_right",
        "MMM-Astronauts": "bottom_left",
        "MMM-Reddit": "top_right"
    }
}

In order to condense the page config down when there are just too many modules to handle. Something like this would be very easy to implement.
Is this along the lines of what you were suggesting?

robiv8 · Nov 8, 2018, 1:15 PM

Yes that would be a great help and clearly arranged. Good idea!

What I meant by extra commas is:
Example Normal:

{
module: "currentweather",
position: "top_right",
config: {
long: "de",
location: "Beinstein",
locationID: "3220785",
appid: "08541acd123xxxxxxxxxxxxx"
}

For the MMM Page Selector:

{
"module": "weatherforecast",
"position": "bottom_center",
"pages": {"main": "bottom_right"},
"config": {
"locationID": "REMOVED",
"appid": "REMOVED"
}
},

So I have to use the extra commas for all modules and each line.
Example: “module”: “text” instead of module: “text”

And that with over 200 lines of text, woe if you are even wrong at one ;-)

And please do not consider this as a criticism, only as a small piece of thought if it is not easier solvable.

Robert

robiv8 · Nov 4, 2018, 10:10 PM

Here my current config that I’m building, works quite well.
These I will now equip with more modules and expand to up to 5 pages. But I need a lot of time because I have to check each module if all commons are set correctly.

/* Magic Mirror Config Sample
 *
 * For more information how you can configurate this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
address: "0.0.0.0",
//address: "192.168.178.44",
//address: "localhost", // Address to listen on, can be:

//port: 8080,
port: 8080,
ipWhitelist: [],
//ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"], // Set [] to allow all IP addresses

language: "de",
timeFormat: 24,
units: "metric",

modules: [
{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
header: 'Wieslauf',
config: {
region: 'Rudersberg',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
header: 'Strohgäu',
config: {
region: 'Hemmingen / BW',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
header: 'Schönbuch',
config: {
region: 'Dettenhausen',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
header: 'Täles',
config: {
region: 'Neuffen',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
header: 'Rossberg',
config: {
region: 'Wolfegg',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: "clock",
position: "middle_center",
config: {
showDate: false,
displayType: 'analog',
analogSize: '540px',
analogFace: 'face-001',
secondsColor: '#FF0000',
analogPlacement: 'top',
//analogShowDate: 'bottom',
}
},
{
module: "clock",
position: "bottom_center",
},
{
module: "currentweather",
position: "top_right",
config: {
lang: "de",
location: "Beinstein",
locationID: "3220785",  //ID from http://www.openweathermap.org/help/city_list.txt
appid: "removed-xxxxxxxxxxx"
}
},
{
module: "MMM-PublicTransportHafas",
position: "bottom_right",
config: {
stationID: "008007193",	// Replace with your stationID!
headerPrefix: "von",
stationName: "Miedelsbach",   // Replace with your station name!
direction: "",     // Show only departures heading to this station. (A station ID.)
ignoredLines: [],   // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: ["bus"],  // Which transp not be shown (, list) values:StN tram, BuN bus, s suburban
timeInFuture: 240,
showColoredLineSymbols: true,     // Want colored line symbols?
useColorForRealtimeInfo: true,    // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true,  // Table Headers as symbols or text?
maxUnreachableDepartures: 1,      // How many unreachable departures should be shown?
maxReachableDepartures: 5,        // How many reachable departures should be shown?
customLineStyles: "hafas", // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false        // Display only the line number instead of the complete name, i. e. "11" instead of "STR 11"
}
},
{
module: "MMM-PublicTransportHafas",
position: "bottom_right",
config: {
stationID: "008007446",	// Replace with your stationID!
headerPrefix: "von",
stationName: "Frickenhausen",   // Replace with your station name!
direction: "",     // Show only departures heading to this station. (A station ID.)
ignoredLines: [],   // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: ["bus"],  // Which transp not be shown (, list) values:StN tram, BuN bus, s suburban
timeInFuture: 240,
showColoredLineSymbols: true,     // Want colored line symbols?
useColorForRealtimeInfo: true,    // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true,  // Table Headers as symbols or text?
maxUnreachableDepartures: 1,      // How many unreachable departures should be shown?
maxReachableDepartures: 5,        // How many reachable departures should be shown?
customLineStyles: "hafas",             // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false        // Display only the line number instead of the complete name, i. e. "11" instead of "STR 11"
}
},
{
module: "MMM-PublicTransportHafas",
position: "bottom_left",
config: {
stationID: "008003409",// Replace with your stationID!
headerPrefix: "von",
stationName: "Korntal DB",   // Replace with your station name!
direction: "",     // Show only departures heading to this station. (A station ID.)
ignoredLines: [],   // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: ["bus", "Fernverkehr"],  // Which transp not be shown (, list) values:StN tram, BuN bus, s suburban
timeInFuture: 240,
showColoredLineSymbols: true,     // Want colored line symbols?
useColorForRealtimeInfo: true,    // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true,  // Table Headers as symbols or text?
maxUnreachableDepartures: 1,      // How many unreachable departures should be shown?
maxReachableDepartures: 5,        // How many reachable departures should be shown?
customLineStyles: "hafas",             // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false        // Display only the line number instead of the complete name, i. e. "11" instead of "STR 11"
}
},

{
module: "MMM-PublicTransportHafas",
position: "bottom_left",
config: {
//stationID: "008007325",// Replace with your stationID!
stationID: "000557824",// Replace with your stationID!
headerPrefix: "von",
stationName: "Münchingen",   // Replace with your station name!
direction: "",     // Show only departures heading to this station. (A station ID.)
ignoredLines: [],   // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: ["bus"],  // Which transp not be shown (, list) values:StN tram, BuN bus, s suburban
timeInFuture: 240,
showColoredLineSymbols: true,     // Want colored line symbols?
useColorForRealtimeInfo: true,    // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true,  // Table Headers as symbols or text?
maxUnreachableDepartures: 1,      // How many unreachable departures should be shown?
maxReachableDepartures: 5,          // How many reachable departures should be shown?
customLineStyles: "hafas", // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false          // Display only the line number instead of the complete name, i. e. "11" instead of "STR 1
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

Veldrovive · Nov 4, 2018, 11:23 PM

It shouldn’t be necessary to have quotes around everything. Does it error when you just use this?

{
    module: “weatherforecast”,
    position: “bottom_center”,
    pages: {main: “bottom_right”},
    config: {
        locationID: “REMOVED”,
        appid: “REMOVED”
    }
},

Also, I have implemented the method for setting up pages as I described above alongside the other method. The readme will be updated with full instructions on how it works. I will commit the changes to the repository soon.