Beiträge von kyle

Thanks Klaus. That worked perfectly!

I used the following to dynamically create a hotspot from an AS3 plugin a couple years ago. I've recently upgraded to 1.0.8.15 (2012-10-05) and it no longer works. I can't see anything in the documentation that shows why it doesn't work. Is there some new way to do this?

"khotspot.visible" fails with error "cannot access property or method of a null object reference"

krpano.call("addhotspot("+hsName+");")
var khotspot:Object = krpano.get("hotspot["+hsName+"]");


khotspot.visible = true;

Klaus,

In this embed code

embedpano({swf:"krpano.swf", xml:"pano.xml", target:"pano",id:"swfobject"});

The default height and width of 100% are applied to the dynamically embedded element with id swfobject. When embedding flash, the height and width are set using the height and width attribute of the embed tag. This can be overridden by an external style sheet.

However, for HTML5 player, the element with id swfobject is a div so the height and width are set using the style attribute of the div tag instead. External CSS cannot override this (except with !important, as Sachs suggested).

I have two different style sheets for my page that i am using. In one of them, I set the height and width of swfobject to 100%, but for the other, I needed to set the width and height to pixel values instead. This worked when embedding flash but not for the html5 player. I ended up working around this by wrapping it all in another div before sacha mentioned !important.

Thanks sachagriffin. I completely forgot about !important.

Hans, I don't use swfkrpano.html or the droplet at all so I know the default CSS style is not coming from another style sheet but from JavaScript. I have my own system for creating tours and I only have my own CSS and HTML on my system, none of the krpano templates are on my server.

Sorry, I misunderstood you. I thought you were referring to the templates provided by klaus. Not sure why I read it that way.

I created my own HTML and CSS. The problem is that the width and height in my CSS are not being used because embedPano is setting the width and height on the style attribute of the tour element. According to CSS rules, the style attribute has priority over CSS declared in any other location. This means that I can't change the width and height using my external CSS.

I'm not using the template just swfkrpano.js and krpanoiphone.js. The styles are being set by JavaScript using the style attribute so my CSS can't override.

Thanks for the info, everyone!

Sacha, I should be more clear: the client is embedding iframes on his own domain. He is using a lightbox to display the tour and could not figure out how to use embedPano with the lightbox yet, so he is using iframes instead. I think the lightbox is fine for iPad, but he already has a mobile version that always displays full screen for iPhone.

It would be nice if Apple supported the full screen api on HTML5.

Klaus, thanks for the continual improvements. I was using js version 1.0.8.14 and saw that there were some glitches with Apple's new landscape full screen mode on iPhone. I was about to start a thread about the issue, but thought I should check if there were any updates first. It was already fixed in 1.0.8.15!

I have found that my CSS rules for the tour element behave differently when using HTML5 vs. Flash. I would like to be able to use CSS to create alternate layouts for a page that may have different sizes for the pano.

When using embedPano with Flash, if you don't specify a height or width swfkrpano will default to 100%. However, since these values are set on the width and height attributes of the embed tag I can override theses values with CSS.

But if you are using HTML5, the default width and height are set on the style attribute, overriding my external CSS.

I'm sure I can find a way to work around this, but it does make things a little bit more difficult.

I have a client who is embedding my tours using iframes in a lightbox that pops up when the user clicks a thumbnail.

Unfortunately, it appears that fullscreen does not work on HTML5 (Flash is fine) because the HTML version goes full screen by filling its viewport; with frames, this means the iframe defines the viewport, not the parent page.

I am wondering if it will be possible to support iframes in HTML5 by using the DOM to move the krpano div to the parent page for full-screen mode when an iframe is detected.

Or should I just suggest that my client avoid frames?

Hi Klaus, I changed 'absolute' to 'fixed' and it mostly worked. One problem I had when clicking a hotspot in fullscreen mode was that sometimes my webpage would pan so that the viewport moved, but the "fixed" elements did not automatically move with the viewport and part of the pano would scroll off screen.

So I added the following js to retrigger the fullscreen layout every time I go to a new pano.

if(krpano.get('fullscreen')){
    		krpano.set('fullscreen', false);
    		krpano.set('fullscreen', true);
		}

You can see it working on the iPad here: http://www.harrcreative.com/realestate/109

Note, I am having some problems with the fullscreen button not working right. You have to tap just above it to get it to go fullscreen.
I am still working on an iPhone layout, so it will not work very well on the iPhone yet.

Ah, thanks. I haven't been on the forums much since May when I got a new job, so I've been missing out on some of the better threads.

Coming back to the forums recently, I was very impressed with pinsane taking the time to thoroughly document variables, parameters, and expansion in krpano. I've struggled through those issues myself and more or less drew the same conclusions, but it is very nice to see it methodically examined and documented.

Thanks Klaus. I will start experimenting with it.

I have been very impressed with krpanoJS, especially on the iPad.

It works partially with the 11/24 update on my tours, but not perfectly. I temporarily removed position:relative on my main div and then fullscreen worked properly. But I have to fully test my layout to see if I can avoid position:relative.

I have used polygonal hotspots for my real estate tours. Since krpanojs does not support polygonal hotspots I wanted to automatically create point hotspots when a tour is viewed on iPad/iPhone.

From the formula described in this wikipedia article, I was able to write a function to calculate the centroid (center of mass) of a polygon and use that point for iPad/iPhone.

I wrote it in Python using language features that are not common among most programming languages, so I won't post it here because I would have to explain Python before explaining the function. The formula isn't very difficult though, so an average programmer should be able to easily complete it in under an hour.

The formula is meant for two-dimensional polygons, but seems to work well for krpano pan/tilt polygons. It works across the horizon and at the 0º meridian, but you need to make a few adjustments for the -180º/180º meridian. Also, polygons covering the poles (at tilt -90º/90º), may not be accurate, but it is not likely to have a polygon covering a pole so I did not handle this case.

If you look at the site I am adapting for iPad at http://www.harrcreative.com/realestate/109 and tap the fullscreen button (actually tap just above the fullscreen button, there is a problem with the button that I am researching) on the bottom right of the pano, you will see that it does not actually go completely full-screen on the iPad, but only fills the center of the page.

This seems to be because full-screen simply sets absolute positioning on the pano div at position (0,0) relative to it's containing block. Unfortunately, my page layout establishes the entire tour in a div with relative positioning, making that div the containing block for the pano div instead of the making the page body the containing block.

Klaus, is it possible to use fixed positioning for full-screen mode, or could you temporarily move the pano div in the DOM so that it is a direct descendant of the body element? I think this would allow the use of relatively positioned ancestors of the pano div.

This thread:
js(fb.start) support for ipad

answers my questions. Currently only globally defined js functions work in iOS compatible version of krpano.

So I had to wrap viewerInterface.initTour with:

function inittour(){
    viewerInterface.initTour();
}

and call like this instead:

onstart="js(inittour())"

I am trying to convert my tours to iPad/iPhone friendly and my onstart action in xml which calls a javascript function is not working.

How the function is defined:

var viewerInterface = {
...
initTour: function(){
	if(!viewerInterface.ready){
		viewerInterface.init();
	}
	if(document.location.hash){
		viewerInterface.updateCurrentTour(
		document.getElementById(
		document.location.hash.substr(1)).getElementsByTagName("a")[0]);
	} else {
		viewerInterface.updateCurrentTour(document.getElementById("hc_movielist")
		.getElementsByTagName("ul")[0].getElementsByTagName("li")[0]
		.getElementsByTagName("a")[0]);
	}
	viewerInterface.changethumb(viewerInterface.currentTour.parentNode);
},
...
}

How it is called:

<krpano onstart="js(viewerInterface.initTour)" logkey="false">

The error:

ERROR: js() - function "viewerInterface.initTour" not found

Note that this works fine in Flash.

The tour: http://www.harrcreative.com/realestate/109
A related thread: Javascript interface doesn't work on iphone HTML5?

Michel,

I can't tell you. :) Let's say I was debugging my own AS3 plugins and stumbled across some things.

But yes, krpano appears to be a great platform. The documentation just needs to catch up. So in place of documentation, I've been a little more proactive in my experimentation.

Zitat von michel

Hi kyle,

Yes, the way to do is setting the plugins using parent="STAGE".... It must work...

Have a look here for more references: http://www.krpano.com/forum/wbb/inde…D=8693#post8693

SAlut.

michel, I can set parent to stage, and it is attached to the stage. My problem is that zorder does not work then. So I cannot put the plugin under the pano area.

Zitat von VN2009

FYI, Klaus has sent me copies of Googlemaps.swf and videoplayer.swf that will work with parent set to stage. I do not know if the versions inside the latest package have been updated yet. If anyone needs them send me a PM.

Well, the plugin in question is the googlemaps plugin. I'm not sure if I have the latest version, but I'd love to have a copy of yours.

Graydon,

I had tried negative zorder on the plugins before I remembered that the flash model did not support negative zorder like CSS. So I tried setting zorder on area and krpano and view elements. Some caused parse errors (those elements cannot be extended like plugins) or simply did not work. Additionally, my testing shows that zorder does not work for plugins whose parent is STAGE. Those plugins appear over top of all other plugins whether you set zorder or not.

It seems krpano must place all plugins in a single DisplayObject layer if their parent is not STAGE and all plugins whose parent is STAGE are placed in a separate layer above the pano and zorder is only valid for that layer.

I think the hierarchy looks like this:

panorama area
plugin layer
---->plugins
stage plugin layer
---->plugins

or maybe:

panorama area
---->plugin layer
-------->plugins
stage plugin layer
---->plugins

In either case, the plugins have a separate zorder, so plugins attached to stage will be on top of everything else.