Native SVG import?

Straticah

Hey there, i was wondering if there is a simmilar thing to png filmstrips for knobs but in vector terms. Like a filmstrip that uses svg paths.
If there is such a thing this would not be readable by HISE since HISE needs to convert SVGs into written paths is that correct?

Is loading /embedding native SVG data into HISE just not possible because of the Juce limitations or am i missing something? I am looking for a great workflow from Figma/Adobe XD or Adobe Illustrator to HISE. Currently using png export x2 resolution.

Any hints or projects that try to implement that seamlessly into HISE / Juce? And what are your thoughts on this?

d.healey

@Straticah You can use lottie animations (I posted a video about it on Patreon recently)

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:

Use the converter window (Tools -> Convert SVG to Path).
Select "Base64 SVG" as output format (this is important, otherwise it will just extract the first shape from the SVG as monochromatic path)
Drag a SVG file in the window.
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.
Click on copy to clipboard, and paste the line in the onInit callback of your script (or whatever).
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()

Native SVG import?

26

1.7k

11.8k

102.3k