After Effects 2017 Panel Bootstrap skin + jQuery Spinner plugin

[geordiem74078114]

Hi all, been working on this the last couple of days, it's not finished but good enough to share.  I've tried to replicate the current AE 2017 look (default dark theme) where possible:

AE Editor UI 2 - JSFiddle

Most of the UI is "hacked" Bootstrap CSS, later I'd like to do this correctly using compiled CSS tools.  The Spinner is implemented as a jQuery plugin and probably needs some work.  The Sliders are a Bootstrap plugin which I've also skinned and need minimal javascript.

I'll be posting all this to GitHub soon so everyone can collaborate.  Let me know if there's any commonly used UI elements I've missed.

TNKS!

Geordie

[Mathias Moehl]

Looks great! For use in CEP panels it would be great to have something build-in that adjusts it to changing UI brightness.

[geordiem74078114]

Thanks!  Yup I want to make the color/theme changes work correctly.  All the colors are stored as CSS variables so only need to change them in one place.  I've seem some panels in the samples folder that plug into theme change events so shouldn't be too difficult.

[phlexib]

Looks awesome !!

Thanks for sharing.

In the very useful book Adobe Photoshop HTML Panels Development by Davide Barranca, which also works just fine for After Effect, He has a Chapter for syncing your panel Color Scheme with the host Application, adding an event listener :

com.adobe.csxs.events.ThemeColorChanged

and changing the csInterface.gethostEnvironment().appSkinInfo ;

I don't see anything missing but : I have no idea if it's possible or not, but I would love a drag and drop zone with options.

awesome work.

Ben

[geordiem74078114]

I'm in the process of creating a test panel that works across Photoshop, PPro, After Effects and Illustrator.  Alas the Chromium version used by CEP 6.1 and 7 is 41.x and Chromium didn't get CSS variable support till 53.x so I'm going to have to work around it with JS.  Was always a stop gap until I integrate Bootstrap fully into my Gulp build system (which I also want to share eventually)  Stay tuned!

[Jakob Wagner 2048]

Thank you! You are awesome! Is it on Github?