search

Inventsable / bombino

Supercharged Adobe CEP panel generator for Vue with dynamic template support for Vue-CLI and Quasar-CLI
MIT License
98 stars 16 forks source link

How to get the panel to show and not my local web server? #22

Closed zync09 closed 3 years ago

zync09 commented 3 years ago

Firstly just want to say thank you for this amazing library. Saves soo much time in kick starting a project compared to manually setting up a CEP extension.

That said though I'm having some issues with Adobe Animate and getting a panel to show. I can create a new adobe extension just fine and I can see it in Adobe Animate under the extensions without any issue. However when the panel opens it shows me my local web server's base page - Laragon in my case. Not quite sure what I'm doing wrong but guess it might be something to do with port numbers maybe?

Any help would be greatly appreciated. Thank you.

adobe-extension-bombino

Inventsable commented 3 years ago

Thanks! Your port number is likely the issue. By default the bombino templates are set up to use 8080 because this is the default for Vue-CLI, but you can easily change this.

In your ./vue.config.js file at the root of the panel:

module.exports = {
  publicPath: "./",
  configureWebpack: {
    target: "node-webkit",
    node: false,
  },
  devServer: {
    port: 9090, // You can manually set a different port number here
  },
  lintOnSave: false,
};

Then in your ./public/index-dev.html file, we need to change the src of the iframe to match the port you've set above:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>docker-host</title>
  </head>
  <body style="margin: 0; border: 0; overflow:hidden;">
    <iframe
      enable-nodejs
      src="http://localhost:9090"
      style="border: 0; width: 100vw; height: 100vh;"
    ></iframe>
  </body>
</html>

Notice the src="http://localhost:9090" value in the <iframe> element above.

Just for some clarification, the way the panel works in a developer context is that it relies on a standalone port to serve the Vue content, which you must run with an npm run serve command on the root of the extension before the extension will load properly.

Adobe recently made changes to CORS values that messed up certain parts of bombino as well. Admittedly Animate wasn't one of the original apps that bombino was made for and I added support in for it later -- I had to recently change the way evalScript works but I don't know that I added support for Animate. I can fix this for you now that I know someone's out there actually in need of this. If you notice issues with trying to run scripts through the evalScript command (which must be used through the workaround package to work in both DEV and PROD contexts as of CEP 11) be sure to copy the recent version of this file to your ./public/createEventChain.js file.

zync09 commented 3 years ago

Thank you soo much once again for this and for you speedy reply. Figured it has something to do with ports but just wasn't sure where to start. That works perfectly now. I'll keep testing and test you know. I've wanted to make a banner ad extension for adobe animate for some time but could never wrap my head around setting up a CEP extensions from scratch.

This project you've made is absolutely perfect and it uses Vue as well. Love you work!

Inventsable commented 3 years ago

Thanks!

Just so you know, CEP support for Animate isn't that great. Certain aspects of CEP integration in AN seem like an afterthought because they work so differently from the way other host apps do, and I've filed several bugs in AN that have never been resolved. The panel background color is not accurate and CEP only reports 2 of a possible 4 UI themes, so the workaround for this is that the context menu has a "Switch Theme" option when using <Menus> components that will toggle between Dark/Darkest variants (but this only needs to be set once). The documentation for my color theme package, starlette, doesn't mention Animate but full support for Animate is present in your panel, with a more detailed API page about the color variables here.

Unfortunately CEP 11 has broken the <Menus> component for flyout and context menus in bombino templates, but only while in Dev context. These work inside production context still. I'm still working on solving this but running into even more bugs with CEP 11 where I've not been able to get window.postMessage to accurately handle the menu interaction -- or, I have, but there's very buggy behavior I haven't been able to pin down and solve for yet. You may have a better DX overall if you were to use AN 2020 rather than '21 to bypass this, but as of right now the only issues in bombino left are the flyout/context menus (which frustratingly used to work beautifully).

Thanks! I'll follow you and keep an eye out for your projects. Feel free to file other issues, though I'm going to assume we can close this one now 👍

zync09 commented 3 years ago

Ah that should be OK. I'm using it for an older copy of Animate. 2019 Which I believe uses CEP 9. The new Animate (2020 and 2021) are buggy as and it seems like Adobe breaks more stuff than they fix with it. Just need an app to churn out banner ads quicker and this will get me there now.

Inventsable commented 3 years ago

In that case, I'd recommend using the evalScript method from the package named cluecumber (import { evalScript } from "cluecumber"), and <Panel>/<Menu> components from the package named lokney. These were both pre-CEP 11 and you should be set rather than using the post-11 versions in the current brutalism/workaround packages. Sorry if that seems confusing, ha.

Inventsable commented 3 years ago

Updated the above to link to the packages directly 👍