Tank component

[JustinG]

I should have mentioned that the link I posted was for a much earlier version of MainUI. You no longer need to use f7-row and the tag property for everything, you can just use the tags directly for the component:

          - component: svg
            config:
              class: ='ink'
              xlmns: http://www.w3.org/2000/svg
              width: 90
              height: 200
              style:
                grid-area: 1/1

That helps make it a lot more readable.

@DiegoDf

But the price is high: lots of lines of error prone code.

From a quick glance at what you’ve posted it looks like you could easily use a repeater and just have the code for the svg once which would trim this down quite a bit.

@DiegoDf

And the svg in is not ‘responsive’, meaning that it has a fixed size, that cannot expand or compress when the widget is resized.

The svgs would be responsive if you used the viewBox property with them and didn’t give them static height and width values. Here you can see an example of a responsive svg using viewBox:

Widgets resized?

The typical design philosophy behind web pages is that the text remains at a constant readable level even if the container that text is in changes size; the exact opposite of what you want here. This is why text size has different options (e.g., no % unit) than other size units in CSS. The newest snapshot versions have some recently added code that includes a screen object in the item expressions that will tell you several things including the width of the OH window, but that still doesn’t ge…