Embedding JS in the CSS property

Community Usage questions
1

Hi there again,

Last but not least (hopefully) after I have managed to shape my LED's accordingly with inline on CSS property such as.

:host {
background: url('data:image/svg+xml;utf8,<svg viewBox= "0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>virtual-launchcontrolxl knobLed</title><g id="knobLed" style="stroke: black;fill-rule: evenodd; fill: green; stroke-width: 1px;"><path d="M10 70 Q25 52 20 30 Q50 38 80 30 Q75 52 90 70 Q50 78 10 70"></path></g></svg>') 
no-repeat 50% 55%;
background-size: 120%;
}

I need to give it the same functionality for the background-color (in this case <svg style="fill: JAVASCRIPT IN HERE;">)

My previously defined LED's had the following open-stage-control properties

                "type": "led",
(...)
                "colorWidget": "JS{{\n\nvar velocityReceived = OSC{/note};\nvar colors = @{colorsArrayA}\nreturn colors[velocityReceived] || \"#E0E0E0\";\n\n}}",
(...)

Which in turn referred to a Widget variable in the form of

            "type": "variable",
            "id": "colorsArrayA",
            "value": {
              "1": "#990000",
              "2": "#dd0000",
              "3": "#ff0000",
(...)
             },

Is there a way to actually change that property defined in the svg using this JS code?

Thank you

2

Yes, it would work exactly the same way, you can put that JS{} block pretty much anywhere.

However, if you plan to use that svg in multiple widgets, it's a bad idea to use it that way, it will just make your session grow. As I said in another thread you can save the svg file next to your session file and load it by its filename instead of embedding it in the css. Colorizing a svg loaded from a file can be done with some css too.

1 Like
3

Or, just using svg widgets...
svg.json (6.0 KB)

1 Like
4

Working nicely , yeah yeah :cowboy_hat_face: hurrah!!