Super Tiles

Super Tiles enable you to build custom layouts for your devices and variables in a drag-and-drop editor. You can mix and match data, icons, labels, and more in the Super Tile 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.

To get started building a Super Tile, navigate to the Manage Resources tab of your User Page. From there, you can select the Super Tile option and create your first Super Tile.

When the Super Tile editor is first opened, it’s a blank canvas allowing you to add whatever data or icons you’d like to it. Tap the blue Add Item button at the bottom-center of the interface to begin adding items.

You can mix and match a variety of items in your new tile:

Thing Attributes
Variable Values
Icons
- Bound to Thing Attributes
- Bound to Variable Values
- Static Icons (fixed)
Labels
Date / Time

Arrange Items

Once an item is added to your tile, you can drag the item to the position you’d like and drag the corners of the item to adjust its size.

Layers

If you have multiple items on a Super Tile, you can select your desired item and adjust where it falls within the layers using the layer adjustment control:

For example, if you used a Static Icon to display an image as the 'background' of your Super Tile, you could select that layer and then tap the layer ↓ arrow several times until it is the bottom most layer. This would enable you to add content on 'top' of that bottom most static icon layer.

Icon / Image Size

When you have an icon selected, keep in mind that you can fine-tune the size of the icon in two ways. You can adjust the base item size by dragging the corners of the icon to resize it for positioning which will also scale the image. You can also use the ↓Aa↑ buttons for further control over the size of the icon within its bounding container.

Edit Item

You can also tap on an item to mark it as active for editing and then use the options in the toolbar to adjust the font size, layer order, and alignment. You can also tap the gear icon to access additional settings for each item.

The settings for each type of item varies, but includes:

Action (on tap): None / Hyperlink / Rule / Thing
Icon State Mapping (for data bound icons)
Capitalization (for text values)
Units (for text values)

Things with Switch, Lock, or Garage Door Control capabilities offer a "Macro: Toggle" action.

Hyperlink actions also support the special syntax for running rules and making REST API calls.

There are a variety of keyboard shortcuts available while editing your Super Tile:

Ctrl+S to Save
↑↓←→ to adjust the position of an item in 1px increments
Ctrl+C / Ctrl+V to copy and paste a selected item (tap into the editor before pasting)
Backspace or DEL to remove a selected item

Edit Tile

You can also tap into the blank space of the icon to deselect all items at which point you can tap the cog icon to edit the action of the tile itself. This is particularly helpful if you want the whole tile to have the same tap action no matter where you touch.

You can also adjust the size of the tile here – for example, adjusting it to a 1x1 or 4x1 tile. This adjusts the ratio of the tile displayed in the editor and also acts as the base size for the tile when it's added to a dashboard.

Preview

You can flip the Edit toggle in the top-right corner off in order to preview your Super Tile. This lets you interact with the tile and test that your tap actions are working as expected.

Once you’re satisfied with your changes, you can tap the green SAVE button in the bottom-right corner to save your changes.

When first editing your Super Tiles, the states displayed for some Thing attributes may be stale. Once the Super Tile has been added to a dashboard, it will automatically set up the required event subscriptions and show fresh data.

Once you’ve added your Super Tile to a dashboard, you can keep your dashboard open in a separate window. As you make changes to your Super Tile in the editor and press save or Ctrl+S, the changes will immediately show up in your tile.

Use a Super Tile

Once you’ve saved your Super Tile, you can add it to your dashboard:

Open your dashboard for editing
Tap the green + icon in the bottom-right corner
Expand the Other section → Super Tile and select your desired Super Tile

After adding your Super Tile to a dashboard, you can edit the newly added tile instance and customize the styles or label as needed for your dashboard.