Announcing Super Tiles!

I presume your asking in response to this part?

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.

image

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.

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

image

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?

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!

1 Like

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)

1 Like

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?

2 Likes

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

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.

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. :slight_smile:


@josh These are still there after 15 min.

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

1 Like

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.

2 Likes

See this post from further up in the thread:

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

2 Likes

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.

Hi Barry, just wanted to mention I have had this happen a couple of times but quite rarely. I just refreshed the dashboard and it went away. Since I’ve only seen it 2 or 3 times total I wasn’t really worried about it, but it’s not just you.

I did some more testing and I’m still unable reproduce the ‘Executed Macro’ message getting stuck. If either of you have steps on how to reproduce, I’m all ears.

When the message is stuck, can you drag/swipe it away like a normal toast message? If it happens and you’re on a PC/Mac, I have some diagnostics you could try - send a note to support@sharptools.io and I’d be happy to share. :slight_smile:

Looks great but I want to use that in Super Tile only. I created another theme . But, I was not able to assign a specific theme to a tile. Is that possible ?

Themes are assigned at the dashboard level whereas Styles (within a theme) are assigned at the tile level.

The snippet @Carlos_Juarez shared appears to be using named styles. You can create a style in your theme and then use the special naming that Carlos mentioned to apply custom CSS to that style: How to move text / labels in tiles with CSS - #2 by James

Didn’t worked for me…
tile.–theme-style-SuperTileStyle .icon { color: #adff2f !important; }
I used SuperTileStyle for switch ON , the tile become blue as designed , but icon remain white not green as in CSS command. Am I doing something wrong ?

Make sure it’s all lowercase and using a double dash as noted in the linked thread:

Great Josh, That did the trick !!!
How to make it the same as in switch tile meaning Glow and yellow ?

You could probably use a snippet similar to the one @smart_tomlinson shared.

So based on what you have so far, that would likely be:

.tile.--theme-style-supertilestyle .icon { 
    -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);
}

Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with future app updates.

2 Likes

Another Great @josh
WORKS GREAT !! :star_struck: :star_struck:
The CSS is the longest I have !! I have no clue what he did there but it works !!!

2 Likes