Display Problem with MMM-Pages

[rummens]

I see some major display problems when using Teslamate in combination with MMM-Pages. It seems to kill the complete orientation of the pages, combing all modules onto one pages. If I remove the Teslamate module from the config, everything works fine again. I triple checked my config file for any miss alignments and have put Teslamate on its own page.

Any idea why this happens or how to fix it? I am using the default config, except for MQTT options of course.

Thanks

[denverquane]

Hey sorry for my incredibly late reply! I'm a little out of my element for this issue; I don't use Pages, but I can go ahead and give it a try! I also haven't updated my Mirror in a long time, so it's certainly possible that could reveal more bugs...

Are you using the hybrid mode (table+graphic), or just the graphic mode? I didn't personally do any of the alignment code for the graphic (and CSS terrifies me), but I'd be willing to bet there's some fragility to some of the alignment code; weird that it would be affected for a module that jut wraps other modules though, from what I understand about MMM-Pages...

[rummens]

Hi @denverquane, no worries. I am just using the graphics. I didn’t have any time to properly debug this but will also give it a shot this weekend.

[olexs]

I don't use Pages myself either, but can check this out. I built the original layout for the graphic mode, and I'll fully admit it's not the cleanest piece of code, nor the most elegant HTML/CSS layout. Will test the combo later tonight.

Just in case, what other modules are you using with your Pages layout? It might be a conflict in combination with one of those and not Pages itself.

[rummens]

These are all modules + the default ones I use:

clone_module "https://github.com/mrVragec/MMM-mvgmunich" "mvgmunich"
clone_module "https://github.com/edward-shen/MMM-pages.git" "MMM-pages"
clone_module "https://github.com/edward-shen/MMM-page-indicator.git" "MMM-page-indicator"
clone_module "https://github.com/cbrooker/MMM-Todoist.git" "MMM-Todoist"
clone_module "https://github.com/basti0001/MMM-iHaveBeenThere" "MMM-iHaveBeenThere"
clone_module "https://github.com/CFenner/MMM-Sonos" "MMM-Sonos"
clone_module "https://github.com/Jopyth/MMM-Remote-Control.git" "MMM-Remote-Control"
clone_module "https://github.com/AgP42/MMM-SmartWebDisplay.git" "MMM-SmartWebDisplay"
clone_module "https://github.com/timdows/MMM-JsonTable" "MMM-JsonTable"
clone_module "https://github.com/denverquane/MMM-Teslamate.git" "MMM-Teslamate"

[olexs]

Ok, I found and fixed a small mistake in the layout. However, that's not causing the issue for me - running a test setup with MMM-pages, default modules and MMM-Teslamate works fine both before and after the "fix", with two pages switching as they should, with both Chrome and Firefox as renderers (Chrome should be equivalent to Electron).

You said you tried putting Teslamate on its own page, and that didn't work. Did you try disabling other modules altogether (commenting them out) and running the setup only with Teslamate and maybe default modules? Then adding your custom modules one-by-one would be a good way of finding the one that causes the conflict.

[rummens]

I will give that a shot tomorrow, haven’t tried that yet.

[rummens]

Hi @olexs ,

So I had a check, removing and adding other modules and I found a really weird behavior. The display problems seem to exist because of a clash with the clock module js. Once I remove the clock module the alignment looks okay, however there are still a few other problems. So I believe this more a bigger issue with the JS, here is why:

If clock and teslamate are enabled, I keep seeing these JS error on the console (about every second):

clock.js:120 Uncaught (in promise) TypeError: now.tz is not a function
    at Class.getDom (clock.js:120)
    at main.js:111
    at new Promise (<anonymous>)
    at updateDom (main.js:110)
    at Object.updateDom (main.js:542)
    at Class.updateDom (module.js:357)
    at notificationTimer (clock.js:63)

If calendar and teslamate are enabled, I keep seeing these JS error on the console (which causes it to fail loading events). As soon as I disable teslamate all events are loaded and displayed properly:

moment.min.js:1 Uncaught (in promise) TypeError: Cannot read property 'humanize' of undefined
    at M.mn.from (moment.min.js:1)
    at M.mn.fromNow (moment.min.js:1)
    at Class.getDom (calendar.js:354)
    at main.js:111
    at new Promise (<anonymous>)
    at updateDom (main.js:110)
    at Object.updateDom (main.js:542)
    at Class.updateDom (module.js:357)
    at Class.socketNotificationReceived (calendar.js:143)
    at module.js:243

Similar errors appear in the newsfeed module:

moment.min.js:1 Uncaught (in promise) TypeError: Cannot read property 'humanize' of undefined
    at M.mn.from (moment.min.js:1)
    at M.mn.fromNow (moment.min.js:1)
    at Class.getDom (newsfeed.js:117)
    at main.js:111
    at new Promise (<anonymous>)
    at updateDom (main.js:110)
    at Object.updateDom (main.js:542)
    at Class.updateDom (module.js:357)
    at Class.scheduleUpdateInterval (newsfeed.js:328)
    at Class.socketNotificationReceived (newsfeed.js:82)

I can't really explain these symptoms but I would guess that is has something to do with the getDom function or maybe its just a quote/bracket issue? I had a look through that function but can find anything obvious, except missing quotes here but that didn't fix the problem.

For reference my clock, calendar, newsfeed and teslamate config (copy pasted everything, so formatting might be off):

 {
      module: "clock",
      position: "top_left",
      config: {
                 timeFormat: 24,
                 timezone: "Europe/Berlin"
        }
 }, 
{
      module: "newsfeed",
      position: "bottom_bar",
      config: {
        feeds: [
          {
            title: "ZDF",
            url: "http://www.heute.de/zdfheute/rss"
          },
          {
            title: "ARD",
            url: "https://www.tagesschau.de/xml/rss2"
          },
          {
            title: "BBC",
            url: "http://feeds.bbci.co.uk/news/rss.xml?edition=int"
          }
        ],
        showSourceTitle: true,
        showPublishDate: true,
        broadcastNewsFeeds: true,
        broadcastNewsUpdates: true
      }
 },
{
       module: "calendar",
    position: "top_left",   // This can be any of the regions. Best results in left or right regions.
    config: {
        colored: false,
        coloredSymbolOnly: false,
        maximumNumberOfDays: 10,
        maximumEntries: 7,
        calendars: [
            {
                symbol: 'calendar-check',
                url: 'https://p68-calendars.icloud.com/holidays/de_de.ics',
            },
            {
                url: 'http://localhost:8080/modules/calendars/XXX.ics',
                symbol: 'calendar'
            },
            {
                url: 'http://localhost:8080/modules/calendars/home.ics',
                symbol: 'calendar',
                maximumEntries: 3,
            },
            {
                url: 'http://localhost:8080/modules/calendars/work.ics',
                symbol: 'plane'
            }
        ],
      },
{
      module: 'MMM-Teslamate',
      position: 'bottom_right',
      config: {
          mqttServer: {
              address: 'smart-home.fritz.box',  // Server address or IP address of the MQTT broker
              port: '1883'          // Port number if other than default (1883)
              //user: 'user',          // Leave out for no user
              //password: 'password',  // Leave out for no password
          },
          imperial: false, // use imperial units (false = Miles & F) or metric (true = Km & C)

          carID: '1', // defaults to '1'; only override if you have multiple Teslas and want to display 
                      // a specific car per instance of the module

          // set to true to enable both the graphic, and the additional stats 
          // (charge remaining, scheduled charge start, etc)
          hybridView: false,
          // size of the visible area
          sizeOptions: {
              // size of the icons + battery (above text)
              width: 450, // px, default: 450
              height: 203, // px, default: 203
              // the battery images itself
              batWitdh: 250, // px, default: 250
              batHeight: 75, // px, default: 75
          },
          carImageOptions: {
              model: "m3", // mx, ms (S pre-refresh), ? (S post-refresh)

              view: "STUD_3QTR", // STUD_SIDE works better for S/X

              // full list of option codes: https://tesla-api.timdorr.com/vehicle/optioncodes.
              // you need at least the color and the wheels. not all combos work.
              // also consult: https://teslaownersonline.com/threads/teslas-image-compositor.7089/
              options: "PPSW,PFP31,W38B,DV4W",

              // play with this until it looks about right.
              // tested values: 0 for m3/STUD_3QTR, 25 for ms/STUD_SIDE
              verticalOffset: 0,

              opacity: 0.5
          }
      }
    }

Happy to help debugging and fixing this rather interesting issue :-) Marcel

[olexs]

Hi @rummens, thanks for the analysis! I was sadly unable to reproduce the issue on my end, even with the exact same config. However, your errors logs are very helpful still: they show that the error appears to stem from the usage of moment.js. I have checked, and indeed MMM-Teslamate has included a version of moment.js, but it wasn't actually used. I removed the unused library include (and cleaned up some more dependencies in the module) - hopefully this might fix the issue for you, once the PR (#13) is merged.

[rummens]

This seemed to do the trick, I cloned your fork and everything works fine. Thank you very much :-)