HISE performance slowing down when using SVG project?

[d.healey]

@RastaChess Use strings instead. You can do this directly in HISE, no need to use Projucer (if you were).

Tools > Convert SVG to path data.

Make sure Base64Path is selected in the dropdown.

[CyberGen]

@d-healey Do I need to change anything else in the paint code?

[d.healey]

@RastaChess Probably not, but I can't be certain without seeing your code. It should just be a case of replacing the array with the string.

[CyberGen]

@d-healey Is pretty straight forward, below an example.

David, thank you again.

I will change all my paths to stings, its going to take me a minute. I'll let you how it goes.

Cheers!

//	GLARE 1
	g.beginLayer(0);
	g.gaussianBlur(a[3]*0.04);
	g.setColour(Colours.withAlpha(Colours.white, 0.9));	
	glarePath.loadFromData(glarePathData);
	g.fillPath(glarePath, glareArea);
	g.endLayer();	

[CyberGen]

@d-healey Just wanted to update this. Yes, this helped a great deal.
Though I must say, the graphics performance inside HISE with the project open, is still not perfect, there is an obvious lag. The compiled version seems to work fine though.

thanks again for your help!

[ustk]

@RastaChess Using a blur when drawing a path is VERY cpu hungry...

[CyberGen]

@ustk good tip. I'll try to do change the blurred paths to simple shapes. Thank you.

[Natan]

@d-healey Sir David, Hey
Do you have an Example for "Base64Path" for SVG
Could you please an example with your proper way for the study?

[d.healey]

@Natan All the paths here are base64 - https://codeberg.org/LibreWave/RhapsodyBoilerplate/src/branch/main/includes/Paths.js

[Natan]

@d-healey

What about the below example, do this slows down?

// Power Data  ///////////////////////////
var PowerButtonData = Content.createPath();
const var Power = [ 
110,109,0,0,32,65,0,0,160,65,98,236,81,144,64,0,0,160,65,0,215,35,61,184,30,121,65,0,215,35,61,123,20,34,65,98,0,215,35,61,102,102,198,64,194,245,24,64,154,153,41,64,215,163,192,64,112,61,138,63,108,133,235,217,64,72,225,58,64,98,72,225,122,64,164,112,
133,64,92,143,2,64,0,0,224,64,92,143,2,64,123,20,34,65,98,92,143,2,64,31,133,103,65,31,133,179,64,0,0,144,65,0,0,32,65,0,0,144,65,98,112,61,102,65,0,0,144,65,20,174,143,65,31,133,103,65,20,174,143,65,123,20,34,65,98,20,174,143,65,92,143,226,64,51,51,
129,65,215,163,136,64,152,153,85,65,42,92,63,64,108,70,225,98,65,145,194,149,63,98,30,133,141,65,134,235,49,64,20,174,159,65,154,153,201,64,20,174,159,65,123,20,34,65,98,20,174,159,65,184,30,121,65,10,215,119,65,0,0,160,65,0,0,32,65,0,0,160,65,99,109,
0,0,48,65,0,0,0,0,108,0,0,16,65,0,0,0,0,108,0,0,16,65,0,0,32,65,108,0,0,48,65,0,0,32,65,108,0,0,48,65,0,0,0,0,99,101,0,0
]; // Codes Here
PowerButtonData.loadFromData(Power);

[Natan]

@d-healey I Don't get the idea, Sir?!
How Paths will show up?

const var Panel1 = Content.getComponent("Panel1");
Panel1.setPaintRoutine(function(g)
{
	g.fillAll(0Xff272727);

	g.setColour(0Xffffffff);
	g.fillPath(rhapsodyLogoWithBg,[0,0,100,100]);

});

This doesn't show anything

[CyberGen]

@Natan Try with double quotation marks instead of brackets or parentheses.

 global glarePath = Content.createPath();
 global glarePathData = "647.t0Vc+HDQb+vxCIlLwCDQjHhyCUoJ+PDZQG8Pn7dODwfITOjXDgQODgHuUOTZmsCQt0C1CI7d5PDwil8PhkXE4PDf5u8P2QANDwNWaOjU+fCQcJ+1CIFC+eCQgHw1Ccv82PjH1q8P8Z6MDYZEZOjXoXyMD4JUXOTk0ZCQzNo0CEPM1PDuRS8PhoXkyPDGpt7PSXOLDsWfBODmV4BQZiUtCIFSTwBQ3SkrCweTpPjEQs5Pr9DJDQSSjNjXye7IDkzbhNjN.cBQekInCEHtlPTc+54PhY7rlPj7t54P0TmID4O4cNzM3YBQ46cmCIFf3YBQn4cmCc09mPDbZ94PvjCJDoT3eNjXfLgJDQC.hNDDsuBQd7AoCAvwsPDB9X5PhY0q0PT+L85PqdYODI+V3ND..VDQlqVvCIlAFRDQtOMwCoPrCQTb1i7P08iPDw8CKOzXsMxsTPT.K.zPhIyNYPjbT90PpGaGDQLv9MD90HBQZTxiCIFIEMBQ8esjCEEUjPD3JZ4P8MVIDIbOZNjXWZXIDQEtZNDfjYBQV5amCQFYlPzy914PhkhVlPTDS24PnsjIDAincNj59XBQfOYmCIFdmWBQz9RmCY.jkPDhKy4PThSIDw0YbNjXgE0HDETNZNzKpEBQmr.lCwufePDCcW4PhImfYPD3763PlG3DDQKGHNzVA1.QHxSfCI1lwu.QzTteCscXJPDVQs2PZHMBDsWu2MjXlHKBDUDc2MzuAd.QQbLcCAMfGPTt3R2PhA.fGPDQrR2PIyUBDQ9BoMTxOl.Qne.ZCI1C8z.QGlTUCIH0LPTFOY0P8RYDDYMVGMjXcYjDDkdfEMT9zMAQ.ErPCMxsTPT.K.zPiUF";

[d.healey]

@RastaChess Don't use globals

[CyberGen]

@d-healey how can I put all the path data in a different script from the interface without globals?

[Natan]

@RastaChess Thanks mate,
Still no luck here,

It's not the usual way i do SVG Painting, and I Stucked with this
@d-healey Any hint?

Edit:
I Put the Painting inside the namespace Path, and It works just fine :)
@d-healey Is this how It is supposed to be used?

Can it be used out side the namespace ?

[ustk]

@RastaChess You have only one interface script. Other scripts are for the modules for instance, where you don't need any LAF customisation

HISE | Docs

(docs.hise.audio)

You can have included external scripts, but they are part of the same interface script, so they do not require any global variables. If in these included script you have namespaces (which I hope you have) you want to access variables, you do it this way:

namespace CoolSpace
{
    const var YOPLA = 47;
    reg youhou = 22;
}

// somewhere else in another namespace in interface script
reg a = CoolSpace.youhou * CoolSpace.YOPLA;

[ustk]

@Natan don't call it Path, but Paths or anything else. I reckon I had a conflict with the Hise APIs when using same name. Had this with FileSystem too....
Also there's a difference between drawSVG ("base64SVGstring") and drawPath ([from, loaded, array, of, data]), so choose your style wisely because one cannot paint the other...

[d.healey]

@RastaChess As utsk said you only have one interface so there is no need for paths in other scripts. But in general if you want to have the same code in two places you should use includes.

[CyberGen]

@ustk Thank you this great info.
I had no knowledge of namespaces or includes
I was just getting the clutter out from the interface script. I can see how using globals could be a drag now. Thanks for the example. I'll start implementing these changes.

[d.healey]

@RastaChess You might find this useful - https://docs.hise.audio/scripting/scripting-in-hise/hise-script-coding-standards.html