Multi Color Dashboard Tile

🛎️ Get Help
1

I had created a simple tile device that I just write text to. Here is the basic code I used:
textData = "Some Text"
textTile = "<center><table width='90%' height='90%'><tr>"
textTile += "<td style='text-align: center;'> ${textData}</div>"

That works fine.

Now I am trying to change the color of the tile itself based on what I am sending there. Can't quite figure out the proper syntax. I did the following and all it did was change the text color.
textTile += "<div style='color:#1A77C9;'> ${textData}</div>"
Also Tried this:
textTile += "<hr style='background-color:#1A77C9;'> ${textData}</div>"

Can anyone point me in the right direction?

2

Hard to tell exactly where you go wrong without full code, from what I'm seeing above you're mixing tag types and also not closing tags. It could be any number of issues, but without knowing the full context I can't help more.
To change the background color of a tile you actually need to change it for the outer tile div, it can be addressed in CSS with something like this, you can insert a style-tag before your content:

<style>
#tile-1 {
background-color: #FF0000 !important;
}
</style>

The problem with this is that you need to know the tile-id. It would probably make more sense to do this in the CSS of the Dashboard. There are other ways from inside a driver, but the only ones that come to mind require JS injection. You might be able to force your inserted div to push itself outside of the current div, but not sure how you would do that when the code inside the driver can't "know" what the ID would be of the parent div. There is no way of selecting parents by using a child ID in CSS, at least not until has() has been implemented in the standard.

One way to learn how it works is to use the built-in inspector in the web browser and look at the tiles there and play around with the code to get a "sense" for how it works together.

3

This all started out as more of a learning project and a way to display custom text on a dashboard tile. So I created the driver, then created a device of this type. When I add that device to the dashboard then I can send text via the driver to the tile. It all works great. I thought it might be interesting to change the color of the tile depending on what I want to say. That's where I'm coming from But the color change has to come from the driver, or so I assume, as I change it based on certain conditions.

The driver code is real simple. Here is the entire driver code.

metadata {

definition (

        name: "Tile Driver",

        namespace: "jwwhite",

        author: "Jim White",

        importUrl: ""

        )

        {

        command "sendTile", ["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(){

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

}

def refresh() {

    state.clear()

}

def sendTile(textData) {

        textTile = "<center><table width='90%' height='90%'><tr>"

        textTile += "<td style='text-align: center;'> ${textData}</div>"

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

        log.info "Text displayed on dashboard."

}

It's no big deal. And maybe it's not possible to do what I want. Just something I'm playing around with.

4

By the way, I know there is that Tile Master app running around which would probably do what I want. But it just seemed to be way overkill for me.

5

Yes, I've seen that one, I'm not sure what it does apart from displaying text and icons. Not sure if it changes the whole button colour. One thing I can say about your html above, it's rather broken, no closing tags etc... all tags like <table> needs a </table>. With that said, I was looking at the tiles, I assume you sue the attribute tile to show your textTile attribute? As long as the length is maximum 1024 characters that will work. Some tags are filtered, like the script tag. I'll have a look at how the html look around the attribute tile again

6

Your code starts a <tr> tag but ends a </div> tag. Your browser isn't going to like that.

7

Ok, it is possible to do, this CSS needs tweaking to work in all cases, but it will change the color of the tile.

<div style="color: red; height: 130%; background-color: green; position: absolute; left: 0; top: -30%; width: 100%;">Your Text</div>

Put your formatting in the style attribute, remove all your other elements. Just use the div. The improtant parts are position: absolute and top, left and width, height.

Edit: to move your text, you can put another div inside the first one, then use style to move it where you want it.

8

I think that is a copy problem with me copying the code and trying to get it into this message. It actually works fine. So all the proper characters are there.

9

I shouldn't leave you with half a solution, this will work, change colours as you wish, but the rest should be working universally:

<div style="color: red; height: 130%; background-color: green; position: absolute; left: 0; top: -30%; width: 100%;"><div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">Your Text</div></div>

The "lucky" part here is that you have the outermost tile set with "overflow: hidden", that way the above works :slight_smile:

10

Finally got that working. Had some trouble at first, not sure why. But now I can change the background color dynamically.

Thanks for the help.

11

You're welcome, glad it works!