ultraTile: Setting HTML style parameters with Tiles!

This post may require a couple of re-reads before it makes complete sense. First, feast your eyes on this 2-column ultraTile™…

The corresponding dash is composed of:

  • a single 2x2 HTML tile dead center;
  • three clusters of (3) 1x1 Device Tiles;
  • each Device Tile has a Tap action defined;
  • the Tap action sends a setVariable command along with a string value of “red”, “green” or “blue”;
  • on the HV side, one of three Style overrides kicks in to change the TileStyle (mainly involving the Tile’s bg color) to red, green or blue;
  • on the HE side, the receiving Variable Connector then sets its variable attribute to the sent string;
  • that changed event causes “Tile Template Multi-Device Manager” app on HE to update a preset HTML template with the updated value(s);
  • the updated HTML payload is then passed back via Maker API to hubiVue for insertion into the central HTML Tile.

tl;dr You press buttons and the pretty colors change!

But this took me at least three hours of serious research and tweaking - not to mention installing apps, drivers, devices and hub variables behind the scenes - to make the round-tripping process work according to plan. But IT DOES WORK!

Pro Tip: When testing an ultraTile, you must be in “View Dash Mode”, not “Edit Dash Mode”. The latter temporarily disables all Tap events.