You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Wednesday, October 2nd 2019, 3:56pm

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:

Source code

1
function krpanoPlugin() {}


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

Source code

1
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!

2

Friday, October 4th 2019, 2:16pm

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:

Source code

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


Best regards,
Klaus

3

Friday, October 4th 2019, 4:17pm

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:


Source code

1
$(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?

This post has been edited 1 times, last edit by "webseta" (Oct 4th 2019, 4:49pm)


4

Friday, October 4th 2019, 4:36pm

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)

Source code

1
2
3
4
5
6
function krpanoplugin(){
	local.registerplugin = function(krpanointerface, pluginpath, pluginobject){
		/* YOUR CODE HERE */
	}
	local.unloadplugin = function(){}
}

5

Friday, October 4th 2019, 4:48pm

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.

6

Friday, October 4th 2019, 5:16pm

- r u sure jquery is there ?
- the sprite is there ?

it works here with non-jquery js

Source code

1
2
3
   layer = krpano.layer.getItem('...');
   div = document.createElement(div');
   layer.sprite.appendChild(div);

This post has been edited 1 times, last edit by "indexofrefraction" (Oct 4th 2019, 5:29pm)


7

Friday, October 4th 2019, 10:43pm

Again, please read what I wrote.

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

Source code

1
hotspot.url = "hotspot.js"


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

Source code

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


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

8

Friday, October 4th 2019, 11:30pm

'k sorry man...

i missunderstood you... you need an answer from klaus

9

Saturday, October 5th 2019, 1:05am

It's ok, I appreciate you trying to help ;-) But yeah, let's wait if Klaus has some more insight.

10

Saturday, October 5th 2019, 7:21pm

hotspot.url = "data:text/plain
Did you try data:text/javascript ?

11

Sunday, October 6th 2019, 8:35am

Hi,

do you use your plugin with hotspots?

If yes - renderer="css3d" - would need to be added to the hotspot element.

Otherwise the hotspot is rendered by WebGL and in this case there is no html/css and also no 'sprite' element for the hotspot.

Best regards,
Klaus

12

Monday, October 7th 2019, 12:25am

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:

Source code

1
2
3
4
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:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function krpanoplugin () {
   var local = this;   
   var krpano = null;
   var plugin = null;

   this.registerplugin = function(krpanointerface, pluginpath, pluginobject) {
  	krpano = krpanointerface;
  	plugin = pluginobject;

  	console.log("Hello, I am the hotspot!");

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

   	local.unloadplugin = function() {
  	plugin = null;
  	krpano = null;
   }
};



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 :)

13

Monday, October 7th 2019, 9:15am

Source code

1
2
3
4
<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?

This post has been edited 2 times, last edit by "indexofrefraction" (Oct 7th 2019, 11:48am)


14

Monday, October 7th 2019, 2:52pm

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.

15

Monday, October 7th 2019, 4:35pm

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.

Quoted

b) should a js-plugin be used as displayed layer (or hotspot) by itself?
Sorry, I don't understand...?

Best regards,
Klaus

16

Monday, October 7th 2019, 5:28pm

Boom, that was the solution. Thanks very much!

17

Monday, October 7th 2019, 6:17pm

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*

This post has been edited 1 times, last edit by "indexofrefraction" (Oct 7th 2019, 6:48pm)