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

How to make updateDom actually refresh <img src...>?

Scheduled Pinned Locked Moved Solved Development
5 Posts 2 Posters 3.6k 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
    matthewj
    last edited by Jan 30, 2017, 2:22 AM

    Hello - hoping someone can help:

    I’ve created a module that displays some data graphed with Plotly. Plotly provides a link to a .png of the graph. I then include that link within the wrapper.innerHTML (e.g. "img src = “https://plot.ly/~myPlotlyAccount/myGraph.png”). That all works fine and the graph shows up great within the module. However, when the graph is updated with new data, and I call updateDom to reflect the newly updated graph, the image does not change (though the .png file at the plotly link has changed). I assume the mirror is pulling some kind of cached ‘myGraph.png’, but I can’t figure out how to prevent that. If I completely refresh the browser (or stop and restart the mirror) it will load the latest, updated myGraph.png.

    I’ve tried adding a timestamp to the img src address, but that doesn’t seem to help. Any other suggestions for how to make the dom actually refresh this particular image???

    Thanks for any help you can offer!!

    1 Reply Last reply Reply Quote 0
    • S Offline
      Snille Module Developer
      last edited by Snille Jan 30, 2017, 12:43 PM Jan 30, 2017, 12:40 PM

      Hi @matthewj
      You can use javascript to make the image URL unique all the time thought adding a “number” (in this case just a simple timecode). :)

      OBS: I had to add spaces after the " < " before the end " > ".
      Just remove them when you use it. :)

      Otherwise it would not show.

      < img id="graph" alt="" src="https://plot.ly/~myPlotlyAccount/myGraph.png" />
      
      < script language="javascript" type="text/javascript" >
        var d = new Date(); 
        document.getElementById("graph").src = "https://plot.ly/~myPlotlyAccount/myGraph.png=" + d.getTime();
      < /script >
      

      Good luck. :)

      If you cant find it, make it and share it!
      Modules: MMM-homeassistant-sensors, MMM-Modulebar, MMM-Profilepicture, MMM-Videoplayer

      1 Reply Last reply Reply Quote 1
      • M Offline
        matthewj
        last edited by Jan 31, 2017, 1:15 AM

        Hi @Snille ! Thanks very much for the help. Unfortunately, that solution isn’t working for some reason. I’d originally tried:

        var imagesource = ‘< img src=‘https://plot.ly/~myPlotlyAccount/myGraph.png#’ + newDate().getTime() + ’ />’;
        wrapper.innerHTML = imagesource;

        That didn’t work, so I tried your solution above (in case maybe executing the javascript within the wrapper HTML made some difference) - but it didn’t seem to matter. The module only displays the image as loaded at startup, even after it shows the updateDom(500) animation.

        Any other possible solutions?? Thanks again for the help!

        1 Reply Last reply Reply Quote 0
        • M Offline
          matthewj
          last edited by Feb 5, 2017, 2:44 AM

          I figured it out. Of course, I had included an errant ’ " ’ in the img string. Thanks again for focusing me in the right direction!

          1 Reply Last reply Reply Quote 1
          • S Offline
            Snille Module Developer
            last edited by Feb 5, 2017, 8:47 AM

            Oh, sorry, I completely forgot about this topic. Good that you solved it. :)

            If you cant find it, make it and share it!
            Modules: MMM-homeassistant-sensors, MMM-Modulebar, MMM-Profilepicture, MMM-Videoplayer

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