Cheers josh. Makes sense. Tested and managed to get to this…
There are no scroll bars, and I can’t figure out how to make the text a decent size which would flow better with my scalable dash.
Any ideas? Ta!
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.
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 */
}
1 Like
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!
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:
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.
Can you share a snippet of the raw HTML from the attribute?
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: 20.8°C@33%RH<br><div style='line-height:50%;'><br></div>Outdoor: -15.3°C@54%RH<br><div style='line-height:50%;'><br></div>Wind: 7 kph<i class='material icons he-arrow-down-left2'></i> (16 kph<i class='material icons he-arrow-down-left2'></i>)<div style='line-height:50%;'><br></div>Rain: 0.0 mm CO2: 441ppm<div style='line-height:50%;'><br></div>ATM: 1020.5mbar SPL: 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: 20.8°C@33%RH<br><div style='line-height:50%;'><br></div>Outdoor: -15.3°C@54%RH<br><div style='line-height:50%;'><br></div>Wind: 7 kph<i class='material icons he-arrow-down-left2'></i> (16 kph<i class='material icons he-arrow-down-left2'></i>)<div style='line-height:50%;'><br></div>Rain: 0.0 mm CO2: 441ppm<div style='line-height:50%;'><br></div>ATM: 1020.5mbar SPL: 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: 20.8°C - stable<br><div style='line-height:50%;'><br></div>Min / Max: 16.4°C / 21°C<br><br>Humidity: 33% CO2: 441ppm<br>ATM: 1020.5mbar SPL: 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: 20.8°C - stable<br><div style='line-height:50%;'><br></div>Min / Max: 16.4°C / 21°C<br><br>Humidity: 33% CO2: 441ppm<br>ATM: 1020.5mbar SPL: 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!
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.
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>
2 Likes
Dude - you’re amazing. Will give it a go tomorrow. Thank you!!
1 Like
Worked like a charm. THANK YOU!
2 Likes
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?
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.
Hi Josh, sure thing… here you go:
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:
1 Like
Doh! Okay, got it… works perfectly now! Thanks, Josh.
1 Like
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?
I would check the Hubitat Maker API (app). Looks like the custom tile is having trouble communicating with that.
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.
1 Like
That definitely helps! I think I see where I was going off the rails.
1 Like