autoEdit 2 Documentation
1.0.13
1.0.13
  • Introduction
  • Overview
    • Intro
      • Development approach
      • from 1.0.5 to 1.0.6
    • Architecture Overview
      • Lo fi Design Sketches
      • High fidelity sketches in HTML
    • Support the project
    • documentation section template
    • Build / Deployment
      • Deployment/build for Mac OS X
      • Deployment / Build for Linux
      • Deployment / Build for Windows
      • Travis CI continuous build
        • previous travis setup
  • R&D Doc
    • About R&D doc section
    • Transcription & Media Processing
      • Transcription json
      • Transcriber
        • audio to video
        • STT sdks
          • IBM Watson STT
          • Gentle STT
          • Pocketsphinx
      • Video preview conversion
      • Read metadata
    • Hypertranscript
    • Selections, Annotations, Papercuts
      • Selections
      • Annotations
      • Tags
    • Paper-edit
      • Paper-edit json
      • search-filter
      • drag-and-drop
      • Preview Paper-edit video
    • Export
      • EDL export
      • XML export
      • mp4 export
  • Appendix
    • Dev configuration
    • Current db setup
    • EDL Format
    • Reusable components
    • Prerequisites
    • Testing
    • Updating automated documentation
    • ffmpeg and ffprobe in electron
    • Adding STT services
  • Appendix - Data structures
    • IBM Watson json specs
    • Gentle Json transcription specs
    • Pocketsphinx results
    • autoEdit transcription Json
  • QA List
    • QA Intro
  • Adobe Panel
    • autoEdit Adobe CEP Panel dev setup
      • Adobe Extensions HostList codes
    • autoEdit Adobe CEP Panel integration overview
    • Jsx functions for Adobe CEP autoEdit adobe Panel
    • Packaging and distributing Adobe CEP Extensions
      • Packaging signing Adobe CEP Panel in details
      • Submit to Adobe
  • Project Page
    • Build project page
    • Build/update demo front end page
  • Roadmap
    • Improvements
    • Roadmap
      • Paper-editing Roadmap
      • Extra Features Roadmap
      • Future Roadmap
        • Live video editing
        • Social Media Export
        • Translate transcriptions
        • Web app
          • Multi-user collaboration
        • Searchable Editable Archive
        • NLP insights
        • Slack/Chat bot integration
        • Interactive dev tool
        • Phone mms integration with twillio
        • B-roll computational photography
Powered by GitBook
On this page
  • electron vs adobe panel (vs nwjs)
  • Dev enviroment needed for CEP
  • setup
  • autoEdit adobe JSX integration
  • Packaging and distributing extension
  • some more docs for Adobe dev documentation
  1. Adobe Panel

autoEdit Adobe CEP Panel dev setup

PreviousQA IntroNextAdobe Extensions HostList codes

Last updated 6 years ago

Thanks to help in figuring out adobe CEP there is now support for an adobe panel version of autoEdit under development.

CEP stands for and it's an SDK by Adobe to create panels for the Adobe suite.

It is now possible to run autoEdit as an Adobe panel. The idea is that when run inside of adobe as a CEP panel, autoEdit, will have access to same local databse as the desktop application, to allow maximum portability, and have extra acess to features to integrate with adobe premiere, such as sync play with clips in source monitor from transcriptions etc..

Also for user facing functionalities.

Example autoEdit CEP

electron vs adobe panel (vs nwjs)

It seems like adobe panel CEP and and Electron use slightly different setup of chromium.

The downside is, Chromium is a very large codebase and requires very powerful machines to build. For normal laptops, that can take more than 5 hours. So this greatly impacts the number of developers that can contribute to the project, and it also makes development slower.

In order to avoid the complexity of building all of Chromium, Electron uses libchromiumcontent to access Chromium's Content API.

The main difference is noticeable when calling window.process.versions in the console for CEP and for electron.

Due to some of these differences the code base for autoEdit has been adjusted to accomodate and target for the two enviroments.

Dev enviroment needed for CEP

  • node

  • npm

  • Chrome browser to view the dev tools for the CEP panel

setup

At a mimum the files needed in that folder for the CEP panel are

  • The .debug file is necessary to get the chrome dev tools

  • the manifest.xml is really the important part, its what loads the index.html and jsx file

  • index.html entry point into the app

    • We use autoEdit's electron/index.html for this

  • jsx/Premiere.jsx contains APIs to communicate to Adobe Premiere

However will see section below for an automated build development step to achieve this programmatically

1. allow un-signed extension

defaults write com.adobe.CSXS.8 PlayerDebugMode 1

You might need to potentially cover 5 to 8 depending on which CSXS version you have. eg

defaults write com.adobe.CSXS.5 PlayerDebugMode 1
defaults write com.adobe.CSXS.6 PlayerDebugMode 1
defaults write com.adobe.CSXS.7 PlayerDebugMode 1
defaults write com.adobe.CSXS.8 PlayerDebugMode 1

You might need to re-start your computer

2. CEP development in autoEdit

git clone locally, so that you are setup to do a PR with any changes.

Then run npm install.

The extension folders are

  • For Win: C:\<username>\AppData\Roaming\Adobe\CEP\extensions

  • For Mac: ~/Library/Application Support/Adobe/CEP/extensions

For one off development builds in local adobe extension folder do

npm run adobe-panel-dev

For development with watch

npm run adobe-panel-dev:watch

With this last comand everytime you save it automatically copies changes over.

3. open CEP panel in Adobe Premiere

Last but not Launch Premiere Pro and open this Panel under

Window > Extensions > autoEdit

Everytime you want to update changes in the panel you need to close and reopen it.

3. CEP local server

autoEdit adobe JSX integration

Packaging and distributing extension

some more docs for Adobe dev documentation

For a more comprehensive unofficial guide of Adobe CEP see this series of blog posts, highly recommended if you want to understand the overall setup and inner workings.

and

You need to have recent version of on your system. Version 12.11 to ensure compatibility with all features.

used to interact with Adobe Premiere API and

optional but highly reccomended to use the extension in Premiere. (to install follow their instruction if you sing into adobe creative cloud it should auto install and be available in the window -> extensions list in Premiere )

The main code for the adobe panel is in folder.

Since Premiere only accepts signed extension,

But you can skip to and do the following terminal comand on a mac.

a series of npm scripts in with ndoe module are used to copy the relevant files across from and the rest of the relevant parts of the electron app into the CEP Adobe Premiere extension folder.

Local server for adobe panel is at , there you can see the dev tools inspector and console."

.

.

from electron's docs
here
Adobe Premiere
See here fore more details on JSX language
here
Property Explorer
adobe-panel-src
you should tell it to accept unsigned extensions like this as well
Debugging Unsigned Extensions
Fork branch autoedit-panel-refactor
package.json
sync-files
adobe-panel-src
http://localhost:8099/
List of features here organised by autoEdit views
See this section for adobe JSX functions useful for autoEdit Panel
see this section for more details on packaging, signing and distributing Adobe CEP extensions.
Official Adobe Sample Panel
Semi Official API Docs
Non Official but very nice API Docs
LogoCEP 5 Super mega guide: Extending Adobe apps with HTML5+Node.js | fenomas.com
@bfasenfest
Common Extensibility Platform
see autoEdit Adobe Panel user manual