Hubitat HTML Attribute Display

[josh]

Awesome! Sounds like you got it working!

Custom tiles (and regular tiles) don’t have scroll bars, but if the content is scrollable you should still be able to scroll it either with a scroll wheel on a mouse, a touch pad, or a touch screen. That being said, this tile was originally designed around showing HTML content that would be vertically centered in a tile – like the weather example shown in the first post – so it wouldn’t surprise me if long scrolling content might not work well without some tweaks.

This tile was intended as a proof-of-concept – it’s not intended to be a fully polished tile and was really just something for the community developers to learn from and adapt to their needs.

@Darren

I can’t figure out how to make the text a decent size which would flow better with my scalable dash.

Either the source html attribute from Hubitat would need to offer font scaling or someone would need to modify the custom tile to accommodate font scaling.

That being said, you could modify the custom tile to meet your needs if you want. Toward the bottom of the custom tile code, you could adjust the <style> block. Note that this will adjust the style of all your instances of this custom tile.

In this example, we’ve commented out the align-items: center, so it doesn’t try to vertically center things (you could also just delete this line). Then we added a font-size that scales with the size of the tile. You could just just use a static font size as shown in the next commented out line which is often more appropriate with content like this.

  html,body {height: 100%;margin:0;}
  .main-content {
    display: flex;
    height:100%;
    /* align-items: center; */ /* don't vertically center */
    justify-content: center;
    font-size: 20vh; /* viewport height relative sizing */
    /* font-size: 2em */ /* or use a bigger default font, but not one that scales with the size of the tile */
  }
  .main-content #content {
    text-align: center; /* OPTIONAL center align any text that gets injected */
  }
  .main-content #content img {
    max-width: 80%; /* OPTIONAL scale any inner images if they're too big */
  }

[Oleg]

Hi there,

This bit of code has been a lifesaver. Thank you!

One thing happening that I really don’t know how to get around and hoping someone can help me out.

I have a Hubitat HTML element on my Netamo Weather Station device that renders a small arrow icon in the Hubitat Device Summary depicting wind angle. When I use this custom tile to import that summary onto a tile in SharpTools everything renders perfectly, except those arrows. See images.

As you can see the only difference is the (crucial) arrows are missing. When I inspect the code on the Hubitat page by my rudimentary understanding it seems reference a “Material Icons” font. I’m thinking this is what is not porting over. The font info is here: Material Icons Guide

I’d sincerely appreciate any hints on how I might be able to get this to work and reflect those icons, if that’s possible. Thank you!

[josh]

@Oleg

The font info is here: Material Icons Guide - Google Design

Based on their documentation, it sounds like you could try adding the Material Icons font import to the top of your custom tile:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

For example, the Hubitat HTML Attribute custom tile could be modified like so:

[Oleg]

@josh

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

I could have read little further down the page! Thanks Josh for pointing out what I should have found for myself. Unfortunately this doesn’t seem to work but I will tinker. Thanks again.

[josh]

Can you share a snippet of the raw HTML from the attribute?

[Oleg]

I think what you’re looking for is in this block

 <div class="mdl-card__title">
                        <script>
                        var deviceId = 414;
                        var currentStates = {"zigbeeId":null,"deviceTypeId":654,"currentStates":{"soundPressureLevel":{"floatValue":47.0,"jsonValue":47,"value":"47","deviceId":null,"dataType":"NUMBER","unit":"db","date":"2021-12-06T19:05:32+0000","stringValue":"47","id":null,"numberValue":47,"doubleValue":47.0,"name":"soundPressureLevel"},"pressure_trend":{"value":"down","deviceId":null,"dataType":"STRING","unit":null,"date":"2021-12-06T18:35:32+0000","stringValue":"down","id":null,"name":"pressure_trend"},"sound":{"value":"detected","deviceId":null,"dataType":"ENUM","unit":null,"date":"2021-12-03T19:01:10+0000","stringValue":"detected","id":null,"name":"sound"},"temp_trend":{"value":"stable","deviceId":null,"dataType":"STRING","unit":null,"date":"2021-12-06T19:05:32+0000","stringValue":"stable","id":null,"name":"temp_trend"},"carbonDioxide":{"floatValue":441.0,"jsonValue":441,"value":"441","deviceId":null,"dataType":"NUMBER","unit":"ppm","date":"2021-12-06T19:05:32+0000","stringValue":"441","id":null,"numberValue":441,"doubleValue":441.0,"name":"carbonDioxide"},"Overview":{"value":"<div style='line-height: 0.95; font-size: 0.75em;'><br>Indoor:&nbsp;20.8&deg;C@33%RH<br><div style='line-height:50%;'><br></div>Outdoor:&nbsp;-15.3&deg;C@54%RH<br><div style='line-height:50%;'><br></div>Wind: 7 kph<i class='material icons he-arrow-down-left2'></i>&nbsp;(16 kph<i class='material icons he-arrow-down-left2'></i>)<div style='line-height:50%;'><br></div>Rain:&nbsp;0.0 mm&nbsp;&nbsp;CO2:&nbsp;441ppm<div style='line-height:50%;'><br></div>ATM:&nbsp;1020.5mbar&nbsp;&nbsp;SPL:&nbsp;47db<br></div>","deviceId":null,"dataType":"STRING","unit":null,"date":"2021-12-06T19:05:32+0000","stringValue":"<div style='line-height: 0.95; font-size: 0.75em;'><br>Indoor:&nbsp;20.8&deg;C@33%RH<br><div style='line-height:50%;'><br></div>Outdoor:&nbsp;-15.3&deg;C@54%RH<br><div style='line-height:50%;'><br></div>Wind: 7 kph<i class='material icons he-arrow-down-left2'></i>&nbsp;(16 kph<i class='material icons he-arrow-down-left2'></i>)<div style='line-height:50%;'><br></div>Rain:&nbsp;0.0 mm&nbsp;&nbsp;CO2:&nbsp;441ppm<div style='line-height:50%;'><br></div>ATM:&nbsp;1020.5mbar&nbsp;&nbsp;SPL:&nbsp;47db<br></div>","id":null,"name":"Overview"},"pressure":{"floatValue":1020.5,"jsonValue":1020.5,"value":"1020.5","deviceId":null,"dataType":"NUMBER","unit":"mbar","date":"2021-12-06T18:55:32+0000","stringValue":"1020.5","id":null,"numberValue":1020.5,"doubleValue":1020.5,"name":"pressure"},"min_temp":{"floatValue":16.4,"jsonValue":16.4,"value":"16.4","deviceId":null,"dataType":"NUMBER","unit":"C","date":"2021-12-06T09:20:32+0000","stringValue":"16.4","id":null,"numberValue":16.4,"doubleValue":16.4,"name":"min_temp"},"temperature":{"floatValue":20.8,"jsonValue":20.8,"value":"20.8","deviceId":null,"dataType":"NUMBER","unit":"C","date":"2021-12-06T19:05:32+0000","stringValue":"20.8","id":null,"numberValue":20.8,"doubleValue":20.8,"name":"temperature"},"humidity":{"floatValue":33.0,"jsonValue":33,"value":"33","deviceId":null,"dataType":"NUMBER","unit":"%","date":"2021-12-06T18:35:32+0000","stringValue":"33","id":null,"numberValue":33,"doubleValue":33.0,"name":"humidity"},"Summary":{"value":"<div style='line-height: 0.95; font-size: 0.75em;'><br>Indoor:&nbsp;20.8&deg;C&nbsp;-&nbsp;stable<br><div style='line-height:50%;'><br></div>Min&nbsp;/&nbsp;Max:&nbsp;16.4&deg;C&nbsp;/&nbsp;21&deg;C<br><br>Humidity:&nbsp;33%&nbsp;&nbsp;CO2:&nbsp;441ppm<br>ATM:&nbsp;1020.5mbar&nbsp;&nbsp;SPL:&nbsp;47db<br></div>","deviceId":null,"dataType":"STRING","unit":null,"date":"2021-12-06T19:05:32+0000","stringValue":"<div style='line-height: 0.95; font-size: 0.75em;'><br>Indoor:&nbsp;20.8&deg;C&nbsp;-&nbsp;stable<br><div style='line-height:50%;'><br></div>Min&nbsp;/&nbsp;Max:&nbsp;16.4&deg;C&nbsp;/&nbsp;21&deg;C<br><br>Humidity:&nbsp;33%&nbsp;&nbsp;CO2:&nbsp;441ppm<br>ATM:&nbsp;1020.5mbar&nbsp;&nbsp;SPL:&nbsp;47db<br></div>","id":null,"name":"Summary"},"lastupdate":{"value":"13:02","deviceId":null,"dataType":"STRING","unit":null,"date":"2021-12-06T19:05:32+0000","stringValue":"13:02","id":null,"name":"lastupdate"},"max_temp":{"floatValue":21.0,"jsonValue":21.0,"value":"21.0","deviceId":null,"dataType":"NUMBER","unit":"C","date":"2021-12-06T18:35:32+0000","stringValue":"21.0","id":null,"numberValue":21.0,"doubleValue":21.0,"name":"max_temp"}},"groupId":null,"parentDeviceId":null,"name":"NAMain.70:ee:50:71:45:86","id":414,"label":"Weather Station","deviceNetworkId":"70:ee:50:71:45:86","lanId":null,"version":2,"driverType":"usr"};
                        var layout = {};

                        $(document).ready(function () {
                            //loadUI(deviceId); //may need this back and device.js
                            openSocket();
                        });

                        </script>
                        

Wind: 7 kph<i class='material icons he-arrow-down-left2'></I>

Which renders this:

Thank you!

[Oleg]

Hi Josh,

Since I’ve struck out in my own research was wondering if the code below is helpful for diagnosing what could be going wrong? Thanks and appreciate the help.

[josh]

@Oleg

Since I’ve struck out in my own research was wondering if the code below is helpful for diagnosing what could be going wrong?

It looks like it’s not a standard Material Icon being used. Based on the name he-arrow-down-left2, it seems like it’s a custom icon included by the Hubitat team.

If it’s just arrow icons being used, you could add some CSS in the tile to use normal arrow characters. For example, the following would fix the particular arrow from your example:

<style>
  .he-arrow-down-left2 {
    content: "↙",
  }
</style>

I’m taking an educated guess that the following snippet should cover all the arrow combinations. If that doesn’t cover them all, I would need to see a copy of the driver’s code to see any other icons.

<style>
.he-arrow-down-left2:before {
    content: "↙"
}
.he-arrow-down-right2:before {
    content: "↘"
}
.he-arrow-down2:before {
    content: "↓"
}
.he-arrow-left2:before {
    content: "←"
}
.he-arrow-right2:before {
    content: "→"
}
.he-arrow-up-left2:before {
    content: "↖"
}
.he-arrow-up-right2:before {
    content: "↗"
}
.he-arrow-up2:before {
    content: "↑"
}
</style>

[Oleg]

Dude - you’re amazing. Will give it a go tomorrow. Thank you!!

[Oleg]

Worked like a charm. THANK YOU!

[Paige_Adams]

Okay, so I’m struggling and feeling really stupid about now. I’m sure I’m doing something wrong, but can’t for the life of me figure out what it is.

I’ve followed the instructions to a tee: installed the Maker API app, chosen my devices, allowed access via Remote/Cloud, added the sharptools URL, and copied the endpoint example.

I then created the custom tile, filled in the settings using my device ID and attribute, saved, hit Preview and… I get the following message every time:

I’m sure I’m missing something obvious… anyone have any ideas?

[josh]

Can you share a screenshot of what your tile settings look like? You’ll want to redact the API Key for privacy purposes of course. Or feel free to PM me the screenshot.

[Paige_Adams]

Hi Josh, sure thing… here you go:

[josh]

It looks like you may have edited the settings in the Developer Console just above where the Custom Tile code is defined. Those settings should only be adjusted if you’re a developer looking to tweak the tile.

You’ll want to revert that change and edit the settings directly in the tile instance on your dashboard. There’s some description and screenshots in the following post that should apply here as well:

Weather Tile - Open Weather - Current and Forecast

No. That’s the note from step 3b that you don’t want to edit. You’ll need to revert that change – probably just easiest to restore the Custom Tile definition using the Update from Source option as noted below. Once you have the tile definition back to the originally settings, you want to continue on to step 4 where you add the tile to your dashboard and then edit the settings for the tile on the dashboard. Also note that step 4 calls for the latitude, longitud…

[Paige_Adams]

Doh! Okay, got it… works perfectly now! Thanks, Josh.

[Paige_Adams]

So this was working great until a few days ago, now I’m starting to get the following error. I didn’t change anything… any ideas?

[josh]

I would check the Hubitat Maker API (app). Looks like the custom tile is having trouble communicating with that.

[Paige_Adams]

Thanks, Josh. I checked everything and couldn’t make sense of it, but today it just started working on its own again. Must’ve been a temporary glitch.

[Clay_Wilson]

That definitely helps! I think I see where I was going off the rails.

[josh]

I’m releasing a new version of this which uses the new Custom Tiles: Access to Things and Variables feature.

Import HTML Attribute - Custom Tile

This means you no longer need to setup the Hubitat Maker API. Just pick from the list of devices you already have in SharpTools! Best yet, the updates all happen in real-time rather than relying on polling like the API approach does.

I don’t have any devices with HTML attributes that are still updating in realtime, so my testing of this was fairly limited, but if everything’s working well with it, I’ll update the main post with a link to this as an option. The original API driven version will remain as well if you prefer that.