Hi there,
is there a possibility to set the color of an .png or svg image with the yaml code?
I have picture like this
And I want to set a color to red or green.
Do I have to create different files for that or can I do it with code?
I have used a oh-image component to integrate it to my widget
If the image is a png then the answer is no. That’s a bitmapped image and the pixel values are set.
For an svg, the answer is much more complicated. If the svg image has been defined correctly then it is possible to use css to change the colors within the svg. Even if you get an svg with the correct formatting, there is nothing built in to the widget yaml to handle this however, so you would have to work out most of the mechanics using the stylesheet properties.
It is almost certainly just easier to produce a series of the images you want in different colors and call them as you need different colors.
thanks for this good explanation. I think I will go with several files 
There are some CSS tricks to do it; for instance:
in your case apply filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg) to your image’s styles:
But it’s very clumsy and you might be better off sticking with Justin’s recommendation.
Maybe another quick question: I try to put an oh-image over an oh-link (more important over a F7 icon, but it doesn’t come to the front. Maybe you can see on this example that I haven’t understood this yaml thing completely
Can I add some z value or do I have to put it in another container? I thought that the order in the code has an impact on the order of the actual plot
- component: f7-block
config:
style:
position: absolute
bottom: -35px
left: 10px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=(items[props.item].state !== '0' ) ? items[props.item].state + '% geschlossen' : 'offen'"
style:
font-size: 12px
margin-left: 0px
margin-top: 0px
- component: oh-link
config:
iconColor: black
iconF7: square
iconSize: 32
iconBadge: "=props.value1 ? props.value1 : ''"
action: command
actionItem: =props.item
actionCommand: "=props.value1 ? props.value1 : ''"
style:
position: absolute
top: 10px
right: 20px
height: 33px
background: transparent
- component: oh-link
config:
iconColor: gray
iconF7: square_fill
iconSize: 32
iconBadge: "=props.value2 ? props.value2 : ''"
action: command
actionItem: =props.item
actionCommand: "=props.value2 ? props.value2 : ''"
style:
position: absolute
top: 44px
right: 20px
height: 33px
background: transparent
- component: oh-image
config:
url: ='/static/icons/fts_shutter_5.png'
style:
position: absolute
top: 44px
right: 20px
height: 33px
There is a z-index property in CSS:
But YMMV as it’s still somewhat influenced by the container.