You are not logged in.

Keep HTML pop aspect ratio - similar to image popup

Morne

Trainee

  • "Morne" started this thread

Posts: 63

  • Send private message

1

Thursday, May 14th 2020, 2:25pm

Keep HTML pop aspect ratio - similar to image popup

Hi

I have a bunch of html popups and I specify the hotspot like so:
onclick="popup('html', get(data[mypage].content), 1659, 1464, false);"

But how this currently works is it takes the minimum between the values I specify and the global stage dimensions.
Meaning, the one dimension my fit the screen, but the other one will be shrinked if larger than the stage

How can I keep the proportions in a similar way the image popup does it?

I tried copying the math from the image popup to the html popup, but can't get it to work.

indexofrefraction

Professional

Posts: 1,362

  • Send private message

2

Thursday, May 14th 2020, 3:04pm

context? what is "the image popup" ?
there is no public thing from krpano like that.
zFilter plugin -- zFlare plugin -- zSnapshot plugin

This post has been edited 1 times, last edit by "indexofrefraction" (May 14th 2020, 4:45pm)

Morne

Trainee

  • "Morne" started this thread

Posts: 63

  • Send private message

3

Thursday, May 14th 2020, 3:22pm

Its all in this example:
https://krpano.com/releases/1.20.6/viewe…tml5=only+webgl

The HTML popups a div, while the image popups, well an image

indexofrefraction

Professional

Posts: 1,362

  • Send private message

4

Thursday, May 14th 2020, 5:05pm

ok, sorry... thats a newer example i forgot about

i think you already know, you need to replace this code to keep your given aspect ratio...

width=calc(min(width,global.stagewidth*0.9)),
height=calc(min(height,global.stageheight*0.8)),

thats the old fill or fit to frame problem ... tricky stuff :)

here is a link...
https://stackoverflow.com/questions/1106…in-bounding-box
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Morne

Trainee

  • "Morne" started this thread

Posts: 63

  • Send private message

5

Friday, May 15th 2020, 8:24am

Quoted from "indexofrefraction"

ok, sorry... thats a newer example i forgot about

i think you already know, you need to replace this code to keep your given aspect ratio...

width=calc(min(width,global.stagewidth*0.9)),
height=calc(min(height,global.stageheight*0.8)),

thats the old fill or fit to frame problem ... tricky stuff :)

here is a link...
https://stackoverflow.com/questions/1106…in-bounding-box


Yeah I get that bit that, that code should be replaced. The link you posted has already been solved in the image popup, which is why my question specificially asked about it.

Here's the code for the image popup which makes the image fit the screen, proportionally:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

		calc(imgw, caller.imagewidth + 20);
		calc(imgh, caller.imageheight + 20);
		calc(maxw, global.stagewidth*0.9);
		calc(maxh, global.stageheight*0.8);
		if(imgw GT maxw,
			calc(imgh, round(imgh * maxw / imgw));
			copy(imgw, maxw);
		);
		if(imgh GT maxh,
			calc(imgw, round(imgw * maxh / imgh));
			copy(imgh, maxh);
		);

		set(global.layer[get(caller.parent)], width=get(imgw), height=get(imgh) );


but for the life of me I can't manage to replace the 2 lines of code from the html popup you posted, with the above. Tried various things to modify the code, with no luck.
The reason for doing this is that the html popup can be zoomed and panned around, which is actually what I need for the image popup.

It seemed easier to adjust the html popup's proportions, than trying to adjust and stick this into the image popup's code:

Source code

 
1
2
3
4
5
6
7

		// enable browsed-based mouse-wheel and touch-scrolling support:
		div.addEventListener("wheel", stopPropagation, true);
		div.addEventListener("mousewheel", stopPropagation, true);
		div.addEventListener("DOMMouseScroll", stopPropagation, true);
		div.addEventListener("touchstart", function(event){ if(krpano.device.ios && window.innerHeight == krpano.display.htmltarget.offsetHeight){ /* avoid the iOS 'overscrolling' for fullpage viewers */ var bs = document.body.parentNode.style; bs.position="fixed"; bs.top=0; bs.left=0; bs.right=0; bs.bottom=0; } krpano.control.preventTouchEvents = false; event.stopPropagation(); }, true);
		div.addEventListener("touchend", function(event){ krpano.control.preventTouchEvents = true; event.stopPropagation(); }, true);
		div.addEventListener("gesturestart", preventDefault, true);


Seems either of those are easier said than done. I'd appreciate some help with this

indexofrefraction

Professional

Posts: 1,362

  • Send private message

6

Friday, May 15th 2020, 10:14am

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

...
addlayer('popup', popup);

calc(maxw, global.stagewidth * 0.9);
calc(maxh, global.stageheight * 0.8);
if(width GT maxw, calc(height, round(height * maxw / width)); copy(width, maxw); );
if(height GT maxh, calc(width, round(width * maxh / height)); copy(height, maxh); );

set(popup,
	....
	width=get(width),
	height=get(height),
	....
);
...
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Morne

Trainee

  • "Morne" started this thread

Posts: 63

  • Send private message

7

Friday, May 15th 2020, 12:07pm

ah thanks man
makes sense now, I had it like that, but stuck the calculations into the wrong place, I stuck it into the set popup, instead of before it

yours work great, thanks again

Similar threads