All Projects → joonaspaakko → Scriptui Dialog Builder Joonas

joonaspaakko / Scriptui Dialog Builder Joonas

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Scriptui Dialog Builder Joonas

Djsemimodalviewcontroller
Simple semi modal presentation dialog with stacked content
Stars: ✭ 137 (-14.91%)
Mutual labels:  dialog
Amazing Time Picker
Timepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material
Stars: ✭ 142 (-11.8%)
Mutual labels:  dialog
Flutter app
🔥🔥🔥本项目包括各种基本控件使用(Text、TextField、Icon、Image、Listview、Gridview、Picker、Stepper、Dialog、Slider、Row、Appbar、Sizebox、BottomSheet、Chip、Dismissible、FlutterLogo、Check、Switch、TabBar、BottomNavigationBar、Sliver等)、豆瓣电影、tubitv、每日一文、和天气、百姓生活、随机诗词、联系人、句子迷、好奇心日报、有道精品课、高德定位、音乐播放器🎵、追书神器等板块
Stars: ✭ 2,140 (+1229.19%)
Mutual labels:  dialog
Qrn
Query-Reduction Networks (QRN)
Stars: ✭ 137 (-14.91%)
Mutual labels:  dialog
Jquery Confirm
A multipurpose plugin for alert, confirm & dialog, with extended features.
Stars: ✭ 1,776 (+1003.11%)
Mutual labels:  dialog
Androidutillib
🔥 旨在打造一款属于Android开发的强大工具库:内置各种开发必备工具类、Dialog封装、组件重写等
Stars: ✭ 143 (-11.18%)
Mutual labels:  dialog
Oxbow
Swing UI Enhacements
Stars: ✭ 135 (-16.15%)
Mutual labels:  dialog
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件,包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-3.11%)
Mutual labels:  dialog
Vue Dialog Drag
Simple vue draggable dialog
Stars: ✭ 141 (-12.42%)
Mutual labels:  dialog
Popmodal
jquery plugin for showing tooltips, titles, modal dialogs and etc
Stars: ✭ 149 (-7.45%)
Mutual labels:  dialog
Appupdater
A library that checks for your apps' updates on Google Play, GitHub, Amazon, F-Droid or your own server. API 9+ required.
Stars: ✭ 1,793 (+1013.66%)
Mutual labels:  dialog
Universalpickerdialog
Android dialog with auto generated pickers inside, which depends on count of datasets provided. Made by Stfalcon
Stars: ✭ 138 (-14.29%)
Mutual labels:  dialog
Rxtool
Android开发人员不得不收集的工具类集合 | 支付宝支付 | 微信支付(统一下单) | 微信分享 | Zip4j压缩(支持分卷压缩与加密) | 一键集成UCrop选择圆形头像 | 一键集成二维码和条形码的扫描与生成 | 常用Dialog | WebView的封装可播放视频 | 仿斗鱼滑动验证码 | Toast封装 | 震动 | GPS | Location定位 | 图片缩放 | Exif 图片添加地理位置信息(经纬度) | 蛛网等级 | 颜色选择器 | ArcGis | VTPK | 编译运行一下说不定会找到惊喜
Stars: ✭ 11,567 (+7084.47%)
Mutual labels:  dialog
Gydl
gydl (Graphical Youtube-dl) is a GUI wrapper around the already existing youtube-dl program.
Stars: ✭ 136 (-15.53%)
Mutual labels:  dialog
Alertifyjs
A javascript framework for developing pretty browser dialogs and notifications.
Stars: ✭ 1,922 (+1093.79%)
Mutual labels:  dialog
Noty
A simple library for creating animated warnings/dialogs/alerts for Android.
Stars: ✭ 136 (-15.53%)
Mutual labels:  dialog
Aiforms.dialogs
AiForms.Dialogs for Xamarin.Forms
Stars: ✭ 143 (-11.18%)
Mutual labels:  dialog
Dialog
👻 A simple to use, highly customizable, and powerful modal for Angular Applications
Stars: ✭ 158 (-1.86%)
Mutual labels:  dialog
Alerttoast
Create Apple-like alerts & toasts using SwiftUI
Stars: ✭ 151 (-6.21%)
Mutual labels:  dialog
Flutter client php backend
Sample app demonstrating usage of Flutter Framework to Create Android & IOS App Using Rest API Created In PHP
Stars: ✭ 148 (-8.07%)
Mutual labels:  dialog

Website (web app)

ScriptUI Dialog Builder (SDB) - 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 more...

The desktop apps won't work offline since each version of the app is only loading up the website and not a full fledged desktop app. The desktop applications are only trying to fill a small slot of convenience.

Download desktop applications (Dropbox link).

The desktop apps were created using an online tool that converts websites into desktop applications: 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. Also, I believe they inject their own google analytics. SDB by itself doesn't gather any data.

Chrome App

The download folder also 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.

Download desktop applications (Dropbox link).

Documentation

For now SDB's general documentation is in the github wiki, but I'm planning to move that over to scriptui.joonas.me/docs at some point.

There's not much to write about in the SDB documentation, but I'm planning to perhaps include a changelog and sort of hidden or hard to find out features.

CEP Documentation

SDB has a CEP export: Export button (above dialog preview) > Gear icon (bottom right in the modal window) > CEP export (When this is turned on, the export comes out as html, css and js). It does not export you a fully functional extension, rather just a SUI style layout with some js helper functions to make it easier for you to work with it. You just paste the exported code into your CEP boilerplate's index.html and the rest is up to you writing the interaction logic.

This CEP documentation is in scriptui.joonas.me/docs → Look for CEP in the top menu.

scriptui.joonas.me/docs is also included in the repo: source/docs and build/docs.

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)

Description

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

What to expect

Because SDB simply emulates ScriptUI layout and behavior, there are various differences here and there. This is to be expected. So be aware that the dialog preview may look completely different depending on the application you're passing the code through. There are also some differences between applications. As an example, a really easy to spot difference is that tabs look completely different in Photoshop than they do in other applications. While no application will be 100% accurate, Illustrator CC will be closest since SDB was built using it as the template.

In my experience, even when you run the code through ESTK, which is completely different looking than CC applications, SDB is still better than hand coding the dialog.

Data handling

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.

SDB Layout PSD files

Maybe there's not a whole lot of need for this, but figured I might as well share it. It could be helpful if you wanna suggest a new feature or something. Font files included in the download folder.

Dropbox download link: ScriptUI Dialog Builder PSD files

This was generated using Page Layers. I did clean it up a bit but some of the layer structure may be unnecessarily complicated because it follows the html structure. Because it's essentially a fancy layered screenshot, it doesn't include anything but the visible elements. So no modal windows.

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.

There's also the fact that while SDB gets fairly close in imitating SUI, it's not perfect and therefore things may end up shifting around, but the width or height you've set wont. There's a good example of this in the sample dialog. The two bottom panels are given the same height, but the bottom left panel ends up being tad bigger in Indesign CC, because the children end up taking more room than they do in SDB.

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. That said, if this issue gets implemented, it would be a way to get around the issue, by making sure items that are supposed to be the same size actually end up that way.

Browser support

Chrome. The development has shifted focus to 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].