[RELEASE] Tile Builder - Build Beautiful Dashboards

Tile Builder is a novel way of presenting data on a Hubitat® Dashboard. Rather than each tile being a single unique device, Tile Builder allows data from multiple devices to be presented on the same tile in a variety of formats.

Tile Builder has five child apps for creating different kinds of tiles.
1) Attribute Monitor tiles contain any number of devices for a single attribute. In the following case it's temperature. The table can be sorted by the device name or the attribute value (text or numeric). The tile will be regenerated each time one of the monitored attribute values change so it operates in real time but has low hub impact. Attribute Monitor Help.

2) Activity Monitor tiles hold a table of data based on the LastActivityAt attribute. This can be useful for monitoring active or inactive devices. This table shows a list of battery devices that have not had activity in at least the past two hours. Activity Monitor tiles are refreshed on a user defined periodic basis ranging from minutes to hours. Activity Monitor Help.
image

3) Multi-Attribute Monitor was released on July 17th, 2023 and allows to mix and match any combination of devices and attributes that you might be interested collating in a unified way. The example below shows switches, temperature and humidity values all on the same tile.
Multi Attribute Monitor Help File.
image

4) Rooms was released on September 6th, 2023 and uses icons arranged on a grid to represent the layout of devices within a room. As devices change state\value, so do the icons\values to give a real time overview of a room. Multiple rooms can be connected together to for a whole house plan.
Rooms Quick Start Guide.
Rooms Help File.
Rooms: How to configure a background image.
Finished example with background image:

5) Grid was released on December 30th, 2023 and allows for the creation of complex tables up to 5 columns wide and 20 rows of data. Grid Help File

Grid 2.0 was released via HPM on May 18th, 2024 and adds access to device event information, Hub information and Hub variables and provides a wide range of date\time formatting options.

This table shows the last time my sprinklers ran for each zone and the duration that they ran for.
image

6) Thermostat was released on June 18th, 2024 and is an attractive and fully functional replacement for the native Hubitat Thermostat tile.
image
Tile Builder Thermostat Help

----- This Section Relates to Activity Monitor, Attribute Monitor, Multi Attribute Monitor and Grid ------
Video Tour
2:00 minute video, create and publish a simple tile. https://youtu.be/e-jTP3sWIZY?vq=hd1080
8:00 minute video, edit and publish a simple tile. https://youtu.be/1VEENAxY0UI?vq=hd1080
Note: There are a few minor visual differences between the videos and the final product.

Main Benefits of Tile Builder
Native solution for Hubitat® dashboards that is easy to use and looks great.
Full control over color, style and placement of tiles etc.
Data can be presented at a much higher density. Great for tablets and phones.
Does not require maintenance of a separate external platform.
Entirely local to the hub. No need to send events off to a remote system and no delays.

Everything up to this point is included in Tile Builder Standard which is free to all users.

Tile Builder Advanced
Tile Builder Advanced adds a lot of extra capabilities for a minimum $8 donation to support ongoing development. The key features are:

Filtered Lists
Monitor all devices in a category but only display those that meet a given criteria. In this case only open doors are displayed which is a huge space saver. The table updates as soon as a door opens or closes.
image
1 Minute Video of Filters. https://youtu.be/5-qB7ts8NSE?vq=hd1080

Styles
You can load and save styles to quickly apply a consistent look. Shown below is "Halloween".
image
3 Minute Video of Styles. https://youtu.be/zH2dhpIgkUE?vq=hd1080
You can export a style and share it via a message board for someone else to import.

Thresholds
Numeric data can be color coded based on threshold values.


3 Minute Video of Thresholds. https://youtu.be/Wnzp4zoh7wk?vq=hd1080

Keywords
String data can be replaced to make display more interesting. In this "open" is replaced with :x: and "closed" is replaced with :white_check_mark:
image
2 Minute Video of Keywords. https://youtu.be/YyrBdubEpoA?vq=hd1080

Advanced\Overrides
This provides a method to customize everything about the table and is akin to a lightweight programming model. The capabilities enabled here are pretty huge and are discussed at length in the documentation which can be found here.

----- This Section Relates only to Multi Attribute Monitor ------
The formatting capabilities for Multi Attribute Monitor are very similar but do add a few unique items
Tile generated with the Standard version.
image
Same tile dressed up a bit with the Advanced version.
image

This is part of the design interface. Here you can select up to 10 device\attribute pairs and give them any name you want as well as prepending and appending text to the data, such as units.

  • Item Name: You can name the device\attribute anything you want.
  • Prepend: You can prepend text to the attribute including html tags (in brackets).
  • Append: You can append text to the attribute, most likely units but also including html tags.
  • Cleanup: Cleanup lets you apply different operations to the data to clean it up. Available operations are: None, Capitalize, Commas, 0/1 Decimal Places and Upper Case.
  • Rules: This only has significance if you have TB Advanced. Here you can specify which Highlight rules apply, if any, to this particular row of data.
    You can find a help file here for Multi Attribute Monitor .

----- This Section Applies to Rooms ------
Just your standard Hubitat dashboard and Tile Builder. Key points:

  1. Generate a plan view of your home and display devices and attributes.
  2. Huge amount of control over how things are displayed.
  3. No Maker API, external software or hardware needed.
  4. Works over the internet using the Hubitat App without a VPN.
  5. Blue dotted boxes activate the standard Hubitat UI element for switches and bulbs.

For a more realistic view you can add a background image using a drawing program.

Advanced version supports up to 10 devices placed directly in the room plus 2 Icon Bars that each support up to 5 devices. Icon Bars are mainly for displaying values and are mainly shown in the yellow boxes in the graphic.

Standard version supports up to 3 devices and you can still do some pretty interesting stuff. In the image below the Active motion sensor tile is animated.


image

You can find a comprehensive help file for TB Rooms here.

----- This Section Applies to Grid ------
Grid has two modes of operation.
1) Device Group Mode: In this mode the user completes a single line template for a group of like devices. The table is generated using those same settings for each row. Here is a simple example.
image

2) Free Form Mode: In this mode the user completes each cell of a grid template with whatever information you wish to see.
image

You can find the help file for TB Grid here.

----- This Section Applies to All Modules ------

Hubitat App Integration
Because this is just HTML and CSS it integrates into the native app very well. Just scroll around for the rest of the dashboard.

Tile Builder is available via HPM.
I look forward to seeing what people create.

42 Likes

Stellar work and I'm genuinely excited to kick the tires on this beauty!!

3 Likes

Great work @garyjmilne!

Today you have set new, much higher standards for HE community Apps/drivers and documentation!

8 Likes

Wow!!

:clap: :clap: :clap:

2 Likes

That's some pretty impressive work!

1 Like

Looks really good, and has inspired me to tackle the monolithic monster dashboard I have today, see if I can reduce load on my C8.

3 Likes

I'll be interested to hear what you find in this regard. You only need to authorize the Tile Builder Storage Device and not any of the devices listed on the tiles, so in my experience these load quite fast.

What a great addition to Hubitat's legacy Dashboard app. So easy to use and highly customizable, I am amazed each time I add another tile.

@garyjmilne Kudo's to your 'off the chart' software programming talents, I'm in for 2x the suggested donation!

4 Likes

This might be a really stupid question but can this work with 3rd party dashboards? Are these tiles just devices? I'm specifically wondering if it will work with the HD+ dashboard.

1 Like

The tiles are pure HTML and CSS. If they are under 1,024 bytes they are stored exclusively in the Tile Builder Storage Device, if they exceed 1,024 (4,096 limit) they are stored on File Manager and a link is published to the Storage Device. I hope that answers your question.

1 Like

Just wait until you try the styles and advanced features. It's a lot of fun.

Advanced Features:
{

  • Filtering: "It's a lot of fun" = "Addicting"

}

2 Likes

And such a huge space saver too. And I see you are using keyword substitution as well. You are on the fast track! Have a look in the docs for a guide to animate your motion sensor indicators.

1 Like

Is there any way for the app to spit out a "test card" containing a sample of most or all the available CSS components? This would make it easy to run it through third party dashboards to see if they accommodate the HTML (esp. tables) and styling correctly.

In the Advanced tab you can display the Pseudo HTML.

Do a replace of with <> and that is your combined HTML.

If it is greater than 1,024 bytes you will also find the file in your File Manager.

1 Like

Really great app. Well done.

Just to confirm this is licensed on a per hub basis?

Have you considered any option for users who own a lot of hubs ? Although I believe the current licence is very reasonably priced even if you do have to purchase a number of licences.

2 Likes

Thank you, I spent way too much time on this but enjoyed the challenge.

Yes, that is how it's written. It has to authenticate against something on the hub but I could not think of a way to do a "site license". I know people have multiple hubs (as do I) but I thought that they probably only have Dashboard running on a handful of them and at $5 if they had had to put it on 2 or 3 that probably would not be a problem.

But I didn't write it for the money and I'd like to see people use it and enjoy it. So DM me on how many you would like and I'm sure we can come to some arrangement.

But please, just do one hub first and make sure you are happy with it.

1 Like

Hi there.
Firstly, thanks for this great app.
Spotted this thread today and thought I would have a play. Works a treat......
I just received a notification from HPM to say that there is an update available for this app. v1.2.7
When I try to run the update it fails with the following.

An error occurred while installing the package: Failed to upgrade app https://raw.githubusercontent.com/GaryMilne/Hubitat-TileBuilder/main/Activity_Monitor.groovy.

Be sure the package is not in use with devices.
I'm not actually using the activity monitor yet.
A repair also fails.
I thought I would try a brand new install on another hub.
This also fails and gives the following error.

Error Occurred During Installation

An error occurred while installing the package: Failed to install app https://raw.githubusercontent.com/GaryMilne/Hubitat-TileBuilder/main/Activity_Monitor.groovy. Please notify the package developer.. Be sure the package is not in use with devices.

I'm not sure if something has got corrupted along the way but thought you should know.

By way of giving back, if if helps you to have a fairly exhaustive list of ALL device capabilities, I maintain such a list and am pasting it below:

Capabilities (including *non-standard ones)

Acceleration
Actuator
Air quality index
Alarm
Amperage*
Audio notification
Audio volume
Battery
Beacon
Bulb
Button
Button LED
Carbon dioxide sensor
Carbon monoxide detector
Certain Time (and optional date)
Change level
Chime
Cloud End Point
Color Control
Color Mode
Color Temperature
Configuration
Consumable
Contact Sensor
Current Meter
Custom Attribute
Days of Week Schedule
Digital Switch
Dimmer
Door Control
Double Tapable Button
Energy Meter
Estimate Time Of Arrival
Fan Control
Fan Speed
Filter Status
Flash
Garage Door Control
Gas Detector
Health Check
Holdable Button
Humidity
Illuminance Measurement
Image Capture
Indicator
Initialize
Keypad Codes
Level Preset
Light
Light Effects
Liquid Flow Rate
Local End Point
Location Event
Location Mode
Lock
Lock codes
Media Controller
Media Input Source
Media Transport
Momentary
Motion Sensor
Mode
Motion
Music Player
Notification
Outlet
Periodic Schedule
PH Measurement
PH Number
Physical Switch
Physical dimmer level
Polling
Power Meter
Power Source
Presence Sensor
Pressure Measurement
Private Boolean
Refresh
Relative Humidity Measurement
Releasable Button
Rule paused
Samsung TV*
Security Keypad
Sensor
Shock Sensor
Signal Strength
Sleep Sensor
Smoke Detector
Sound Pressure Level
Sound Sensor
Speech Recognition
Speech Synthesis
Step Sensor
Switch
Switch Level
Tamper Alert
Temperature
Thermostat
Thermostat Cool Setpoint
Thermostat Fan Mode
Thermostat Heat Setpoint
Thermostat Mode
Thermostat Operating State
Three Axis
Timed Session
Tone
Touch Sensor
TV
Tamper Alert
Telnet
Temperature Measurement
Test Capability
Ultraviolet Index
Valve
Variable
Video Capture
Voltage Measurement
Water Sensor
Window Blind
Window Shade
ZW Multichannel

Also, if you'd like me to proofread your app's UI for minor typos (I only see a couple so far), PM me and I'll send back my findings. Nice work!!

1 Like