[SOLVED] Habpanel: Flipping icons - how?

Apps & Services HABPanel
#1

I would like to flip (mirror) icons on Habpanel but don‘t know how.
Anyone who did this already?

#2

Hi @NCO

If you could edit the files and manually flip you can use custom icons

Make a copy of the icon you want too use

Manually edit the picture flip it yourself in paint or photoshop

Save the file and add it back too openhab for use by habpannel

#3

I already use custom icons in …/html/ in svg format.
This format cannot be edited in paint afaik.

I thought there is a simple parameter to flip the image within the Habpanel code.

#4

I’m not sure can’t you use a website for editing icons

#5

You can use CSS:

https://www.w3schools.com/howto/howto_css_flip_image.asp

#6

Hi Yannick,

I actually have seen this page, but what about:
“Note: This example does not work on tablets or mobile phones.”

#7

They probably said that because hover doesn’t make sense on touch devices, but the general idea of transform: scaleX(-1); will surely work.

#8

Alright - makes sense.
Thanks for the quick help.

#9

I played around with different variants, like this

<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none">
    <span>
      <widget-icon iconset="'smarthome-set'" icon="'car_tyre'" size="32" state="itemValue('CarAirFrRght')" style="scaleX(-1)"/>
    </span>
  <span style="color: {{itemValue('CarAirFrRght')=='ON' ? 'white' : '#7B879C'}}">
    VR
  </span>
</button>

But it did not work. :frowning:

#10

This did work:

<div class="mirrored">
  <widget-icon iconset="'smarthome-set'" icon="'door-handle'" size="32" state="ON" />
</div>
<style>
.mirrored .icon {
  transform: scaleX(-1);
}
</style>
#11

Thanks a lot!
I got it!

<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none">
	<div class="mirrored">
  	<widget-icon iconset="'smarthome-set'" icon="'car_window'" size="32" state="itemValue('CarWndReRght')" />
	</div>
	<style>
		.mirrored .icon {
  	transform: scaleX(-1);
	}
	</style>
	<span style="color: {{itemValue('CarWndReRght')=='ON' ? 'white' : '#7B879C'}}">
    HR
	</span>
</button>