Thoughts on Media Tile options?


#1

I recently received a comment asking about media tiles and what options there are to get a camera to better fit into a tile. I’ve been thinking about providing a few options, but I don’t want to overwhelm people with options – what are your thoughts on the following?

Two options that could help with getting media tiles to better fit are:

  1. Scaling Mode: change how the camera image fits in the tile (eg. fill, contain, cover).
  2. Position: change the alignment of the image (eg. top, middle, bottom)

Current Defaults

Today, the scaling mode is ‘cover’ and the position is ‘middle’. The image is centered in the box and the aspect ratio is maintained (with the smallest dimension filling the tile and the larger dimension going over). For cameras that have timestamps on the top or bottom, sometimes this results in the timestamp being cut-off.

Example Options

For demonstration purposes, I’ve manually added an orange border to the tile and the following shows how the media is bigger than the tile and would overflow out of the tile:

Default

The current approach attempts to have the media cover the tile and centers the content. In this scenario, the main content is visible, but the top and bottom are slightly obscured:

Position (camera timestamps)

For example, if a timestamp was at the bottom of the camera and it wasn’t a big deal to trim the top of the image off a bit, you could use the default ‘cover’ setting and align ‘bottom’. Note: I could also make this a percentage, so you could choose how to vertically/horizontally position an image in the default cover scaling.

Contain (shrink)

Alternatively, if you always just wanted the whole camera to fit into the box and you didn’t mind empty space in the tile, you could use ‘contain’.

Fill (stretch)

And finally, a scaling setting of ‘fill’ would allow the image to stretch to fit the tile which would lead to the aspect ratio being off. For many cameras that are close enough to a 1x2 ratio (eg. 16:9), it would probably be minor enough that some people would prefer this.


What are your thoughts? Would the additional options be overwhelming or helpful? Any other thoughts on a better solution?


#2

I think fill would be best personally. If you wanted to add a second option, i would think position would be the next best. personally.


#3

i have to ask… bc i for the life of I can’t get 7 day forecast to refresh from this site… https://www.wral.com/weather/image/2774561/
This is what I have been using but it doesnt refresh the next day… https://wwwcache.wral.com/asset/weather/2008/04/22/2774561/ice_2011_forecast_7day_wral_raleigh_4x3-DMID1-5fdi0gvvk-640x480.jpg
Any chance you can guide me?


#4

Josh, I think the “fill” option might be the easiest way for most users, though the ratio is not perfect, but I agree it seems to be minor enough. We can add the position option later, even with the UI to allow user to crop the image. :slight_smile:


#5

I didnt think about it really bc I tried ActionTiles. AT seemed to fill it and I could still change tile size etc… I dont have access to AT anymore to check and advise. I will try and find a way to look.


#6

It’s interesting that the image doesn’t refresh for you. What’s your Refresh Interval setting? I am wondering if it simply just doesn’t refresh at all or quits working after a few refreshes.

I tried refresh every 10 minutes and 1 hr, and both work with no problem.
URL:https://www.nbcdfw.com/assets/weather/kxas/web7day.jpg


#7

Tommy-
It looks like the weather image you linked to in your original post might include a unique ID for each day of weather. I did a quick search and there are other local new affiliates which use a fixed URL for their weather images.

For example, the local Raleigh ABC site seems to use a fixed URL for the image:

http://dig.abclocal.go.com/wtvd/WSI_Weather_maps/7dayMAX.jpg

Alternatively, there’s a nice weather widget generator at:
https://www.theweather.com/widget/

Just make sure to choose the image option at the end. Here’s an example for Raleigh using the 4-day ‘width’ option with some custom colors:

https://www.theweather.com/wimages/fotof0a9eeee73f3fc775cc86a08c4e01b01.png


#8

I think thats my issue is they dont refresh that image… ill be damned if I can find one that does… :confused:

@josh I have looked at those, the news sites looks better… lol… No big deal but…

So, I am clear. Did I grab the right link for future reference? I will try other sites to see if they possibly do refresh it…


#9

Yes, it looks like you grabbed the right URL.

I’ll take a look at the original weather page you link tomorrow and see if it’s a different URL. If so, then they are using a unique ID each day… if not, we can look into why it might not be refreshing. :slight_smile:


#10

Thank you. I just grabbed 2 more sites…

12:01… i will know… added both to Sharptools dashboard… I have my tablet set up and running 100% now. looks great…


#11

Mine updated for the last 2 links I used. Thanks for the help guys