Thoughts on Media Tile options?

SharpTools.io (web)
#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:

image
image.jpg977×565 219 KB

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:

image
image.jpg982×553 215 KB

image
image.jpg980×492 191 KB

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.

image
image.jpg977×560 215 KB

image
image.jpg979×488 193 KB

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’.

image
image.jpg977×502 178 KB

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.

image
image.jpg977×506 193 KB

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

1 Like
Music, Weather, Spacers, and Media Tiles
#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.

1 Like
#3

12 posts were split to a new topic: Weather Image Sources

#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.

#12

These feature are now included in the latest SharpTools.io platform update. Check out the following post for more details and a video showing the new features.

1 Like
#13

are you considering any kind of zoom functionality?

1 Like
#14

Yes! Did you have something specific in mind?

#15

for example, this media tile for my weather forecast. I like the tile size/dimensions, but ideally i’d zoom into just the forecast part
image

so basically only show this on the tile
image

2 Likes
Music, Weather, Spacers, and Media Tiles
#16

Thanks for the screenshots - that’s very clear. And I’m glad you clarified as it’s a bit different than what I thought you meant! I’ll add it to the list - I think it should be possible, but I need to look into it a bit.

I’m also thinking an official weather forecast tile might be in order as that seems like one of the big use cases for media tiles. It would also help give certain dashboards a cleaner look as sometimes the media tiles with forecasts seem to stand out from the rest of the tiles!

Edit: PS. I need to catch up on your Instagram Smart Home series. I’ve watched the first few episodes. :stuck_out_tongue:

2 Likes
#17

I agree they are an eyesore. A uniform weather forecast tile would be nice. And thanks for watching!

2 Likes
#18

I just switched over from another product. The way they did zoom is when you clicked on the tile, it would go full screen. It would then allow you to x out of it.

1 Like
#19

That’s what I originally thought he meant and it’s on my hit list. More like a traditional ‘lightbox’ implementation. :grinning:

#20

Any update on allowing the tile to go to full screen when clicked on? Example Weather tile.image

1 Like
#21

We have prioritized it in our sprint planning. If all goes well, it will likely make it in the release after the next.

2 Likes
#22

Question about Media Tiles:
I must be doing something wrong. My media tiles just show up as blank. I don’t understand because when I select the URL that I put in the media tile, and just go to it, it shows up perfectly.

image
image.png1266×818 35.3 KB

#23

Can you share a sample URL?

Edit: If you have the tile set to auto refresh, some providers have trouble with the ‘cache buster’ parameter that gets added to the URL. If I remember right correctly, AccuWeather is one of the sites that doesn’t like the auto refresh.

#24

Hi Jack,
What the URLs you have in those tiles? Are they pointing to a medial file such as MJPG, GIF, JPG, or PNG type?

#25

Here is a sample url (amcrest camera):
http://userid:pswd@192.168.1.55:1025/cgi-bin/mjpg/video.cgi?channel=0&subtype=1

#26

Hi Jack,
What’s your camera model? I couldn’t find that URL “cgi-bin/mjpg/” in iSpy’s database (a popular webcam url info resource).