Create Panel in Premiere Pro that performs the same action as a script

Report · Oct 14, 2016

So I've looked at several examples for Premiere Pro panels, but I'm still somewhat confused. Let's say I have the following HTML file:

<!DOCTYPE html>

<html>

<head>

<title>MyTest</title>

</head>

<body>

<button onclick="myFunction()">Replace Media (BCV)</button>

</body>

</html>

This creates a button that I can load into a Premiere Pro panel. I also have the following code that runs in Premiere just fine when I activate it from ExtendScript:

var BCV_File_Suffix = ["(PREV).psd", "(BACK).mxf", "(BATT).mxf", "1(NARR)_Fixed.flac", "2(NARR)_Fixed.flac"];

for (j = 0; j <= 4; j++)

{

for (i = 0; i <= app.project.rootItem.children.numItems; i++)

{

var BCVchild = app.project.rootItem.children;

if (!BCVchild) continue;

var mediaPath = BCVchild.getMediaPath();

if (mediaPath && mediaPath.length > 0 && mediaPath.indexOf(BCV_File_Suffix) > -1)

{

var BCVpath = (app.project.path).toString().replace(/\\/g, '\\').replace('\\\\?\\','').replace('(PROJ).prproj',BCV_File_Suffix)

app.project.rootItem.children.changeMediaPath(BCVpath);

app.project.rootItem.children.name = app.project.name.replace('(PROJ).prproj',BCV_File_Suffix)

}

What do I need to change in the HTML file to get the button to activate the script in Premiere Pro? I'm confused.

Report · Oct 16, 2016

Hi John,

You will need to use the CSInterface class provided by Adobe. The CEP Cookbook demonstrates this, located at this URL CEP-Resources/CEP_6.x at master · Adobe-CEP/CEP-Resources · GitHub

First, download a copy of CSInterface from the URL above. Place it in your extension folder and include it in your HTML.

In your ExtendScript JSX file, wrap the logic in a function, e.g.:

function myBcvFunction() {
var BCV_File_Suffix = ["(PREV).psd", "(BACK).mxf", "(BATT).mxf", "1(NARR)_Fixed.flac", "2(NARR)_Fixed.flac"];
for (j = 0; j <= 4; j++)
{
for (i = 0; i <= app.project.rootItem.children.numItems; i++)
{
    var BCVchild = app.project.rootItem.children;
    if (!BCVchild) continue;
    var mediaPath = BCVchild.getMediaPath();
    if (mediaPath && mediaPath.length > 0 && mediaPath.indexOf(BCV_File_Suffix) > -1)
    {
        var BCVpath = (app.project.path).toString().replace(/\\/g, '\\').replace('\\\\?\\','').replace('(PROJ).prproj',BCV_File_Suffix)
        app.project.rootItem.children.changeMediaPath(BCVpath);
        app.project.rootItem.children.name = app.project.name.replace('(PROJ).prproj',BCV_File_Suffix)
    }
}
}
}

Then add the following JavaScript to your panel (not ExtendScript):

var script = "myBcvFunction()";
CSInterface.evalScript(script, evalScriptCallback);

You also need to make sure that the JSX file is referenced from the <ScriptPath> element in the panel extension's manifest.xml, like this:

<DispatchInfoList>
  <Extension Id="com.YourPanel">
  <DispatchInfo >
  <Resources>
  <MainPath>./index.html</MainPath>
  <ScriptPath>./YourScriptFile.jsx</ScriptPath>
  </Resources>
  ...
  </DispatchInfo>
  </Extension>
  </DispatchInfoList>

Create Panel in Premiere Pro that performs the same action as a script

1 Correct answer