• 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.

Proper way to have module loading screen

Scheduled Pinned Locked Moved Unsolved Troubleshooting
8 Posts 2 Posters 1.8k Views 2 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.
  • I Offline
    isaac2004 @sdetweil
    last edited by Jun 12, 2019, 6:43 PM

    @sdetweil how do you check it is ready? Is there a property to check?

    S 1 Reply Last reply Jun 12, 2019, 8:16 PM Reply Quote 0
    • S Offline
      sdetweil @isaac2004
      last edited by sdetweil Jun 12, 2019, 8:19 PM Jun 12, 2019, 8:16 PM

      @isaac2004 that is up to the module design. You get new data from somewhere. Your node helper, or some http request. Once u have that new data, you call this.updateDom() to tell mm that u have new content, and it calls getDom() to get the new html.

      In getDom() you check YOUR state to determine which html to generate.

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      I 1 Reply Last reply Jun 13, 2019, 1:58 PM Reply Quote 0
      • I Offline
        isaac2004 @sdetweil
        last edited by Jun 13, 2019, 1:58 PM

        @sdetweil eh playing more with this, I might have a limitation. I am using the Google Maps Api to load a map of a place I provide via voice. All is working fine, but there is delay in loading all the tiles. I have setup opacity and all that, but I would like to add a loading message that notifies of a command being input. The issue with updating the dom is that the event listener that I use to show the map once the tiles loaded needs the dom, so I cannot have a basically empty dom. What I really need is to be able to have 2 divs in my module, one that is the map, the other that is the loading div and hide/show accordingly. I tried that, the dom gets updated, but the UI does not change. Any thoughts?

        S 1 Reply Last reply Jun 13, 2019, 2:55 PM Reply Quote 0
        • S Offline
          sdetweil @isaac2004
          last edited by Jun 13, 2019, 2:55 PM

          @isaac2004 this is probably a side effect of the updateDom/getDom cycle.

          are you doing the changes directly to the dom when the map has loaded?
          or using updateDom() to signal? if using updateDom() to signal, there is a timing bug,
          make sure to have some delay value, like updateDom(10). else there is a compare race condition.

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          I 1 Reply Last reply Jun 13, 2019, 3:05 PM Reply Quote 0
          • I Offline
            isaac2004 @sdetweil
            last edited by Jun 13, 2019, 3:05 PM

            @sdetweil so the map loads and the tileloaded event triggers on the map object. At that time, I set the class of the div to something visible. I have not figured out a way to have multiple divs in my module container and flip visibility from that event, which is what I need to do. All this is done after updateDom() and getDom() have already fired

            S 1 Reply Last reply Jun 13, 2019, 5:27 PM Reply Quote 0
            • S Offline
              sdetweil @isaac2004
              last edited by Jun 13, 2019, 5:27 PM

              @isaac2004 said in Proper way to have module loading screen:

              I have not figured out a way to have multiple divs in my module container and flip visibility from that event

              what is the problem?

              when u start to load the map , it is hidden and the loading div is shown.

              then in your tileloaded event trigger, you would document.getElementByID(the loading div) and hide it,
              then show the tile div…

              I hide/show two different images directly without problem and another design is to have two divs and toggle them

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              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