@jpage4500 I went this route using my local web server and I can see in the http/access log that the tablet is getting the icons but the tile shows nothing but the background. I don't think the image size of 462x462 is a problem is it? I'm assuming your app scales up/down as needed. I looked at the options for Editing the tile and nothing looks wrong to me. When I look at the options for selecting icons I see only the app-supplied ones but I didn't expect to find external ones shown anyway. Am I missing something?
I haven't tried using a custom URL icon this way although that's basically how the built-in icon search works. It lets you search and ultimately sets the onIconUrl field to a full URL of the image. None of those icons are built into the app.
I made a quick video showing how I changed the switch to use a custom icon and background color - https://youtu.be/bWqSe-39OKk
Scaling shouldn't be an issue.. the biggest issue I'd say would be just that the icon won't fill the entire tile. Right now the icon fills up most of the tile but there's space at the top and bottom for device name and status.
If you want to send me a device log, maybe there's something in there that indicates why it's not being displayed
2 Likes
Nice demo, thanks. I can do it that way if the local hosting won't work. Actually, the local hosting is more of a vendetta than a need at this point 
If I'm in the right place all it shows is switch on/off messages. I got there from long pressing on the tile. Is that not correct?
Are you trying to send a device log or changing the icons? You can edit a tile by either long-pressing on it and selecting "Edit" or put the app into Edit Mode and single-click on a tile. Either way, you'll get the edit tile screen with color/icon options
I was looking for the device log you asked for.
Setting the time appearance is well covered in your video. 
Sure, it's: App drawer -> About -> Support
1 Like
Seems I've found a bug. Though I put in the correct url http://pvr.localdomain/images/GreenCheck.jpeg
the log shows a connection attempt to https://pvr.localdomain/images/GreenCheck.jpeg
and I don't have ssl configured.
Might the https be inserted by your code?
1 Like
I'm not inserting https - just using the URL that's in that field. I just tried importing the config file that looks like this and it worked:
{
"id": "97",
"label": "Large Garage Door",
"name": "Large Garage Door",
"prefs": {
...
"onIconUrl": "http://goo.gl/gEgYUd",
"offIconUrl": "http://goo.gl/gEgYUd",
...
},
Interesting. I added ":80" to the urls and the log is error free, my server shows the files being accessed (200) but there is a blue square where the icon should be. Here is the config line in the log:
{"id":"865","label":"Cam Update Status","prefs":{"sortOrder":0,"onIconColor":"#0000FF","offIconColor":"#0000FF","onBackgroundColor":"","offBackgroundColor":"","deviceType":"TYPE_SWITCH","onIconUrl":"http:\/\/pvr.localdomain\/images\/GreenCheck.jpeg","offIconUrl":"http:\/\/pvr.localdomain\/images\/RedX.jpeg","isHidden":false,"isWide":false}}]}
I'll delete the ":80" and try it again.
OK, so the config line is still the same and the blue square is the same. I'll post a pic if I can get 4.4 to take a screenshot.
Ahh.. I bet this is messing up the image:
"onIconColor":"#0000FF","offIconColor":"#0000FF"
I've got logic to change the color of an image. But, it's meant for solid-color images with a transparent background (ie: the white png icons I'm using). For a jpg it's just going through and turning the whole thing blue. Can you change these values to "0"? Basically, that will just leave them alone and not try to change the image color.
Hehehe, funny I hadn't notice that before. Now the square is black. All else the same, no error.
I'm sorry, I gave you bad info.. looking at the code it should be empty ("") and not ("0").. minor difference but the 0 will translate into #000000 (black)
No worries. I'll try it now.
Same appearance, but the log shows the colors set to black
{"id":"865","label":"Cam Update Status","prefs":{"sortOrder":0,"onIconColor":"#000000","offIconColor":"#000000","onBackgroundColor":"","offBackgroundColor":"","deviceType":"TYPE_SWITCH","onIconUrl":"http:\/\/pvr.localdomain\/images\/GreenCheck.jpeg","offIconUrl":"http:\/\/pvr.localdomain\/images\/RedX.jpeg","isHidden":false,"isWide":false}}]}
though I set the color null like you said
"id": "865",
"label": "Cam Update Status",
"prefs": {
"sortOrder": 0,
"onIconColor": "",
"offIconColor": "",
"onBackgroundColor": "",
"offBackgroundColor": "",
"deviceType": "TYPE_SWITCH",
"onIconUrl": "http:\/\/pvr.localdomain\/images\/GreenCheck.jpeg",
"offIconUrl": "http:\/\/pvr.localdomain\/images\/RedX.jpeg",
"isHidden": false,
"isWide": false
}
Side note: I now realize that I had included another device in my post above. I'll edit it out now.
I just tried this and it worked. I started with the example I did in the app and exported it to Google Drive:
{
"id": "66",
"label": "Outlet 1",
"prefs": {
"sortOrder": 0,
"onIconColor": "",
"offIconColor": "",
"onBackgroundColor": "#00BF0B",
"offBackgroundColor": "#FF0000",
"deviceType": "",
"onIconUrl": "https:\/\/www.iconsdb.com\/icons\/download\/white\/checkmark-256.png",
"offIconUrl": "https:\/\/www.iconsdb.com\/icons\/download\/white\/x-mark-256.png",
"isHidden": false,
"isWide": false
}
},
I used the Text Editor plugin to edit the file to this. I just randomly found some jpg images (no transparency)
{
"id": "66",
"label": "Outlet 1",
"prefs": {
"sortOrder": 0,
"onIconColor": "",
"offIconColor": "",
"onBackgroundColor": "#00BF0B",
"offBackgroundColor": "#FF0000",
"deviceType": "",
"onIconUrl": "http://www.mega-vision.com/i/v16/t/icons/Symbol-Check.jpg",
"offIconUrl": "http://www.mega-vision.com/i/v16/t/icons/Symbol-Stop.jpg",
"isHidden": false,
"isWide": false
}
},
I then imported the file back in and this is what the tile looks like now
Since this is a jpg, the icon color can't be changed by the app. If you're seeing a solid black square it certainly seems like the app is trying to change the icon color. The code that I'm looking at though would handle the empty string ("") and leave the color alone.
1 Like
Removing the backslashes fixed it. I wondered why they were there but left them because I figured there must be a reason.
My icons don't fill the tile like yours but I probably just need to make 'em bigger.
Thanks, @jpage4500!
Damn, those are right pretty.
@jpage4500 before making my icons bigger I tried a smaller tile size in your app but the icon just scaled down and the tile is not filled with it still. This is just a report, I'm good the way it is.
Is it possible to do Folders of Folders?
I'm trying to replicate my screens from Imperihome where you can link to other dashboards to form navigation.
I think I can achieve a similar result if I can put Folders within other Folders, so something like:
First Floor (Folder) -> Bedroom One (Folder) -> Devices ...
-> Bedroom Two (Folder) -> Devices ...
-> Bedroom Three (Folder) -> Entertainment (Folder) -> Devices ...
-> Devices ....It's never going to fill up the entire tile the way it's designed today b/c I'm leaving room for the labels. But, it should scale up or down to fit the space (keeping the same image aspect ratio). I'd still recommend using png images with transparency so you won't see the edges of any image that's used (unless the image itself looks great square I suppose)
1 Like
