[RELEASE] Tile Builder - Build Beautiful Dashboards (Grid 2.0 Released)

@jabecker It’s not possible in the current version but the next module I’m adding is the multi-device X multi-attribute. So you would be able to have a tile with any mix of devices and attributes. Barring any unforeseen obstacles I expect it will be ready by the end of July.

Of course some things like thresholds or filters won’t make sense, but it will be very similar to the current modules in most respects.

2 Likes

Thanks! That sounds awesome. In my use case thresholds and filters wouldn't really add any information anyway. Can't wait! (But I will try to be patient.) It's such an awesome app already. Really appreciate all of the work you are putting into it.

1 Like

Tile Builder Update Notice
I have an update to Tile Builder that adds a few things and minimally breaks one thing for any tiles that use numeric thresholds (see below under Keywords and Thresholds for details).
The new version (1.3.0) has now been released via HPM.

Adds - All Versions
Background opacity has been added as an onscreen control.

2 x Strip Device Text has been replaced with 3 x Search & Replace These are available under the Show Device Name Modification switch. This switch only control the display of the Search and Replace fields, not whether they are active or not.


Note: Any existing replacement text settings should migrate.

Added Buttons as a selectable device type in Activity Monitor. (User request)


Note that button has been deprecated and it is not possible to limit the selector to only buttons so all devices are listed here.

Added types valve, healthStatus and variable as selectable options. (User request)


Note that for type variable it is not possible to limit the selector to only those devices that have implemented this capability so all devices are available and you must select the appropriate devices.

Added padding to float values to improve alignment and reduced decimal places options to 0 or 1.
So 71 with 1 decimal place would be 71.0.
No-one is buying sensors that are accurate to two decimal places for use with Hubitat.
Note: Some drivers (openWeatherMap for example) have implemented temperature as an integer vs a float. This change corrects the display of these integer values to pad correctly.

Implemented function for recovering child apps from critical errors.
This is a support function that will not normally be needed. However, if you have a child app that generates an error you can use this capability to clear certain values that are likely the cause of this error, such as overrides and recover the remainder of the child app. See updated documentation for more information on this.

Adds - Advanced

Updated Keywords and Thresholds interface to be simpler.


Part of this update converted the use of strings to a numeric equivalent. Because of the change in datatype these cannot be converted over automatically.
All of the settings such as threshold number, replacement text, color and size all will convert over but the operator selector will not and needs to be manually reset if it has been used. Sorry for the inconvenience.

In Highlights you can now use the macro %value% within any replacement text field.


The primary driver for this is the ability to use the HTML meter tag discussed below but it can be used in multiple ways.

Meter Tag
The example below shows the use of the %value% within an HTML meter tag to display battery levels but could be used for other things that operate within a fixed range of values.


The full text of the replacement value is cutoff in the above image but the full text looks like this.
[meter low=70 high=80 max=100 optimum=100 value=%value%][/meter] (%value%%)

The meter tag can only be used inline with HTML and cannot be referenced as a class so it is quite large, about 60-70 bytes per device line. You can keep it under 1,024 if you limit the display to just the 5 lowest batteries but obviously you can list many more if you don't care about the 1,024 limit.

Battery Style
I think the Meter will be quite a popular way to display battery levels so I have added a new built-in style called "Battery Meter" for easy reference.

After you have installed the update the affected settings will automatically be updated whenever the child app is called to refresh a tile or when the tile is loaded via the UI.

Cosmetic Changes
Some minor on screen text changes but nothing of significance.

Would the first few people to upgrade please post their experience back here whether things go smoothly (or not) so others are informed and can act accordingly. Thanks!!

Documentation has been updated to V1.3.0.

P.S. Always a good practice to do a backup before any significant updates!! Probably won't need it, but if you do you'll be glad.

8 Likes

Brilliant! Looking forward to upgrading to this, although I’ll have to wait until Monday evening as I’m in the UK :clock12: Will certainly post how it goes.

Almost everything migrated over pretty well. I haven't had a chance to play with the battery meter yet, but looking forward to it eventually.

One big gotcha: I had one Activity monitor. It got changed to an Attribute Monitor with no assigned devices. I thought no big deal I could just set it up again. Attempting to add an Activity monitor throws a 404 error.

I had a backup so I've rolled back from this update and will wait to hear back before updating again.

Mine converted with no issues, but I didn't have an Attribute Monitor. However, I also get the error when creating a new Attribute Monitor.

Thank you for the quick feedback. I have found the error and it is corrected.

FYI Activity Monitor and Attribute Monitor are basically the same with about 5 lines of difference. Somewhere along the way I screwed something up and they were both the same.

That is corrected now. Sorry for the inconvenience.

You can either force a repair using HPM (the version is the same) or you can manually copy the code from the link GitHub - GaryMilne/Hubitat-TileBuilder

Let me know if you need any assistance.

3 Likes

James, please see my note to JABecker regarding the nature of the problem and the solution. Forcing a fix with HPM is probably the easiest.

Yep! That worked a lot better! I'd already restored my backup so I just reapplied the update. Worked fine. Everything looks great with no modifications. I'll start playing with the meter tag when I get a chance. I can see a lot of use for that!

Yes, I think that will be a popular one. Looks good too.
P.S. There is a battery meter style so you can just select some battery devices and apply that style as a starting point.

I'm not seeing the battery meter style in the dropdown list. Am I looking in the wrong place?

Go to the parent app, More, Rebuild Default Styles. Then it will show up.

1 Like

Thanks. Got it.

I have a couple of questions about meter.

Is it possible to have the tile title outside of the iframe that the meter table is in? I make my titles links to other dashboards. With the title inside the iframe, the drill-down dashboard loads within the tile, which is not really what I want.

Also, I noticed that there's quite a difference in appearance between Safari and Chrome. It's not really a big deal. I just thought I'd point it out. I'm not sure there's anything I could do in Safari to change the appearance. When I first started playing with it, the bars in Safari looked more like they do in Chrome, but that disappeared. I don't know why or how to change it. I tried clearing cache, etc. It appears to be a Mac OS thing as it looks fine on my iPhone.

Chrome:

Safari:

1 Like

No, the iFrame contains everything, but you could use target="_blank" to open a new tab. Not ideal but better.
There is an "overflow" constraint that is slightly relevant to your question but that only applies at the bottom, not the top where the title would be.

<a href="https://www.cnn.com/" target="_blank">CNN</a>

On my iPad, with Chrome, they look different from either of those but somewhat closer to the Safari example. Unfortunately the styling of these controls is entirely browser dependent.

I should not play with these things in the middle of the night...

I woke up this morning realizing that it only looks "different" when the content is in an iFrame, and the content is in an iFrame only when it's > 1024 bytes. Limiting the display to 4 devices solved that problem. I added scrolling also because only three fit in the space I'm using for it. Keeping it out of the iFrame also solves the link problem.

Thanks for your patience! Next time I'll sleep on it. :grin:

Screenshot 2023-06-05 at 8.27.56 AM

2 Likes

Just updated, went straight into my batteries attribute tile to update the value highlighting, however I'm told an error has occurred and to check the logs:

app:7952023-06-05 18:13:28.469errorjava.lang.NumberFormatException: For input string: "gb" on line 2591 (method handler)

app:8152023-06-05 18:13:28.322errorjava.lang.NumberFormatException: For input string: "gb" on line 2591 (method handler)

app:7952023-06-05 18:13:28.322infoUpdating Variables to Version 1.3.0

app:7952023-06-05 18:13:28.316errorjava.lang.NumberFormatException: For input string: "gb" on line 2591 (method handler)

app:8192023-06-05 18:13:28.313errorjava.lang.NumberFormatException: For input string: "gb" on line 2591 (method handler)

app:8122023-06-05 18:13:28.301errorjava.lang.NumberFormatException: For input string: "gb" on line 2591 (method handler)

app:7932023-06-05 18:13:28.280errorjava.lang.NumberFormatException: For input string: "gb" on line 2591 (method handler)

It seems to be happening regardless the type of attribute tile I try to access via apps. Also, it's happening for activity tiles too.

I am also getting this error message when entering existing tile childs or during the process of creating a new tile child.


The log shows:

That's the one, and I'm seeing this in the logs whenever the tiles should be updating:

app:7932023-06-05 19:10:17.534errorjava.lang.NumberFormatException: For input string: "gb" on line 2591 (method handler)

app:8122023-06-05 19:10:17.519errorjava.lang.NumberFormatException: For input string: "gb" on line 2591 (method handler)

The tiles themselves as they display on my dashboards are frozen at the point before I updated.

line 2591 is related to converting a color and an opacity into an RGBA color. The only thing new I have introduced that clearly relates to that is the table background opacity but it's not clear to me why that would be problematic.

Are you by any chance using an override to make your tile transparent?

Here is how to recover an erroring tile in certain cases.
If you go to the parent, select More you will see a screen like this.

You can select a tile to send a message to, then select the type of message.

Let's assume the above case it true (transparency override), so you would select clearOverrides. To make this action take effect you must go to the child app and do a refresh so that the code reloads and the above action is taken.

Try it for one and let me know if it works. I could send you a line of code or two to just disable overrides vs clear them if you have multiple ones in play.

Hope that helps, let me know.