How to merge plugin-specific images

[Lawson Kendall]

Is there a clean, "opensphere" way of getting plugin-specific images merged into the opensphere build?

We have defined a plugin for our project ("opensphere-plugin-spacecop") (based on opensphere-plugin-example).  There are some icons which are specific to our project.  I have tried adding the image files (.png) to various locations (e.g. ${spacecoproot}/images/,  ${spacecoproot}/views/images/,   ${spacecoproot}/src/plugin/spacecop/ (both directly in that directory as well as "./images/" in there).  I've also tried adding configuration to our plugin repo's package.json (added "images":"images" to the "directories" property) -- all to no avail.

I have searched the opensphere documentation for any guidance.  That did give me some hope with the hint about setting properties in package.json, but ultimately that hasn't solved the problem.  

Thank you for any guidance you can provide.

Lawson Kendall

[Brad Hards]

The good advice will likely come from the core team, but it might help to know that the “merge” process is controlled (more-or-less) by invoking https://github.com/ngageoint/opensphere-build-resolver

 

That has a “core”, and then a set of extensions (plugins). For example, you can merge “onboarding” tips because of this plugin:

https://github.com/ngageoint/opensphere-build-resolver/blob/master/plugins/copy-onboarding/index.js

 

I don’t see anything that is especially appropriate for “image” (although looking more after some coffee would likely help). However you can apparently write your own little plugin, and have the build resolver merge it (based on name – it looks for stuff in the workspace/ directory). See https://github.com/ngageoint/opensphere-build-resolver#writing-plugins

 

That said, I haven’t actually tried this, and so can’t offer more than a “worth a look” suggestion, but HTH.

 

Brad

--
You received this message because you are subscribed to the Google Groups "OpenSphere" group.
To unsubscribe from this group and stop receiving emails from it, send an email to opensphere+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/opensphere/a62e97a9-544e-40bb-82b5-41fd8ab90a14n%40googlegroups.com.

[Lawson Kendall]

Brad -- Good tip.  I'll start looking at the build-resolver.  Thanks! 

[William Wall]

Your plugin's index.js file defines what resources get copied. You'll
notice that OpenSphere copies its own images folder on
opensphere/index.js:280. In order to get the pathing correct in both
the debug and the compiled versions, you reference your image with
your plugin's ROOT define. So something like `yourPlugin.ROOT +
'images/img1.png'` (example in opensphere/src/os/ui/icons.js using its
ROOT path).

[Lawson Kendall]

Will, et al.

This is the info I needed.  Thank you!

[Lawson Kendall]

Maybe I spoke to soon...

So, I'm looking at the line Will mentioned --  opensphere/index.js:280 -- where the images folder gets copied.  In context, it appears to be one of several elements being concatenated onto the sharedResources array to create the new array "indexResources":

const indexResources = sharedResources.concat([
  {
     source: '',
     target: '',
     files: ['images']
  },
  {
     source: resolver.resolveModulePath('opensphere-asm/dist', __dirname),
     target: '', 

     ... 

Down at the bottom of the file, I see indexResources being passed as one of the "templates" in config assigned to "module.exports".

There's no reference to "resolver" in the "images" block.  It's not apparent to me which, if any, resolver is being invoked to effect the copy of the images folder.  Is there some indirection I'm missing where that "images" element is being processed by some build-resolver plugin?  Maybe for my simple case, I just need to create a simple "indexResources" array with a single element and pass that to an equally simple "module.exports" config?

I'm not asking anyone to tell me how to do this.  I just want to make sure I'm not over-complicating things.  If I need to understand how the whole build-resolver system works (assuming that's the mechanism opensphere is actually using to copy its own images folder into the dist), I'll keep reading.  I appreciate any (additional) tips or light anyone can shed on this.

Thanks,

Lawson

[Lawson Kendall]

P.S.  Just discovered the opensphere slack workspace.  I'm happy to move the conversation there if that's preferred.  Otherwise, I'm leaving it here for the sake of continuity.

[wallw-bits]

Here's the full changeset for having opensphere-plugin-example copy some images to the compiled build:

https://github.com/ngageoint/opensphere-plugin-example/commit/084f958a44e077cd435b81559e2282a7c36b0ed0

[Lawson Kendall]

Thank you!