MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Need some help with a carousel like function

    Development
    2
    3
    189
    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.
    • mumblebaj
      mumblebaj Project Sponsor 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.

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

        Create a working config
        How to add modules

        mumblebaj 1 Reply Last reply Reply Quote 0
        • mumblebaj
          mumblebaj Project Sponsor @sdetweil last edited by

          @sdetweil Thanks Sam. Will give that a go.

          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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy