What's your vector UI design workflow?

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

[clumsybear]

@briandoliveira
I have some plugins I cannot realize with the Hise framework, but I did some of them with JUCE. I‘m not entirely sure how to use rLottie in JUCE. Atm, that’s the only reason I‘m in need of png filmstrips ...

[clumsybear]

@Christoph-Hart is there any straight forward way to use Lottie in JUCE with your tool?

[Christoph Hart]

I wrote the C++ wrapper for rLottie myself, so there's nothing in JUCE that lets you load Lottie files. But you can take the code and try to use it in C++ here:

https://forum.juce.com/t/rlottie-wrapper/35652

But just out of curiousity: what couldn't you do in HISE?

[clumsybear]

@Christoph-Hart said in What's your vector UI design workflow?:

But just out of curiousity: what couldn't you do in HISE?

like I mentioned in some of my recent posts, there are dsp algorithms I'm struggling to translate into the HISE environment. Just to mention some of them:

-Frequency Shifter (although I got it 80% done in HISE)
-Subharmonic Synth (I'm not even close to something like that)
-Granular Synth/Looper (haven't tried to do it since there is no such option in HISE)

please note, I'm talking about real time audio effects here

Everything else I'm planning on is more or less easy to get done in scriptnode. If I could manage to work out those effects in HISE I would be all in in on a commercial license.

[clumsybear]

@Christoph-Hart said in What's your vector UI design workflow?:

I wrote the C++ wrapper for rLottie myself, so there's nothing in JUCE that lets you load Lottie files. But you can take the code and try to use it in C++ here:
https://forum.juce.com/t/rlottie-wrapper/35652

I build the rlottie wrapper, the only thing it converts to is a HISE snippet. So I'm not entirely sure how to use it in JUCE. But yeah, it seems pretty easy to use in HISE, great work on that :)

[Christoph Hart]

It's not a HISE snippet, it's a base64 encoded string. I just rebranded the technology :)

there are dsp algorithms I'm struggling to translate into the HISE environment

If you know how to write DSP algorithms in C++, why don't you just use the scriptnode API and write custom nodes? It's pretty basic and similar to the juce::dsp::Processor API. You can still enjoy the coziness of the HISE environment for the other parts of your project :)

[clumsybear]

Well, I have to wrap my head around the scriptnode API, but I thought about it. However I‘m still a beginner at C++ and learning JUCE, so it will take some time :)

[d.healey]

@clumsybear Have you seen this?

[lalalandsynth]

I am trying this out and have a a problem , I am using this code and just pasting the snippet into that.
https://docs.hise.audio/tutorials/recipes/ui/animations.html
Tried this with Looping and a Interaction.
Then I place this code into the onInit window in Interface.

It does compile without problems but i see no animation , any thoughts on what I might be doing wrong ?
Plays in rLottie and outputs a snippet
It does flicker real quick when I compile but thats it :)

Seems like a great way to implement vectors when I get this working.

[ustk]

@lalalandsynth You need the lottie.dll

[lalalandsynth]

@ustk Ok, got it working when I put the dll into the system 32 folder .
What about when I export a plugin ? Would I need to install this on the user computer or how does that work ?
I found a thread on this subject but it was a bit unclear on this .

[ustk]

@lalalandsynth https://forum.hise.audio/topic/1902/lottie-vector-animation/24