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

Need some help with a carousel like function

Scheduled Pinned Locked Moved Development
3 Posts 2 Posters 415 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.
  • M Offline
    mumblebaj Module Developer
    last edited by May 17, 2022, 3:05 PM

    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

    S 1 Reply Last reply May 17, 2022, 3:16 PM Reply Quote 0
    • S Away
      sdetweil @mumblebaj
      last edited by sdetweil May 17, 2022, 3:30 PM May 17, 2022, 3:16 PM

      @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

      M 1 Reply Last reply May 17, 2022, 3:18 PM Reply Quote 0
      • M Offline
        mumblebaj Module Developer @sdetweil
        last edited by May 17, 2022, 3:18 PM

        @sdetweil Thanks Sam. Will give that a go.

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

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        1 / 1
        • First post
          3/3
          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