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

I spoke too soon! I killed the app on my iPhone and then re-opened it then tried again. It worked that time. I guess I missed the step written above that says to close and re-open the app, eh… :smile:

Great! I did it with a Wemo Light Switch and worked perfect!!!
Thanks

This is such a great tip… I used it to make custom icons including images of my real lamps and things, including a pressure mat which has no device type. Equipped with this tip and Photoshop there is no limit to how nice one can make the interface. The edit is quick so I won’t even mind updating if the core code changes later. Again, hopefully ST will include adding names as a feature later.

Thanks @kewashi. If you do modify one of ST’s core/standard device types, you can always go back to it after updating the device image in the app. I did that for all my zwave switches. Somehow your new image is preserved when going back to the standard device type.

1 Like

I’ve been trying this, but when I set canChangeBackground: true, the background just changes to a faded window-screen style but doesn’t appear to have the uploaded image, even after killing the app on iOS and restarting it. See attached; the light on top is using the standard Z-Wave switch device type, the one on the bottom is using the custom one. I’ve included the modified device code; what am I missing?

metadata {
	// Automatically generated. Make future change here.
	definition (name: "Z-Wave Switch - Custom Icon", namespace: "jheffner", author: "SmartThings") {
		capability "Actuator"
		capability "Indicator"
		capability "Switch"
		capability "Polling"
		capability "Refresh"
		capability "Sensor"

		fingerprint inClusters: "0x25"
	}

	// 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))
	}
	if (result?.name == 'hail' && hubFirmwareLessThan("000.011.00602")) {
		result = [result, response(zwave.basicV1.basicGet())]
		log.debug "Was hailed: requesting state update"
	} else {
		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.basicv1.BasicSet 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.commands.hailv1.Hail cmd) {
	[name: "hail", value: "hail", descriptionText: "Switch button was pressed", displayed: false]
}

def zwaveEvent(physicalgraph.zwave.commands.manufacturerspecificv2.ManufacturerSpecificReport cmd) {
	if (state.manufacturer != cmd.manufacturerName) {
		updateDataValue("manufacturer", cmd.manufacturerName)
	}
}

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() {
	delayBetween([
		zwave.switchBinaryV1.switchBinaryGet().format(),
		zwave.manufacturerSpecificV1.manufacturerSpecificGet().format()
	])
}

def refresh() {
	delayBetween([
		zwave.switchBinaryV1.switchBinaryGet().format(),
		zwave.manufacturerSpecificV1.manufacturerSpecificGet().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()
	}
}

Did you get any answer for this, seeing the same thing here, I change the image but it doesn’t show up in the ios app

This happened to me a few times too. To fix it I did the following. First change the canChangeIcon: to false. Then refresh the mobile app. Next load in a random image - something different than what you were trying to do initially. Refresh the app again. Next load in the image that you really want. I don’t know why this works but it does.

1 Like

Here’s a screen shot of my icons after using this tip. This is why I believe it is worth the effort to figure this out. I made my icons using Photoshop… Note that when you do this, save the image as web in PNG format. Also make sure you leave room at the bottom for the OFF status by shifting the image upward. I like the blue better than the brown - will be changing those soon. And I tried using a photo for the Dinette and it just looks goofy, so that will get changed too.

1 Like

Great job. I AGREE “I’d love for the ST developers to give us the option to select the device name or an icon”

1 Like

Just learned this the other day, but ST already has this feature, all you have to do is shake your device and the icons change to the name. Shake again and they go back. The line wrapping could use some work, but its apparently been a feature for a while now.

Many people know about the shake option, but most people are still looking for permanent text display. The two are not equivalent in daily use.

  1. the display after shake is too brief, especially once you have several dozen devices to scroll through. This is the most common issue.

  2. the shake is physically difficult for many people. (I myself am quadriparetic with limited hand function. My phone is in a caddy. Works fine for touch and voice, no shake.)

1 Like

OMG… I had no clue about the shake option, and as JD points out, shake isn’t for everyone. My wife would never do that - I can barely convince her to use the app at all instead of the minimote and the wall switches. Ther permanent image just makes it all that much more friendly. But it sure is cool to know about the shake option - I will use that for my thermostats which I haven’t figured out how to hack yet to show the name, the temp, and the set point all at once. Project for another day!!!

1 Like

Shake it is why we all luv ST so much… I am now bored with the Taylor Swift joke. :wink: I think shake it should be a permanent feature in ST app. Rather should be the Smartrhing logo and Taylor Swift should be the spokesperson for ST… It will sell as hot cakes! Wish I was in ST marketing. :wink:

1 Like

I am sharing my icons and the Photoshop template that I used to create them here on my website. Feel free to check them out…
http://www.kenw.com/st/index.html

Here’s what they now look like - updated from above

1 Like

THANK YOU SO MUCH . . . What a fantastic little hack for icons this is, it should 110% be integrated as an option further down the line by SmartThings :smiley:

As a graphic designer i had to make this perfect for my situations but still on theme with ST’s current stuff or it would bug my OCD nature, so i wanted it to still appear as icons . . . but just my own versions that represent my personal products as a pose to something generic to help me identify them . . .

I then noticed that when the ST ICONS were clicks they changed colour so to speak to be darker over green which made me realize the icons wernt a flat colour they had dropped opacity . . .

So if you want to match the styling of ST ICONS with your own custom images, then here is the stats and a little diagram to explain what i mean . . .

All the ST ICONS are actually “BLACK” but the opacity is “30%” making them appear the mid grey they appear over white background, but then the darker green once over the green background . . . as illustrated in the attached image of the custom icon i made for the light in my Jellyfish Aquarium :smiley:

So remember: BLACK / 30% OPACITY saved as a “.PNG” (with a transparent background)

glad i could share this back with you also to hopefully help others,
yet again great hack guys . . . Thank you.

3 Likes

Helpful hint, thanks!.. But I really want to see your… Jellyfish Device!?

1 Like

I’d be afraid to see what development and support would be like after paying TS :scream:

and how many $99 boxes would need to be sold just to break even?

How about some dough from her as we are all promoting her “shake it off” on iOS ST app. :wink:

@tgauchat

Thats another project im working on, the icon you see is just for the lighting strip inside i tweaked with a Dresden FLS-PP lp :smile:


(as shown here)

however if your interested in aquarium monitoring within smartthings, check out our upcoming project: SmartThings + SenEye (Aquarium Monitoring)

cheers, kyle

3 Likes

With the platform/app updates it appears this method doesn’t work for new devices as there is now an “Update Icon” and “Device Image” preference and the Icon overrides the device image you choose with no option to select a custom icon. All of my previous devices still show the device images I had though. Granted now you can see the device names, I still would like to have my own images with the device names :smile: