[RELEASE] Image Cycle Tile, E.g. Weather Radar

[sburke781]

Glad you mentioned iFrameAdvanced, had forgotten about this, but will be nice addition to using this, will be similar to the way the BOM app works with the radar sliding up and down, freeing up screen real estate.

[sburke781]

Following conversation on the BOM weather driver thread, @rocketwiz requested and did the hard work of looking up options to scale an image to fit a dashboard tile:

[RELEASE] Australian Bureau of Meteorology Data - Radar Images Data File

OK done. From googling it, in line 59 of the image cycle driver I added -webkit-transform:scale(0.5); -moz-transform-scale(0.5); -moz-transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; as additional style parameters (in this case to scale the image to 50% while keeping it anchored in the top left corner). Would you mind having a look at this as an enhancement to the driver by adding the …

I will look at including this as an option / feature in the image cycle driver.

[rocketwiz]

Thanks Simon. The code works perfectly and the positioning of the final radar image can be fine tuned using standard CSS on the dashboard ("tile-primary"). I have not yet tried but I'm guessing that instead of scale() we could use scale X() and scaleY() to stretch/shrink the image a bit more in either axis for a better fit.

The only thing that can't probably be done unfortunately is the ability to get a full screen version of the radar on tapping the tile like we can with an image.

[sburke781]

Hmmm... I'm torn between specific requests and something that works for all.... Must be what it feels like to develop the HE platform I'm also wanting to work through what the best options are for scale given I have included a width and height settings already.... Trust me, a good problem to have.... Scale may be more useful....

The full screen option could be achieved with the advanced iframe setup you linked early on in this thread, allowing users to click on an image (iframe) and see a larger version if we want.

[rocketwiz]

No worries - I just put it out there.

Unfortunately the advanced iframe driver generates an additional button for the resizing (screen real estate is already precious when you're using a 7" Nest hub ). Anyway I'm just happy to have a proper weather radar instead of a static image!

[sburke781]

@rocketwiz

screen real estate is already precious when you're using a 7" Nest hub

Does this mean I can quote "works with Google Nest" if I implement this feature?

[rocketwiz]

@sburke781

given I have included a width and height settings already

Actually the width/height settings truncate the BOM URL "image" if set to smaller than the actual radar size rather than resize it. The actual BOM radar is 512x557 pixels so the default settings don't affect it as far as I can see.

[sburke781]

That makes sense now that you mention it. There are probably uses for both options, allowing parts of an image to be cropped and then scaling the result... maybe...

[sburke781]

Today I added the option to define static foreground images that appear on top of the images that cycle, primarily for the benefit of my Rain Radar image driver.