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 2.1k 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.
    • S Offline
      sdetweil @isaac2004
      last edited by

      @isaac2004 everybody does this.

      Add text element to your getDom() by default, and replace w good content when it’s ready

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      I 1 Reply Last reply Reply Quote 0
      • I Offline
        isaac2004 @sdetweil
        last edited by

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

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @isaac2004
          last edited by sdetweil

          @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 Reply Quote 0
          • I Offline
            isaac2004 @sdetweil
            last edited by

            @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 Reply Quote 0
            • S Offline
              sdetweil @isaac2004
              last edited by

              @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 Reply Quote 0
              • I Offline
                isaac2004 @sdetweil
                last edited by

                @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 Reply Quote 0
                • S Offline
                  sdetweil @isaac2004
                  last edited by

                  @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
                  • First post
                    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