Hubitat HTML Attribute Display

This is a proof-of-concept for displaying HTML Attributes from Hubitat in a Custom Tile.

image

:man_technologist: This is one of several sample tiles that were built as part of the Custom Tiles release and is not intended to be a fully polished tile. Please feel free to learn from it, copy from it, or play with it.

image

What does it do?

Some community developed Hubitat device handlers use a ‘hack’ in which they stuff device attributes with HTML to enable them to display data as tables or embed images.

The Hero Attribute tile would normally display the HTML as text as a security precaution:
image

This tile can render the HTML and display embedded images/tables in a separate secure context:
image

Setup

Enable Hubitat Maker API

Follow the steps below to enable Maker API in Hubitat admin page.

  • Install the Maker API app and select the device(s) that you want to display
  • Enable Allow Access via Remote/Cloud
  • Add https://run.sharptools.app/ in the Allowed Hosts (for CORS) field
  • Scroll down and copy one of the example cloud endpoints
  • Make sure to press Done to save your changes!

Create Custom Tile

  • Tap the Import button above to import the tile, then scroll down and save the tile
    • Optionally, press Preview to try out the tile without saving (you’ll need the details from the Enable Hubitat Maker API section above)
  • Go to the desired dashboard, Edit, and Add Item. Tap “Custom Tile” in the Other section and add this custom tile.
  • Edit the tile, fill-in the settings, and save:
    • Sample Maker API Url - use one of the Hubitat Maker API Cloud endpoints
    • Device ID - enter the ID of a device with an attribute stuffed with HTML
      • Note that you can find the device ID in the URL of your browser when you are viewing a devices details within the Hubitat Admin UI page
    • Attribute - enter the name of the attribute that is stuffed with html