Dynamic Images not reloading

Using JavaScript with Hype
1

Hi,

I am using an external server to allow guests to take pictures in a museum on their phone and the photo will appear inside my Tumult media folder and re-write over the past 5 images. This is working fine.

I have a JS to catch these files.

var imgcontainer1 = hypeDocument.getElementById("IMG1");
var imgcontainer2 = hypeDocument.getElementById("IMG2");
var imgcontainer3 = hypeDocument.getElementById("IMG3");
var imgcontainer4 = hypeDocument.getElementById("IMG4");
var imgcontainer5 = hypeDocument.getElementById("IMG5");

hypeDocument.setElementProperty(imgcontainer1, "background-image", "${resourcesFolderName}/media/img0_2x.jpg");
hypeDocument.setElementProperty(imgcontainer2, "background-image", "${resourcesFolderName}/media/img1_2x.jpg");
hypeDocument.setElementProperty(imgcontainer3, "background-image", "${resourcesFolderName}/media/img2_2x.jpg");
hypeDocument.setElementProperty(imgcontainer4, "background-image", "${resourcesFolderName}/media/img3_2x.jpg");
hypeDocument.setElementProperty(imgcontainer5, "background-image", "${resourcesFolderName}/media/img4_2x.jpg");

forceImgReload("${resourcesFolderName}/media/img0_2x.jpg")
forceImgReload("${resourcesFolderName}/media/img1_2x.jpg")
forceImgReload("${resourcesFolderName}/media/img2_2x.jpg")
forceImgReload("${resourcesFolderName}/media/img3_2x.jpg")
forceImgReload("${resourcesFolderName}/media/img4_2x.jpg")

I am running the JS on scene load and then running it from the timeline every 10 seconds.

The images are not updating.

Step one would be to get these images to reload.

Step two would be to have an event listener to be able to have an action when a new image is added to the server. Looking for any advice on how to handle this.

2

Can you share an example of what you have?

The variable is: ${resourcesFolderName}
So make sure that is the same for each entry. The $ is important.

3

Thank you. Yes I am using the $ and the photos are loading when the page reloading the html.

I need a way for the photos to refresh inside the HTML.

Photo exchange testing.zip (854.1 KB)

4

UPDATE.

I have managed to get the photos to refresh, but upon refresh, if its the same images it flashes.

Attached all files.

var imgcontainer1 = hypeDocument.getElementById("IMG1");
var imgcontainer2 = hypeDocument.getElementById("IMG2");
var imgcontainer3 = hypeDocument.getElementById("IMG3");
var imgcontainer4 = hypeDocument.getElementById("IMG4");
var imgcontainer5 = hypeDocument.getElementById("IMG5");
var currentTime = new Date().getTime();
hypeDocument.setElementProperty(imgcontainer1, "background-image", "${resourcesFolderName}/media/img1.jpg?" + currentTime);
hypeDocument.setElementProperty(imgcontainer2, "background-image", "${resourcesFolderName}/media/img2.jpg?" + currentTime);
hypeDocument.setElementProperty(imgcontainer3, "background-image", "${resourcesFolderName}/media/img3.jpg?" + currentTime);
hypeDocument.setElementProperty(imgcontainer4, "background-image", "${resourcesFolderName}/media/img4.jpg?" + currentTime);
hypeDocument.setElementProperty(imgcontainer5, "background-image", "${resourcesFolderName}/media/img5.jpg?" + currentTime);

Photo exchange testing.zip (654.3 KB)

5

setting a new background-image might “flash”. there’s a load happening …
could be better, if you preload the file … perhaps even working with a shadowdom-like approach …

a pragmatic and safe workaround would be to work with two images above each other and in sync (a group …). you load the new image for the element behind and then switch it to be in front … and so on.

… or just a slight animation when switching the image … may look fine and pays attention …