How to trigger refresh of media tile

[simon]

I just created media tiles for cover art on each of my channels in my audio system.

Each JPG is stored locally and addressable through the web, example : http://mydomain.com/CHA3_image.jpg (same for CHA1 - 6)

Every time the artwork is updated I write the JPG file locally with the same filename.

So I am trying to figure out how to trigger the media tile to refresh when this happens.

I was looking at this thread but I am not sure this will do it for me.

Trigger a media tile update

Longer answer here than it should be. I wrote a Fully Kiosk Browser DH some time ago that works (or worked) on the SmartThings Classic application and would display in the ‘carouselTile’. With the changes on that platform, I ported it over to Hubitat. It is a little different than other FKB handlers - I inject JavaScript into the solution and the FKB device will become an active motion sensor, grab an image and send it back to Hubitat/SmartThings. With Hubitat the image is actually lost, with …

I did see a feature request for triggering changes through rules for a media tile. So I voted on that. But is there anyway to accomplish this now? Thanks.

[Bloodtick_Jones]

Are you using Hubitat? This DTH might help you.

[RELEASE] Virtual SharpTools Image Tile device driver

If you can get it the image up using this, I can help you configure it to auto update.

[simon]

Thanks for help here. I installed the driver, added a device in Hubitat, got it added to a dashboard in sharptools.

Then I started to play around but got a little lost.

I started by adding the path to the image - http://themasons.net:86/images/audio_artwork/CHA3_CoverArt.jpg - to the image when switch is on and when switch is off. Changed layout to Album Art Tile.

All I got was the headphones icon. If you put the image address into a browser the artwork comes back fine. So wondering what I need to do from here? Thanks

[Bloodtick_Jones]

Try a configuration like this (note I put “blank” in the On). To toggle the update you would just need to select on with webCoRE or RM (or some other external trigger).

[simon]

Thanks, I tried this out tonight. It got me almost there. Everything worked fine when I was testing on my desktop - using Safari on the Mac. However, on my touchscreens running Fully Kiosk I couldn’t get the image to update unless I change pages. I took a quick look at the options in fully but none of the cache options (that I found) solved this. I am sure that there is an option that I am missing in the settings. Any thoughts? Thanks.

[Bloodtick_Jones]

Can you send the configuration screen shot (similar to what I suggested) and what are you using to ‘trigger’ the change?

I did a quick test on a Fire HD 8 with FKB 1.43.1 and the image updates when toggled.

[simon]

Thanks for the help.

I am using Fully Kiosk 1.43-fire, and 1.43.1. Both are doing the same thing. There are literally 500 switches in Fully Kiosk so it’s quite possible that I have the wrong switch set?

I am triggering the change remotely through my connection to homeseer - which is where the images are being created. So upon image write, click ON button in Hubitat device. However, I have also tried manually pushing the ON button in hubitat and same behavior.

Here are a couple of screen shots:

[josh]

Does it work in a normal browser on a PC? If not, you should be able to open the browser’s developer tools and see if there are any error messages in the Console tab or Network tab. For example, mixed content (HTTP on an HTTPS page) is blocked on some modern browsers.

Some of the Fully Kiosk Versions may have a setting for determining how to handle mixed content. FKB Settings > Advanced Web Settings > Mixed Content Mode. Setting this to ‘Always Allow Mixed Content’ should allow HTTP images on an HTTPS page.

[Bloodtick_Jones]

Here is my advanced settings, I didn’t do anything special…hopefully.

Maybe try this:

(1) Disable the “Enable Switch To act like Momentary button” and save. Then (2) select “ON”, wait until you see the headphones in the tile (since ‘blank’ is not something it expects and you should see ‘blank’ in trackData), then (3) select “OFF” and the image should appear after the trackData update.

If that works - we can slow down the momentary bounce.

[simon]

Thanks - I am testing in Safari in a Mac and it is working fine. So I loaded up Chrome and it didn’t work. I checked the console and got the following - not sure if that is helpful - but it is not displaying the image at all in chrome.

Perhaps I should store these files and serve them up with a https connection? I have never done that but I am sure I can figure it out?

I tried changing the setting as suggested in fully kiosk and it didn’t make any difference.

This is what chrome is telling me:

36.tiles-dashboard.5ef5e2ddef765b38c941.js:2 (index)Value(index)ValuegridWidth1280numberOfColumns6targetSize213.33333333333334Object
1yFRqUlicPJLeuWW1iPR:1 Mixed Content: The page at ‘SharpTools App’ was loaded over HTTPS, but requested an insecure element ‘http://themasons.net:86/images/audio_artwork/CHA3_CoverArt.jpg’. This request was automatically upgraded to HTTPS, For more information see Chromium Blog: No More Mixed Messages About HTTPS
1yFRqUlicPJLeuWW1iPR:1 Mixed Content: The page at ‘SharpTools App’ was loaded over HTTPS, but requested an insecure element ‘http://themasons.net:86/images/audio_artwork/CHA3_CoverArt.jpg’. This request was automatically upgraded to HTTPS, For more information see Chromium Blog: No More Mixed Messages About HTTPS

[Bloodtick_Jones]

@simon

Perhaps I should store these files and serve them up with a https connection? I have never done that but I am sure I can figure it out?

That would probably work and you would need to get a SSL cert to move to https. Doing the self-cert route might still be probablematic on Chrome since they often flag this as well.

On FKB, update your Settings → Advanced Web Settings to allow mixed Content (Josh thought this might work in a comment above).

[simon]

Sorry, I should have mentioned that. I did try the mixed content settings on Fully and it didn’t work. I also tried playing the cache settings - telling it to never cache in the hopes that it would load the picture each time. Didn’t work.

I am not using chrome - only using that for testing. In fully I don’t know what the issue is - I am assuming it is the mixed mode as reported by chrome.

So I just got my Synology NAS online using Apache. Certificate is installed. FQDN is setup. So tonight I hope to start testing with this in the hopes that it will work. Stay tuned and thanks for the help!

[simon]

ok, I got my https server up and running on my NAS - works fine - but image refresh still doesn’t work.
Below is a link to the file I am testing with if it gives any clues? Ironically the whole time I was writing the post the image was updating in Safari!

I set Mixed Content Mode to always allow mixed content, I also played around with the cache settings and it didn’t make any difference.

I am not getting any errors in Chrome console that I can see.

I saw that you are storing static images in Hubitat storage. Is there a way I could write these images to that location dynamically or some other location? Would that make a difference? Thanks.

[simon]

Sorry - here is the link: https: //themasons.synology.me/audio_artwork/CHA3_CoverArt.jpg

take the space out to get the link

[Bloodtick_Jones]

I was able to duplicate and it looks like no matter what you put for cache setting it is just doing it anyway.

Try adding/changing line 117 in the DTH code to:

    trackData["albumArtUrl"] = image + "?time=${new Date().getTime()}"

This will add a random string and should override any caching.

Pretty impressive the SSL work on your Synology BTW. I have been wanting to do that to mine, just haven’t.

Hope this helps - if it works, I will update the DTH with an option to add it.

[simon]

Holy cow, it works! Doing the happy dance here. Tested in Chrome and Fully. I am even getting fancy and inserting this animated GIF in the on position so it displays while the image is changing.

That was more for experimenting but it worked well so will I will be playing around with that. Now I need to update my homeseer scripts to write out all of the images to my NAS and we will be good to go.

The SSL on the NAS turned out to be a lot easier than I thought. After wasting $20 with my domain registrar to get a personal certificate I discovered that Synology offers a free service to do this. Check it out:

Install a Let's Encrypt SSL certificate on a Synology NAS - Mike Tabor

BTW, I made the change in line 110, not 117.

[Bloodtick_Jones]

Awesome, wow that was a drill. Not sure why I didn’t have the cache problem the first time around. I updated the DTH to have a preference to put the random=X in the URI. With this change, you really do not need to enable the ‘on’ since it is changing the image which will trigger the tile update. However, I do like your transition GIF! Curious to see how you go.

Here is the updated DTH.

And thanks - I do plan on using your instructions to get my Synology on a cert.

[simon]

@Bloodtick_Jones Been playing around with this and everything is working nicely. A question about the single tap and double tap. When I place images in the single tap and double tap and then single tap or double tap on the tile - for single tap I get a play transport icon but no image change; and double tap shows a pause transport icon and no image change. What is it supposed to do here? Thanks.

[Bloodtick_Jones]

@simon

What is it supposed to do here?

If you have the “Toggle Switch when Tile…” is enable you would get the images in the ‘on’ and ‘off’.

If that is ‘off’ and you have the “Enable image and text update…” enabled it should show the image that is showing in the “Image when Tile is single/double tapped” fields.

Honestly, I built this for an entirely different purpose to show real time images from a DTH and SmartApp for Fully Kiosk Browser that will update images captured real time when triggered like a motion sensor. These settings are there for anyone that needs them.

I do know the ‘double tap’ does not work on a iPhone, but didn’t chase it down why.

Post your preference configuration (hide the URLs) and I can troubleshoot if things are acting funny.

[simon]

Thanks - everything is working fine for my application. I am manually controlling the on/off state so I can include the interim image. I was just curious about the other options and the other controls - mute, play, pause, etc. I am working on developing tiles that (in addition to displaying the coverart) also include audio controls for each channel, etc.