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.9k 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
      last edited by

      I have a module that takes time to load and update the dom, so there is a delay. I want to add a loading notification somehow to my mirror so I know the command was submitted. I tried to add a loading div to the dom wrapper, but got nowhere. Does anyone have a good example of this?

      S 1 Reply Last reply Reply Quote 0
      • 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