PS-Panels-Boilerplate on GitHub!

Davide Barranca —  — 17 Comments

I’ve created a new project on my GitHub account where I will collect both Boilerplate code for HTML Panels and other Demo extensions – it’s called PS-Panels-Boilerplate.

I’ve started with a revised version of my Topcoat CSS integration post. The code is now better because it doesn’t rely on the usual two version of topcoat:

  • topcoat-desktop-light.css
  • topcoat-desktop-dark.css

Instead, I’ve tweaked the original .styl and the Grunt.js files – and following Garth Braithwaite’s tutorial I’ve eventually been able to output 4 CSS files that better match the Photoshop GUI, keeping the peculiar Topcoat personality:

  • topcoat-desktop-lightlight.css
  • topcoat-desktop-light.css
  • topcoat-desktop-dark.css
  • topcoat-desktop-darkdark.css

The themeManager.js code is refactored too, also (thanks to David Deraedt’s idea) injecting app’s Font information in the CSS.

UPDATE – Photoshop Tools

I’ve added this HTML Panel, which has been fun to build – go grab it on my GitHub page.

Photoshop Tools Panel

In the future – job, family and time permitting – I hope to be able to store in that repository the full code related to my entire HTML Panels tip series (and more! Since I’ve started approaching Angular, I plan to cover that one too).

Print Friendly

17 responses to PS-Panels-Boilerplate on GitHub!

  1. excellent post Davide. Looking forward to implementing this as a template for my panels

  2. Thanks, Davide.

    My 5 cents to Angular. As far as I know its not very well suited for rich UI apps and for usual Adobe panel it will be over-complicated approach. All those injectors, controllers, factories, scope visibilities, etc…

    • Thanks for your feedback Mikhail, so what MVC framework would you suggest as an Angular replacement? Thanks!

      • Are you sure that MVC approach is required to create a panel? If it would be a complex site, but for usual panel I think its enough to use jQuery.

        • I’m sure it’s not required Mikhail, but I’m sure too it might be helpful to have it 😉
          I’ve been using MVC back in Flash days following Olav Kvern excellent tutorials, so I would suggest Angular.
          You’re right though, for simple panels jQuery is enough! I’ve inspected a paid Panel that I’ve bought out of curiosity, and I’d say it’s as complex as a complex site. My own stuff won’t be that fancy but I’d say that an MVC approach scales better.

  3. Thanks a lot
    This is exactly the kind of thing I was asking to adobe since the anounce death of configurator: Templates for non coder that we can tweak before someone could come out with some good tools even better than configurator (maybe based on http://maqetta.org/)

    We need more like that. i posted a very simple and basic 2 buttons actions panel that template for cc2014 on a github https://github.com/studioxop/CEP_PHXS. Hope more and more people will share they experience on HTML panel and in a few month everyone will be able to find some snippet code to build their own basic one

  4. Exactly what I’ve wanted to do and had no idea how to do it!

    Thank you very much!

  5. The body background color is incorrect.
    In all of 4 css files, “topcoat-desktop- * .min.css”
    They should be:

    • Thanks for the comment Ray – you’re right, these are the color coming from AppSkinInfo. If memory doesn’t fail me I have been sampling the actual panels color (the resulting color) in sRGB and using the HEX value of that – but I’ll stick to regular colors in the next iteration.

  6. Hi Davide. I’m interested in learning more about programming Adobe PS extensions and just stumbled across your site. Such wonderful information – many thanks for sharing.

    If you don’t mind I have a quick question that despite extensive Googling I haven’t been able to determine the answer to. Is it possible to program an extension that doesn’t have a pop-out panel when clicked – just the button itself (or buttons) in a row that execute the required command when clicked (similar to the tools in the PSTools panel?).

    • Hi Gary,
      I’m not sure I’ve understood your question: you mean a collapsed panel i.e. only the icon, that you’d click. The panel won’t open but an action is performed, have I got it?
      It might be possible, even if not instantaneous: the panel (even a small one) would open, trigger an action and then immediately close.
      Otherwise (simpler, cleaner) you can have an extension with one or more buttons, each buttons triggering an action or script.
      Hope this clarifies!

  7. Hi Davide, thanks for the reply.

    I think the second of the two options you mention is what I’m looking for. In its simplest form it would be a single button that’s dockable, but when clicked doesn’t open a panel but triggers a script.

    Any idea how I would go about starting to code such an extension?
    Thanks in advance,

  8. Hi Davide, Forgot to mention that I’ve got the basic functionality of the button working (I grabbed the PS JS code from ScriptListener and have played it back successfully via both Extendscript Toolkit and a barebones extension panel I coded that consists of a panel with one button. It’s just that I’d like to do without the button and panel and play the script when the docked button (that normally opens the panel) is clicked.

    The only valid UI types I’ve found are panel and 2 dialogs: modal and modeless. CEP6 appears to have a ‘custom’ type that can be used to create invisible extensions, but ideally I’d like this to work in CEP5.

  9. Hi Davide,
    I’ve got it working in a fashion. It turns out that with only a single button on the panel, when the extension is not docked and the ‘expand panels’ arrow is clicked, a little unexpectedly the panel shrinks to the single button which sends the required command when clicked. This is the behaviour I was looking for, albeit without the ‘collapse to icons’, close ‘x’ and ‘close-group’ controls above it but I can live with that.
    Thanks for your offer of help. I’ll read through the rest of your tips now and see what new things there are to learn.

    • Gary, I was wondering: if you’re looking for buttons, would it fit to use the Actions Panel in Button mode, and bind to each Action a single Script? This would definitely simplify.

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">