What's your vector UI design workflow?

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

[Brian]

@clumsybear Glad that you are enjoying this new process!

I would avoid using png sequences if you can do it with Lottie - png sequences take up a lot of memory if you are not careful.

As for the issues you are experiencing, I have not used drop shadows yet so it might be an issue. You can perhaps try importing to Adobe XD or Illustrator, then to AE, which in theory should be a one to one conversion ( let me know if that works if you do indeed do this ).

I would also test the Bodymovin .JSON output in the HISE rlottie app to make sure it is also translating correctly ( or use this online version http://rlottie.com/)

And to keep an eye on the compatibility list on https://github.com/Samsung/rlottie to make sure you are only using supported features.