What's your vector UI design workflow?

[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 ).

[clumsybear]

@briandoliveira can you go into detail regarding your rlottie workflow? Are you importing After Effects anims for rlottie to work with?

[Brian]

@clumsybear Here is an article that describes my workflow in great detail using Sketch to AE ( I figured this out by myself and then stumbled on this doh ). For a static UI element, a one frame composition works fine from my initial tests.

Just a moment...

(uxplanet.org)

Once you have the .JSON export file from Bodymovin, copy and paste the code into the rLottie demo app that is available in the latest scriptnode build and compress it into a HISE snippet.Once you have this use the looping rLottie animation code provided in the documentation and then paste the compressed snippet in the magic line, compile and voila - you have your design just how you did it in Sketch!

There are a few limitations on using fancy multiple gradients and effects etc. that you have to watch for, but other than that, you can save countless hours of manual rebuilding with this method if you have sophisticated designs.

[d.healey]

If it's a totally static image (nothing changes when it's rotated) then just paint it in a panel and rotate the panel with a mouse callback.

[Brian]

@d-healey I was not sure if that was possible! Is this wizardry described in your paint routines video? :)

[d.healey]

@briandoliveira I don't give a demo of this exact thing but I show how to rotate a painted shape and how to use mouse callbacks. I'll do a follow up video at some point to show how to make custom sliders and knobs. This info is also available in Christoph's panels and paint routines tutorial in the docs (I posted a direct link to it in the second post of this thread).

[Brian]

@d-healey Thanks! I am going to have to flex this feature for sure! I could see a nice way to get responsiveness to occur by having a mouse event.hover callback play a quick rlottie animation but then be able to event.drag it to use it as a custom slider or knob as you have suggested.