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.

  • "HansvonWeissenfluh" started this thread

Posts: 8

Location: Genoa, Italy

Occupation: Photographer, web designer, graphic designer

  • Send private message

1

Tuesday, April 2nd 2019, 8:04pm

Fix: Safari on iPhone in landscape, more than one tab open hides the lower part of virtual tours

Hi all,

Having more than one tab opened in Safari, putting an iPhone (mine is a 6S Plus) in landscape mode prevents KRPano from hiding Safari bars and hides the lower part of the window, cutting buttons at the bottom out of the screen.

I tried to use window.innerHeight in order to get the correct available height. Here is a javascript that worked for me:

[code]
var iheight = window.innerHeight;

function resize() {
if(window.innerHeight != iheight) {
iheight = window.innerHeight;
document.body.style.height = iheight + 'px';
}
};

setInterval(function(){
resize();
}, 500);
[/code]

Surely it can be written better and optimized, but it seems that it fixes the problem. I put it in the html page that embeds the KRPano viewer.

Best regards,
Hans

2

Wednesday, April 3rd 2019, 2:57pm

Hi

thanks for sharing,

Just tried this in my html with no effect... safari bars are stil visible, and tour bottom overflowed

thanks

  • "HansvonWeissenfluh" started this thread

Posts: 8

Location: Genoa, Italy

Occupation: Photographer, web designer, graphic designer

  • Send private message

3

Wednesday, April 3rd 2019, 10:44pm

Thanks for trying.
Yes, the bars at the top don't disappear, I forgot to tell that. But on my iPhone at least it fixes the problem with the bottom. What iPhone and what KRPano version did you use? How did you implement the code? Have you a page link to look at?
Please let me know.
Best,
Hans

4

Wednesday, April 3rd 2019, 11:15pm

instead of an interval you should probably use the resize event
https://stackoverflow.com/questions/1500…-onresize-event

5

Wednesday, April 3rd 2019, 11:32pm

this solution is actually not that bad...
makes sense for fullscreen apps only,
but i did a test and it does help to prevent gui problems on ios

what do you guys think of it?

Source code

1
2
3
4
5
6
7
8
9
10
11
12
var iHeight = window.innerHeight;
function resize() {
	if(window.innerHeight != iHeight) {
		iHeight = window.innerHeight;
		document.body.style.height = iHeight + 'px';
	}
}
var timeOut = null;
window.onresize = function() {
	if(timeOut) clearTimeout(timeOut);
	timeOut = setTimeout(resize, 100);
}

This post has been edited 6 times, last edit by "indexofrefraction" (Apr 4th 2019, 7:40am)


  • "HansvonWeissenfluh" started this thread

Posts: 8

Location: Genoa, Italy

Occupation: Photographer, web designer, graphic designer

  • Send private message

6

Thursday, April 4th 2019, 12:16pm

Hi,
I'm glad to have the confirmation that the raw code I initially posted is working even for others. Thanks for having refined it. Yes, the onresize event and triggering it from KRPano xml only for iPhone were something I would have liked to add when I could find the time.
Thanks for your time, indexofrefraction!
If nothing better can be found at the moment, it would be nice to have something based on innerHeight detection already embedded in the next KRPano player release.
Klaus?

Best,
Hans

7

Thursday, April 4th 2019, 2:54pm

not sure it would make sense to be included in krpano
you can also have multiple inline panoramas for example, there this code probably wouldn't be good.

this is really only for fullscreen applications,
and i'm not even sure if it could cause other troubles.

it would be good to hear some opinions from others!

anyway, i test-wise added this for my tours...
(for iOS and Android devices)
(in my index.html)

8

Thursday, April 4th 2019, 5:22pm

Hi,

the next krpano release will handle that case automatically.

Here a quick sneak preview:

krpano 1.20 iPhone Fullscreen Mode:

Best regards,
Klaus

  • "HansvonWeissenfluh" started this thread

Posts: 8

Location: Genoa, Italy

Occupation: Photographer, web designer, graphic designer

  • Send private message

9

Thursday, April 4th 2019, 10:07pm

Great Klaus!
Many thanks for such a preview! It looks awesome!

Wouldn't it be possible to show the bottom bar even before going fullscreen? What if the page is loaded with the iPhone already in landscape mode?
After switching to landscape mode, how could the user know how to restore the view of the button bar at the bottom (and to go fullscreen)? Will a hint be shown similarly to the arrow and the "swipe up" text in your video?

Last question: when will 1.20 be released? I can't wait *g*
Best,
Hans

10

Thursday, April 4th 2019, 11:22pm

Hi,

Wouldn't it be possible to show the bottom bar even before going fullscreen?
You mean resizing to the currently visible space - technically it might be possible, but more tricky and complicated and far less optimal. That would require an additional layer with a fake-size to trick Safari into allowing the scrolling. And then during dragging probably resizes would be necessary to adopt size because the 'remaining-bars-down-height' is not really fix defined and could be anything. And constant resizing during dragging would be bad for performance and might result in a jerky controlling. And then the question about the pano control itself during that phase? Should it be disabled? Should it pan the pano and scroll the page at the same time...?

I've tested and experimented a lot and I think the current solution is the best so far, it works nicely in practice and should be also easy to understand and to use.
And if you're a talented designer you could replace that 'swipe up' texts with some animated info-graphics or something like that (e.g. image an hand-graphic making the gesture) for an even better user explanation ;-).


What if the page is loaded with the iPhone already in landscape mode?
No problem, the need for swipe-up gestures to get fullscreen mode will be detected anytime in any situation. That means you can anytime have the bars there or bring them there and there is then there is a possibility and information to swipe them away.


After switching to landscape mode, how could the user know how to restore the view of the button bar at the bottom (and to go fullscreen)? Will a hint be shown similarly to the arrow and the "swipe up" text in your video?
Sorry, I don't understand...?


Last question: when will 1.20 be released? I can't wait *g*
As soon as possible, I can't wait too ;-).

Best regards,
Klaus