Refresh Images in Matrix CSS

Community Usage questions
1

I have a Matrix of buttons in which I set the background images of the buttons in the CSS.

I've written I a module which gets a refreshed set of newer images.

How do I get the images to refresh in the Matrix?

.widget {font-size: 0;
background-size: cover;

}

JS{

var css = ""
for (var i=1; i<=36; i++) {
css += .widget:nth-child(${i}) { background-image: url("/Thumbnails/10-${i}.png"); }
}
return css

}

2

Appending a timestam(ish) query to the image url and increment it should force the images to be redownloaded:

// matrix.css (excerpt)
css += `url("/Thumbnails/10-${i}.png?${OSC{/timestamp, 0, false}}"`

// custom module (when images are refreshed)
receive('/timestamp', Date.now())

Edit: updated code

4

Hi this doesn't work. Not sure what I'm doing wrong.

The images stop displaying. I suspect it's the quesystring because when I add a very simple parameter I get the same problem - background-image: url("/Thumbnails/10-${i}.png?t=test");

I remove the querystring completely and the images display.

5

Sorry try with

url("/Thumbnails/10-${i}.png?${OSC{/timestamp, 0, false}}

instead, it seems I've only coded the server side for key-less numeric timestamps.

Edit: updated code

6

I'm still getting the same thing. Am I supposed to create a control with a timestamp address perhaps?

7

I'm getting the thumbnails from the file system. Perhaps embedding the timestamp in the name might work? I'll give that a go.

8

Am I supposed to create a control with a timestamp address perhaps?

Sending an updated time value from the custom module to the /timestamp address as written above should suffice. OSC{/timestamp} creates an osc listener on that address, it might be better to pass a default value to it though: OSC{/timestamp, 0}

just in case check that the matrix widget doesn't have any preArgs set (osc listeners inherit them by default) or use the syntax' third argument to ignore them: OSC{/timestamp, 0, false}

9

OK Seems to be working now. Thanks very much!

JS{

var css = ""
for (var i=1; i<=36; i++) {
css += .widget:nth-child(${i}) { background-image: url("/Thumbnails/10-${i}.png?${OSC{/timestamp}}"); }
}
return css

}