Device Item Display

🛎️ Get Help
1

First of all, I don't really understand device drivers so what I do is sort of trial and error.

I created a simple tile device driver that allows me to display text, background color, and text color. It works great.

But when i go to that device in the devices tab, whatever last background color I used on the tile is what shows up there as the background. And the items, or fields, seem to be all over the place instead of organized like most standard devices are.

I would think there is something I need to put in the driver to stop this from happening but don't know what it is. Something in the metadata, or titleing or something.

Any thoughts?

2

I assume you're accomplishing this via html formatting tags... and as you suspect, something is likely spilling over and applying to the whole page. Hard to make any concrete determinations or suggestions unless you share the actual driver code, though

3

I’ll paste up the code on here tomorrow. Thanks.

4

Here is the code I am using. Kinda cobbled it together by trial and error.

metadata {
definition (
	name: "Tile Color Driver",
	namespace: "jwwhite",
	author: "Jim White",
	)
	{
	command "sendTile", ["string","string", "string"]
	capability "Actuator"
	capability "Refresh"
	attribute "Text", "string"
	}

preferences() {    	
        input("logEnable", "bool", title: "Enable logging", required: true, defaultValue: true)
}

}

def initialize() {
refresh()
}

def updated() {
refresh()
}

def installed(){
}

def refresh() {
state.clear()
}

def sendTile(txColor,color,textData) {

textTile += "<div style='color: ${txColor}; height: 140%; width: 105%; background-color: ${color};font-size: 35px !important;"
textTile += "position: absolute; left: 0; top: -30%;'>"
textTile += "<div style='position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);'>"
textTile += "<td style='text-align: center;'> ${textData}</div></div>"

sendEvent(name: "Text", value: textTile, displayed: true)

// log.info "Text displayed on dashboard."
}

5

Missing a </td> after your textData

6

What does that do?

7

closes the <td> that opened for your textData - needs to be before the </div>’s to make everything align contextually

8

Added the but didn’t make any difference. Tile still works fine but when looking at it in the devices it still shows up with the last background color. Makes it very hard to see.

9

officially a <td> tag denotes a table cell within a table row -- and is usually therefore within those respective tags, e.g.

<table><tr><td>...content...</td></tr></table>

might try adding those tags around the current <td> content? However, the bgcolor is defined in your

tag... so not sure these will have any impact.

10

Can you clarify where the actual problem is? Or maybe provide a screenshot? Do you mean the "Devices" tab in the mobile app (this is pretty new and I wasn't aware of any way that attributes could affect the display of these), the "Devices" page in the admin/web UI (I've never seen HTML actually get rendered here--always just the raw text), or somewhere else (logs, Dashboard tile, etc.)?

11

My HTML knowledge is old-school, really don't know much CSS -- but the following seems to approximate what you are trying to accomplish?

textTile += "<table width=100% height=100% style='background-color: ${color}'>"
textTile += "<tr><td style='text-align: center; color: ${txColor}'>${textData}</td></tr></table>"

sendEvent(name: "Text", value: textTile, displayed: true)

The problem seems to stem from Hubitat's Device page using <ul> (unordered list) and <li> (list item) for displaying device attributes, and the position CSS in your <div> is causing it to spread beyond the borders of the <li>

12

That code snipet you suggested works and solves my initial issue. When I go to the device in the web UI it is displayed correctly now.

However, on the tile on the dashboard the background color I specify doesn't go all the way to the edges. I tried increasing the width and height, but it never gets there. Any suggestions on that?

13

To clarify, the dashboard tile works just as I want. But if I go to the device in the Hub Web UI is where the issue is. Here is a pic of what I mean.

Device
Device1130×678 71 KB