How to Reverse FOV Slider?

Trainee

Wednesday, September 26th 2018, 4:19pm

Hi,

I have this slider that works pretty fine, but from left to right is the shallower field of view to the wider field of view.

I'd like to have the opposite.

The wider field of view on the left and the zoomed in fov on the right.

Could anyone help me please?


<plugin name="slider_bg" url="slider-background.png" align="bottom" x="0" y="30" handcursor="false" zorder="1" parent="stage"/>

<plugin name="slider_grip" url="slider-grip.png" align="left" edge="center" parent="slider_bg" x="0" zorder="2"
dragging="if(pressed,
sub(dx, mouse.stagex, drag_stagex);
add(newx, drag_currentx, dx);
if(newx LT 0, set(newx,0));
if(newx GT plugin[slider_bg].pixelwidth, copy(newx,plugin[slider_bg].pixelwidth));
copy(x,newx);
div(val, newx, plugin[slider_bg].pixelwidth);

sub(fovrange, view.fovmax, view.fovmin);
mul(newfov, val, fovrange);
add(newfov, view.fovmin);
set(view.fov, get(newfov));

delayedcall(0,dragging());
);"
ondown="copy(drag_currentx,x); copy(drag_stagex,mouse.stagex); dragging();"
/>

<events name="sliderevents" keep="true" onviewchanged="updateslider();" />

<action name="updateslider">
sub(val, view.fov, view.fovmin);
sub(fovrange, view.fovmax, view.fovmin);
div(val, fovrange);
mul(plugin[slider_grip].x, val, plugin[slider_bg].pixelwidth);
</action>

THANKS!

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

2

Wednesday, September 26th 2018, 7:39pm

Source code

	<!-- HORIZONTAL SLIDER -->
<plugin name="slider_bg" url="slider-background.png" align="bottom" x="0" y="30" handcursor="false" zorder="1" parent="stage"/>

<plugin name="slider_grip"  url="slider-grip.png" align="left" edge="center" parent="slider_bg" x="0" zorder="2" 
	dragging="if(pressed, 
	sub(dx, mouse.stagex, drag_stagex); 
	add(newx, drag_currentx, dx); 
	if(newx LT 0, set(newx,0));
	if(newx GT plugin[slider_bg].pixelwidth, copy(newx,plugin[slider_bg].pixelwidth));
	copy(x,newx);
	div(val, newx, plugin[slider_bg].pixelwidth);
	calc(view.fov, (1 - val) * (view.fovmax - view.fovmin) + view.fovmin);	
	delayedcall(0,dragging());
	);"
	ondown="copy(drag_currentx,x); copy(drag_stagex,mouse.stagex); dragging();"/>

<events name="sliderevents" keep="true" onviewchanged="updateslider()" />

<action name="updateslider">
	calc(val,1 - (view.fov - view.fovmin) /  (view.fovmax - view.fovmin));
	mul(plugin[slider_grip].x, val, plugin[slider_bg].pixelwidth);
</action>

https://novosibpano.ru/Plugins/

This post has been edited 6 times, last edit by "San7" (Sep 26th 2018, 8:24pm)

Go to the top of the page

dfarjoun

Trainee

Posts: 130

3

Wednesday, September 26th 2018, 8:22pm

THAAAAAAANKS!!!

It's perfect!!!!!!

I wish one day to learn all these things!! :)

I wish all the best for you, San!!
Thanks!

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

4

Wednesday, September 26th 2018, 8:26pm

I changed, I used "calc", try the changed code

https://novosibpano.ru/Plugins/

Go to the top of the page

dfarjoun

Trainee

Posts: 130

5

Thursday, September 27th 2018, 6:15am

FOV to Focal Length

It's working greatly!!!
Thank you so much!!

I put a text on the side of the slider to show the FOV value, but what I really want to show is the Focal Length.

I found this formula:

FOV = 2*arctan(43.26/(2F))

Where F is the Focal Length I need to know.

43.26 is the diagonal of a full frame sensor.

Do you have any idea how to get there?

I have no idea how to make math inside krpano.

I tried this: calc(view.fov, (2) * (Math.atan2(43.36) / (2) * (100))));

But of course, it doesn't work. haha
I have no clue how to program from scratch.

I got the following code for the krpano fovtype example and simply removed the fov.type message:

<events onresize="ifnot(in_area_tween, resizearea() );"
onviewchange="showfovtext();"
/>

<action name="showfovtext">
copy(fov,view.fov);
roundval(fov,2);
txtadd(msg,' FOV =',get(fov),'°');
showtext(get(msg),FOVTEXT);
</action>

So now I have the text showing FOV = 100º for example.

But I'd love to show: Focal Length = 18mm

I appreciate any help!!!

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

6

Thursday, September 27th 2018, 7:09am

Interesting FOV = 2*arctan(43.26 / 2F) - We need to know F= ... *smile*

Not quite sure, it seems so F=43.26 / 2 x tg(FOV/2)

https://novosibpano.ru/Plugins/

This post has been edited 3 times, last edit by "San7" (Sep 27th 2018, 8:49am)

Go to the top of the page

dfarjoun

Trainee

Posts: 130

7

Thursday, September 27th 2018, 12:29pm

Haha.. yes

I have no idea how to reverse this.

But what if the slider is based on the Focal Length value.

We feed the value with the focal length (that would be even better for me), and use this formula to translate it to view.fov?

I have this in C#. Don't know if it can be useful:

private void SetCameraFOV()

{

float fov = Mathf.Rad2Deg * 2.0f * Mathf.Atan(SENSOR_HEIGHT_FF / (2.0f * m_cameraFL));

Camera.main.fieldOfView = fov;

// Debug.Log(fov + " lens" + m_cameraFL);

m_cameraFLTxt.text = string.Format(m_copyFL + ": {0:0} mm", m_actualFL);

}

private void SetFocalLength()

{

m_cameraFL = m_focalLengthValues[m_currentSensorSize] * m_actualFL;

//m_cameraFLSl.value = (m_cameraFL - CAMERA_MIN_FL) / (CAMERA_MAX_FL - CAMERA_MIN_FL);

SetCameraFOV();

}

Thanks for your patience! :)

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

8

Thursday, September 27th 2018, 1:40pm

without checking, from your c# formula -->

fov = 180 / math.pi * (2 * math.atan(ff / (2 * fl));
with ff = sensor height and fl = focal length

in krpano -->

set(ff, ...);
set(fl, ...);
calc(fov, 180 / Math.PI * (2 * Math.atan(ff / (2 * fl)));

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

9

Thursday, September 27th 2018, 1:52pm

But in fact it is necessary to calculate fl ?

https://novosibpano.ru/Plugins/

Go to the top of the page

dfarjoun

Trainee

Posts: 130

10

Thursday, September 27th 2018, 3:00pm

I tried to create an example for a 24mm focal length:

<action name="setcamerafov" >

set(ff, 43.36);
set(fl, 24);
calc(fov, 180 / Math.PI * (2 * Math.atan(ff / (2 * fl)));

set(view.fov, fov);

</action>

But it does absolutely nothing in the scene.

I found this angle of view formula that could be translated to fov. It's almost the same.. or the same. I don't know.

https://static1.pointsinfocus.com/2010/09/depth-of-field-and-equivalent-lens-calculator/aov-equation-method1.png

I tried with and without the " 180 / Math.PI * " part, but both didn't work. It doesn't give me an error. Just don't do anything.

Quoted

But in fact it is necessary to calculate fl ?

I need the slider to provide user friendly information.
So if the slider could change focal length (mm) and not fov (º), this would be perfect.

When this formula works, I would feed the data with focal lengths.
So if the slider could work based on focal lengths, than there's no need to convert.

If the slider still works based on fov, than it should be "translated" to focal length.

Thanks for your help!!!!!!!!!!

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

11

Thursday, September 27th 2018, 3:46pm

the " 180 / Math.PI * " part
translates radian to degrees

and with
set(view.fov, fov);
you set view.fov to "fov" which is a string and not a valid input

you need to use
copy(view.fov, fov);

https://krpano.com/docu/actions/#set
https://krpano.com/docu/actions/#copy

i dont know what units you must use for ff and fl
mm? meters?

maybe use
trace("fl=", fl, " fov=", fov);
before the copy command,
to see what value comes out of the calculation
press O to show the console

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Go to the top of the page

dfarjoun

Trainee

Posts: 130

12

Thursday, September 27th 2018, 5:22pm

I'm totally lost here.

I have this action:

<action name="setcamerafov" >
set(ff, 43.36);

set(fl, %1);
calc(fov, 180 / Math.PI * (2 * Math.atan(ff / (2 * fl)));
copy(view.fov, fov);

</action>

The trace shows the actual fov of the screen. As it isn't changing anything, I can't be sure if it's working.

I need to put the fov value into view.fov after the onclick.

I know it's wrong, but for you to understand, it could be something like: onclick="tween(view.fov, get(fov));"

Actually I have this code working for the onclick (using FOV, not focal length):

<action name="change_fov">
set(view.fovmin, 6.15);
set(view.fovmax, 140);

tween(view.fov, %2, 0.5);
WAIT(0.5);
set(view.fovmin, %1);
set(view.fovmax, %2);

updateslider();
</action>

And on the onclick I'm inserting:

onclick="change_fov(12.3,34.3);"

This is equivalent to a 70-200mm lens.

The perfect solution for me would be the possibility to have an onclick in focal length like this;

onclick="change_fov(70,200);"

---------

I got the formula to do the reverse (FOV to Focal Length):

Focal Length (fl) = (arctan * ff) / FOV
ff = sensor diagonal size. Full Frame = 43.36mm

Focal Length is in mm
Sensor Size is in mm
FOV is in º

I'm sorry for these newbies questions.
I try to do my best here.
I have absolutely no coding experience and try to do things by trials and errors.
But this is too advanced. I usually stay in the basic xml stuff.
I'm trying to get out of the comfortable zone and break the blockage I have with coding, but it's hard to understand it fast.

Sometimes I spend a day or two working in something that probably you'd do in a couple of minutes, but that's how I'm learning.
And I couldn't find anything related to this specific need so I could learn from.

I really appreciate your time and help!!!

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

13

Thursday, September 27th 2018, 6:33pm

plz post a link to your tour
and a link to the xml

otherwise this is really difficult

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

14

Thursday, September 27th 2018, 8:24pm

I output the parameters FOV and F on the screen
I used this formula calc(fov, 180 / Math.PI * (2 * Math.atan(ff / (2 * fl))));, but it seems to me the extreme positions do not match?

Source code

<events name="sliderevents2" keep="true" onviewchanged="print_F();" />

<plugin name="hotspot_pos_info" keep="true" alpha="1" align="lefttop" x="10" y="10" width="100" 
	 url="%SWFPATH%/plugins/textfield.swf" enabled="false"  padding="8"	        
	 background="true" backgroundcolor="0x2D3E50" backgroundalpha="0.7"
         css="font-family:Courier; color:#FFFFFF; font-size:12px;"
	 />
	
<action name="print_F"><![CDATA[
    	copy(print_F, F);
	copy(print_fov, view.fov);
	roundval(print_F, 2);
	roundval(print_fov, 2);
	calc(plugin[hotspot_pos_info].html,
	'F="' + print_F + '"[br]
	FOV="' + print_fov + '"[br]
	');
]]></action>  
	

<!--  dragging(Fmax) -->		
<layer name="slider_S" keep="true" url="slider-background.jpg" align="lefttop" x="200" y="20" handcursor="false" zorder="1" 
        height="10" width="200"/>
<layer name="slider_grip_S" keep="true" url="slider-grip.png" align="left" edge="center" parent="slider_S" x="50" zorder="2" scale="0.4" 
        ondown="copy(drag_currentx,x); copy(drag_stagex,mouse.stagex); dragging(200);"
	/>	

<action name="dragging">
	  if(pressed,copy(newx1,newx);
			sub(dx, mouse.stagex, drag_stagex); 
			add(newx, drag_currentx, dx);
			if(newx LT 0, set(newx,0));
			if(newx GT layer[slider_S].pixelwidth, copy(newx,layer[slider_S].pixelwidth));
			copy(x,newx);
			div(val, newx, layer[slider_S].pixelwidth);
			delayedcall(0,dragging(%1););						
			mul(F,val,%1);
										
			Math.atan(fl2,calc(43.27 / (2 * F)););
			calc(fov, 180 / Math.PI * 2 * fl2);
						
			set(view.fov,get(fov));
		);
 </action>

https://novosibpano.ru/Plugins/

This post has been edited 1 times, last edit by "San7" (Sep 27th 2018, 8:38pm)

Go to the top of the page

dfarjoun

Trainee

Posts: 130

15

Friday, September 28th 2018, 2:01am

WOW!!

Great! Almost there!!

What works perfectly:
Use the slider and see the Focal Length and FOV values

What isn't correct:
1) When I zoom in or out from any other way except moving the slider, the Focal Length data doesn't update, only the FOV. It may be lacking an updateslider action?.

2) Yes. The extreme positions are crazy. The value respect the fovmin and fovmax settings, but the focal length slider value continues till till 0 or max.

3) The dragging(%1) value sets the maximum focal length of the slider. But there's no minimum focal length option to enter.
It would be interesting to have something like dragging(24,70); 24mm would be the minimum and 70mm the maximum.

I've done this manually using fovmin and fovmax for each button.
It works great with fov.

And when I use this fov action, the scene is changed, but the slider keeps always showing values till 200mm Although it's only possible to se the changes in the range specified by fovmin and fovmax.

There could be a onclick="make_slider(24,70);" based on focal length.
And this, of course, would change the view.fovmin and view.fovmax settings.

Well, let me be honest.
Of course it would be AMAZING to have this working in this more intelligent way, but I see I will never (or so soon) be able to implement anything based on these math based options.

So I was wondering if it's just possible to get the FOV value and output as focal length.

No need to restrict the slider values like it's now.
I'll do it with view.fov values and it should just be visually translated to focal length for the user.

Now, the FOV to Focal Length "translation" only works when moving the slider.
If it can work for every onviewchanged happenings, without interfering on the values of the slider (max value), so It would be solved for now!!

I'll deal with all other manual stuff I need to do.
It's faster to do this way.
As far as you already got the math to work, I'm wondering if you could help me with this final touch.

I'm sorry for so many requests. I've been learning a lot here, although it's still difficult for me to understand several things.

Thank you so much for your patience and for being so helpful!!

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

16

Friday, September 28th 2018, 4:34am

To limit the focal length, put, for example, 70 mm - dragging (70); in a layer "slider_grip_S"

Lower bounded by 8 mm:

Source code

<action name="dragging">
	 if(pressed,copy(newx1,newx);
			sub(dx, mouse.stagex, drag_stagex); 
			add(newx, drag_currentx, dx);
			if(newx LT 0, set(newx,0));
			clamp(newx,22.85,200);
			if(newx GT layer[slider_S].pixelwidth, copy(newx,layer[slider_S].pixelwidth));
			copy(x,newx);
			div(val, newx, layer[slider_S].pixelwidth);
			delayedcall(0,dragging(%1););						
			mul(F,val,%1);
										
			Math.atan(fl2,calc(43.27 / (2 * F)););
			calc(fov, 180 / Math.PI * 2 * fl2);
						
			set(view.fov,get(fov));
		);
  </action>

To update the zoom with the mouse wheel, you need the formula for calculating F (focal) through changing the FOV

https://novosibpano.ru/Plugins/

Go to the top of the page

dfarjoun

Trainee

Posts: 130

17

Friday, September 28th 2018, 4:59am

Now it's completely weird.

But anyway, I wish I could have the focal length working only.

The formula is:
Focal Length = (arctan * 43.27) / FOV
Does the following makes sense?

<action name="make_focallength" >
set(ff, 43.27);
set(fov, get(view.fov));
calc(focallength, (Math.atan * ff) / fov);

copy(focal, focallength);
</action>

If so, how to put the result to appear as text?

Everything I try I get a NaN result! :P

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

18

Friday, September 28th 2018, 6:11am

Set the maximum focal length limit layer name="slider_grip_S" ondown="copy(drag_currentx,x); copy(drag_stagex,mouse.stagex);dragging(70);"

Source code

	<events name="sliderevents2" keep="true" onviewchanged="print_F();" />

	<plugin name="hotspot_pos_info" keep="true" alpha="1" align="lefttop" x="10" y="10" width="100" 
			url="%SWFPATH%/plugins/textfield.swf" enabled="false"  padding="8"	        
			background="true" backgroundcolor="0x2D3E50" backgroundalpha="0.7" css="font-family:Courier; color:#FFFFFF; font-size:12px;"
	        />
	
	<action name="print_F"><![CDATA[
     	copy(print_F, F);
		copy(print_fov, view.fov);
		roundval(print_F, 2);
		roundval(print_fov, 2);
		calc(plugin[hotspot_pos_info].html,
		'F=' + print_F + '[br]
		FOV=' + print_fov 
	    );
	]]></action>  
	

	<!--  dragging(Fmax) -->		
	<layer name="slider_S" keep="true" url="slider-background.jpg" align="lefttop" x="200" y="20" handcursor="false" zorder="1" 
	       height="10" width="200"/>
	<layer name="slider_grip_S" keep="true" url="slider-grip.png" align="left" edge="center" parent="slider_S" x="50" zorder="2" scale="0.4" 
			ondown="copy(drag_currentx,x); copy(drag_stagex,mouse.stagex);dragging(70);"
		/>	

	<action name="dragging">
		   if(pressed,copy(newx1,newx);
					sub(dx, mouse.stagex, drag_stagex); 
					add(newx, drag_currentx, dx);
					if(newx LT 0, set(newx,0));
					clamp(newx,22.85,200);
					if(newx GT layer[slider_S].pixelwidth, copy(newx,layer[slider_S].pixelwidth));
					copy(x,newx);
					div(val, newx, layer[slider_S].pixelwidth);
					delayedcall(0,dragging(%1););						
					mul(F,val,%1);
										
					Math.atan(fl2,calc(43.27 / (2 * F)););
					calc(fov, 180 / Math.PI * 2 * fl2);
						
					set(view.fov,get(fov));
			);
	 </action>

https://novosibpano.ru/Plugins/

Go to the top of the page

Dafar

Trainee

Posts: 130

19

Friday, September 28th 2018, 5:48pm

I'm almost there!

I gave up the idea to enter the focal Length.
I did it manually with view.fovmin and view.fovmax data. It's working beautifully.

Now I'm almost there!!!

I did the conversion from FOV to Focal Length based on actual view.fov.
BUT... it's not accurate.

Could you help me correcting this error?

Source code

<!-- 
	#############################################
	#              FOV TO FOCAL LENGTH          #
	############################################# -->


<action name="fov-to-focallength" >
set(sensor, 43.27);
set(fov, get(view.fov));

Math.atan(field,calc(sensor / (2 * fov)););
calc(focal, 180 / Math.PI * 2 * field);


</action>



<plugin name="hotspot_pos_info2" keep="true" alpha="1" align="bottom" x="300" y="350" width="100" 
			url="%SWFPATH%/plugins/textfield.swf" enabled="false"  padding="8"	        
			background="true" backgroundcolor="0x2D3E50" backgroundalpha="0.7" css="font-family:Courier; color:#FFFFFF; font-size:12px;"
	        />
	
	<action name="print_focal"><![CDATA[
     	copy(print_F, F);
		copy(print_fov, view.fov);
		roundval(focal, 0);
		roundval(print_fov, 2);
		calc(plugin[hotspot_pos_info2].html,
		'F = ' + focal + '[br]
		FOV=' + print_fov 
	    );
	]]></action>  

<events name="showfocal" keep="true" onviewchanged="fov-to-focallength(); print_focal();" />

Thank you SO MUCH!!!

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

20

Friday, September 28th 2018, 8:09pm

I made the working version. "crop_f" - Crop factor. For a full frame,set(crop_f,1); better put in the "onstart"

Source code

<events name="showfocal" keep="true" onviewchanged="fov_to_focallength(); print_focal();" />	
	
<plugin name="hotspot_pos_info2" keep="true" alpha="1" align="bottom" x="300" y="350" width="100" 
        url="%SWFPATH%/plugins/textfield.swf" enabled="false"  padding="8"	        
	background="true" backgroundcolor="0x2D3E50" backgroundalpha="0.7" 
        css="font-family:Courier; color:#FFFFFF; font-size:12px;"
      />
			
<action name="fov_to_focallength" >
	set(crop_f,1);		<!-- Crop factor. For a full frame - 1 -->
	Math.tan(field,calc(view.fov / 114.6));
	calc(focal,21.622 / (field * crop_f));
</action>
	
<action name="print_focal"><![CDATA[
        copy(print_F, F);
	copy(print_fov, view.fov);
	roundval(focal, 0);
	roundval(print_fov, 2);
	calc(plugin[hotspot_pos_info2].html,
	'F = ' + focal + '°[br]
	FOV=' + print_fov 
  );
]]></action>

https://novosibpano.ru/Plugins/

This post has been edited 1 times, last edit by "San7" (Sep 28th 2018, 8:21pm)

Go to the top of the page