MagicMirror Forum

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

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

    Development
    2
    5
    3187
    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
      matthewj last edited by

      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
      • Snille
        Snille Module Developer last edited by Snille

        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
          matthewj last edited by

          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
            matthewj last edited by

            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
            • Snille
              Snille Module Developer last edited by

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