Skip to content

A web app for designing and building Adobe ScriptUI javascript dialogs (Illustrator, Indesign, Photoshop, After Effects, Bridge). Design your dialog using a graphical interface and export as .jsx

Notifications You must be signed in to change notification settings

ES-Collection/ScriptUI-Dialog-Builder-Joonas

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

93 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Website (web app)

scriptui.joonas.me

Offline use

This repository includes a build folder that contains the same files as the website. So if the URL doesn't work for some reason, you should be able to download the repo and use it locally (offline). Everything it needs to run is in the build folder. Just open the build\index.html in Chrome.

Desktop applications

Read mode...

The desktop applications are only trying to fill a small slot of convenience, but they're not necessary. The desktop apps don't work offline though since they are only loading up the website.

These were created using Web2Desk. They don’t seem to mention it anywhere as far as I know, but I believe Web2Desk uses Electron to create the desktop app that simply displays the chosen website (https://scriptui.joonas.me) using Chromium.

Download desktop applications.

The download folder also now includes a Chrome App. The great thing about it is that you can sync it to other computers. The downside is that it's tied to Chrome.

Desktop app pros

  • If you’re knee deep in the Windows ecosystem and a devout user of Internet Explorer (or any browser that is not Chrome), this desktop application has got your back since it uses Chromium to display the website.
  • You don't have to worry about losing progress if you wipe your browser's browsing history. Although it may be good to know the app does allow you to do that too if the need arises.
  • You get an Icon in your desktop you can use to launch the web app
  • You get to use the web app in its own window

Desktop app cons

  • Can't be used offline
  • There is a tiny hiccup on Windows. In Windows, the Alt key shows the top menu... and especially if you're duplicating items, the structure panel may shift vertically causing you to drop the item in the wrong place.
  • For some reason, the icons look kinda terrible, but since these apps are generated using a 3rd party tool, there's nothing to be done about it.

General info about ScriptUI Dialog Builder (SDB)

SDB helps you design and build ScriptUI dialogs without writing code. It auto-generates ready to be used Javascript on export. It doesn't handle events. You'll need to write events yourself.

Because the builder simply simulates ScriptUI layout and behavior, there are various differences here and there. One major factor is that there are small differences between Adobe applications so be aware that the dialog preview may look completely different depending on the application you're using. As an example, a really easy to spot difference is that tabs look completely different in Photoshop they do in other applications. Illustrator CC will be closest since SDB was built using it as the template.

There's a one kinda big feature that I had to leave out (for now) because I just couldn't replicate the behavior. I got pretty close, but I wasn't satisfied with it. ScriptUI items can actually have "fill" on both x and y axis, but in the builder, it's limited to one axis.

Dialog data is saved locally by your browser (local storage). So if you refresh the page or come back later with the same browser, your dialog should still be there, as long as nothing goes wrong in the reconstruction of the dialog. There's always the off chance that an error of some kind wipes it clean. If you’re browsing in incognito mode, your browser will forget this data as soon as you close the tab or window. Each code export also includes importable JSON at the top of the code, which means you can continue working on a dialog on another computer as long as you store the importable JSON somewhere. I've been just leaving it in my scripts. Though if you're using images you might not want to do that since it could make the script size incredibly large (for a script anyway). Here's an example of one of my scripts where I left the import JSON in place.

Usage

A good rule of thumb is to use width and height sparingly. Sometimes Align children: Fill or Alignment: Fill can be used to get the desired result without setting a static width. You can easily make the dialog hard to work with if you have to keep adjusting the width and/or height values every time you add new items or make other changes that would affect the size.

For example, the sample dialog only uses width and height for various EditText fields to basically leave room for characters and the 4 panels so that they have equal height.

Browser support

Chrome. May work in other modern browsers, but the development has shifted to focus on Chrome so you probably shouldn't push your luck with Firefox either. No mobile support. Try the desktop app if you don't like to use Chrome.

Source folder

The source folder contains the development files, which are stitched together using Codekit. Codekit does have nifty features like compressing images and stuff, but the major thing is that it's used in order to stitch together various HTML, CSS and Javascript files... just because it's convenient.

I wouldn't expect anyone to contribute to the code because it's just a big mess. It's all pretty much just prototypes held together by duct tape (So Codekit probably won't be an issue). I may consider hopping off of Codekit in the future...

Dialog examples (JSX+JSON)

  1. Export Layers Inside Selected Group Dialog (Gist) - (Comparison image - Illustrator CC 2019 ).
  2. Import Multiple PDF pages (Gist) - (Comparison image below ↓).

Comparison between ScriptUI Dialog Builder and Indesign

I recreated the dialog of an Indesign script called Multi Page Importer (download link) in the builder, exported the code and ran it in Indesign CC 2019.

(Click to enlarge) Comparison between ScriptUI Dialog Builder and Indesign CC 2019

About

A web app for designing and building Adobe ScriptUI javascript dialogs (Illustrator, Indesign, Photoshop, After Effects, Bridge). Design your dialog using a graphical interface and export as .jsx

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 72.1%
  • HTML 19.8%
  • CSS 8.0%
  • Other 0.1%