[RELEASE] Tile Builder - Build Beautiful Dashboards

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