Skip to content

Commit 4aeacb7

Browse files
patikpatik
committed
Merge pull request #12 from patik/chart
Chart
2 parents 1e370f2 + a5aede1 commit 4aeacb7

File tree

11 files changed

+519
-46
lines changed

11 files changed

+519
-46
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ module.exports = function(grunt) {
4545
},
4646
dist: {
4747
files: {
48-
'js/script.js': ['js/vendor/jquery.js', 'js/vendor/fastclick.js', 'js/vendor/handlebars-v1.2.0.js', '<%= dfc.js %>', 'js/vendor/ga.js']
48+
'js/script.js': ['js/vendor/jquery.js', 'js/vendor/fastclick.js', 'js/vendor/handlebars-v1.2.0.js', 'js/vendor/highcharts.js', '<%= dfc.js %>', 'js/vendor/ga.js']
4949
}
5050
}
5151
},

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<html class="no-js" lang="en">
44
<head>
55
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
77
<title>Depth of Field Calculator &amp; Comparison Tool</title>
88
<link rel="stylesheet" href="css/dfc.css">
99
<script src="js/vendor/modernizr.js"></script>
@@ -68,6 +68,7 @@ <h1 class="subheader"><a href="http://patik.com/dof/">Depth of Field Calculator
6868
<div class="small-12 medium-6 table-12 columns add-lens">
6969
<div><span>Add</span><span>Lens</span></div>
7070
</div>
71+
<div class="chart"></div>
7172
</div>
7273
<div role="footer" class="row">
7374
<div class="small-12 medium-4 columns text-center">

‎js/dfc/app.js‎

Lines changed: 121 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ var DFC = (function _DFC() {
1717
$comparisonLinks = null,
1818

1919
// Sorting API
20-
_sorting = {};
20+
_sorting = {},
21+
22+
// Chart API
23+
_chart = {};
2124

2225
/**
2326
* Initialize app
@@ -75,7 +78,8 @@ var DFC = (function _DFC() {
7578
.on('click', '.sort-toggle', _sortToggle)
7679

7780
// Custom events
78-
.on('uiupdated', _onUIUpdated);
81+
.on('uiupdated', _onUIUpdated)
82+
.on('updatechart', _chart.update);
7983

8084
// Distance
8185
$distance.on('change keyup blur', _onChangeDistance);
@@ -85,6 +89,8 @@ var DFC = (function _DFC() {
8589
_addLensUI(lens);
8690
lens = _getNameFromUI(lens);
8791
});
92+
93+
_chart.update();
8894
}
8995

9096
// example.com/#20;Name%20of%20Lens,35,f-2,mft
@@ -304,6 +310,8 @@ var DFC = (function _DFC() {
304310

305311
// Update the URL hash
306312
_updateHash();
313+
314+
$body.trigger('updatechart');
307315
}
308316

309317
/**
@@ -485,8 +493,119 @@ var DFC = (function _DFC() {
485493
$container.find('.focalLengthEquiv').text(result.focalLengthEquiv + 'mm');
486494

487495
_updateLens(id, 'dof', result.dofFloat);
496+
497+
$body.trigger('updatechart');
498+
}
499+
500+
/**
501+
* Determine the depth-of-field for a given lens
502+
*
503+
* @param {Object} lens Lens object
504+
* @param {Number} distance Distance value
505+
*
506+
* @return {String} Depth of field in feet and inches
507+
*/
508+
function _getDof(lens, distance) {
509+
if (!lens) {
510+
return;
511+
}
512+
513+
return (new DFC.Dof(lens.sensor, lens.focalLength, lens.aperture, distance)).dof;
488514
}
489515

516+
///////////
517+
// Chart //
518+
///////////
519+
520+
// Default data for rendering the chart
521+
_chart.data = {
522+
chart: {
523+
type: 'line'
524+
},
525+
title: {
526+
text: '' // Have to set an empty string to avoid rendering a generic title
527+
},
528+
xAxis: {
529+
categories: ["5'", "10'", "15'", "20'", "25'", "30'", "35'", "40'", "45'", "50'"],
530+
title: {
531+
text: 'Distance to subject (feet)'
532+
}
533+
},
534+
yAxis: {
535+
title: {
536+
text: 'Depth of Field'
537+
}
538+
},
539+
series: []
540+
};
541+
542+
/**
543+
* Draws the chart using the current data
544+
*/
545+
_chart.draw = function _chart_create() {
546+
$('.chart').highcharts(_chart.data);
547+
};
548+
549+
/**
550+
* Updates the chart data
551+
*/
552+
_chart.update = function _chart_update() {
553+
var distances;
554+
555+
// Update the chart once per series of changes, rather than every single change
556+
if (_chart.timer) {
557+
return false;
558+
}
559+
560+
_chart.timer = setTimeout(_chart.clearTimer, 1000);
561+
562+
distances = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50];
563+
564+
// Clear existing data
565+
_chart.data.series = [];
566+
567+
// Create data set for each lens
568+
lenses.forEach(function _chart_update_lenses(lens, i) {
569+
var obj = {
570+
name: lens.name,
571+
data: []
572+
};
573+
574+
// Collect dof for each distance
575+
distances.forEach(function _chart_update_distances(distance) {
576+
var dof = _getDof(lens, distance),
577+
regex = /(\d+)\'\s(\d+\.\d+)\"/,
578+
dec = 0,
579+
numeric;
580+
581+
// Convert to decimal values
582+
if (regex.test(dof)) {
583+
numeric = regex.exec(dof);
584+
dec = parseFloat(parseInt(numeric[1], 10) + parseFloat(numeric[2]/12));
585+
}
586+
587+
// Filter out unplottable values
588+
if (dec > 0 && dec < Infinity) {
589+
obj.data.push(dec);
590+
}
591+
});
592+
593+
_chart.data.series.push(obj);
594+
});
595+
596+
// Draw updated chart
597+
_chart.draw();
598+
};
599+
600+
// Tracks whether there is a pending re-draw of the chart
601+
_chart.timer = null;
602+
603+
// Clears the re-draw flag
604+
_chart.clearTimer = function _chart_clearTimer() {
605+
clearTimeout(_chart.timer);
606+
_chart.timer = null;
607+
};
608+
490609
/////////////
491610
// Sorting //
492611
/////////////
@@ -519,12 +638,10 @@ var DFC = (function _DFC() {
519638

520639
// Click on menu item
521640
if ($targ.closest('.row.expanded').length) {
522-
console.log('Click on menu item');
523641
_sortToggle(evt);
524642
}
525643
// Clicked outside the menu
526644
else if (!$targ.closest('.sort-toggle').length) {
527-
console.log('Clicked outside the menu');
528645
// Collapse menu
529646
$('.sort-toggle').removeClass('expanded');
530647
$sortOptions.removeClass('expanded');

‎js/dfc/objects.js‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -87,36 +87,36 @@ if (!String.prototype.trim) {
8787
}
8888

8989
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round#Example:_Decimal_rounding
90-
(function(){
91-
/**
92-
* Decimal adjustment of a number.
93-
*
94-
* @param {String} type The type of adjustment.
95-
* @param {Number} value The number.
96-
* @param {Integer} exp The exponent (the 10 logarithm of the adjustment base).
97-
* @returns {Number} The adjusted value.
98-
*/
99-
function decimalAdjust(type, value, exp) {
100-
// If the exp is undefined or zero...
101-
if (typeof exp === 'undefined' || +exp === 0) {
102-
return Math[type](value);
103-
}
104-
value = +value;
105-
exp = +exp;
106-
// If the value is not a number or the exp is not an integer...
107-
if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
108-
return NaN;
109-
}
110-
// Shift
111-
value = value.toString().split('e');
112-
value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
113-
// Shift back
114-
value = value.toString().split('e');
115-
return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
116-
}
117-
90+
(function() {
11891
// Decimal round
11992
if (!Math.round10) {
93+
/**
94+
* Decimal adjustment of a number.
95+
*
96+
* @param {String} type The type of adjustment.
97+
* @param {Number} value The number.
98+
* @param {Integer} exp The exponent (the 10 logarithm of the adjustment base).
99+
* @returns {Number} The adjusted value.
100+
*/
101+
function decimalAdjust(type, value, exp) {
102+
// If the exp is undefined or zero...
103+
if (typeof exp === 'undefined' || +exp === 0) {
104+
return Math[type](value);
105+
}
106+
value = +value;
107+
exp = +exp;
108+
// If the value is not a number or the exp is not an integer...
109+
if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
110+
return NaN;
111+
}
112+
// Shift
113+
value = value.toString().split('e');
114+
value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
115+
// Shift back
116+
value = value.toString().split('e');
117+
return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
118+
}
119+
120120
Math.round10 = function(value) {
121121
return decimalAdjust('round', value, -1);
122122
};

‎js/script.js‎

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/script.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)