CODEWITHSUNDEEP
javascript
Frank Bemelman
Frank Bemelman

Reputation: 1

Weird Javascript behaviour, not calculation the obvious outcome

I have a strange problem with a simple piece of javascript. It is supposed to work as a lens calculator, input is given by two sliders for distance and focal length of the lens. When I change the bottom slider, all works as expected, but when changing the first slider for distance, it does not update the angle of view. The lenscalculator can be found here:

http://osc234.videofrank.nl/lenscalculator.php

The sliders are created with NoUIslider.

The events from both slider have the exact same calculation of the values, yet the upper slider only works 'half' and does not update the angle.

I really puzzled by this one. What could cause this? I'm no javascript expert, merely trying a lot by trial and error...

var CCDHeight, CCDWidth, FOVHeight, FOVWidth, FOVAngle, Distance, LensSize;
var MetersToDisplay = document.getElementById('input-number');
var MMToDisplay = document.getElementById('lensmm-slider');
var SizeToDisplay = document.getElementById('size-output');

var SliderMeters = document.getElementById('sliderdistance');
noUiSlider.create(SliderMeters, {
  start: 5,
  step: 0.1,
  padding: 6,
  range: {
    'min': -5,
    'max': 106
  }
});
var SliderLensMM = document.getElementById('sliderlensmm');
noUiSlider.create(SliderLensMM, {
  start: 2.8,
  step: 0.1,
  padding: 6.8,
  range: {
    'min': -5,
    'max': 106.8
  }

});

// 1/3 inch 4:3
CCDWidth = 4.8;
CCDHeight = 3.6;

SliderMeters.noUiSlider.on('update', function(values, handle) {
  Distance = values[handle];

  FOVHeight = Math.round(((CCDHeight * Distance) / LensSize) * 100) / 100;
  FOVWidth = Math.round(((CCDWidth * Distance) / LensSize) * 100) / 100;
  FOVAngle = Math.round(Math.atan(CCDWidth / LensSize) * 100);

  MetersToDisplay.innerHTML = "Afstand in meters: " + Distance;
  SizeToDisplay.innerHTML = "D=" + Distance + "M=" + LensSize + " Beeld afmeting in meters (BxH): " + FOVWidth + " x " + FOVHeight + "<br>Horizontale kijkhoek (graden): " + FOVAngle;

});

SliderLensMM.noUiSlider.on('update', function(values, handle) {
  LensSize = values[handle];

  FOVWidth = Math.round(((CCDWidth * Distance) / LensSize) * 100) / 100;
  FOVHeight = Math.round(((CCDHeight * Distance) / LensSize) * 100) / 100;
  FOVAngle = Math.round(Math.atan(CCDWidth / LensSize) * 100);

  MMToDisplay.innerHTML = "Lens Afstelling in Millimeters: " + LensSize;
  SizeToDisplay.innerHTML = "D=" + Distance + "M=" + LensSize + " Beeld afmeting in meters (BxH): " + FOVWidth + " x " + FOVHeight + "<br>Horizontale kijkhoek (graden): " + FOVAngle;

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css" />

<div class="view">
  <p>Stel de afstand in tot het onderwerp in meters. Speel met de afstelling van de lens en kijk wat het effect is op de breedte en hoogte van het te verwachten beeld.</p>

  <div class="example">
    <div id="input-number"></div>
    <br>
    <div id="sliderdistance"></div>
    <br>
    <div id="lensmm-slider"></div>
    <br>
    <div id="sliderlensmm"></div>
    <br>
    <div id="size-output"></div>


  </div>
</div>

Upvotes: 0

Views: 56

Answers (1)

Ben West
Ben West

Reputation: 4596

Distance isn't involved in the calculation of FOVAngle, so changing Distance won't result in a different FOVAngle.

FOVAngle = Math.round(Math.atan(CCDWidth / LensSize) * 100);

CCDWidth is constant, and LensSize is set by the other slider, so the result is the same no matter the value of the first slider.

Upvotes: 2

Related Questions