1 Reply Latest reply on Oct 16, 2016 7:33 PM by jingtaotan

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

    johnt53984649 Level 2

      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>

              <meta charset="utf-8">

              <title>MyTest</title>

          </head>

          <body>

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

              <div id="result"></div>

          </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[i];

          if (!BCVchild) continue;

          var mediaPath = BCVchild.getMediaPath();

       

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

          {

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

              app.project.rootItem.children[i].changeMediaPath(BCVpath);

              app.project.rootItem.children[i].name = app.project.name.replace('(PROJ).prproj',BCV_File_Suffix[j])

          }

      }

      }

       

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

        • 1. Re: Create Panel in Premiere Pro that performs the same action as a script
          jingtaotan Level 1

          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[i];
              if (!BCVchild) continue;
              var mediaPath = BCVchild.getMediaPath();
          
              if (mediaPath && mediaPath.length > 0 && mediaPath.indexOf(BCV_File_Suffix[j]) > -1)
              {
                  var BCVpath = (app.project.path).toString().replace(/\\/g, '\\').replace('\\\\?\\','').replace('(PROJ).prproj',BCV_File_Suffix[j])
                  app.project.rootItem.children[i].changeMediaPath(BCVpath);
                  app.project.rootItem.children[i].name = app.project.name.replace('(PROJ).prproj',BCV_File_Suffix[j])
              }
          }
          }
          }
          

           

          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>