GIF update from URL with MMM-EyeCandy

Mykle1

Thanks ninja. I was a little tied up last night with yesterday’s Nor’Easter slamming NYC late into the evening. If you don’t mind, I’ll just incorporate that into the module when I get home from work. :-)

Peace!

Mykle1

@ninjabreadman

Thanks again but the problem still exists. Let me explain what I’ve done so far.

Added your setInterval(function().
Tried to seed the url of the .gif file with a timestamp but that was rejected with a 404 error.
Added a timestamp div/tag so I could check if the module was actually updating. It is.

This url is not refreshing upon updateDom but the timestamp is.
https://icons.wxug.com/data/weather-maps/radar/united-states/united-states-current-radar-animation.gif

I’m lost. :-/

ninjabreadman

@Mykle1 How did you seed the url with a timestamp? When I visit https://icons.wxug.com/data/weather-maps/radar/united-states/united-states-current-radar-animation.gif?1521767776, I get the image returned (not a 404).

Mykle1

@ninjabreadman

Like this, because I need the seed to change. Feel free to tell me what I’m doing wrong. Hehe :-)

var getTimeStamp = new Date().getTime();
img.src = "https://icons.wxug.com/data/weather-maps/radar/united-states/united-states-current-radar-animation.gif&seed=" + getTimeStamp;
pic.appendChild(img);
wrapper.appendChild(pic);

ninjabreadman

@Mykle1 Yep, just needs to be a ? before the first parameter. Anything after gets appended with an &, e.g. https://icons.wxug.com/data/weather-maps/radar/united-states/united-states-current-radar-animation.gif?seed=1521767776&otherseed=4846528&page=2.

Making your code the following:

... // img creation, etc
var getTimeStamp = new Date().getTime();
img.src = "https://icons.wxug.com/data/weather-maps/radar/united-states/united-states-current-radar-animation.gif?seed=" + getTimeStamp;
pic.appendChild(img);
wrapper.appendChild(pic);

Mykle1

@ninjabreadman said in GIF update from URL with MMM-EyeCandy:

Making your code the following:

That did the trick. The .gif file is refreshing to reflect the new data when it changes.

Thanks for the lesson. I do appreciate the help.

Peace!

Mykle1

@JRWJR

I will post the update on github shortly. Thanks to our friend, @ninjabreadman, the module now works as it should.

EDIT:

A git pull in the /MagicMirror/modules/MMM-EyeCandy folder will fix you up. Please take note of the changes to the config.js entry. Also, please take into account that the url you gave only updates itself about every 15 minutes.

JRWJR

Made the changes and did some testing this AM with no results.

-Was able to pull update and verify changes in EyeCandy.js were reflected.
-Updated config.js to reflect the example as well.
-Tracked my radar url for time stamp over time for change and no results.

See some commented code, do I need to uncomment as test?

Mykle1

@JRWJR said in GIF update from URL with MMM-EyeCandy:

Made the changes and did some testing this AM with no results.

WTH?

I’m testing it right now. I will report shortly

Mykle1

@JRWJR

Umm, it’s working fine here. The radar from your url has updated twice in the last 42 minutes and the module reflects those changes.

The update interval for the module is now 2 minutes but you won’t see changes to your radar url for 15 minute periods. That’s the url, not the module. Is that what you are talking about?

JRWJR

@Mykle1 Once issue pm2 restart mm or reboot, it will download\load gif from url and play only that loop.

I am going to isolate and maybe move to a new MM2 load to test. Will report back.

Mykle1

@JRWJR said in GIF update from URL with MMM-EyeCandy:

Will report back.

Ok, but my test has been running for over 3 hours now and the module is working as expected. Have you changed anything in the module files?

Mykle1

@ninjabreadman

I just used your solution in another module I am playing with. My thanks again.

Peace!

JRWJR

@Mykle1 Works great! I have no clue what the conflict is but will finish out my build and see if anything crops up. Thanks!

I now have a great weather radar live feed!

Mykle1

@JRWJR

That’s good news. Have fun! :-)

JRWJR

FYI… I totally rebuilt the MM and test the EyeCandy module as reported and the update worked fine.

After a completed my full build, it would do an initial load of GIF but then would not update.

I also have Google traffic modules not working as previous and think maybe there is a conflict.

I did briefly isolate in the config file, just EyeCandy and the update issue persisted.

I am going to try and take out modules from folder a few at a time to see until I can get an RCA.

Just wanted to give you an update to the reproduced issue in my build.

JRWJR

I am greedy. I want what I should not ask.

It is updating just fine.

What is not updating is when I use multiple modules by copy folder, rename folder\js file and module name inside. I even attempted to change some of the vars to emulate a new module to no success.

Would like to have 3 gif maps in cycle for City, State\Regional and National weather radar.

Have a similar problem with how to scale MMM-GoogleMapsTraffic, but that is a whole more complex module it seams.

At least I can work with one and maybe schedule them to work when there is an interest in that level of radar detail.

majdzik84

@ninjabreadman Could you please explain to the novice where to insert the code?

... // img creation, etc
var getTimeStamp = new Date().getTime();
img.src = "https://icons.wxug.com/data/weather-maps/radar/united-states/united-states-current-radar-animation.gif?seed=" + getTimeStamp;
pic.appendChild(img);
wrapper.appendChild(pic);

in which file?
I want the camera snapshot to have a time stamp because without it the same photo is still there and I want to use it in the alert module

You wrote in a different topic

@chef The POST request isn’t sending it an image, it’s sending the URL to the image (e.g. http://192.168.2.18:9920/security/values/2). The problem is, it already has a cached copy of that image. I suggest you append a timestamp to trick electron into re-fetching the same image/resource.

You want to pass it a URL-encoded value, so use %3F as ? and just append your timestamp, like so:

http://192.168.2.48:8080/api/v1/modules/alert/show_ALERT?timer=10500&imageUrl=http://192.168.2.18:9920/security/values/2%3F
{INSERT TIMESTAMP HERE}&imageHeight=220px

I will be grateful for any help because I have been fighting for several hours.

sdetweil

@majdzik84 wherever u build the url to your photo, the key is to pass some changing value, so the cache will get the new unique data.

the trick, is to pass a parameter to the server as part of the url, but the server is not expecting any parameters, and will ignore them

parameters on a url come after the ?
so newurl=
“old_url?fake_parm_name=”+millisecond_timestamp

moment().valueOf() will return the always unique millisecond_timestamp value

the name of the parm doesn’t matter as the server of the image is not expecting it, and the caching check is simple. is the url the SAME as one we already have data for

no, get new data

majdzik84

parameters on a url come after the ?
so newurl=
“old_url?fake_parm_name=”+millisecond_timestamp

moment().valueOf() will return the always unique millisecond_timestamp value

Can you tell me exactly what I need to do to get it? I understand how this should work, but I can’t do it

http://192.168.2.48:8080/api/v1/modules/alert/show_ALERT?timer=10500&imageUrl=http://192.168.2.18:9920/security/values/2%3F
{INSERT TIMESTAMP HERE}&imageHeight=220px

{INSERT TIMESTAMP HERE} - What should the variable I type {…} look like