A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
Read the statement by Michael Teeuw here.
Need some help with a carousel like function
-
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.
-
@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() -
@sdetweil Thanks Sam. Will give that a go.