MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

iFrame vs GIF



  • I’m lost, please help…I’ve tried iFrame, iFrame-reload, iFrame-reload-ping, but nothing works. I would like to have on my mirror actual version of image located here - it’s animated GIF with radar measurement of clouds/rain in my country. The image is refreshed on the web every 10 mins I guess. and now the problem:
    iFrame - show the image, but there is no way for me to refresh (except restart MM)
    iFrameReload, iFrameReload-ping - doesn’t load image at all

    any idea?
    Thanks, Zdeněk


  • Module Developer

    @zdenek
    I think that problem is caused by image cache.
    For performance, usual browser(and server) uses cache-control, so, your gif image would be cached.
    The easy solution will be change your URL slightly, like this;

    http://portal.chmi.cz/files/portal/docs/meteo/rad/mobile/ra6_30min.gif?SOME_RANDOM_SEED_VALUES
    

    But all of iFrame modules are not supported this feature.


  • Module Developer

    @zdenek
    I think MMM-Widget could solve this problem.
    Install that module and adjust config like this;

    {
              //disabled:true,
              module: "MMM-Widget",
              config: {
                widgets: [
                  {
                    position:"top_left",
                    html:`
                    < img src="" id="IMG" >
                    < script >
                    var draw = function(img) {
                      img.src = "http://portal.chmi.cz/files/portal/docs/meteo/rad/mobile/ra6_30min.gif?" + Date.now()
                    }
                    var img = document.getElementById("IMG")
                    draw(img)
                    setInterval(function() {
                      draw(img)
                    }, 1000 * 60 * 10) // will be refreshed every 60*10 secs.
                    < /script >
                    `,
                    width:"200px",
                    height:"200px"
                  }
                ]
              }
            },
    

    (Remove space around side of < and >)



  • @sean wow, thanks. That’s perfect. Just one point - I’ve it in top_center segment and the image is alligned to the left of that column. how to align it to center?

    I had no idea, how it works, but I guess via this modul is possible to get every data from every site, right? So, If I’ll need to get from here the last table on the bottom, is there way, how to do it?

    thanks, Zdeněk