Tile UI quirks/hacks/whatever

General Discussion
1

I thought a thread dedicated to UI quirks/hacks/whatever would be useful. A lot of the quirks are “undocumented” (more like “underdocumented”). I’m using iOS, so these may or may not be correct for Android.

In case of height:1, width:6 standardTile and valueTile:

  • Device name will appear in tile
  • backgroundColor is used as the foreground color
  • Case is not respected (converted to upper case)

(as is generally the case, to have individual states have different hard-coded labels or use different colors, use standardTile)

To contrast with height:1, width: 4 valueTile:

  • No device name
  • backgroundColor is used as background color
  • Case is respected

Quirks

  • standardTile --If has an “action” attribute, the label will appear lower on the tile than if there’s no action attrib
  • the icon which the “main” tile specifies will be used as the device icon; add canChangeIcon: true to the main tile to allow the user to pick an icon

The following variables work in tile labels:

  • ${currentValue}
  • ${name}
  • ${unit}
  • any other? what’s the diff between currentValue and name in this usage?

Below I’m posting some screenshots with the tiles{} section as examples. Would be interested in seeing any additional “non-traditional” UI examples.

2 Likes
2 

tiles(scale: 2) {
		multiAttributeTile(name:"temperature", type:"generic", width:6, height:4) {
			tileAttribute("device.temperature", key: "PRIMARY_CONTROL") {
            	attributeState "temperature",label:'${currentValue}°',backgroundColors:[
                	[value: 32, color: "#153591"],
                    [value: 44, color: "#1e9cbb"],
                    [value: 59, color: "#90d2a7"],
					[value: 74, color: "#44b621"],
					[value: 84, color: "#f1d801"],
					[value: 92, color: "#d04e00"],
					[value: 98, color: "#bc2323"]
				]       
            }
            tileAttribute("device.humidity", key: "SECONDARY_CONTROL") {
                attributeState "humidity", label:'humidity ${currentValue}%'
            }
		}
//ROW 1
		standardTile("illuminance", "device.illuminance", decoration: "flat", width: 2, height: 2) {
            state "default", label:'${currentValue} ${unit}', unit:"lux", icon: "st.illuminance.illuminance.bright"
		}
        standardTile("ultravioletIndex", "device.ultravioletIndex", decoration: "flat", width: 2, height: 2) {
			state "default", label:' UV index ${currentValue}', icon: "st.Weather.weather14"
		}
		standardTile("acceleration", "device.acceleration", decoration: "flat", width: 2, height: 2) {
			state("active", label:'tampered', icon: "st.custom.buttons.subtract-icon", backgroundColor:"#ff0000")
			state("inactive", label:'not tampered', icon: "st.custom.buttons.subtract-icon", backgroundColor:"#ffffff")
		}        
//ROW 2 
    //left column
        valueTile("lastUpdate", "device.lastUpdate", width: 4, height: 1) {
			state "default", label: 'Last update ${currentValue}'
		}
		valueTile("battery", "device.battery", width: 4, height: 1) {
			state "default", label:'Battery level ${currentValue}%'
		}        
    //right column
		standardTile("configure", "device.configure", decoration: "flat", width: 2, height: 2) {
			state "configure", label:'config', action:"configure", icon:"st.secondary.tools"
		}
        
		main(["illuminance"])
		details(["temperature","illuminance","ultravioletIndex","acceleration","lastUpdate","battery","configure"])
	}
2 Likes
3

IMG_6170.PNG640×1136 57.2 KB 

tiles(scale: 2) {
    valueTile("modeCurrent", "device.modeCurrent", decoration: "flat", width: 6, height: 1) {
			state "default", label:'${currentValue}', backgroundColor:"#00a0dc"
    }    
    standardTile("Office", "device.Office", decoration: "flat", width: 3, height: 3) {
			state "inactive", label:'Office', action:"modeOffice", icon:"st.Home.home15", backgroundColor:"#ffffff"
			state "active", label:'Office', action:"modeOffice", icon:"st.Home.home15", backgroundColor:"#dcdcdc"
    } 
    standardTile("Away", "device.Away", decoration: "flat", width: 3, height: 3) {
			state "inactive", label:'Away', action:"modeAway", icon:"st.nest.nest-away", backgroundColor:"#ffffff"
			state "active", label:'Away', action:"modeAway", icon:"st.nest.nest-away", backgroundColor:"#dcdcdc"
    }
    standardTile("Janitorial", "device.Janitorial", decoration: "flat", width: 3, height: 3) {
			state "inactive", label:'Janitorial', action:"modeJanitorial", icon:"st.Office.office10", backgroundColor:"#ffffff"
			state "active", label:'Janitorial', action:"modeJanitorial", icon:"st.Office.office10", backgroundColor:"#dcdcdc"
    }
    standardTile("Night", "device.Night", decoration: "flat", width: 3, height: 3) {
			state "inactive", label:'Night', action:"modeNight", icon:"st.Weather.weather4", backgroundColor:"#ffffff"
			state "active", label:'Night', action:"modeNight", icon:"st.Weather.weather4", backgroundColor:"#dcdcdc"
    }
		main(["modeCurrent"])
		details(["modeCurrent", "Office", "Away", "Janitorial", "Night"])
}
1 Like
4 

tiles(scale: 2) {
		multiAttributeTile(name:"switch", type: "lighting", width: 6, height: 4, canChangeIcon: true){
			tileAttribute ("device.switch", key: "PRIMARY_CONTROL") {
				attributeState "on", label:'${name}', action:"switch.off", icon:"st.switches.light.on", backgroundColor:"#79b821", nextState:"turningOff"
				attributeState "off", label:'${name}', action:"switch.on", icon:"st.switches.light.off", backgroundColor:"#ffffff", nextState:"turningOn"
				attributeState "turningOn", label:'${name}', action:"switch.off", icon:"st.switches.light.on", backgroundColor:"#79b821", nextState:"turningOff"
				attributeState "turningOff", label:'${name}', action:"switch.on", icon:"st.switches.light.off", backgroundColor:"#ffffff", nextState:"turningOn"
                attributeState "panic", label:'${name}', action:"alarm.off", icon:"st.security.alarm.alarm", backgroundColor:"#e86d13", nextState:"resetting"
                attributeState "resetting", label:'${name}', icon:"st.security.alarm.clear", backgroundColor:"#e86d13"                
			}
			tileAttribute ("device.level", key: "SLIDER_CONTROL") {
				attributeState "level", action:"switch level.setLevel"
			}
		}
		standardTile("refresh", "device.switch", width: 2, height: 2, decoration: "flat") {
			state "default", action:"refresh.refresh", icon:"st.secondary.refresh"
		}
        standardTile("alarm", "device.alarm", width: 2, height: 2, decoration: "flat") {
            state "off", label:'', action:"alarm.strobe", icon:"st.secondary.strobe", backgroundColor:"#ffffff"
			state "strobe", label:'', action:"alarm.off", icon:"st.secondary.strobe", backgroundColor:"#e86d13"
        } 
        standardTile("protection", "device.protection", width: 2, height: 2, decoration: "flat") {
            state "default", label:'Updating...', action:"protectionDisabled", icon:"st.Home.home30"
			state "disabled", label:'Protection Off', action:"protectionSequenceControl", icon:"st.Home.home30"
            state "sequence", label:'Sequence Ctrl', action:"protectionRemoteOnly", icon:"st.Home.home30"
            state "remote", label:'Remote Only', action:"protectionDisabled", icon:"st.Home.home30"
		}
        valueTile("range", "device.range", width: 2, height: 1, wordWrap: true) {
			state "default", label:'${currentValue}'
		}
        valueTile("ramp", "device.ramp", width: 2, height: 1, wordWrap: true) {
			state "default", label:'${currentValue}'
		}
        valueTile("delayed_off", "device.delayed_off", width: 2, height: 1, wordWrap: true) {
			state "default", label:'${currentValue}'
		}
        valueTile("kickstart", "device.kickstart", width: 2, height: 1, wordWrap: true) {
			state "default", label:'${currentValue}'
		}
        valueTile("panic_on", "device.panic_on", width: 2, height: 1, wordWrap: true) {
			state "default", label:'${currentValue}'
		}
        valueTile("panic_off", "device.panic_off", width: 2, height: 1, wordWrap: true) {
			state "default", label:'${currentValue}'
		}
		main(["switch"])
		details(["switch", "refresh", "alarm", "protection", "range", "ramp", "delayed_off", "kickstart", "panic_on", "panic_off"])
	}
1 Like
5

Note that the “main” tile will appear in the Things list. (Also, in the latest mobile app, at least in iOS, you can re-order the Things list in preferences.)

2 Likes
6

Well, it seems ${unit} no longer works labels… :frowning:

Anyone know how to get this working?

1 Like