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

That looks exactly like the TM version.
I haven't been into the Grid as I'm just gettin gused to the freeware side so see if it will do everything I want, i.e. replace the TM functionality.
Looks like you might be in for key sale :wink:

1 Like

Yes, you are not the first to want to replicate an existing look and feel because it's familiar. But you can do a whole lot more if you wish to.

Be sure you check the documentation, you'll find a link at the bottom of each module. It is quite extensive, over 100 pages across all the modules.

1 Like

Thanks for the great start tutorial. I had a look at the docs but it's unclear if I can emulate the old Tile Master 2 functionality.
For one thing when I use a Bitly URL the dashboard turns into the text returned from the endpoint - I think. Then I have to reload the Dashboard. Can I supress this response?
Reading the docs I think this is an iFrame issue? I recall that mention when I first startng using Tile Master.
e.g
"id":"2046","name":"Front Door Lock","label":"Front Door Lock","type":"Generic Z-Wave Lock","room":"Entrance Hall","attributes":[{"name":"lockCodes","currentValue":"{"1":{"code":"1234","name":"Dave"},"2":{"code":.....

The other thing I'm not sure I can do which may be beyond my html skills. :frowning:
In TM the device label is static. the second column changes from Locked to Unlocked following the attribute. The word Lock has an Unlock URL attached and the Word Unlocked has a Lock URL so you can toggle the lock depending on its state.
The only way I can see in TB is to have 3 columns and have Name, Lock URL, Unlock URL

2 Likes

It should be able to as I'm playing by the same set of rules as Tile Master but I could not tell you how off the top of my head. Give me a week to experiment with it. If I get it working I'll write up a doc as others have asked for this same functionality.

Tile Builder Grid - Release 1.0.8

This is not the bigger release I was hoping for as I have not had much time lately for various reasons. This is just a maintenance release, but it does allow for a very interesting capability that I will document in a follow-up post in the next day or two.

Grid: Version 1.0.8
Bugfix: Keywords not working properly, needed Break statements to exit correctly.
Bugfix: Eliminates "double refresh" resulting from the "Refresh" action.
Bugfix: Removes debugging Log entry.

Still working on the bigger update which will offer a variety of date\time related formatting options as well as access to some device properties such as lastActivityAt or deviceID for example.

So if you tried Keywords in grid and could not get it to work correctly please try again and let me know if you have an issue.

2 Likes

New Releases: Tile Builder Parent 1.4.9 and Tile Builder Grid 1.0.9
The updates to the Tile Builder Parent only contain additional information for some of the help fields, mostly related to Tile Builder Grid.
The updates to Grid make it easier to add some limited control to a device group using Maker API as the intermediary. This post will explain how to do that.

  1. Install the Maker API
  2. Select the devices you want to authorize
  3. Copy the device command string which will look something like this.
    Get Device Commands (replace [Device ID] with actual subscribed device id
    http://192.168.0.200/apps/api/3685/devices/[Device ID]/commands?access_token=6f018dbf-2b96-4df9-92cc-521197f27aad

Go into Tile Builder Grid using the Layout Mode of Device Group and select the device to turn off and on.


Important: For the variable %switch% the Rules are set to All Keywords.

Your table will look something like this.

We are now going to replace the off and on values with links to the MakerAPI to toggle the switch. To do that go to the Highlights Tab and enable 2 keywords as shown.

The value of off will be replaced with:
[iframe name=a width=0 height=0 frameborder=0][/iframe][a href=http://192.168.0.200/apps/api/3685/devices/%deviceID%/on?access_token=6f018dbf-2b96-4df9-92cc-521197f27aad target=a style=opacity:0.5;text-decoration:none]💡[/a]

The value of on will be replaced with:
[iframe name=a width=0 height=0 frameborder=0][/iframe][a href=http://192.168.0.200/apps/api/3685/devices/%deviceID%/off?access_token=6f018dbf-2b96-4df9-92cc-521197f27aad target=a style=opacity:1;text-decoration:none]💡[/a]

For your environment you must make these changes:

  • Change the IP address to your own
  • Replace the MakerAPI id to your own (3685)
  • Replace the command with your own
  • Replace the Access Token with your own

What will happen is that any listed device that reports the state as off will be replaced by a bulb icon that displays at 50% opacity (off state) and is a link to turn it on. Any device that reports the state as on will display a bulb at opacity 1 that is a link to turn it off. The %deviceID% will be replaced for each device so that each device has it's own link. You can of course use your own choice of icons, text, size, opacity etc.

This part [iframe name=a width=0 height=0 frameborder=0][/iframe] simply creates an invisible frame and sends the output from the Maker API to that so the Dashboard appearance is normal.

Once the device changes state Tile Builder will generate a new table with the appropriate appearance and links. I've included "(%deviceID%)" in the description field for demo purposes but it is not required for operation.

To make the dashboard Tile as responsive as possible be sure to set these values to 0.

Note: In this example if I turn the lights off and on in the Tile Builder Grid designer I would need to do a refresh for the table to be updated. This refresh happens automatically when the using the dashboard.

This technique is also documented under Highlight Notes as shown below for future reference.

Because %deviceID% is only available in Grid at present this same technique would not work in other Tile Builder products exactly as is. However, you could insert a complete Maker API URL into any text field using the above technique you would just have to replace %devicecID% with the actual device ID that you want to control. In this case you can use Bitly or something similar to shorten the URL.

Because the Maker API URL's are long and unique the Tile Builder output is quite large. In the above example it was around 2Kb and is stored on the filesystem vs the Tile Builder Storage Device attribute.

1 Like

mornin Gary! I'm not taking advantage of the new Grid features, but of course I do all I can to stay up to date with your work.
This morning after HPM ran updates - I'm now logging an error on a grid child tile I use:


The error in Logs is:

Aah, datatype mismatch.

Can you try replacing this:
myValue = myValue.replace("%deviceID%", "%deviceID" + index + "%")

With this:
if (myValue instanceof String && myValue.contains("%deviceID%")) {
myValue = myValue.replace("%deviceID%", "%deviceID" + index + "%")
}

on line 896.

1 Like

resolved me - app opens, tile correct and no errors in log! thank you G!

1 Like

See this post for suppressing the response to MakerAPI link clicks using Tile Builder.

1 Like

I have updated Tile Builder grid with this bugfix. I did not rev the version number. If you have already updated to 1.0.9 using HPM and encounter this error (should be rare) you will need to do a repair to get the latest version installed on your hub.

1 Like

In the tile grid (Device group) I cannot find or select the %heatingPower% that Thermostat's support.
Other termostat variables like temperature - humidity - etc... is displayed okay in the grid.

In Grid there are 2 modes of operation. Device Group and Free Form.

Device Group is used when you are creating a table of devices with at least one common attribute, such as a group of lights for example. Those choices are limited to those capabilities and attributes published here.

Free Form is when you are selecting each individual attribute that you will place onto the table. An example of this might be a weather tile where each attribute is only represented once vs repeating. In Free Form mode, the app lets you pick from all attributes of the selected device. Here you will find all the standard attributes from the above list, as well as any other custom attributes the driver supports, in this case heatingPower should be visible.

I saw you had posted about being unable to access the Help file. If you continue to have trouble let me know. One thing to know is that the Grid Help file really only talks about features introduced with Grid but does not cover all the basics which had been introduced with Attribute\Activity Monitor. You can find that here.

1 Like

In grid freeform mode using Device attribute to select a device.

How can I display %deviceLabel% in colum 1 of 4 ?
Column 2-3-4 are used to display temp-humidity-heatingPower

regards
Per

Grid breaks the linkage between attributes and columns. For example, I could make my grid 1 x 1 (single cell), select 3 attributes and in the cell set my template as something like.

Device: %deviceLabel% Temp:%temp%F Hum:%humidity%% Lux: %lux%lx

Or I could make the grid 1 x 4 and put one variable in each column. Personal preference.

See how I’m mixing text and variables? Anything between %%s that matches the name of one of your defined variables (the name you give it) will be replaced by the value. Anything else is just text, which could include HTML tags like [b] for example.

It might seem convoluted but you will appreciate the flexibility after you have created a few tiles.

May I ask what kind of tile you are trying to build?

For my 6 pcs Tado thermostats.

column 1 = device label of the thermostat (OK I just write the name of thermostat, but would be nice to use %deviceLabel% here
column 2 = temperature
column 3= humidity
column 4 = heatingPower

anyway your Tile builder is great with a lots of features
now I can make very nice tiles

regards
Per

1 Like

Thanks for your help

Per

1 Like

Yes, an oversight. It will be back in the next version along with %deviceName% and other stuff.

P.S. If you click on Text Fields you will get some good inline help.

1 Like

Attribute Monitor and Activity Monitor have been updated to 1.4.7, but the introduced feature only applies to Attribute Monitor.

I have added the Republish Delay control that I introduced with Grid into these modules. This allows you to specify a minimum time between the republishing of a table. This was introduced to solve the chatty sensor problem. If you have a sensor that is sending updates every minute it would cause the corresponding Tile Builder table to be republished each time.

In my own experience the chatty temperature sensors are typically reporting very small changes that are less than the resolution of the display if it is being truncated to 0 or 1 decimal places.

By setting a Republish delay to every 5 or 10 minutes it means that a new table will not be published until the specified delay has passed. If the Republish delay were 10 minutes, then the table would never be published more than 6 times in an hour. The default for this value is 0, which is the same behaviour as your tiles have today.

For things other than numeric sensors, such as contact sensors, locks, switches etc you should leave this in the default position of 0 (no delay).

Just updated. This is on my tile for Temps.
20 in the last hour so I assume on every attribute change.

app:16592024-03-29 11:14:28.876infoUpdating Variables to Version 1.4.7

app:16592024-03-29 11:08:55.498errorgroovy.lang.MissingMethodException: No signature of method: java.util.ArrayList.toInteger() is applicable for argument types: () values: Possible solutions: toUnique(), toUnique() on line 1688 (method handler)