Announcing Super Tiles!

[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:

[Terri]

@josh

So we added a ‘macro’ called ‘Toggle’ to handle this very common case that would have otherwise required rules.

@josh

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

Should the macro toggle be available for media player device types?

[mark_price]

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

Thanks, Josh. That is correct. Apologies for not being clear by using quotes. Your response gives me adequate explanation and now I understand the reason for the ‘toggle’ macro. I was just getting unintended results with the selected things embedded in super tile. I will continue to familiarize with this new feature. Thanks again!

[josh]

@Terri

Should the macro toggle be available for media player device types?

No. Some media players may offer a play/pause command or respond to play() or pause() as if it was a toggle:

Alternatively, you can create a rule like the following and execute that from your Super Tile:

(Internally, we already had toggle support for Switch, Lock and Garage Door capabilities so they all get toggle macro support in Super Tiles)

[Stan_Silverman]

I love Super Tiles! They are more capable than I had imagined. However, I would really like to have another goodie for layout design, as I’ll explain below. Of course it’s quite possible that I’ve missed an existing capability!

I created a super tile containing five door locks. With one exception it works just like five individual lock tiles would. Each lock’s section is covered with an invisible virtual button that activates a rule to toggle the state of the lock.

The exception is I can’t have a red background for an individual lock when it’s unlocked. Not a big problem because the lock icon changes as does the locked/unlocked message. Here’s the tile:

To provide each lock it’s own region of the super tile, I use labels filled with underscore characters.

Now I want to put the same five locks on another dashboard whose layout doesn’t let me place the locks in a linear fashion. The image below shows the area I have to work with. Thus - the desired goodie is some way to represent vertical lines so I can give each lock its own region.

If it were possible to have a black background for the label tile it could be sized for both horizontal and vertical lines. Or is there a way to accomplish this with the existing super tile?

[Barry_Martin]

@josh - Two other questions relative to Super Tiles. One, is there a maximum number of things that should be included on a Super Tile or in combination of multiple Super Tiles on one page? I have noticed delays in performance in loading the pages on Fire Tablets, even current generation. When you mentioned about each icon being like a mini app, I assume that is the case with the things on each Super Tile and was curious if I might be exceeding the recommended use per page. Second question, on some of my dashboards, I have Super Tiles in the top right corner of the screen. When the green Executed Macro box pops up on the screen, it stays hovering over the Super Tile. Not sure if you have ever seen this before or not.

[josh]

There’s not really a hard-and-fast rule. As you alluded to, the more items you add to a Super Tile (or to a dashboard as a whole), the more there is to render. On a modern PC the difference is likely not noticeable at all but on some mobile devices you might start feeling it.

For Fire Tablets, I would make sure you’re updated to the latest Fire OS version and the latest Fire OS-specific version of Full Kiosk (if you use it). There’s some nice performance improvements in the newer OS versions.

@Barry_Martin

When the green Executed Macro box pops up on the screen, it stays hovering over the Super Tile. Not sure if you have ever seen this before or not.

No, I have not seen that before and I wasn’t able to reproduce with some brief testing. If you can consistently reproduce it, feel free to send a note to support@sharptools.io so we can investigate with you.

[Barry_Martin]

@josh These are still there after 15 min.

[Shai_Dotan]

Hi,
Can’t find how to make a glow icon in Super tiles. Is that possible ?
It looks great and I was able to make the icon animate

[Carlos_Juarez]

Hi my friend, you can handle display with CSS commands, assign a style to your Super Tile in the theme of your dashboard and add CSS command:

.tile.–theme-style-YOURSTYLENAME .icon { color: #adff2f !important; }

This is for glow green for example.

Post Data: If you want to try a glow light effect. play with the CSS box-shadow effect.

[josh]

See this post from further up in the thread:

@josh

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!

You could probably use Custom CSS as Carlos alluded to though.