search

Veldrovive / MMM-Page-Selector

An easy way to set up and move between pages on a MagicMirror²
MIT License
35 stars 6 forks source link

Nothing loads if MMM-Page-Selector is enabled. #33

Closed 68267a closed 3 years ago

68267a commented 3 years ago

Config as simple as I can possibly get it, just shows a blank screen.

modules: [
  {
    module: "MMM-Page-Selector",
    position: "top_center",
    config: {
      defaultPage: "main",
      displayTitle: true,
      selectPageNotif: ["SELECT_PAGE"],
      incrementPageNotif: ["PAGE_UP"],
      decrementPageNotif: ["PAGE_DOWN"],
      persistentPages: true,
      debug: true,
      autoChange: {
        interval: 10
      }
    }
  },
  {
    module: "clock",
    pages: {"all": "top_left"}
    //position: "top_left"
  }
]

Works fine if I comment out the module and uncomment the position tag. Here's the console log, error doesn't appear until after the 10 second timer:

main.js:487 Initializing MagicMirror.
translator.js:129 Loading core translation file: translations/en.json
translator.js:154 Loading core translation fallback file: translations/en.json
loader.js:176 Load script: modules/MMM-Page-Selector//MMM-Page-Selector.js
module.js:505 Check MagicMirror version for module 'MMM-Page-Selector' - Minimum version:  2.1.0 - Current version: 2.13.0
module.js:507 Version is ok!
module.js:513 Module registered: MMM-Page-Selector
loader.js:148 Bootstrapping module: MMM-Page-Selector
loader.js:176 Load script: modules/MMM-Page-Selector/resources/numConvert.js
loader.js:153 Scripts loaded for: MMM-Page-Selector
loader.js:195 Load stylesheet: modules/MMM-Page-Selector/MMM-Page-Selector.css
loader.js:155 Styles loaded for: MMM-Page-Selector
loader.js:157 Translations loaded for: MMM-Page-Selector
loader.js:176 Load script: modules/default/clock//clock.js
module.js:513 Module registered: clock
loader.js:148 Bootstrapping module: clock
loader.js:176 Load script: vendor/node_modules/moment/min/moment-with-locales.js
loader.js:176 Load script: vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js
loader.js:176 Load script: vendor/node_modules/suncalc/suncalc.js
loader.js:153 Scripts loaded for: clock
loader.js:195 Load stylesheet: modules/default/clock/clock_styles.css
loader.js:155 Styles loaded for: clock
loader.js:157 Translations loaded for: clock
loader.js:195 Load stylesheet: css/custom.css
MMM-Page-Selector.js:45 Starting page change interval at 10 seconds
clock.js:46 Starting module: clock
main.js:508 All modules started!
module.js:199 clock is suspended.
module.js:199 MMM-Page-Selector is suspended.
MMM-Page-Selector.js:217 Uncaught TypeError: Cannot convert undefined or null to object
        at Function.keys (<anonymous>)
        at Class.changePage (MMM-Page-Selector.js:217)
        at MMM-Page-Selector.js:47
    changePage @ MMM-Page-Selector.js:217
    (anonymous) @ MMM-Page-Selector.js:47
    setInterval (async)
    startChangeInterval @ MMM-Page-Selector.js:46
    start @ MMM-Page-Selector.js:30
    startModules @ loader.js:52
    (anonymous) @ loader.js:38
    stylesheet.onload @ loader.js:202
    load (async)
    loadFile @ loader.js:200
    loadNextModule @ loader.js:36
    (anonymous) @ loader.js:29
    (anonymous) @ loader.js:123
    (anonymous) @ loader.js:159
    loadTranslations @ module.js:339
    (anonymous) @ loader.js:156
    loadNextDependency @ module.js:302
    (anonymous) @ module.js:299
    stylesheet.onload @ loader.js:202
    load (async)
    loadFile @ loader.js:200
    loadFile @ loader.js:260
    loadNextDependency @ module.js:297
    loadDependencies @ module.js:306
    loadStyles @ module.js:272
    (anonymous) @ loader.js:154
    loadNextDependency @ module.js:302
    (anonymous) @ module.js:299
    script.onload @ loader.js:182
    load (async)
    loadFile @ loader.js:180
    loadFile @ loader.js:253
    loadNextDependency @ module.js:297
    (anonymous) @ module.js:299
    script.onload @ loader.js:182
    load (async)
    loadFile @ loader.js:180
    loadFile @ loader.js:253
    loadNextDependency @ module.js:297
    (anonymous) @ module.js:299
    script.onload @ loader.js:182
    load (async)
    loadFile @ loader.js:180
    loadFile @ loader.js:253
    loadNextDependency @ module.js:297
    loadDependencies @ module.js:306
    loadScripts @ module.js:281
    bootstrapModule @ loader.js:152
    afterLoad @ loader.js:122
    (anonymous) @ loader.js:135
    script.onload @ loader.js:182
    load (async)
    loadFile @ loader.js:180
    loadModule @ loader.js:133
    loadNextModule @ loader.js:27
    (anonymous) @ loader.js:29
    (anonymous) @ loader.js:123
    (anonymous) @ loader.js:159
    loadTranslations @ module.js:339
    (anonymous) @ loader.js:156
    loadNextDependency @ module.js:302
    (anonymous) @ module.js:299
    stylesheet.onload @ loader.js:202
    load (async)
    loadFile @ loader.js:200
    loadFile @ loader.js:260
    loadNextDependency @ module.js:297
    loadDependencies @ module.js:306
    loadStyles @ module.js:272
    (anonymous) @ loader.js:154
    loadNextDependency @ module.js:302
    (anonymous) @ module.js:299
    script.onload @ loader.js:182
    load (async)
    loadFile @ loader.js:180
    loadFile @ loader.js:245
    loadNextDependency @ module.js:297
    loadDependencies @ module.js:306
    loadScripts @ module.js:281
    bootstrapModule @ loader.js:152
    afterLoad @ loader.js:122
    (anonymous) @ loader.js:135
    script.onload @ loader.js:182
    load (async)
    loadFile @ loader.js:180
    loadModule @ loader.js:133
    loadNextModule @ loader.js:27
    loadModules @ loader.js:43
    loadModules @ loader.js:223
    init @ main.js:493
    (anonymous) @ main.js:619

debug doesn't seem to do anything.

68267a commented 3 years ago

I used numbers 1 and 2 instead of main and pageTwo. It loaded with a title of 'undefined', but didn't actually rotate pages.

 modules started!
TypeError: str.toLowerCase is not a function
    at Class.titleCase (MMM-Page-Selector.js:347)
    at Class.getDom (MMM-Page-Selector.js:68)
    at main.js:114
    at new Promise (<anonymous>)
    at updateDom (main.js:113)
    at main.js:53
    at Array.forEach (<anonymous>)
    at createDomObjects (main.js:20)
    at Object.modulesStarted (main.js:511)
    at startModules (loader.js:56)
Promise.catch (async)
(anonymous) @ main.js:59
createDomObjects @ main.js:20
modulesStarted @ main.js:511
startModules @ loader.js:56
(anonymous) @ loader.js:38
stylesheet.onload @ loader.js:202
load (async)
loadFile @ loader.js:200
loadNextModule @ loader.js:36
(anonymous) @ loader.js:29
(anonymous) @ loader.js:123
(anonymous) @ loader.js:159
loadTranslations @ module.js:339
(anonymous) @ loader.js:156
loadNextDependency @ module.js:302
(anonymous) @ module.js:299
stylesheet.onload @ loader.js:202
load (async)
loadFile @ loader.js:200
loadFile @ loader.js:260
loadNextDependency @ module.js:297
loadDependencies @ module.js:306
loadStyles @ module.js:272
(anonymous) @ loader.js:154
loadNextDependency @ module.js:302
(anonymous) @ module.js:299
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadFile @ loader.js:245
loadNextDependency @ module.js:297
loadDependencies @ module.js:306
loadScripts @ module.js:281
bootstrapModule @ loader.js:152
afterLoad @ loader.js:122
(anonymous) @ loader.js:135
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadModule @ loader.js:133
loadNextModule @ loader.js:27
(anonymous) @ loader.js:29
(anonymous) @ loader.js:123
(anonymous) @ loader.js:159
loadTranslations @ module.js:339
(anonymous) @ loader.js:156
loadNextDependency @ module.js:302
(anonymous) @ module.js:299
stylesheet.onload @ loader.js:202
load (async)
loadFile @ loader.js:200
loadFile @ loader.js:260
loadNextDependency @ module.js:297
loadDependencies @ module.js:306
loadStyles @ module.js:272
(anonymous) @ loader.js:154
loadNextDependency @ module.js:302
(anonymous) @ module.js:299
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadFile @ loader.js:253
loadNextDependency @ module.js:297
(anonymous) @ module.js:299
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadFile @ loader.js:253
loadNextDependency @ module.js:297
(anonymous) @ module.js:299
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadFile @ loader.js:253
loadNextDependency @ module.js:297
loadDependencies @ module.js:306
loadScripts @ module.js:281
bootstrapModule @ loader.js:152
afterLoad @ loader.js:122
(anonymous) @ loader.js:135
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadModule @ loader.js:133
loadNextModule @ loader.js:27
loadModules @ loader.js:43
loadModules @ loader.js:223
init @ main.js:493
(anonymous) @ main.js:619
MMM-Page-Selector.js:347 Uncaught (in promise) TypeError: str.toLowerCase is not a function
    at Class.titleCase (MMM-Page-Selector.js:347)
    at Class.getDom (MMM-Page-Selector.js:68)
    at main.js:114
    at new Promise (<anonymous>)
    at updateDom (main.js:113)
    at main.js:53
    at Array.forEach (<anonymous>)
    at createDomObjects (main.js:20)
    at Object.modulesStarted (main.js:511)
    at startModules (loader.js:56)
titleCase @ MMM-Page-Selector.js:347
getDom @ MMM-Page-Selector.js:68
(anonymous) @ main.js:114
updateDom @ main.js:113
(anonymous) @ main.js:53
createDomObjects @ main.js:20
modulesStarted @ main.js:511
startModules @ loader.js:56
(anonymous) @ loader.js:38
stylesheet.onload @ loader.js:202
Promise.then (async)
createDomObjects @ main.js:64
modulesStarted @ main.js:511
startModules @ loader.js:56
(anonymous) @ loader.js:38
stylesheet.onload @ loader.js:202
load (async)
loadFile @ loader.js:200
loadNextModule @ loader.js:36
(anonymous) @ loader.js:29
(anonymous) @ loader.js:123
(anonymous) @ loader.js:159
loadTranslations @ module.js:339
(anonymous) @ loader.js:156
loadNextDependency @ module.js:302
(anonymous) @ module.js:299
stylesheet.onload @ loader.js:202
load (async)
loadFile @ loader.js:200
loadFile @ loader.js:260
loadNextDependency @ module.js:297
loadDependencies @ module.js:306
loadStyles @ module.js:272
(anonymous) @ loader.js:154
loadNextDependency @ module.js:302
(anonymous) @ module.js:299
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadFile @ loader.js:245
loadNextDependency @ module.js:297
loadDependencies @ module.js:306
loadScripts @ module.js:281
bootstrapModule @ loader.js:152
afterLoad @ loader.js:122
(anonymous) @ loader.js:135
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadModule @ loader.js:133
loadNextModule @ loader.js:27
(anonymous) @ loader.js:29
(anonymous) @ loader.js:123
(anonymous) @ loader.js:159
loadTranslations @ module.js:339
(anonymous) @ loader.js:156
loadNextDependency @ module.js:302
(anonymous) @ module.js:299
stylesheet.onload @ loader.js:202
load (async)
loadFile @ loader.js:200
loadFile @ loader.js:260
loadNextDependency @ module.js:297
loadDependencies @ module.js:306
loadStyles @ module.js:272
(anonymous) @ loader.js:154
loadNextDependency @ module.js:302
(anonymous) @ module.js:299
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadFile @ loader.js:253
loadNextDependency @ module.js:297
(anonymous) @ module.js:299
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadFile @ loader.js:253
loadNextDependency @ module.js:297
(anonymous) @ module.js:299
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadFile @ loader.js:253
loadNextDependency @ module.js:297
loadDependencies @ module.js:306
loadScripts @ module.js:281
bootstrapModule @ loader.js:152
afterLoad @ loader.js:122
(anonymous) @ loader.js:135
script.onload @ loader.js:182
load (async)
loadFile @ loader.js:180
loadModule @ loader.js:133
loadNextModule @ loader.js:27
loadModules @ loader.js:43
loadModules @ loader.js:223
init @ main.js:493
(anonymous) @ main.js:619
4MMM-Page-Selector.js:217 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Class.changePage (MMM-Page-Selector.js:217)
    at MMM-Page-Selector.js:47
68267a commented 3 years ago

I'm a sysadmin with some bash experience. I don't know anthing about javascript or git so I'm just posting what I find as I find it because the other page modules aren't as nice as this one.

In the debug function, replace console.log(message) with console.debug(message). Makes it easier to see in the log.

Veldrovive commented 3 years ago

Give me a bit to set up an environment for this. It's been a while since I worked with magic mirror so I don't remember exactly how the module works.

Are you using anything special like pm2 to run the mirror?

68267a commented 3 years ago

pretty sure the only thing I'm doing special is node serveronly and I'm streaming it to a chromecast.

Veldrovive commented 3 years ago

What hardware are you running the server on? I did a fresh install, copied your module config, and it worked perfectly.

The error you are having seems to imply the pages object is undefined. This could be because the only page you use if all which does not add a page to the pagelist. Setting defaultPage as you do should add a page, but I would suggest changing the line pages: {"all": "top_left"} to pages: {"main": "top_left"}.

68267a commented 3 years ago

It's a debian VM. I've used every combination of page number, string, quoted, unquoted, etc I can think of.

I'm trying to add a bunch of debugging but I don't know javascript well enough.

Veldrovive commented 3 years ago

I pushed a commit that should solve your initial problem. The page names have to be strings. Quoting or unquoting does not change how javascript represents the object so that wouldn't matter.

68267a commented 3 years ago

No change. Reinstalling from scratch.

Veldrovive commented 3 years ago

Did you get the exact same error? This one: Uncaught TypeError: Cannot convert undefined or null to object?

68267a commented 3 years ago

edit: that was unrelated. I already wiped the config. I'll update if I can't get it to work.

68267a commented 3 years ago

edit: mmpm doesn't install MM, just modules.

Veldrovive commented 3 years ago 
/* Magic Mirror Config Sample
 *
 * By Michael Teeuw https://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information on how you can configure this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
    address: "localhost",   // Address to listen on, can be:
                            // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
                            // - another specific IPv4/6 to listen on a specific interface
                            // - "0.0.0.0", "::" to listen on any interface
                            // Default, when address config is left out or empty, is "localhost"
    port: 8080,
    basePath: "/",  // The URL path where MagicMirror is hosted. If you are using a Reverse proxy
                    // you must set the sub path here. basePath must end with a /
    ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],  // Set [] to allow all IP addresses
                                                            // or add a specific IPv4 of 192.168.1.5 :
                                                            // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
                                                            // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
                                                            // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

    useHttps: false,        // Support HTTPS or not, default "false" will use HTTP
    httpsPrivateKey: "",    // HTTPS private key path, only require when useHttps is true
    httpsCertificate: "",   // HTTPS Certificate path, only require when useHttps is true

    language: "en",
    logLevel: ["INFO", "LOG", "WARN", "ERROR"],
    timeFormat: 24,
    units: "metric",
    // serverOnly:  true/false/"local" ,
    // local for armv6l processors, default
    //   starts serveronly and then starts chrome browser
    // false, default for all NON-armv6l devices
    // true, force serveronly mode, because you want to.. no UI on this device

    modules: [
        {
          module: "MMM-Page-Selector",
          position: "top_center",
          config: {
            defaultPage: "main",
            displayTitle: true,
            selectPageNotif: ["SELECT_PAGE"],
            incrementPageNotif: ["PAGE_UP"],
            decrementPageNotif: ["PAGE_DOWN"],
            persistentPages: true,
            debug: true,
            autoChange: {
              interval: 10
            }
          }
        },
        {
          module: "clock",
          pages: {"all": "top_left"}
          //position: "top_left"
        }
      ]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
68267a commented 3 years ago

Confirmed, the install was bad.