What's your vector UI design workflow?

[clumsybear]

I'm thinking about integrating vector based ux design for my plugins.

How do you go about that? As far as I know, JUCE has some kind of SVG converter that we can use to convert the vectors into drawing paths for HISE

What vector design app do you use for GUI, anything worth checking out?

What is your vector GUI design workflow in general?

[d.healey]

@clumsybear I made a detailed tutorial about this, now would be a good time to join my Patreon community ;) hint hint.

So you need to use paint routines to draw directly in HISE. You can also import simple vector shapes, like icons and text, using the SVG converter tool that comes with Projucer and using the resulting data as a path within HISE. There are examples of this in the HISE docs.

[clumsybear]

I saw your video on paint routines @d-healey it doesn’t touch the subject of handling svg and drawing paths though. Is there another one I missed on Patreon?

[d.healey]

@clumsybear Oh you're already there :) I didn't do one about converting paths but I shall. It will be a short tutorial. I might even do it tomorrow if I have time.

[clumsybear]

Yeah, and I’m appreciating your content :)
Would be great if you find the time to do so

[d.healey]

As promised
https://youtu.be/OHqAijNUabU

[clumsybear]

Thanks @d-healey

[clumsybear]

what I still don't understand is how to get a knob designed in Illustrator or any other vector based program into the Hise environment and control it. I assume that the paths have to be converted here as well. Are the value indicators of the controls also taken from Illustrator as they were designed, or do they have to be regenerated via paint routines?

[d.healey]

@clumsybear All you can do in HISE is paint a path on a panel. So it doesn't matter if that path comes from a vector image or it's something you've drawn with primitives directly in HISE. Turning a panel into a knob or button or a slider is just about controlling it with the mouse callback.

So to get a knob from illustrator to HISE - the first thing is what do you have in illustrator? If you have more than just a simple shape or an outline you are going to have to break up the image into its component parts and reconstruct them as paths in HISE. You'll need to recolour them in HISE too. Keep in mind that HISE isn't a fully featured vector graphics package so complex shading isn't really feasible.

My only use for importing vectors into HISE is for shapes that I can't create easily with basic primitives. So I use it for icons and logos basically. All of my GUI design is done in inkscape, so it's 100% vectors. Anything that's going to be a solid block of colour or have a simple gradient I'll redraw in a paint routine, but sliders and knobs I'll just export them as a filmstrip, it's much simpler.

There are a couple of other advantages to using a filmstrip. You can enter a value into the slider's text box and you can use the built in value popup feature. These advantages will be negated though once this feature is implemented for sliders.

[ulrik]

@d-healey Thanks for the video, will you consider doing a video regarding PaintRoutines "DrawPath" directly in Hise?

[d.healey]

@ulrik I already did, or do you mean something else?

[ulrik]

@d-healey yes I mean using these commands?
That would be much appreciated. :)

const var p = Content.createPath();
const var c = Content.createPath();

//  Outer rect
p.startNewSubPath(10, 10);
p.lineTo (50, 10);
p.lineTo(50, 50);
p.lineTo(10, 50);
p.closeSubPath();

Panel.setPaintRoutine(function(g)
{
    var w = this.getWidth();
    var h = this.getHeight();
    
	g.fillAll("0x55FFFFFF");
	g.setColour("0xFFFF00FF");
	g.drawPath(p, [10+a,10+a,w-(20+a*2), h-(20+a*2)], 2);
});

HiseSnippet 1256.3ocsW81aZaDF+bRbWwaLsJsWrWdJunxokPsYPVhx5FIjjMzVRPkztUUUUcw9.NEycV1Gkhpx2k8QbeC1dtyX7Q.hpPJVHL2ye+87m6tG5jHBnoohDjUoqlDSQVeic2Ib4fVCHLNp8IHqev9HNaHQxDbbGfn7UhQRFmhNdRLIMkFhrr172TRaUZKj94e+0iIQDd.sfDB8FAKf9mrgLYA0NM+CVTzYjP5UrgFRWuY6.AukHRLBP1l1dnXRvMj9zKHJw1vFY8nSCYRQRWIQRSQVacrHbR2Ahw7L4eCKkccDUsvG0ELTF4yDQgJDqnhZMfEE1IOCjh.qzoHerYV936sOmExlQuHu7cZF3BMLyGVabevy2Ddde4vyx.dakAumX2MHgEKK3nv1Wa2lKoI8HAyWlxjEsA4Q1sDfDbY0gjanmk.Klog6dddUvM7714vxNPYHUh+HIAp8bZD9k3bE6SksDCiEbXg61ZtaqzvTmXC4CRnPtnCQNvcdCGrZgJ67hWfwWNBPFNgFHK6DWMURRjWPG2cz0Z47Av5qwZb0Hnu7JA1swBzzjZLOIeCRAQhTZtIKbcaN+9bcMvM0lyl02eojpu+7dtVAoU34iRBRgrzxB2rHKnJILDjx8cdUTzfOuuB9bPlpRwqHgLBO0c2C71YAh.sLCrDWW1QWIqlRkla1c6MhGnNBvs+Nkc9bYGL7nJdighmb.KU0N7Wrvo1Im6.Ct+Nk0efbF6xNk5WsGr6+nnH2s89TiFmoez8P.qTU6kZ+uhohgmWAyvDxXMniqfemu2yIUzeMdW2Zv6mUCh4Ay9MjUpsJidvAMZrTiVyqB7Y7t08Tlpt2pMxAvyJPFnbckQ1Waj8uGinBtBijHTGa3R10GLx3m4UsAnu506uqWB.AfN6FJu36ocC7J2O2ZzNkeFdYGUgg.EF+CmqbqNANoEIJ5Z3n1h5cQ4l0ykf+EPO7SeJXfeFC8QYblJ.7nrKA+b+CwYjtM6EMJkdWQmgAC4fiAREQzpwIPqmKQGs59mDZrpaz0HpJ6v3psS3bnhEbHJOVxUGljHhbCxOdpBzLFMhNWnnofeI.gEBB7zbhZmmNq3lsiy.nlFva0FPDmoug1kf.Pi+keNZVDr8NYMH53XVM4NwmxnFw9EBI8Rnd47YmRN25fuKqd8VJuoFKRgxkvdJ9Wsht7QCulljmhyEDtfZ9a.sW8MflWPGjkULDTvayYxKio7UcuHZZpTcC4TTAhJ02O9sSue73QRofiXv0fO1NKMhzH1bDEzqaeBQRxsCXRvMwzDISEAVmP+HLBS18tkrOgldCTfgoQlU9foRx7Z47akU8AZm9U1Y+9Sl9ah4hwpSOKHvZNPefoIEzhd59hOCesWyBe8O7l2wWucAe81lnEm0.l3QDNJhHmeLH0reSY.cFyMugZlBdJSNwb1vGjYi9Rg6Sr6vjACVNd2XI3EZFdnw6zIMKaeZudvjFEfcK6y96G9wJQY2w2GlRHgA8L1WLZXW3lo.JfDX9mH0tWqMT6yxV6oVqxLco7P8h+CdlxzWs1ZJS+blngjfDwGBx1cplk8wZJ.l35Q5KYetZM1OeWossWUOzPXD6ODDnRE6BXe45TaMz4GWCcpuF5zXMzYu0PmeZMzY+6UG0+t4nQRQ1XCPA87NmpOczx5TNA5xzcjn+G33mEqD

[d.healey]

Oh I see what you mean. Yeah I can do a video about that although you seem to know what you're doing.

[ulrik]

@d-healey not very much I'm afraid, I just can't figure out how to construct what I want, it started with that I wanted to construct a nice looking VU-meter and ended with that... :)
Not so very constructive

[ulrik]

@d-healey said in What's your vector UI design workflow?:

Oh I see what you mean. Yeah I can do a video about that although you seem to know what you're doing.

Yes please do if you find the time

[Christoph Hart]

BTW, I recently noticed you can just drag the entire .SVG file into the Projucer window, no need to go into Sublime and select that nasty M124.... stuff.

[ustk]

@Christoph-Hart Does not work here (last Projucer version)
Neither by dragging the file nor by full copy/paste of the content
svg generated with inkscape...

[d.healey]

@Christoph-Hart Yey now I get to make a new video :p

[d.healey]

@ustk Doesn't work for me either, the projucer window lights up but nothing happens when I drop the file.

[Brian]

These days you can also set up a one frame Lottie animation loop of your design and save a lot of time having to reconstruct with code in HISE ;) ( though then you are stuck having to have the Rlottie DLL be part of the installer ).