Changing attribute of a switch from ON/OFF to any other word on the dashboard

Hi sburke781,

i have changed tile from the attribute to switch and the css worked fine. running and stopped. but the problem is that i can toggle the state of the switch which i am trying to avoid. is there a way to disable the ability to toggle the tile

image

Technically yes, but not in a nice way. You could place a tile over the top. I probably don't have time to explain it, but I am thinking a text tile with no text, a transparent background and a z-index higher than the switch tile. Some can be achieved through the regular UI, the z-index needs to be done via some CSS (or using my editor if you want to install it).

Here's an exmaple of the z-index:

#tile-70 {z-index: 999; !important;}

Personally I'm leaning back towards @aaiyar 's suggestion, but I expect that could be achieved using a Hub Variable and an RM rule, rather than needing to write a driver. The Hub Variable should then be able to be added to the dashboard and display the value.

See how you go, but I can't do anything meaningful until later this evening for me.

thank you all for the help.

I am tired trying for today. it is almost 2 am. i can barely open my eyes.

I will try it tomorrow

thanks again and have a nice day.

1 Like

Hi Sburke781,

your cheating text tile worked. the status changed without being able to toggle the tile.

the only minor problem is to center the word in the tile. if you see it it is a little bit high and to the left.

do you how to do that in the css?

1 Like

I expect it can be done, but it's not my forte. We'd need to play with some different options like what @Navat604 posted earlier to get it to work.

got it working

thank you all.

i still want to play around with the back colors for the other tiles

image

1 Like

The css trick is nice, the Virtual driver would be my method as css customizations don't port via api but do work with HE dashboards...
images of words... I wonder (and never tried it yet) if you could make a device icon that has the word you want - like a png for on and png for off. I think I used a trick similarly once when I wanted Alexa virtual switches to show on my android dashboard. I also used the trick for my battery manager app...

1 Like

Yeah, css for attribute is very tricky. There are way too many layers for the content. Being a noob, I can't remember how many hours spent on trying to get something to work.

@user3

I know you have a satisfactory solution, but this is what I meant by using a custom driver and the attribute template tile in Dashboard. In this case, I modified @ogiewon's "Virtual Presence with Switch" driver, such that turning the switch on/off sets a custom attribute called "runStatus" to RUNNING/FAULT.

You would need to setup an automation to turn this switch on/off based on your thermostat status (simple to do in Basic Rule). And then here's what the Dashboard tile would look like:

Screen Shot 2022-05-01 at 12.09.50 Screen Shot 2022-05-01 at 12.09.59

Here's the driver:

Virtual Run Status with Switch
/*
 * Virtual Run Status with Switch
 *
 *
 *  Copyright 2018 Daniel Ogorchock
 *
 *  Licensed Virtual the Apache License, Version 2.0 (the "License"); you may not use this file except
 *  in compliance with the License. You may obtain a copy of the License at:
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
 *  on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License
 *  for the specific language governing permissions and limitations under the License.
 *
 *  Change History:
 *
 *    Date        Who            What
 *    ----        ---            ----
 *    2018-08-04  Dan Ogorchock  Original Creation
 *    2018-11-18  Dan Ogorchock  Added arrived() and departed() custom commands
 *    2022-05-01  Ashok Aiyar    Modified @ogiewon's driver for a custom attribute tile
 * 
 */

metadata {
    definition (name: "Virtual Run Status with Switch", namespace: "ogiewon", author: "Daniel Ogorchock") {
        capability "Actuator"
        capability "Switch"
        attribute "runStatus","string"
		
        command "running"
        command "fault"
    }   
}

def running() {
	on()
}

def fault() {
	off()
}

def on() {
    sendEvent(name: "runStatus", value: "RUNNING")
    sendEvent(name: "switch", value: "on")
}

def off() {
    sendEvent(name: "runStatus", value: "FAULT")
    sendEvent(name: "switch", value: "off")
}

def installed() {
}
1 Like

Hi aaiyar,

I will give it a try. I will let you know how it come out. Can I still use css to change the color of the tile like what i have done in switch?
this is the sample of my dashboard status tiles.

I could not get it better than that. i wish I can change the whole background color to red instead of just the word without changing the switch template back ground or else all switched will be red when they are turned. i want to be able to change back ground to specific tile when needed. do you know how to do that?

Again thank you.

1 Like

Definitely.

I'm not an expert on CSS at all. So I'm tagging @sburke781

Turns out to be really simple to do with the Attribute tile. Again, I'm no expert in CSS, but this is what I did:

Screen Shot 2022-05-01 at 12.39.28 Screen Shot 2022-05-01 at 12.39.34

Here's the CSS:

 "customColors": [
    {
      "template": "attribute",
      "bgColor": "rgb(18,154,0)",
      "iconColor": "rgb(0,0,0)",
      "state": "RUNNING"
    },
    {
      "template": "attribute",
      "bgColor": "rgb(154,18,0)",
      "iconColor": "rgb(0,0,0)",
      "state": "FAULT"
    }
  ],
1 Like

Yeah, the templates (I expect) only have a limited set of settings you can ovveride, so they weren't an option for the text, but colours they can be used for. A much better solution than what I was going to suggest.... :slightly_smiling_face:

1 Like

Thank you. I did what you have said. it worked great. I have created a simple rule for ON and OFF state.

I still want to try with the CSS using the above code you have given me to change the color.

this is my first try .

tt is the boiler lamp fault trial. it works but need to add the colors to it.

2 Likes

Just remember (or be aware) the custom colors are part of the larger layout JSON tab, not the Custom CSS that you would have edited previously.

1 Like

that was my next question. i want to only change the color a specific tile.

The custom colors are for any tile that uses that template (attribute in this case).

If you don't want all attribute tiles with the state value to be formatted that way, then you may need to revert to my option of a switch tils overlayed by the attribute tile and some css, or hopefully someone else comes up with a better idea...

1 Like

I haven't ventured into very complicated dashboards as of yet...but just wondering if this couldn't be handled the way I had to invert the status of a hacked contact sensor (attached to a current sensor) for notification clarity?

I created a string variable which was loaded with "PUMP ON" when the contact was CLOSED and "PUMP OFF" when the contact was OPEN. When the notification comes upon a state change nobody has to think

I'm probably looking at the problem too simply or not realizing the scope what can drive a button on the dashboard.

@user3

To expand on what @sburke781 wrote:

  1. You can have multiple uses of the attribute tile on the same dashboard.
  2. All those tiles that display the state "RUNNING" will be green.
  3. All those tiles that display the state "FAULT" will be red.

Tiles that display other attributes will be the default gray, or whatever other color you assign them.

So even if you use the Attribute template, you are not stuck to only using red and green. It can vary between states.

1 Like

Gents,
Finally done. Thank you all for the help.

I have added the attribute in the json section as listed below.

I also copied aaiyar driver for running/stopped.

3 Likes