Impossible to style usersvg.

stinobook commented 1 year ago

[ ] No, I'm not sure that it is not a configuration mistake

Bug description

Impossible to style usersvg. i hope there is no error in the code itself or that i'm overlooking something. Things i tried: had styling under animation first, but moved it inline to be able to test it better. used following style 'options'

usersvg svg image toolsets

using both my own SVG as well as one of your built-in ones to be sure that its not a problem with the SVG itself.

To Reproduce

Using this code:

```
      - type: 'custom:swiss-army-knife-card'
            aspectratio: 1/1
            entities:
            - entity: sensor.recycleapp_tomorrow
            - entity: sensor.recycleapp_today
            - entity: sensor.recycleapp_glas
            layout:
              styles:
                card:
                  background: rgba(97, 69, 71, 1)
                  border: none
                  box-shadow: none
              toolsets:
                - toolset: background
                  position:
                   cx: 50
                   cy: 50
                  tools:
                  - type: 'usersvg'
                    position:
                      cx: 50
                      cy: 50
                      height: 100
                      width: 100
                    images:
                      - default: /local/images/airvisual/ic-face-2.svg
                      - glas: /local/images/glas.svg
                    entity_indexes:
                      - entity_index: 2
                      - entity_index: 1
                      - entity_index: 0
                    animations:
                      - state: Tomorrow
                        image: glas
                    styles:
                      usersvg:
                        opacity: 0.5



### Expected behavior
have the svg change opacity (i want to do color or apply a filter, but opacity is in my opinion the most fool-proof way to test the styling is working.

### Screenshots
![image](https://user-images.githubusercontent.com/51697064/236676012-c7025d01-36d3-4885-8017-7fb29e2eecc2.png)

AmoebeLabs commented 1 year ago

I have documented my ventures using external SVGs and SVG Injectors here:

197

TL;DR;

What you want requires a working SVG Injector (I'm working on that one), and an SVG that is suited for external styling using the UserSVG tool.

Bit of a bumpy road to get this working...

The currently released SAK version uses an older SVG Injector which is disabled, due to too many problems.

stinobook commented 1 year ago

Would the approach custom-button-card does somehow work here as well? since you mention this:

External SVGs are treated differently: they are treated as external images, which are automatically scaled to the parent's size, independent of the given height and width.

So then we should be able to just style it as an image and apply a filter over it ? Is there a way to 'adress' the image tag through your code? or is it possible to try this with card-mod ?

See part 'img_cell' below, sorry for JSON format, had to go get it out of a backup and i used a GUI dashboard back then.


 {
                      "type": "custom:button-card",
                      "entity": "sensor.recycleapp_glas",
                      "name": "Glass",
                      "entity_picture": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMiIgYmFzZVByb2ZpbGU9InRpbnkiIGlkPSJMYWFnXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiCgkgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDEuN3B4IiBoZWlnaHQ9IjE0MS43cHgiIHZpZXdCb3g9IjAgMCAxNDEuNyAxNDEuNyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTc1LjQsMTI3LjVoLTkuOWMtNy41LDAtMTQuNC0xLjktMTQuNC0xNS40VjgzLjRjMC0xNC41LDMuNy0yMS41LDYuNy0yNy4xYzIuMi00LjEsMy45LTcuNCwzLjktMTIuNwoJCWMwLTExLjMsMC0xNC40LTAuMS0xNS4zbC0xLjEtMS45di01LjNsMS4yLTIuM2wwLjEtMi42YzAuMS0xLjksMi4zLTMuNyw0LjctMy43aDcuOWMyLjQsMCw0LjYsMS43LDQuNywzLjdsMCwyLjdsMS4yLDIuM3Y1LjMKCQlsLTEuMSwxLjljMCwwLjktMC4xLDQtMC4xLDE1LjNjMCw1LjYsMS44LDguOSw0LDEzYzMsNS40LDYuNiwxMi4yLDYuNiwyNi44djI4LjdDODkuOCwxMjUuNiw4Mi45LDEyNy41LDc1LjQsMTI3LjV6IE02NC40LDI2LjcKCQljMC40LDAuNCwwLjQsMS4yLDAuNSwzLjFjMCwxLjgsMCw1LjcsMCwxMy44YzAsNi0yLjEsMTAtNC4zLDE0LjJjLTMsNS42LTYuMywxMi02LjMsMjUuNnYyOC43YzAsMTAuMywzLjgsMTIuMiwxMS4yLDEyLjJoOS45CgkJYzkuNSwwLDExLjItNC4xLDExLjItMTIuMlY4My40YzAtMTMuOC0zLjMtMTkuOS02LjItMjUuM0M3OC4xLDU0LDc2LDUwLDc2LDQzLjZjMC04LjEsMC0xMiwwLTEzLjhjMC0xLjksMC0yLjcsMC41LTMuMWwwLjYtMS4xCgkJdi0zLjZsLTEuMi0yLjNsMC0zLjNjLTAuMi0wLjItMC43LTAuNi0xLjQtMC42aC03LjljLTAuNywwLTEuMywwLjQtMS40LDAuNkw2NSwxOS43bC0xLjIsMi4zdjMuNkw2NC40LDI2Ljd6IE02NS4xLDE2LjJMNjUuMSwxNi4yCgkJQzY1LjEsMTYuMiw2NS4xLDE2LjIsNjUuMSwxNi4yeiIvPgo8L2c+CjxnPgoJPHBhdGggZD0iTTcwLjQsNDUuNUM2Myw0NS41LDYyLDQ1LDYyLDQzLjRsLTAuNC0xNS4xbC0xLjEtMS45di01LjNsMS4yLTIuM2wwLjEtMi42YzAuMS0xLjksMi4zLTMuNyw0LjctMy43aDcuOQoJCWMyLjQsMCw0LjYsMS43LDQuNywzLjdsMCwyLjdsMS4yLDIuM3Y1LjNsLTEuMSwxLjlsLTAuNCwxNS4xQzc4LjksNDUuMSw3Ny44LDQ1LjUsNzAuNCw0NS41eiBNNzUuNyw0My4zCgkJQzc1LjcsNDMuMyw3NS43LDQzLjMsNzUuNyw0My4zTDc1LjcsNDMuM3ogTTY1LjIsNDMuM0w2NS4yLDQzLjNDNjUuMiw0My4zLDY1LjIsNDMuMyw2NS4yLDQzLjN6IE02NS4yLDQyLjFjMSwwLjEsMi45LDAuMiw1LjIsMC4yCgkJYzIuNCwwLDQuMi0wLjEsNS4zLTAuMmwwLjQtMTQuN2wxLTEuOHYtMy42bC0xLjItMi4zdi0zLjNjLTAuMi0wLjItMC43LTAuNi0xLjQtMC42aC03LjljLTAuNywwLTEuMywwLjQtMS40LDAuNkw2NSwxOS43bC0xLjIsMi4zCgkJdjMuNmwxLDEuOEw2NS4yLDQyLjF6IE02NS4xLDE2LjJMNjUuMSwxNi4yQzY1LjEsMTYuMiw2NS4xLDE2LjIsNjUuMSwxNi4yeiIvPgo8L2c+CjxnPgoJPHBhdGggZD0iTTcwLjQsMTExLjFoLTEuNlY3Ny4yaDEuNmM5LjksMCwxNS45LTAuNiwxNi45LTFjLTAuMiwwLjEtMC43LDAuNS0wLjcsMS4zaDMuMnYzMC43CgkJQzg5LjgsMTA5LjYsODkuOCwxMTEuMSw3MC40LDExMS4xeiBNNzIuMSw4MC41djI3LjRjNy42LTAuMSwxMi42LTAuNCwxNC41LTAuOFY3OS43Qzg0LjEsODAuMSw3OS43LDgwLjQsNzIuMSw4MC41eiIvPgo8L2c+Cjwvc3ZnPgo=",
                      "show_entity_picture": true,
                      "show_state": true,
                      "state": [
                        {
                          "value": "Tomorrow",
                          "styles": {
                            "card": [
                              {
                                "display": null
                              }
                            ]
                          }
                        },
                        {
                          "value": "Today",
                          "styles": {
                            "card": [
                              {
                                "display": null
                              }
                            ]
                          }
                        }
                      ],
                      "styles": {
                        "card": [
                          {
                            "width": "100px"
                          },
                          {
                            "height": "100px"
                          },
                          {
                            "display": "none"
                          },
                          {
                            "margin": "0 8px 0 0"
                          }
                        ],
                        "grid": [
                          {
                            "grid-template-areas": "\"i\" \"n\" \"s\""
                          },
                          {
                            "grid-template-columns": "1fr"
                          },
                          {
                            "grid-template-rows": "1fr min-content min-content"
                          }
                        ],
                        "img_cell": [
                          {
                            "align-self": "start"
                          },
                          {
                            "text-align": "start"
                          },
                          {
                            "filter": "invert(1) opacity(90%)"
                          }
                        ],
                        "name": [
                          {
                            "justify-self": "start"
                          },
                          {
                            "padding-left": "10px"
                          },
                          {
                            "font-weight": "bold"
                          }
                        ],
                        "state": [
                          {
                            "justify-self": "start"
                          },
                          {
                            "padding-left": "10px"
                          }
                        ]
                      }

AmoebeLabs commented 1 year ago

This kind of styling doesn't work with the current release, but in dev it works what you want if I understand it correctly.

Below are some examples with and without SVG Injection. Things that do work on both external and injected SVGs are opacity and filter. I changed Trees to Tres to make sure that I'm working on the right template 😆

I changed one of my FCE templates.

Example 1

The definition with a filter on the usersvg, and a fill on the mask on the "Weed" column. You can ignore the mask part btw:

You can see the definition in the Edge inspector, including the external SVG file:

Example 2

Apply a sepia filter, and then a hue-rotate(45) to get green...

Example 3

The same filters applied to the Grass, which is an Injected SVG

The Edge inspector shows the SVG is injected. It has the injected-svg class assigned to it, with which I can filter in my software to prevent more than 1 injection.

Because not all injected SVGs behave as they should, injection can be disabled:

If I have enough progress this week besides my work, I will release a new version (v2.4.2) with the changes in the development environment (#76 and #77) and the SVG Injector together with working UserSvg styling.

AmoebeLabs / swiss-army-knife-card