Native SVG import?

[Straticah]

@d-healey oh you can?? thats sick als for Knobs?

[d.healey]

@Straticah Not directly for knobs, you have to draw the lottie on a panel, but you can use a knob to control it and if you make the knob invisible and place it over the panel it gives the appearance that the lottie is applied to the knob. If you checkout Mndala (https://mntra.io) that's what we did here.

[Straticah]

@d-healey ah got it! Will check it out! aswell as your patreon :D Importing svg loops // lotties where you woud import png filmstrips would be a dream feature in HISE fs!

[Straticah]

@d-healey this would mean a lottie VU or meter could also be linked to a signal that is linked to a dummy knob right?

[d.healey]

@Straticah Yup

[Christoph Hart]

You can parse SVG images and draw them in JUCE (in fact the shiny scriptnode logo in the HISE workspace is a SVG), but I haven't added a wrapper for HiseScript yet. It will probably look like this to be consistent with the path handling:

const var svg = Content.createSVG("sjdlfkjhsldfg8798275345");

panel.setPaintRoutine(function(g)
{
    g.drawSVG(svg, this.getLocalBounds(0));
}

Given that SVG is a XML file which is always annoying to use inside a Javascript-like context, we would have to wrap it in a Base64 String (I would add this to the Path converter window in HISE).

[d.healey]

@Christoph-Hart Excellent!

[Dan Korneff]

That would be great!

[Straticah]

@Christoph-Hart

[Christoph Hart]

Alright, here we go:

1. Use the converter window (Tools -> Convert SVG to Path).
2. Select "Base64 SVG" as output format (this is important, otherwise it will just extract the first shape from the SVG as monochromatic path)
3. Drag a SVG file in the window.
4. It should preview the file on the right. This is WYSIWYG: if the SVG is not shown correctly here, it will not be shown correctly later. There are a few known issues with the JUCE SVG parser, but it should work with most SVG images quite OK.
5. Click on copy to clipboard, and paste the line in the onInit callback of your script (or whatever).
6. Use the API to create a SVG object and render it on a Panel.

Below is an example that shows all new API calls (they do not show up in the autocomplete yet because I'm not on Windows but I'll add this on Monday).

With some tricks you can create SVG animations too by using the provided Graphics functions:

Content.makeFrontInterface(600, 600);

const var atom = "243.nT6K8CF9.zzA.HQSp7AXGQO9msCBhJy1H+SMHfvbQbEcQ+2dyntPJAvIbmX.DL.gppGBqWQIsVp8DKFr162FctP0i0NLnwubgFWZVLTVHC3bIAdqhcRa+.c1TeTnVl4.gg8pt0ZOAkaW6QTtURRPbt.Z+qHhR4+3+Y9ztTFaX3iAvPWztikIdS+ASpsx8ZwXiiDWbjZOZVv8iPbCgpp0ZUnfzYAiag68pTDfvZcZu9HODwPn5KPFf.mRTo0Atn.7GvH.epfHf4tEuaMyPlj.CLYAhfW1KvVQ.pG9DiBrfFaaa.lrDIfMHEgpFwlRQzHLq2d."

const var svg = Content.createSVG(atom);

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



Panel1.setPaintRoutine(function(g)
{
	var center = [this.get("width") / 2, this.get("height")/2];
	
	// offset the center (the SVG is not perfectly centered)
	center[1] += 9;

	g.rotate(this.data.rotation, center);
	g.drawSVG(svg, this.getLocalBounds(20), this.data.alpha);	
});

Panel1.setTimerCallback(function()
{
	this.data.rotation += 0.01;
	this.repaint();
	
	this.data.alpha = Math.sin(this.data.rotation * 12.0) * 0.5 + 0.5;
});

Panel1.startTimer(30);

HiseSnippet 1261.3ocsVstbZaDEVx1pSf1LSyL8APC+BJtxRXGa73IS4tgXrs3hwNjIS5hzJoMVrqrzBDbm7t1Gg9FzdVIrARHY53ogeHz41te62dtHyPlENJhEJImp+7.rj7OozaNk6U0CQnRspA5UB7B5ii3RUlGfhhv1Rxxaepvrbpcjh+82+dEjOhZgWpRRZ.iXgaSFS3K0ZV5LhueCjMtOY7JdePoVVLZUlOaB.ksUzkBPV2hbwWfDtskhj7OT2lvYg83HNNRRdmJL6487XynI9OfDQF4iEBFR8fEJQcClus.wBsRU8H91lObjijfUwbIArcBA7KJmSrIOpeIQ7ywFTWFwp7g7VqCusWCdFqBO8Uf2Ffj7JPZmDH8BkdVgj.9RKB77iJsnbbnCBn8UgRhuRac1NJUYfGTt1Xzs3FgfviQj8Pc8cUgG4NIcZf5i3pSQgpHNar5qTyT3f80n8O7rhUabr182WVqYmdAGU9lS6b4wiipVw60yMZlu24MclNpyn5VcxWvFRaLec4osFM9FsZs0bCBNsxcW2oUzffh0NqQnwgEZXwM0I5WzlNaxH2FWObP69CZVc+QsJaemmUWTdMKi939zA9Gn45VLfqO7xx2ht9vN84W0sq4Ht1v720zq6A42O+aN9dd+Fna1mTdp402yI21xtW9x8Bh9XwgytgPpc8nOL7xgClVjXNpJ.H8gWQct+MkIH2CKFzulyzgVCmbbyKqMyj9xyLa3nMtaeldYNU6nSm1TCG3zz4.d8Inyma5+AspseSYOmqMNa5fNZAmdbMRkPmFHDRyOrVKmyaV2MnwL+tctuY66JXqkYUxMZpKvsObmXEhgTkdCNMqfzW+ZvDQw9Fq3rKlWkMNfQAgrYRLmQDS5zIBZQXtIjox6xlvITbVmITKNgQy5lK8elNkXUsvhaeXUeK2iDIVyrYlQr4dYxotmZgcUWp1CSb83YxsWg2cR5ToSs2dpLGGXO.evOrPYEuCG.URjJkwUCfTKrE2e9BGv14RmJ402Z7N07uR8X.wob0BYhpjrwamMhiRT.fc2EQBmLvM6PzLA+.71Rr0lYg7qvlPsixVPO2BCwqBxOvCk6jTo+jfYVxKhVMgUQ99ifdJKIlXd4Kwf.m5Z5FmrvXHNPvqYyESDe1tAj44HtmVDgtgii5upZTPSOG7ut1KUyKddx5niiBSvW18gRwGvlJidAiiubAHS+ozpetIGmMZSjvDx78gEbSlS1puQfYoSFOBGtKjF5OA+niPqn06uo706usZ6Wqj72UbjQaQI7KCvzuVSYoEI8vaW0pFvmhlhKzA9AYYbh.Bx0vSgILIsHSoTCGcKmED66hJEXnAO15yenApf0kHPaxmojbCH8wGGBUBWZ9iB+0nRwkFOp3OhJkTTrbnEsjzW1qFlRvrm3C0zqM5PLubgAfuWqesnmLMhvmu57z+2lm7eEhuPwjvs71LF2ZCXDtU9dfwESgetRcGQyjk.bGkF278YjqTROSWnRNj.4CJWLYbO3CQrvvtSgrDQ9t7VhLyDYcgrfA5go1wB+C7agQCgr7BiFOXTZLxJj8dqjpLwb9mEqAvDM9SbRobtPV0PJtxChSA5BIMF9ji2aYIN9+FTrr4XJ7DhY+mPLG7Dh4kOgXN7IDyQOgXJ9MiQ70dkm.ylSJG.El0iaGIKWmhfLq3rPo+EF5ALq.

[orange]

@Christoph-Hart Perfect, Thank you!!

[A Former User]

@Christoph-Hart that's amazing thanks a lot <3

BTW if I understand correctly, we have only draw path option in the Hise SVG to Path converter.

Could you add also Fill Path and Close sub-path options too? Because in most cases just filling the path is the way to go especially for icons, personally I don't use draw path way too much.

If you add these options, I hope it will be available for this current .createSVG method too.

[d.healey]

That was quick!

[d.healey]

@Steve-Mohican said in Native SVG import?:

@Christoph-Hart that's amazing thanks a lot <3

BTW if I understand correctly, we have only draw path option in the Hise SVG to Path converter.

Could you add also Fill Path and Close sub-path options too? Because in most cases just filling the path is the way to go especially for icons, personally I don't use draw path way too much.

If you add these options, I hope it will be available for this current .createSVG method too.

You can do this from within HISE. Use the function g.fillPath() instead of g.drawPath()