DrawSVG and color

[parabuh]

Is there option to change color of svg which we draw?

[d.healey]

@parabuh g.setColour()

[parabuh]

@d-healey nope, it doesnt work

const var testPath = "687.nT6K8CV1CzRE.XFYjIBLON2V7vARGXy3jLwLBVEFsY+Pn26VVQDQP0FCnEzPAopAuAPU.DE.PMIMq7QoBIfdbCDQCRZTbddfdHPDKhl3zjrv8.0xnCa.BCtJb33zy+bbnjv47.E4X4fqxDnDt.PL.FNX3Mc5oLMn.BAKNRl3XdbVlFUh.QhSjiYgpJu.BEnrsjVrXYwhBjnRkHLMhlDwCEGjIhXD3i5hupaXdWzWVYbStsRc0MXZkLFw1bcoNSMV1ZZkK94xcGmbSkKuaNjyMx+UtN5oxX62F+uNa7y1ONWjSlOs8I93Ty.SiGtHUZPBFNP7x1DENBhlDvvE829Y9xoee3oxVdSK+AS4akzi0rtWm61VYu2JUe9ajd5x4iYM+H0by55LTw2mqGSomeia9peazaSlu3yE0doToN12SsTsO2zhclRpcwUx3.fCHSDsfgiELWbu4ToZgbl7lacyvMc0oM1R8ykF1YIu7G2c2oaiSMxZFWMh+hQ7RSpCaVw6a26lGQ7YDae9teKCNFoRIiwOZN+V1weSFabt81vq.VIpADDanRFnfvHnAB.TFvXTccP7zhF.n+kV.TTVDK.yQrkQxYfkyrk+jgW7B7KJCYLeMwiux6PDE34RvorcGZe4EuzY0JxL5fsSqhos3ReVsz3Xqdynn7kdq3pc.fO+U78ZzznghnHk092pTq9b.pN0Hn7cwnM5RV4j5lNOv3J3HPBTDKdoFfuTpiMFYbmPowCxr8HBJjRLGaW9aEbKUA.5NnRGuG88bdp.FUjPlqG8sil7cASluxnqRSqXU.qSph9G4pBChPqKTqbxj9sIo43t5Q1z7ZFWqR0eQ7KpvEfqyHfSLcsQI33RRlzwf3SgyMzqtwhxXNAGX5HZV9fe7xzI8d9o7E58H8o5maekAgd."


const testIcon = Content.createSVG(testPath);

const var testbtn = Content.getComponent("testbtn");

const var testLaf = Content.createLocalLookAndFeel();
testLaf.registerFunction("drawToggleButton", function(g, obj)
{
	var pos = [15, 15, 20, 20];
	g.setColour(0xFFFF0000);
	g.drawSVG(testIcon, pos, 1.0);
	
});

testbtn.setLocalLookAndFeel(testLaf);

[aaronventure]

@parabuh You have two options that I know:

1. Convert it to path, either using the built in tool (in the Tools dropdown) or from the script https://docs.hise.audio/scripting/scripting-in-hise/hise-script-coding-standards.html#svg-paths

2. Load it as an image into a panel by using Panel.loadImage(), assigning it a string and then using g.drawImage to draw the actual image within a paint routine, that you can then manipulate using g.applyHSL etc.

[d.healey]

@parabuh Use drawPath or fillPath instead of drawSVG

[aaronventure]

@d-healey It becomes problematic when you have a slightly more complex graphic with a lot of separate elements, as each of these is a separate path that you have to load separately and then re-combine the whole thing.

So I can totally see why they went for the SVG in the first place.

Loading a PNG and using it in a paint routine is also valid, but applying HSL will rasterize it, and if you re-scale your UI within a DAW (if you have scaling built in) it will look fugly.

[d.healey]

@aaronventure

It becomes problematic when you have a slightly more complex graphic with a lot of separate elements

A single frame lottie is another option here

[aaronventure]

@d-healey How so? I saw your rlottie video and read the short docs page about loading them as interactive/non-interactive animations, but have no clue how to use it in a paint routine so that it responds to g.setColour() properly.

[d.healey]

@aaronventure

I've never created a lottie myself, only used pre-existing ones. But it's a full coloured SVG animation made up of multiple frames. If you refer to my video you'll see how to draw them in HISE. If you use a single frame then you get a static image SVG in full colour.

We've been using lotties a lot with Mndala - https://www.mntra.io/