I am using compliments module and Widget module(MMM-Widget) together on the same screen. Compliments module basically refreshes every 30 sec. once 30 sec cycle ends(updateInterval), my module widget gets blank :frowning_face:

Here is the widget module that I’m using. (this is the out of the box one that’s provided, I didn’t modify anything here. I changed the references in config.js file only).

/* Magic Mirror
* Module: MMM-Widget
*
* By eouia
*/

const DefaultWidgetFormat = {
  url: "",
  position: "top_left",
  width: "200px",
  height: "200px",
  backgroundColor: "#000"
}


Module.register("MMM-Widget",{
  defaults: {
    widgets: []
  },

  start: function() {
    this.sendSocketNotification("INIT", this.config)
  },

  notificationReceived: function(noti, payload, sender) {
    if (noti == "DOM_OBJECTS_CREATED") {
      this.sendSocketNotification("START")
    }
  },

  socketNotificationReceived: function(noti, payload) {
    if (noti == "READY") {
      this.loadWidgets()
    }
  },


  loadWidgets: function() {
    var widgets = this.config.widgets
    for (i in widgets){
      var widget = Object.assign({}, DefaultWidgetFormat, widgets[i])

      var iFrame = document.createElement("iframe")
      iFrame.id = "WIDGET_" + i
      iFrame.className = "widget_item"
      iFrame.style.width = widget.width
      iFrame.style.height = widget.height
      iFrame.style.border = "none"
      iFrame.style.display = "block"
      iFrame.style.overflow = "hidden"
      iFrame.style.backgroundColor = widget.backgroundColor
      iFrame.scrolling = "no"
      iFrame.src = "/widget/" + i
      var position = "." + widget.position.replace("_", ".") + " > .container"
      var regionContainer = document.querySelector(position)
      regionContainer.appendChild(iFrame)
      if (regionContainer.style.display == "none") {
        regionContainer.style.display = "block"
      }
    }
  },

  suspend: function() {
    var doms = document.getElementsByClassName("widget_item")
    if (doms.length > 0) {
      for (let dom of doms) {
        dom.style.display = "none"
      }
    }
  },

  resume: function() {
    var doms = document.getElementsByClassName("widget_item")
    if (doms.length > 0) {
      for (let dom of doms) {
        dom.style.display = "block"
      }
    }
  }
})

the compliments module that I’m using is also one that is provided out of the box.

Here is my config file.

modules: [

		{
			module: "compliments",
			position: "top_center"
		},

		{
			module: "MMM-Widget",
			config: {
				widgets: [

					{
						html: `
								<a class="twitter-timeline" href="https://twitter.com/adidas?ref_src=twsrc%5Etfw" data-aria-polite="assertive">Tweets by Salesforce</a> 
								<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
				`,
						position: "top_left",
						width: "400px",
						height: "500px",
					},

					{
						html: `
								<!-- TradingView Widget BEGIN -->
		<div class="tradingview-widget-container" >
		  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
		  {
		  "symbol": "NYSE:CRM",
		  "width": "100%",
		  "colorTheme": "light",
		  "isTransparent": false,
		  "locale": "en"
		}
		  </script>
		</div>
		<!-- TradingView Widget END -->
								`,
						position: "bottom_left",
						width: "400px",
						height: "111px",
						backgroundColor: "#FFF"
					},
				]
			}
		},

please let me know on how can I fix this, this is very confusing.

Also need some help on auto refreshing this MMM-Widget module for every 30 seconds to show latest feed.

Thanks,
Sunny