Converting pixel distance to ath

Joel

Anfänger

Beiträge: 8

Wohnort: Innsbruck, Austria

Beruf: Interaction- and webdesigner

1

Donnerstag, 25. Mai 2017, 16:30

Hi,

I've been struggling and testing for hours and can't find how the relation between pixel size/distance and krpano ath value works *confused*

.

I have a pano image of 7882px * 3941px. Let's say I have an image of 100px * 100px positioned at ath=20 atv=0 and I want a second image of 100px * 100px EXACTLY 100px to the right of it (so stuck to it, no overlap, no gap in between). How do I calculate the ath of the 2nd hotspot image?

I need a formula for it, because the hotspot size will be different every time (e.g. 130px, 246px, etc) and not always 100px.

I thought I could calculate the ath from pixel value as followed:

	Quellcode
1	ath = (x / imagewidth - 0.5) * 360

but somehow with 100 and 7882 this gives me 4.567369 (the middle example in screenshot attached), which is way too little. I noticed it was 4/10 of what it should be (but I have no clue why!), so multiplied it by 2.5 (or 4/10) to get the example on the right, which fits seamlessly and is what I want to achieve. But when the hotspot size changes, to 200px for instance (example on the left), this value doesn't work anymore and there is a gap.

Anybody knows how I can get the ath position/difference if I know the pixel position/difference?

»Joel« hat folgendes Bild angehängt:

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Joel« (26. Mai 2017, 09:35)

Zum Seitenanfang

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

2

Donnerstag, 25. Mai 2017, 17:07

I also would like to be able to make that formula,

We should take in care the depth or tz, because that would give the relation between real image size and space in pano.

attached my scheme

»jordi« hat folgendes Bild angehängt:

everpano.com step beyond 360

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

3

Montag, 5. Juni 2017, 18:51

Please Klaus, a clue !!!
Would be handy to generate vr thumbnails menu on the fly according to thumbnails dimensions and depth !!!
THX !

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

4

Dienstag, 6. Juni 2017, 17:25

Hi,

for distorted hotspots a pixel size of 1000px relates to a fov of 90 degree.
That can be used as base for calculations.

Btw - the pixel size of the pano image itself doesn't matter in any way, the hotspot coordinates and sizes are independent from that.

Summary:
- ath/atv are spherical coodinates
- but the hotspot itself is 'flat'
- to find the 'next' ath/atv coordinate, the flat hotspot surface would need to get projected to the spherical pano surface

The remaining stuff is 'just' trigonometry ;-)

.

E.g.
ath_offset = arctan( hotspot_width_or_offset / 500 ) * 180 / PI;

Or here as krpano xml code:

Quellcode

<action name="calc_spherical_offset">
  Math.atan2(a, %1, 500);
  calc(%2, a * 180.0 / Math.PI);
</action>
    
<hotspot name="h1" url="..." distorted="true" ath="0" width="200" height="100" />
<hotspot name="h2" url="..." distorted="true" ath="0" width="200" height="100" onloaded="calc_spherical_offset(+200,h); add(ath,h);" />

Btw - for 'parallel' offsets, simply the same ath/atv coordinates could be used plus defining the offsets by the ox/oy variables.

Best regards,
Klaus

Zum Seitenanfang

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

5

Dienstag, 6. Juni 2017, 17:28

Thanks !!

everpano.com step beyond 360

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

6

Dienstag, 6. Juni 2017, 17:40

Great, THX Klaus !!!

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

7

Dienstag, 6. Juni 2017, 18:44

Thanks Klaus!

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

8

Dienstag, 6. Juni 2017, 20:01

Hum , I guess there is something I didn't get...
Here is an example : https://360images.fr/calc_ath/

Quellcode

<action name="calc_spherical_offset">
  Math.atan2(a, %1, 500);
  calc(%2, a * 180.0 / Math.PI);
</action>
    
<hotspot name="h1" style="bgthumbnails" ath="0" />
<hotspot name="h2" style="bgthumbnails" ath="0" onloaded="calc_spherical_offset(+200,hotspot[get(name)].ath);" />
<hotspot name="h3" style="bgthumbnails" ath="0" onloaded="calc_spherical_offset(+400,hotspot[get(name)].ath);" />
<hotspot name="h4" style="bgthumbnails" ath="0" onloaded="calc_spherical_offset(+600,hotspot[get(name)].ath);" />

second hotspot is not "just" after the first one, and after it's worth...
Did I understood the formula in a wrong way ?

THX !

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

9

Dienstag, 6. Juni 2017, 21:48

Hi,

you can't use just increasing offsets like +200, +400, +600 - that's wrong!
The given offset is the flat one, but the resulting a spherical one. Just increasing the flat one, will not relate to the spherical one.

If all hotspots have the same size, you could simply use a multiple of the calculated spherical coordinate.
E.g. this way: (for the better understanding)

Quellcode

<hotspot name="h1" style="bgthumbnails" ath="0" />
<hotspot name="h2" style="bgthumbnails" ath="0" onloaded="calc_spherical_offset(+200,h); calc(hotspot[get(name)].ath,h*1);" />
<hotspot name="h3" style="bgthumbnails" ath="0" onloaded="calc_spherical_offset(+200,h); calc(hotspot[get(name)].ath,h*2);" />
<hotspot name="h4" style="bgthumbnails" ath="0" onloaded="calc_spherical_offset(+200,h); calc(hotspot[get(name)].ath,h*3);" />

Or here a more complete example with dynamic sizes:

Quellcode

<action name="calc_spherical_offset">
  Math.atan2(a, %1, 500);
  calc(%2, a * 180.0 / Math.PI);
</action>
	
<action name="arrange_hotspots">
  callwhen(hotspot[%2].arranged == true,
    calc_spherical_offset(calc(hotspot[%1].width/2),h1);
    calc_spherical_offset(calc(hotspot[%2].width/2),h2);
    calc(hotspot[%1].ath, hotspot[%2].ath + h1 + h2);
    set(hotspot[%1].arranged, true);
  );
</action>
	
<hotspot name="h1" url="..." distorted="true" ath="0" ... arranged="false" onloaded="set(arranged,true);" />
<hotspot name="h2" url="..." distorted="true" ... arranged="false" onloaded="arrange_hotspots(h2,h1);" />
<hotspot name="h3" url="..." distorted="true" ... arranged="false" onloaded="arrange_hotspots(h3,h2);" />
<hotspot name="h4" url="..." distorted="true" ... arranged="false" onloaded="arrange_hotspots(h4,h3);" />

Here the more complicated part is the timing, that means each image is waiting for the previous one to be ready for the arranging. This is done here by the custom 'arranged' attribute which will be set to false at the beginning and the callwhen action to wait until each previous hotspot had been processed.

Best regards,
Klaus

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

10

Dienstag, 6. Juni 2017, 21:55

Thanx for that fast replay Klaus,
Ok I understand and the thumbnails will all have the same width, but even with just 2 thumbnails the result is false and the second thumbnail is a bit over the first one.
I updated the exemple with only 2 thumbnails : https://360images.fr/calc_ath/

first hs : ath=0
second hs : ath : 21.80140948635181

second one should be something like 22.6

Did I misunderstood the use of your formula ?

THX !!

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

11

Dienstag, 6. Juni 2017, 22:05

Right, my first example is slightly wrong, it uses the full hotspot width as offset, but this is wrong for a center aligned hotspot. Correct would be using the half width offset from the left hotspot and the half width offset from the right hotspot.

I have done it correctly in the 'more complete' example above.
This would definitely work (because this time I've tested the code before posting ;-)