What's your vector UI design workflow?

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

[clumsybear]

thanks @briandoliveira I looked into sketch and after effects. really like sketch for its simplicity, I was able do redesign all my Interfaces within a couple of hours.

since I'm not fully into Lottie right now, I'd like to export png sequences without after effects if possible.
so, I digged around and found a way to export PNG Sequences directly from sketch: http://animatemate.com and successfully merged them with ImageMagick to a filmstrip.

@briandoliveira I'm experiencing issues with drop shadows while exporting layers from sketch to after effects. The shadows are reset to AE native settings which messes with the whole (although minimalistic) skeuomorphic design. Any idea on how to solve this? I'm using the sketch2AE plugin by google.

[clumsybear]

Let me demonstrate with an example

This would be the original design in sketch:

And this is the shape after exporting it to AE using sketch2AE: