• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Overlapping MMM-RAIN-MAP

Scheduled Pinned Locked Moved Unsolved Troubleshooting
8 Posts 3 Posters 1.0k Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    codac
    last edited by Nov 23, 2021, 4:11 PM

    On the Top-Right area I’m using the weather module, underneath that the MMM-RAIN-MAP module and underneath that the calendar module.

    Currently (as you can see on the screenshot) the MMM-RAIN-MAP module overlays the calendar module. Above the MMM-RAIN-MAP module you can see the red circled header/title of the calendar module, underneath that you see the rain map and underneath that you see the blackened calendar entries.

    The header/title of the calendar module is of course supposed to show up underneath the rain map module.

    Any idea about how to fix that?

    IMG_6906.jpg

    S 1 Reply Last reply Nov 23, 2021, 4:22 PM Reply Quote 0
    • S Away
      sdetweil @codac
      last edited by Nov 23, 2021, 4:22 PM

      @codac no idea, can u show the config.js for those modules… u can xxxx out any personal detail

      it would be nice to know if the elements are actually laid out that way

      open the developers window, ctrl-shift-i , and select the elements tab

      click the pointer in the top left of that new window and move it over the web content in the left pane til you are over the header and click

      the right window will show the web page content tree… can u screen shot that (may have to edit the image to remove stuff from the left pane)

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      C 1 Reply Last reply Nov 23, 2021, 4:52 PM Reply Quote 0
      • C Offline
        codac @sdetweil
        last edited by Nov 23, 2021, 4:52 PM

        @sdetweil please find my config.js below:

        		{
        			module: "MMM-RAIN-MAP",
        			position: "top_right",
        			config: {
        				animationSpeedMs: 400,
        			colorScheme: 4,
        				colorizeTime: false,
        				defaultZoomLevel: 11,
        				displayTime: true,
        				displayTimeline: true,
        				displayClockSymbol: false,
        				displayOnlyOnRain: false,
        				extraDelayLastFrameMs: 300,
        				extraDelayCurrentFrameMs: 3000,
        				markers: [
        					{ lat: XX.XXX, lng: X.XXX, color: "red" },
        				],
        				mapPositions: [
        					{ lat: XX.XXX, lng: XXXX, zoom: 11, loops: 1 },
        				],
        				mapUrl: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
        			//	mapUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        				mapHeight: "315px", // must be a pixel value (no percent)
        				mapWidth: "315px", // must be a pixel value (no percent)
        				maxHistoryFrames: 2,
        				maxForecastFrames: -1,
        				substitudeModules: [],
        				updateIntervalInSeconds: 300,
        			}
        		},
        

        Here are my Screenhots of the development mode:
        Rain Map
        mmm1.jpg

        Calendar
        mmm2.jpg

        S 1 Reply Last reply Nov 23, 2021, 5:00 PM Reply Quote 0
        • S Away
          sdetweil @codac
          last edited by Nov 23, 2021, 5:00 PM

          @codac thanks… I wanted to see calendar too,…

          also on the dev window, if u navigate to the header above rain, it will show where it is in the tree…

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • C Offline
            codac
            last edited by codac Nov 30, 2021, 4:00 PM Nov 30, 2021, 4:00 PM

            @sdetweil hope this is what you asked for:
            mmm-rain-map-html2.png
            mmm-rain-map-calendar.png

            S 1 Reply Last reply Nov 30, 2021, 8:57 PM Reply Quote 0
            • S Away
              sdetweil @codac
              last edited by Nov 30, 2021, 8:57 PM

              @codac looks like rainmap has defined its own spacing, which overlays the calendar below…

              I’d open an issue on rainmap github …

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              J 1 Reply Last reply Dec 2, 2021, 2:44 PM Reply Quote 0
              • J Offline
                Jalibu Module Developer @sdetweil
                last edited by Dec 2, 2021, 2:44 PM

                I’ll check that asap

                J 1 Reply Last reply Dec 2, 2021, 4:21 PM Reply Quote 0
                • J Offline
                  Jalibu Module Developer @Jalibu
                  last edited by Dec 2, 2021, 4:21 PM

                  @codac please check my comments on GitHub. I can’t reproduce that

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  1 / 1
                  • First post
                    7/8
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy