Is it possible to define "inline" js plugins?

  • So the usual way is to define a plugin/hotspot element, either in the xml or through javascript code via addhotspot/addlayer/addplugin.

    In the case of custom developed js plugins we then need to set the hotspot.url / plugin.url to point to the file where the plugins code is written.

    My question is, would it be somehow possible to load the plugins code as a direct reference? Since js plugins begin like this:

    Code
    function krpanoPlugin() {}

    I tried to include it in the same js file and simply put

    Code
    myPlugin.url = krpanoPlugin;

    but of course that doesn't work (didn't expect it to, *g*).


    But is it possible somehow, another way? Just to clarify, the whole point would be to be able to bundle js files before runtime, and reduce the number of requests needed to make.

    Cheers!

  • Hi,

    Just to clarify, the whole point would be to be able to bundle js files before runtime, and reduce the number of requests needed to make.

    You could always use DATA-URLs to inline/embed files, e.g. encode your plugin with base64 and load it that way:

    Code
    <plugin name="..." url="data:text/plain;base64,...your base64 encoded plugin..." />

    Best regards,
    Klaus

  • Hmm, I just tried that, it seems to be working because some trace statements from inside the plugin are noticeable, however nothing appears visually.

    I have this very simple code inside of the plugin's logic, supposed to display some red circles:


    Code
    $(plugin.sprite).append('<div style="background:red;width:32px;height:32px;border-radius:32px"/>');

    The very same code works if it's in a separate .js file, fed through the url attribute the traditional way.

    Any idea what might be causing this?

    Edited once, last by webseta (October 4, 2019 at 4:49 PM).

  • as far as i know, you can't just add such a line of js like that.

    the xml <plugin> is meant for krpano plugins.

    check the docs how to implement them
    https://krpano.com/docu/plugininterface/#top

    put your code inside a barebone krpano plugin and it will work.
    (if jquery was loaded first)

    Code
    function krpanoplugin(){
    	local.registerplugin = function(krpanointerface, pluginpath, pluginobject){
    		/* YOUR CODE HERE */
    	}
    	local.unloadplugin = function(){}
    }
  • No, you misunderstand. I just posted a single line from the plugin's code, there's of course more. Like I said, if the same code is put in a separate js, the red circle appears. If the contents of that js file is included the way Klaus has shown, the code still seems to be interpreted and running, but no visuals.

  • Again, please read what I wrote.

    The same, exact code works if I do it like this:

    Code
    hotspot.url = "hotspot.js"

    and doesn't, if I Base64 encode the contents of the file hotspot.js, and put it there like this:

    Code
    hotspot.url = "data:text/plain;base64,ZnVuY3Rpb24ga3JwYW5vcGx1Z2luICgpIHsKICAgIHZhciBsb2..........."

    jQuery is loaded, if it wasn't, there would be an error saying it is undefined.

  • Yeah, that setting is there. But like I said, the funny thing is that the same code displays the hotspots one time and doesn't display them the other, depending on how the .url property is set up. But if there are trace/console.log statements inside the hotspots, they always run, just no visuals with the base64 encoded version.This is the "full" code, first the one that creates the hotspot:

    Code
    const hotspot = krpano.addhotspot(element.name);   
    hotspot.url = "/js/hotspot.js";
    //hotspot.url = "data:text/plain;base64,ZnVuY3Rpb24ga3JwYW5vcGx1Z2luICgpIHsKICAgIHZhciBsb2NhbCA9IHRoaXM7ICAgCiAgICB2YXIga3JwYW5vID0gbnVsbDsKICAgIHZhciBwbHVnaW4gPSBudWxsOwoKICAgIHRoaXMucmVnaXN0ZXJwbHVnaW4gPSBmdW5jdGlvbihrcnBhbm9pbnRlcmZhY2UsIHBsdWdpbnBhdGgsIHBsdWdpbm9iamVjdCkgewogICAgICAgIGtycGFubyA9IGtycGFub2ludGVyZmFjZTsKICAgICAgICBwbHVnaW4gPSBwbHVnaW5vYmplY3Q7CgogICAgICAgIGNvbnNvbGUubG9nKCJIZWxsbywgSSBhbSB0aGUgaG90c3BvdCEiKTsKCiAgICAgICAgJChwbHVnaW4uc3ByaXRlKS5hcHBlbmQoJzxkaXYgY2xhc3M9ImhzcG90IiBzdHlsZT0iYmFja2dyb3VuZDpyZWQ7d2lkdGg6MzJweDtoZWlnaHQ6MzJweDtib3JkZXItcmFkaXVzOjMycHgiLz4nKTsgIAogICAgfQoKICAgIGxvY2FsLnVubG9hZHBsdWdpbiA9IGZ1bmN0aW9uKCkgewogICAgICAgIHBsdWdpbiA9IG51bGw7CiAgICAgICAga3JwYW5vID0gbnVsbDsKICAgIH0KfTs=";
    hotspot.renderer = "css3d";

    And here's the contents of hotspot.js:


    So depending on which "hotspot.url" is left active and which is commented out, the red circle either shows, or it doesn't. But the console shows the text "Hello, I am the hotspot!" in both cases. I actually checked with the dev tools, and the "container" div that I assume is the hotspot itself is created both times, but in one case it has a child div with the necessary styling, and in the other there is no child div.

    Any ideas? :)

    Sorry, I know it's not really the most interesting or important feature, but still it would be nice to get this to work :)

  • Code
    <hotspot name="test" keep="true"
      renderer="css3d"
      url="data:text/plain;base64,ZnVuY3Rpb24ga3JwYW5vcGx1Z2luICgpIHsKICAgIHZhciBsb2NhbCA9IHRoaXM7ICAgCiAgICB2YXIga3JwYW5vID0gbnVsbDsKICAgIHZhciBwbHVnaW4gPSBudWxsOwoKICAgIHRoaXMucmVnaXN0ZXJwbHVnaW4gPSBmdW5jdGlvbihrcnBhbm9pbnRlcmZhY2UsIHBsdWdpbnBhdGgsIHBsdWdpbm9iamVjdCkgewogICAgICAgIGtycGFubyA9IGtycGFub2ludGVyZmFjZTsKICAgICAgICBwbHVnaW4gPSBwbHVnaW5vYmplY3Q7CgogICAgICAgIGNvbnNvbGUubG9nKCJIZWxsbywgSSBhbSB0aGUgaG90c3BvdCEiKTsKCiAgICAgICAgJChwbHVnaW4uc3ByaXRlKS5hcHBlbmQoJzxkaXYgY2xhc3M9ImhzcG90IiBzdHlsZT0iYmFja2dyb3VuZDpyZWQ7d2lkdGg6MzJweDtoZWlnaHQ6MzJweDtib3JkZXItcmFkaXVzOjMycHgiLz4nKTsgIAogICAgfQoKICAgIGxvY2FsLnVubG9hZHBsdWdpbiA9IGZ1bmN0aW9uKCkgewogICAgICAgIHBsdWdpbiA9IG51bGw7CiAgICAgICAga3JwYW5vID0gbnVsbDsKICAgIH0KfTs="
      />

    @webseta :
    the base64 url works without problem here (red dot is visible)

    Klaus :
    is it intended to use js-plugins this way?
    a) i didn't know js-plugins can be used in hotspots... is that valid?
    b) should a js-plugin be used as displayed layer (or hotspot) by itself?

  • Holy moly!

    That's right, if included like that in the xml, it works here too. But not if it's created through js code. So now we have narrowed the issue down :)

    Thanks!

    Btw to answer some of your concerns, yeah, we've been using js-based hotspots for years :) Not sure if it's intended or recommended, but the method works just fine.

  • Hi,

    const hotspot = krpano.addhotspot(element.name);
    hotspot.url = "/js/hotspot.js";
    //hotspot.url = "data:text/plain;base64,ZnVuY3Rpb24ga3JwYW5vcGx1Z2luICgpIHsKICAgIHZhciBsb2NhbCA9IHRoaXM7ICAgCiAgICB2YXIga3JwYW5vID0gbnVsbDsKICAgIHZhciBwbHVnaW4gPSBudWxsOwoKICAgIHRoaXMucmVnaXN0ZXJwbHVnaW4gPSBmdW5jdGlvbihrcnBhbm9pbnRlcmZhY2UsIHBsdWdpbnBhdGgsIHBsdWdpbm9iamVjdCkgewogICAgICAgIGtycGFubyA9IGtycGFub2ludGVyZmFjZTsKICAgICAgICBwbHVnaW4gPSBwbHVnaW5vYmplY3Q7CgogICAgICAgIGNvbnNvbGUubG9nKCJIZWxsbywgSSBhbSB0aGUgaG90c3BvdCEiKTsKCiAgICAgICAgJChwbHVnaW4uc3ByaXRlKS5hcHBlbmQoJzxkaXYgY2xhc3M9ImhzcG90IiBzdHlsZT0iYmFja2dyb3VuZDpyZWQ7d2lkdGg6MzJweDtoZWlnaHQ6MzJweDtib3JkZXItcmFkaXVzOjMycHgiLz4nKTsgIAogICAgfQoKICAgIGxvY2FsLnVubG9hZHBsdWdpbiA9IGZ1bmN0aW9uKCkgewogICAgICAgIHBsdWdpbiA9IG51bGw7CiAgICAgICAga3JwYW5vID0gbnVsbDsKICAgIH0KfTs=";
    hotspot.renderer = "css3d";


    Okay - first to understand:

    1.
    - when you load a .js file there is short delay between loading and the code being there
    - when you load a data-url, it is instantly there

    2.
    - when setting renderer=css3d it takes at least one frame/redraw until the 'sprite' is created

    That means try setting the renderer=css3d before setting the url - and/or - check in your .js code if the 'sprite' is actually there (not null) before trying to use it, when not there maybe just wait via setTimeout(0,...) one Javascript 'tick'.


    Klaus :
    is it intended to use js-plugins this way?
    a) i didn't know js-plugins can be used in hotspots... is that valid?

    Yes, but as said above only with renderer=css3d. Such hotspots are basically layers only with a slightly different sizing and 3D-transformed by CSS-3D-styles.

    Quote

    b) should a js-plugin be used as displayed layer (or hotspot) by itself?

    Sorry, I don't understand...?

    Best regards,
    Klaus

  • b) should a js-plugin be used as displayed layer (or hotspot) by itself?

    -->
    i meant a <plugin url="myplugin.js" /> cant be an image layer, that would need another url.
    but it seems to be possible to have size, color, background and be a visible layer and a js plugin at the same time.
    it never came to my mind to use a js-plugin like that, if i'd need a layer, i'd create one from the plugin.
    hope that doesnt sound confused *pinch*

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!