"Fun with Rotated Icons"

I had been using the arrows in the icon library …
Arrow
… for buttons that adjust bulb intensity,

I liked the design of the Play button icon …
Play Button
… but it only exists as a right-pointing arrow.

Fortunately creating up and down arrows is pretty easy using CSS to rotate the Play button icon. I enlarge the icon to 100% to fill a 1x1 tile.

Up Arrow:
.tile. .icon svg {width: 100%; height: 100%; transform: rotate(90deg);}

Down Arrow:
.tile. .icon svg {width: 100%; height: 100%; transform: rotate(-90deg);}

I’m pleased with my new up and down arrows!

5 Likes

Thanks for sharing, Stan! That’s really neat. :+1:

Have you considered sharing the snippet over in the [WIKI] List of working CSS code, verified on SharpTools - #25 by josh thread?

Josh - not sure I know how to get it over there. Will try…

Update:
Couldn’t get it done! Kept trying to put the gearshift in “D”, but it wouldn’t get out of “P”.

2 Likes

Hi my friend. How do you get that multiple taps in one tile makes a light level going up or down?

1 Like

A number variable is at the heart of it; for example $KitchenLightLevel. Manipulate the value of this variable with the up/down arrows, and then set the lights to that level.

My button tiles are actually virtual switches.

It will be much easier to do this once James implements math in variables. With that capability you could just add/subtract an increment to the variable with each button press (keeping a lookout for the upper and lower limits). It’s somewhat crude without that luxury; I go through a comparison tree rule, looking for the current value and setting the variable to the next value up or down. To keep it as simple as possible, I’m using an increment of 20, but with the math feature you could make the adjustment increment as fine as you wished.

I’ve made it more complicated because I want to be able to set the light level without turning the lights on. This means there are actually two cases to deal with; one if the lights are off and another if the lights are on. A lot easier if the first case isn’t important to you and you just let the bulbs turn on with the button press.

My situation is further messy because the buttons control a group of bulbs - not just one bulb.

Even doing it “brute force” without variable math, the rules are straightforward even if a bit long.

3 Likes

great and creative way my friend…I have a new game to get fun to try it…! Thanks brother.

2 Likes