Help on custom dimmer light tile and icons

[cw-kid]

Hi

So I am using Imperihome currently and building my replacement Home Remote slowly.

In Imperihome I had my own set of custom icons for widgets aka tiles.

I haven’t fully decided if I want to go this route with Home Remote or keep it simple with the default simple looking icons.

Here is what my Lounge Main Light tile looks like in Imperihome:

ON:

OFF:

And this is how it currently looks in the Home Remote:

ON:

OFF:

I like that the Imperihome tile has a dimmer slider right on the tile, in Home Remote I don’t and I have to click the 3 dots to get to the dimmer. Is it possible to add a dimmer slider on to the tile?

EDIT:

I copied the “Slider” from the LightDetails.xaml file to my custom tile and I now have a working dimmer slider.

Alternative layout looking a little more like the Imperihome widget.

I like that the icon is bigger in Imperihome and also changes the icon for the ON / OFF states.

The ON / OFF button on the Imperihome tile looks good but its kinda small on my phone screen and tricky to press correctly with fat fingers sometimes.

I like that the Home Remote tile you can click it anywhere to turn ON / OFF the light.

So pros and cons to both.

I have made a copy of the DimmerTile.xaml file for experimenting with.

I see I can make the icon bigger by changing the IconSize on the IconElement, I like the bigger looking icon.

And now I am stuck. How to make the icon change upon the ON / OFF state of the light ?

Any HR wizards fancy editing the DimmerTile.xaml or pointing me in the right direction.

Attached are my icons files I’d like to use.

Also what the difference with a LightTile.xaml and a DimmerTile.xaml ?

Thanks

[cw-kid]

Screen shot from Design mode:

I have tried the following, I now see the “OFF” bulb icon, but the “ON” bulb icon is not displayed when the light is turned on.

For the IconElement I removed the existing binding for @Device.Icon:

I then have two DataTriggers:

ON:

OFF:

I am on the right lines but its not quite correct.

EDIT:

Maybe it is working but I cannot see the ON bulb icon because of the Grey colour that covers the tile when its turned on. How to remove that? or make the grey colour much more opaque not solid colour.

EDIT 2:

On the Home tab, I changed the “Accent” colour which was this grey colour, to be “No Color” instead. However my bulb on icon doesn’t seem to work still.

Screen shot from Emulator mode:

EDIT 3:

Its working now I have to uncheck Show as Monochrome !

I would still like to know about the Grey “Accent” colour that covers the whole tile when the light is on.

Can this be disabled altogether ? Or can I make the grey accent colour much more opaque ?

Thanks

[Jdamore]

Theres a data trigger on the grid of the tile that changes the color depending if the device is on or not: Change the setter to your liking…

[Jdamore]

If you want to get the the grey ring around the tile like you have in Imperihome, add a button to the grid of the tile, make the border property grey (or whatever you want), give it a thickness, give it a corner radius, remove the text “button”, and be sure its directly under “<> grid”. Edit: and remove the tick for IsHitTestVisible

[cw-kid]

@Jdamore

If you want to get the the grey ring

[cw-kid]

Problem.

Without the grey border button, in the emulator I can click where the red X is to turn the light on and off.

However when I have the border button present I cannot click there. I have sent the border button to the back.

Cheers

[cw-kid]

@Jdamore

Theres a data trigger on the grid of the tile that changes the color depending if the device is on or not

I see it now, looks like this:

I tried adding a second Setter for Opacity set it to 90 and nothing seems to change when the device is on the grey is still pretty solid looking.

[Jdamore]

For the GreyBorder button, remove the tick for IsHitTestVisible.

[cw-kid]

Grey border issue fixed and working now !

[Tarkus (John Lattarulo)]

Watch my video tutorial on Triggers.

[cw-kid]

Thanks, I figured out using my own state icons earlier.

Stuck on the Tile grid, solid accent colour that appears when the light is turned on.

I don’t know what the different Resources mean but trying to make it much more opaque?

[Jdamore]

for opacity, if you want 90% make the value 0.9.

Also, I should mention, I was shooting-from-the-hip when I mentioned the greyborder button and didn’t think through changing the background of the tile if the device is on or not. You will need to change the background of the grey border button otherwise you will see the corners (of the grid) outside of your grey border. You can simply copy the datatrigger from the grid to the button.
Thats a mouthful… hope you see what I mean haha

[cw-kid]

@Jdamore

Also, I should mention, I was shooting-from-the-hip when I mentioned the greyborder button and didn’t think through changing the background of the tile if the device is on or not. You will need to change the background of the grey border button otherwise you will see the corners (of the grid) outside of your grey border

OK I’ve just done this not sure why? Doesn’t look any different when on.

I think you mean the solid grey colour should only be within the border area. That would look nice but its not doing that as you can see:

Thanks.

And I still can’t make it more opaque even with 0.9 also tried 0.1 doesn’t seem to make much different.

I’ve added a second setter on both the grid and on the border button and set it to 0.9

But it still looks like the above screen shot with pretty solid grey colour, when the light is on.

Cheers

[cw-kid]

If I delete the setter for the background for the grid.

It now looks like this when the light is on:

Which looks pretty good.

[cw-kid]

This looks better Opacity = 0.4

I don’t know what it didn’t change before when I tried 0.1 ?

Anyway seems to be working now.

[Jdamore]

Looking good!. yeah sorry… you’ll want to delete the datatrigger from the grid like you did and use the button as your border/background from here on.

If you want to remove the dark square shadow around the outside, remove the background of the grid.

You seem to have this down!! Now you have to remember what you did for the rest of your templates!

[cw-kid]

@Jdamore

If you want to remove the dark square shadow around the outside, remove the background of the grid

Yes I do, just been trying to figure out how to do that.

If I delete the grid’s background it looks like this, opacity = 0.5

And a different tile with a “Lamp” icon

Much better.

Damn I will have to edit all the tile templates now haha.

Thanks for your help.

[cw-kid]

It looks loads better with these new tiles:

Versus before:

[Jdamore]

Looks like you are changing the opacity of the grid which effects everything in it including the icon. Try removing that. Put the opacity setter in the background button

[cw-kid]

I’ve just double checked.

There is no Opacity setter set for the grid in fact there are no setters at all.

On the border button in there I have the Opacity set to 0.5 and the background is set to AccentBrush9.

But yes the icons don’t look quite right, like they are behind the border button background and its Opacity.

I’ve just moved the IconElement to the top and the border button to the bottom like this:

This looks better now I think, the icon looks brighter no ?

Thanks