Announcing Super Tiles!

[josh]

We’re excited to announce the release of Super Tiles which enable you to build custom layouts for your devices and variables in a drag-and-drop editor!

Super Tiles are a Premium only feature and can be accessed during your Premium trial period. If you are using the free tier, please send an email to support@sharptools.io if you’d like us to reset your trial so you can give Super Tiles a try.

Super Tiles enable you to mix data from multiple things, variables, or both in a single tile! It gives you full control over the position and size of each item you add to you add enabling you to design a tile that’s just right for you!

In addition to displaying thing values and attribute values, you can also display icons (static or bound to those sources), labels, date, time, and more! You can also customize the action of the whole tile or individual items – enabling you to run rules, open hyperlinks, and control Things.

For more details on Super Tiles, check out the following help article:

Super Tiles - SharpTools Knowledge Base

Other Resources:

• Comparison: Super Tiles, Custom Tiles, and Regular Tiles
• Blog: Super Tile Examples

Super Tile Editor Demo:

[kampto]

Legit!

[Christian_Ytterstrom]

This is an awesome addition! Could be have glow for lights? And custom colors for icons (lock unlock etc) would be awesome!

[josh]

@Christian_Ytterstrom

Could be have glow for lights? And custom colors for icons (lock unlock etc) would be awesome!

You can use styles on a Super Tile once it’s added to your dashboard. This gives you the ability to change the color of content on a tile based on the state of devices or variables that are used in the Super Tile.

The glow effect is currently limited to the lighting tiles that natively support it (eg. Switch Tiles). Feel free to create a feature request to have this added as an icon effect in the style system though!

There have been other threads and work arounds mentioned in the community before, so I suspect others would vote for a formal feature request!

[Barry_Martin]

Thank you to Josh and the team for all you do. This is great. Can’t wait to see where all I can use this to simplify my displays.

[Jamie_Girdwood]

Well done team. This is a brilliant new feature.

[kampto]

Wow, Make your own weather station tile using existing attributes.

[sharptools501]

Am I missing something? I can’t seem to specify a custom date/time format. I am trying to create a combination tile with date / time so it doesn’t look like this:

[josh]

@sharptools501

I am trying to create a combination tile with date / time so it doesn’t look like this:

You can add multiple Date/Time items and configure them accordingly.

[sharptools501]

I tried this – but if I try to make the tile 4x width for example, it doesn’t scale. Is there a way to change that?

[josh]

If you are designing for a specific tile size, I would suggest adjusting the dimensions in the Super Tile editor to use that size.

With nothing selected in the Super Tile editor (eg. tap into the blank space), tap the gear icon to edit the Super Tile’s settings and adjust the base dimensions as desired.

The fonts scale with the base dimensions of the tile. So if you’ve built it as a 1x2 and then stretch it out to 1x4, all of the items will stretch to fit that space, but the font size wont change as the smallest dimension of the tile still hasn’t changed. But if you scaled from 1x2 to 2x4, for example, the fonts would scale to 2x the size along with the tile.

[Barry_Martin]

I am going all in on Super Tiles. Really love the work. Couple of things I haven’t figured out how to do yet though. One is to pop up the dimmer slider or color picker.

[Working]Everything from the Icon to On I want to toggle the group on and off. [Need]When I tap the level, I want it to bring up the dimmer slider or if picking the color feature, the color picker. [Need]In the same vein, for the fan controls, I only have the ability to scroll thru the speed choices, as opposed to normal tile where you could have pick list. Thanks for any guidance.

[josh]

@Barry_Martin

One is to pop up the dimmer slider or color picker.
…
for the fan controls, I only have the ability to scroll thru the speed choices, as opposed to normal tile where you could have pick list.

If you need the rich functionality of a normal tile, you would need to use a normal tile for now.

During the beta, we were hesitant to add Thing Commands as it’s quite a slippery slope – each normal tile is almost like a mini “app” with lots of logic hidden behind the scenes to provide that smooth experience. So even for something as simple as a light switch, it’s not just a basic Thing command – it’s actually some logic that determines if it should send the on or off commands. And you can probably see how that becomes a slippery slope as you start thinking about thermostats, window shades, etc.

We ended up adding in support for basic thing commands (eg. those without parameters) as well as a Toggle macro which based on beta feedback seemed to be a very common use case (and otherwise required the use of rules to accomplish).

All that being said, please feel free to create a feature request!

[Barry_Martin]

Thanks Josh for the response. I absolutely understand and love where things are now. I am good using as is, and am about 2/3 through converting all my dashboards to use smart tiles for navigation and control panels. Wanted to make sure I wasn’t missing anything in my approach or if there was a better way to use the tools. I will gladly put in the feature requests for my specific asks and any others I come across. Thanks again to the team for the great work delivering this functionality. I love it and want it all

[T_Shoaf]

This is super cool! The first thing I thought of is my Sonos tiles. I currently have separate tiles to show the album art and controls, which I would love to combine for aesthetic reasons. Also, there are other attributes I might like to show such as media source and volume control slider. Here is what I have now (pre-Super Tiles):

But so far I’m struggling setting up a Super Tile.

1. I couldn’t find a way to show the album art. Am I missing it? Or will it be added later?

2. Several of the attributes of my Sonos speaker result in a blank square. For example in the bottom right I selected the media source. It gave me a new square but nothing in it. I tried saving and adding it to my dashboard, but even then it remains empty. In the upper left is the elapsed time, same problem. What am I missing?

   

3. The volume buttons work but they adjust 1% at a time, making them not super useful. Is there a way to adjust say 10% at a time? I guess I could create rules but since it’s specific to each player, that’s a lot of rules. Is there an easier way?

It looks like this on the dashboard (the blank attributes are still blank).

[josh]

@T_Shoaf

Several of the attributes of my Sonos speaker result in a blank square.

If those attributes don’t have any data in them from your source platform (eg. SmartThings / Hubitat / Home Assistant), then they won’t show anything in SharpTools.

@T_Shoaf

Is there a way to adjust say 10% at a time?

If you need additional logic or customization of the actions, Rules are generally the way to go. If the device has a command that supports adjusting the volume in bigger increments, you could use rules.

Also note that you can pass parameters to the rules using the special $.runRule() hyperlink syntax. That way you could use a single rule, pass in a parameter (for example, the target device name), and have conditions in the rule that acted accordingly.

@T_Shoaf

I couldn’t find a way to show the album art. Am I missing it? Or will it be added later?

Super Tiles support the data that comes from Things and Variables along with the ability to map those into Icons.

From the Comparison: Super Tiles, Custom Tiles, and Regular Tiles help article:

Many of the basic tiles are almost like mini “apps” – they provide a smooth, tailored experience that’s intuitive to use ‘out-of-the-box’. If you could pull back the curtain, you’d find quite a bit of logic to provide such a smooth experience. As such, you may find that Basic Tiles are more feature-rich (for their targeted use-case) than you could accomplish with Hero Attribute or Super Tiles.

The goal with Super Tiles is not to recreate all the features of every single tile (as each one is like a mini app… and that’s what a dashboard does). The design goal was was for those cases where an existing base tile did not exist for the data/icons/actions.

I would recommend reading the linked article, but I might summarize it as:

• If you need the rich features of a basic tile, use the basic tile.
• …to display 1-2 custom attributes, use a Hero Attribute tile
• …to display multiple data/icons in a custom layout, use Super Tiles
• …a fully custom tile (like a mini ‘app’), use a Custom Tile (developer)

[T_Shoaf]

Josh, thanks a lot for the explanations! It was really helpful, especially the summary of what each type of tile is best suited (or intended) for.

[Terri]

Is there an option to add glow effect to super tiles?
I tried below but it doesn’t work.
.tile.–theme-style-tv-on .icon.glow-yellow, svg.glow-yellow {
-webkit-filter: drop-shadow(0 0 3px #ff0)drop-shadow(0 0 10px #ff0)drop-shadow(0 0 20px #ff0);;
filter: drop-shadow(0 0 3px yellow)drop-shadow(0 0 10px yellow)drop-shadow(0 0 20px yellow); !important}

[mark_price]

thank you, Josh. To clearly understand, only data and toggle type switch functionalities are featured in Supertiles, but not momentary buttons? I ask in reference to grouping together scenes or STHM type items.

[josh]

I presume your asking in response to this part?

@josh

We ended up adding in support for basic thing commands (eg. those without parameters) as well as a Toggle macro which based on beta feedback seemed to be a very common use case (and otherwise required the use of rules to accomplish).

Keep in mind that this was in response to a request around a pop-up for the dimmer/value-range and a pop-up for selecting fan-speeds.

Apologies if I wasn’t super clear here. As of writing this post, there are four action types you can configure on Super Tiles:

• None - do nothing
• Hyperlink - open a hyperlink (or use REST API / Run Rule syntax)
• Rule - execute a SharpTools rule
• Thing - execute a thing command*

Hyperlink

I think the normal use case for hyperlinks is relatively straightforward. You can add a hyperlink to open another web page (or even open an app). One thing that’s unique about hyperlinks is we have support for special hyperlink syntax that allows you to interact with REST APIs or to Run Rules. While Super Tiles have a native way to execute rules, you might prefer the $.runRule() syntax if you want to pass parameters into your rules.

Rule

Provides a straightforward way to select a rule for execution. Since rules can include logic, like IF Conditions, it’s a really powerful way to interact with your devices. For example, you could create a rule that cycled through different dim levels or preset colors each time the rule was run. Or you might turn on multiple lights at once. Or dynamically change what the rule does based on conditions (eg. are certain people home or not). If a basic Thing command doesn’t do it, I would take a look at rules to see if it could help.

In this example, my rule queries an external API and updates a variable. So this is kind of like a tap-to-refresh concept.

Thing

The Thing action enables you to select a thing and then any of the commands it offers which don’t require parameters. This means commands like on(), off(), push(), play(), pause(), open(), close() and other similar commands that your Thing provides are available.

Commands that require parameters like setLevel(level), setHue(hue), playTrack(trackUrl) are not available directly as Thing actions, but you can access them from rules… and execute the rule from your Super Tile.

During the beta, a common use case we saw was to toggle lights on/off. Unfortunately, the most common device drivers in SmartThings and Hubitat only provide on() and off() commands – they do not provide a native toggle(). So we added a ‘macro’ called ‘Toggle’ to handle this very common case that would have otherwise required rules.

For example, some devices provide a long list of basic commands (without parameters), like a media player: