Updated: Device Name instead of an Icon, here's how I did it

[johnconstantelo]

I now have a lot of devices, and putting them in groups does help quickly locate what you’re looking for, especially when a room may have a few sets of similar lights like ceiling cans. My wife really likes to see the name of the device instead of an icon, and shaking the phone kinda wigged her out a bit, so I came up with this process.

I’ll say it isn’t as simple as an attribute you can put in “standardTile” in your own device type, but it isn’t too bad considering it works and now my wife is using ST more and more.

Here’s how I did it:

1. Create your own device type in the IDE modeled exactly from “Z-Wave Switch”

2. Add “canChangeBackground: true” to the standardTile for “switch” to give you the ability to use your own pictures (credit to twack for showing me that!):

// tile definitions
	tiles {
		standardTile("switch", "device.switch", width: 2, height: 2, canChangeIcon: true, canChangeBackground: true) {
			state "on", label: '${name}', action: "switch.off", icon: "st.switches.switch.on", backgroundColor: "#79b821"
			state "off", label: '${name}', action: "switch.on", icon: "st.switches.switch.off", backgroundColor: "#ffffff"
		}

3. Pick any switch and change the device type to the one you just created via the IDE. Make sure to stop/restart the ST app on your phone.

4. You need a picture/image with a transparent background (PNG format preferred) for all this to work. I’ve included one of mine that can be used as a starter. If the background isn’t transparent, when the state changes (on/off) you will not see a color change, just a quick flash.

5. Using any decent photo editor (I used PaintDotNet - free and easy), create a picture with just text, just like in my attached example. Save it somewhere where can get to it from your phone.

6. In the ST app, go to your device/switch, and tap on the gear to configure it. You should now see an “Appearance” tile enabled by step 2 above. Tap on that, select the picture/image you just created, and you’re done!

Like I said, this isn’t fast, and I’d love for the ST developers to give us the option to select the device name or an icon; but for now this is an acceptable way for me. Hopefully others will find this useful.

[thrash99er (Morgan)]

What capabilities does the Z-wave switch need when creating the new Device type?

[johnconstantelo]

Just “Switch”, unless you’re creating a dimmer, then add Switch Level.

[johnconstantelo]

Here’s another group I just completed. Really didn’t take that long to do.

[johnconstantelo]

Forgot another tip:

Don’t use black text because you can’t see it in ST when centering the image. Use dark grey. It still looks like black in ST and it shows up easily when trying to center your image.

[stevesell (Steve S)]

One drawback I can think of with this is that if ST ever updates the device types (adds new features, etc.) your devices won’t auto-apdate. I know that’s a small probability, but should be noted.

Would love a simple pref in the app for this, however.

Cool workaround.

[johnconstantelo]

@Steve28,

Totally agree. This should be an option/preference users should have in the app.

[lobo5519 (Jim)]

+1 for the option!

[borism]

johnconstantelos

Could you please post the entire code for the switch, bot just the title definitions. Thank you.

[johnconstantelo]

Sure, here it is:

/**
 *  SmartSense Z-Wave Switch by SmartThings, Improved Switch by jscgs350
 *
 *  Capabilities: Switch
 * 
 */
metadata {
	// simulator metadata
	simulator {
		status "on":  "command: 2003, payload: FF"
		status "off": "command: 2003, payload: 00"

		// reply messages
		reply "2001FF,delay 100,2502": "command: 2503, payload: FF"
		reply "200100,delay 100,2502": "command: 2503, payload: 00"
	}

	// tile definitions
	tiles {
		standardTile("switch", "device.switch", width: 2, height: 2, canChangeIcon: true, canChangeBackground: true) {
			state "on", label: '${name}', action: "switch.off", icon: "st.switches.switch.on", backgroundColor: "#79b821"
			state "off", label: '${name}', action: "switch.on", icon: "st.switches.switch.off", backgroundColor: "#ffffff"
		}
		standardTile("indicator", "device.indicatorStatus", inactiveLabel: false, decoration: "flat") {
			state "when off", action:"indicator.indicatorWhenOn", icon:"st.indicators.lit-when-off"
			state "when on", action:"indicator.indicatorNever", icon:"st.indicators.lit-when-on"
			state "never", action:"indicator.indicatorWhenOff", icon:"st.indicators.never-lit"
		}
		standardTile("refresh", "device.switch", inactiveLabel: false, decoration: "flat") {
			state "default", label:'', action:"refresh.refresh", icon:"st.secondary.refresh"
		}

		main "switch"
		details(["switch","refresh","indicator"])
	}
}

def parse(String description) {
	def result = null
	def cmd = zwave.parse(description, [0x20: 1, 0x70: 1])
	if (cmd) {
		result = createEvent(zwaveEvent(cmd))
	}
	log.debug "Parse returned ${result?.descriptionText}"
	return result
}

def zwaveEvent(physicalgraph.zwave.commands.basicv1.BasicReport cmd) {
	[name: "switch", value: cmd.value ? "on" : "off", type: "physical"]
}

def zwaveEvent(physicalgraph.zwave.commands.switchbinaryv1.SwitchBinaryReport cmd) {
	[name: "switch", value: cmd.value ? "on" : "off", type: "digital"]
}

def zwaveEvent(physicalgraph.zwave.commands.configurationv1.ConfigurationReport cmd) {
	def value = "when off"
	if (cmd.configurationValue[0] == 1) {value = "when on"}
	if (cmd.configurationValue[0] == 2) {value = "never"}
	[name: "indicatorStatus", value: value, display: false]
}

def zwaveEvent(physicalgraph.zwave.Command cmd) {
	// Handles all Z-Wave commands we aren't interested in
	[:]
}

def on() {
	delayBetween([
		zwave.basicV1.basicSet(value: 0xFF).format(),
		zwave.switchBinaryV1.switchBinaryGet().format()
	])
}

def off() {
	delayBetween([
		zwave.basicV1.basicSet(value: 0x00).format(),
		zwave.switchBinaryV1.switchBinaryGet().format()
	])
}

def poll() {
	zwave.switchBinaryV1.switchBinaryGet().format()
}

def refresh() {
	zwave.switchBinaryV1.switchBinaryGet().format()
}

def indicatorWhenOn() {
	sendEvent(name: "indicatorStatus", value: "when on", display: false)
	zwave.configurationV1.configurationSet(configurationValue: [1], parameterNumber: 3, size: 1).format()
}

def indicatorWhenOff() {
	sendEvent(name: "indicatorStatus", value: "when off", display: false)
	zwave.configurationV1.configurationSet(configurationValue: [0], parameterNumber: 3, size: 1).format()
}

def indicatorNever() {
	sendEvent(name: "indicatorStatus", value: "never", display: false)
	zwave.configurationV1.configurationSet(configurationValue: [2], parameterNumber: 3, size: 1).format()
}

def invertSwitch(invert=true) {
	if (invert) {
		zwave.configurationV1.configurationSet(configurationValue: [1], parameterNumber: 4, size: 1).format()
	}
	else {
		zwave.configurationV1.configurationSet(configurationValue: [0], parameterNumber: 4, size: 1).format()
	}
}

[borism]

Very good, thank you. Do not need to shake the phone any longer.

[genekend (Gene Kendrick)]

I vote for this option be added to Smartthings.

[geeji (JJG)]

I was referred to this old thread by ST support, when I complained that I could not add a custom label on top of a tile’s icon.
Unfortunately, although it works fine when a single user access the Dashboard from a single phone/pad, it does not work when you want multiple users with different phones/pads to share those same custom icons : each would have to upload the whole set and parameterize its own dashboard.

Until ST offers an option to have a full URL as an icon identifier, most of us are stuck with the ST icon library…

ERRATA [30th October 2014] : actually, the custom icons workaround DOES work, you just have to be patient for the ST servers to propagate your icons to any other iPads/iPhones. You may also have to restart all mobile Dashboards to display those custom icons.

[Volktronic (Zach)]

Yes, seems CRAZY that I can’t use test to label icons. What good does staring at multiple motion sensors with no way to tell which is where?

PLEASE FIX!

[Robert_Royster]

So where do you put the porch light.png so you can choose it?
Where is that done in the graph.api area or just on the ipad of phone app?

[johnconstantelo]

Hi @Robert_Royster, just saw your question, sorry for the delay. To change the icon you just use the app, not ide. I save my PNG’s on Picasa/Google+, but it can also be on your phone. When you are looking at the device details in the app (via the gear), select Preferences and then Set Device Image. You can take a photo, or select from a gallery - which then allows you to pick from local images (Picasa galleries show up here if sync’d), Box, Photos (Google+), or anything else linked/tagged on your device for images.

[magardelin (Marcelo Mag)]

Hi, you only have the option to “Set the device image” on devices like mobile presence or so, but for Light Bulbs or Light Switches I was not able find where to set the device image other than the provided icons in the icons library of ST. Can you help me with that? (I am using iOS). Many thanks!

[johnconstantelo]

Correct. You have to create your own device type (with the developer tools aka IDE) with the updated tile definitions code. That enables you to select images from your own library/collection.

It also doesn’t matter what your phone OS is, which is the nice part!

[magardelin (Marcelo Mag)]

thanks a lot, will give it a try!

[johnconstantelo]

I just realized that this post is from February, and the app has since changed. Here’s an updated Step 4:

The Appearance Tile is now replaced by the Preferences Tile. In that tile you should now see Set Device Image. Tap on that and then Choose from gallery.