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

Tuesday, October 1st 2013, 1:03pm

using CSS for hotspots

I'm building a Phonegap iOS/Android application. Since there's no use for Flash I decided to code the interface in Javascript rather than the XML speudo code.

Is there a way to add custom attributes to the hotspot HTMLElement?
I can find them by doing querySelectorAll('div') and checking the kobject property of the element for the hotspot properties.
But I was wondering if there's was a better (more native?) way.

It would be nice to be able to simply use CSS for :hover etc.

gr

Ron

jordi

Intermediate

Posts: 479

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

2

Tuesday, October 1st 2013, 2:04pm

you can very easily create a style for the hotspots in the xml and it will be working awesome...
everpano.com step beyond 360

3

Tuesday, October 1st 2013, 3:17pm

I know, but that's not what I'm asking.

I want to use CSS3 because it's way easier and faster than Krpano's XML way.
Think animating hover transitions depending on hotspot... easy if you have CSS at hand... awkward in Krpano XML.

Also...

Krpano hotspots require images. A transformed HTMLElement with pure CSS styling looks a lot smoother than a one with a bitmap.
Krpano hotspots react as squares. With CSS3 border-radius they react as circles (comes in handy with overlapping hotspots).

4

Tuesday, October 1st 2013, 4:43pm

Hi,

you can get the html dom element via the 'sprite' member variable:
http://krpano.com/docu/xml/#layer.sprite

For getting the spot itself I would recommend using the 'onloaded' event of the hotspot, using querySelectorAll might be problematic when loading other panos.

Best regards,
Klaus

5

Wednesday, October 2nd 2013, 10:21am

Ah ok... that would indeed be cleaner... but the hotspot onloaded event doesn't fire (the onover, onout and onclick work fine).
No matter, I have it working with the global onloadcomplete event and a custom one within a transition right after wait(LOAD).

Are there any future plans for building a Javascript API? Since WebGL could replace the Flash implementation in a few years (IE11).

gr

Ron

6

Wednesday, October 2nd 2013, 10:53am

Are there any future plans for building a Javascript API?
How exactly do you mean that?

7

Wednesday, October 2nd 2013, 4:41pm

I mean a direct JS API instead of having to proxy it through the XML scripting.

Right now I'm setting up numerous events with the XML script and directly reroute them with the XML js() method.
It would be really nice to be able to do it directly. Like:

Source code

1
2
3
var oViewer = createPanoViewer({....});
oViewer.addEventListener('xmlComplete',function(){...});
etc...

indexasp

Beginner

Posts: 8

Location: USA, TN, Knoxville

  • Send private message

8

Friday, August 8th 2014, 4:10pm

js : xml communication

Sjeiti, I was curious where this line of inquiry ended for you.. did you get something up and running that made the js/css to XML relationship a bit more navigable?

Rich

9

Tuesday, December 23rd 2014, 10:21am

Yesterday i was struggling a bit with this problem, then i found a solution that work perfectly in my case.

So to help others here is my code:

Source code

1
2
3
4
5
6
7
8
krpano = document.getElementById("krpanoSWFObject");
krpano.set("events.onloadcomplete","js(setUpPanoVars())");
krpano.set("events.keep",true);
var hotspotArr = document.getElementById('krpanoSWFObject').get('hotspot').getArray();

for(var i = 0; i < hotspotArr.length; i++){
    $(hotspotArr[i]['sprite']).addClass('hotspot-test');
}



Hope it helps.