Tap to enlarge and show different device attribute?

I suspect this post is destined for the feature request category. But maybe it’s possible with custom tiles… so i’ll ask anyway.

I have a custom tile (Hubitat HTML Renderer) that shows an html-based attribute from a device in Hubitat. (from my GameTime app). It shows an upcoming or completed sports game, like this:

image

I want to be able to tap on the tile and have it pop up an enlarged version, kind of like the way the media tile enlarges. But, I want to be able to show a different attribute from the underlying device that displays my team’s upcoming schedule. Like this:

image

Any way to do that currently, presumably with custom tiles? Perhaps by pulling in the other device attribute in the custom tile and re-defining the “on tap” action to display it?

Or, now that I think about it, this would probably be another use case for the feature request I have my heart set on :slight_smile:

So I guess the missing peice for Custom Tiles is a command to open a pop up that displays custom HTML? There’s security challenges with displaying arbitrary HTML which is why the custom tiles actually render in an iframe under a different context. I would need to spend some time thinking about a reasonable approach for this in a popup wherein the HTML might also be dynamic.

You could extend the custom tile to overlay the secondary attribute within the confines of the custom tile when the tile was tapped. That would probably OK for a small bit of data, but I could see how it would be cramped for larger amounts of data in a small tile (like your table screenshot).

1 Like

Ok. Well, then, that could work if I could enlarge the tile when it is tapped, like a media tile does now. Is it possible to do that with a custom tile?

Yes. The Hubitat HTML Attribute Display custom tile that you mentioned could be used as a starting point.

You could either dynamically swap out the displayed HTML in the tile or layer it on top of the old HTML.

If that’s not clear, I can take a stab at a working example for you?

Great. I’ve figured out how to swap the HTML on tap. But I could use a little help with how to make the same full screen enlargement as what happens when you click on a media tile. That is, the enlargement that happens when you tap with the magnifying glass and reverse effect when tapped again… Or is that something that can even be done within the confines of a custom tile?

Right, you’re confined within the Custom Tile aside from the special methods provided with the stio library; eg. showList(), showToast(), showForm()

We had some internal discussion on the ability to have a custom ‘pop up’ displaying HTML of your choosing – maybe something like showHtml() – but haven’t arrived at a final decision as there are some nuances and concerns around displaying a modal that we’re still discussing internally.

Ok, thanks for already starting that discussion. It’s not a huge need on my end - more just a nicety. The swap HTML part of this will still prove useful for expanding the functionality of my custom tiles.

1 Like

Did you have another use case in mind for the enlargement – or in this case displaying HTML in a pop-up?

I started playing with a concept for displaying HTML in a pop-up, but arguably the schedule content of the GameTile device could just be swapped out or layered on top of the existing tile when tapped since it’s not too big. Just curious what other ideas you had in mind with displaying larger HTML content in an overlay?

(Proof of Concept - not released)
wR6xSxCcBC

1 Like

Yeah, I was able to swap the html pretty easily. But the sizing doesn’t work out well for the GameTime tile, at least for me. My matchup tile doesn’t need to take up much space on my main dashboard - it’s only 2x2 on a dashboard with 20 columns. And that 2x2 tile is too small for the schedule. So something like your proof of concept would be better for sure.

The other immediate use cases I’ve got included:
(1) tapping on my Multi-Place tile pops up a map overlay. If there’s a trip upcoming or ongoing, the map will be a Google Map with the route to take given traffic conditions. If there’s not a trip upcoming or ongoing, the map will be a Life360 map (similar to what I’ve seen others do)
(2) tapping on my Rachio tile brings up additional info about and/or controls for my irrigation, including what zones will or have run, (ideally along with irrigation control tiles, but that’s a different feature I think)
(3) tapping on my Lift Off tile to show additional details about an upcoming or completed Space X launch (would be cool to show a map of launch trajectory/progress).

1 Like