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.

    Need some help with a carousel like function

    Scheduled Pinned Locked Moved Development
    3 Posts 2 Posters 519 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.
    • mumblebajM Online
      mumblebaj Module Developer
      last edited by

      Hey guys.

      I have a question for fellow module devs out there.

      I have 3 data sources which I want to rotate to the Dom after a set period of time. I.e. have the data displayed from the first source for say 2 minutes then rotate and display the data from the second data set etc. Right now I have a simple Dom object

       getDom: function() {
      const wrapper = document.createElement("div");
              if(this.apiData) {
      
                  const word = document.createElement("div");
                  word.innerHTML = this.apiData[0].word
                  word.className = "bold large"
                  wrapper.appendChild(word);
      
                  const translation = document.createElement("div")
                  translation.innerHTML = this.apiData[0].translation
                  translation.className = "bright medium"
                  wrapper.appendChild(translation);
      
                  if(this.config.showExamples) {
                      const list = document.createElement('ol')
                      list.className = "small"
      
                      const listItem = document.createElement('li')
      
                      const wr = document.createElement('div')
                      wr.innerHTML = this.apiData[0].examples.wordex
                      listItem.appendChild(wr)
      
                      if(this.config.showExampleTranslations) {
                          const we = document.createElement('div')
                          we.innerHTML = this.apiData[0].examples.wordextr
                          listItem.appendChild(we)
      
                      }
                      list.appendChild(listItem)
      
                      wrapper.appendChild(list)
                  }
              } else {
                  wrapper.innerHTML = "Loading..."
              }
              return wrapper
          }
      

      I want to swap out this.apiData at a set interval/ Any suggestions welcome.

      Check out my modules at: https://github.com/mumblebaj?tab=repositories
      Check my blog-post: https://mumblebaj.xyz/

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

        @mumblebaj ok…

        so, you have the other source info?

        start an interval timer

        setInterval(routine, time_in_ms_til_next_routine_invocation)

        function routine(){
           // whatever logic to decide
          // change the pointer of the data
          this.apiData = data_to_show_now
          // tell MM content has changed
          this.updateDom()
        }
        

        make sure u stop the timer on suspend()
        and restart the timer on resume()

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        mumblebajM 1 Reply Last reply Reply Quote 0
        • mumblebajM Online
          mumblebaj Module Developer @sdetweil
          last edited by

          @sdetweil Thanks Sam. Will give that a go.

          Check out my modules at: https://github.com/mumblebaj?tab=repositories
          Check my blog-post: https://mumblebaj.xyz/

          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