Is it possible to define "inline" js plugins?

Fortgeschrittener

Mittwoch, 2. Oktober 2019, 15:56

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:

	Quellcode
1	function krpanoPlugin() {}

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

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

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

2

Freitag, 4. Oktober 2019, 14:16

Hi,

Zitat von »webseta«

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:

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

Best regards,
Klaus

Zum Seitenanfang

webseta

Fortgeschrittener

Beiträge: 165

3

Freitag, 4. Oktober 2019, 16:17

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:

	Quellcode
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?

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »webseta« (4. Oktober 2019, 16:49)

Zum Seitenanfang

$»indexofrefraction« ist online$ indexofrefraction

Profi

Beiträge: 1 362

4

Freitag, 4. Oktober 2019, 16:36

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)

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

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

webseta

Fortgeschrittener

Beiträge: 165

5

Freitag, 4. Oktober 2019, 16:48

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.

Zum Seitenanfang

$»indexofrefraction« ist online$ indexofrefraction

Profi

Beiträge: 1 362

6

Freitag, 4. Oktober 2019, 17:16

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

it works here with non-jquery js

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

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »indexofrefraction« (4. Oktober 2019, 17:29)

Zum Seitenanfang

webseta

Fortgeschrittener

Beiträge: 165

7

Freitag, 4. Oktober 2019, 22:43

Again, please read what I wrote.

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

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

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

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

Zum Seitenanfang

$»indexofrefraction« ist online$ indexofrefraction

Profi

Beiträge: 1 362

8

Freitag, 4. Oktober 2019, 23:30

'k sorry man...

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

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

webseta

Fortgeschrittener

Beiträge: 165

9

Samstag, 5. Oktober 2019, 01:05

It's ok, I appreciate you trying to help ;-)

But yeah, let's wait if Klaus has some more insight.

Zum Seitenanfang

alexp

Anfänger

Beiträge: 18

10

Samstag, 5. Oktober 2019, 19:21

Zitat von »webseta«

hotspot.url = "data:text/plain

Did you try data:text/javascript ?

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

11

Sonntag, 6. Oktober 2019, 08:35

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

Zum Seitenanfang

webseta

Fortgeschrittener

Beiträge: 165

12

Montag, 7. Oktober 2019, 00:25

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:

Quellcode

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:

Quellcode

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

Zum Seitenanfang

$»indexofrefraction« ist online$ indexofrefraction

Profi

Beiträge: 1 362

13

Montag, 7. Oktober 2019, 09:15

Quellcode

<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?

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »indexofrefraction« (7. Oktober 2019, 11:48)

Zum Seitenanfang

webseta

Fortgeschrittener

Beiträge: 165

14

Montag, 7. Oktober 2019, 14:52

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.

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

15

Montag, 7. Oktober 2019, 16:35

Hi,

Zitat von »webseta«

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'.

Zitat von »indexofrefraction«

@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.

Zitat

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

Sorry, I don't understand...?

Best regards,
Klaus

Zum Seitenanfang

webseta

Fortgeschrittener

Beiträge: 165

16

Montag, 7. Oktober 2019, 17:28

Boom, that was the solution. Thanks very much!

Zum Seitenanfang

$»indexofrefraction« ist online$ indexofrefraction

Profi

Beiträge: 1 362

17

Montag, 7. Oktober 2019, 18:17

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*

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »indexofrefraction« (7. Oktober 2019, 18:48)

Zum Seitenanfang