-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (187 loc) · 7.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Primary Meta Tags -->
<title>Focal Length Simulator - Do I Need More Focal Length?</title>
<meta name="title" content="Focal Length Simulator - Do I Need More Focal Length?" />
<meta name="description" content="The only tool that allows for the use of your own photos to simulate different focal length and field of view. Do I need more focal length? Try out with your own photos! " />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mlouielu.github.io/focal-length-simulator/" />
<meta property="og:title" content="Focal Length Simulator - Do I Need More Focal Length?
" />
<meta property="og:description" content="The only tool that allows for the use of your own photos to simulate different focal length and field of view. Do I need more focal length? Try out with your own photos! " />
<meta property="og:image" content="https://mlouielu.github.io/focal-length-simulator/assets/150_resize.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://mlouielu.github.io/focal-length-simulator/" />
<meta property="twitter:title" content="Focal Length Simulator - Do I Need More Focal Length?
" />
<meta property="twitter:description" content="The only tool that allows for the use of your own photos to simulate different focal length and field of view. Do I need more focal length? Try out with your own photos! " />
<meta property="twitter:image" content="https://mlouielu.github.io/focal-length-simulator/assets/150_resize.jpg" />
<!-- Meta Tags Generated with https://metatags.io -->
<script src='https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<script
src="https://unpkg.com/@andreasremdt/simple-translator@latest/dist/umd/translator.min.js"
defer
></script>
<script src="script/app.js"></script>
<script src="script/i18n.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="page-body">
<div>
<div class="header-forkme">
<nav>
<label>
<select id="lang-select">
<option value="en">EN</option>
<option value="zh_TW">台灣繁體</option>
</select>
</label>
</nav>
<a id="forkme_banner" href="https://github.com/mlouielu/focal-length-simulator">View On GitHub 📦</a>
</div>
<div class="title">
<h1 data-i18n="title">Focal Length Simulator</h1>
</div>
<p data-i18n="subtitle">Do I need more focal length? Try out with your own photos!</p>
</div>
<div id="container">
<div id="panzoom">
<img id="photo" src="assets/150_resize.jpg" />
</div>
<div id="fl-sim">
</div>
</div>
<div id="params">
<div class="input sm-col">
<div>
<label for="imageUpload">Use Your Photo (Locally)</label>
<input type="file" id="imageUpload" name="image" accept="image/*">
</div>
<div>
<button class="right-col-width sm-col-width" data-i18n="reset" onclick="app_init()">Reset Zoom</button>
</div>
</div>
<div class="input">
<span data-i18n="lens-focal-length">Lens Focal Length</span>
<input class="right-col-width" name="base_focal_length" type="number" step="1" pattern="\d*"
value="75">
</div>
<div class="input">
<span data-i18n="current-focal-length">Current Focal Length</span>
<input class="right-col-width" name="current_focal_length" type="number" step="1" pattern="\d*"
value="150" onkeydown=update_current_focal_length()>
</div>
<div class="input-range">
<div class="range" style="--step:1; --min:7; --max:40">
<input name="fl2_range_wide" type="range"
min=7 max=40 step=1 oninput="change_fl_zone_indicator('fl2_range_wide')">
</div>
<div class="range" style="--step:5; --min:40; --max:150">
<input name="fl2_range_std" type="range"
min=40 max=150 step=5 oninput="change_fl_zone_indicator('fl2_range_std')">
</div>
<div class="range" style="--step:10; --min:150; --max:1600">
<input name="fl2_range_tele" type="range"
min=150 max=1600 step=10 oninput="change_fl_zone_indicator('fl2_range_tele')">
</div>
<div class="range" style="--step:1; --min:1; --max:6000">
<input name="fl2_range" type="range"
min=1 max=6000 step=1 oninput="change_fl_zone_indicator('fl2_range')">
</div>
</div>
</div>
</div>
<footer class="page-footer">
<div class="footer-content">
<div>
<h2 id="motivation"><a href="#motivation" data-i18n="d-title.motivation">Motivation</a></h2>
<p data-i18n="d.1">
As an amateur photographer, I often find myself capturing
bird photos with my standard lens, only to see the bird
appearing quite small in the frame. This leads me to a
recurring question after each shot:
</p>
<blockquote>
<p data-i18n="d.2">
What would be the ideal focal length to make these photos
look perfect, or at least better?
</p>
</blockquote>
<p data-i18n="d.3">
While there are numerous focal length simulators available
online, none allow the use of personal photographs for
simulation.
</p>
<p data-i18n="d.4">
So I decided to build one, and this is it! The only tool
that allows for the use of your own photos to determine the
best focal length for a shot.
</p>
</div>
<div>
<h2 id="howtouse"><a href="#howtouse" data-i18n="d-title.htu">How To Use</a></h2>
<h3 id="basic"><a href="#basic" data-i18n="d-title.basic">Basic</a></h3>
<p data-i18n="d.5">
The red bounding box indicates the photo size of the
current focal length, and it should be the same at the
beginning.
</p>
<p data-i18n="d.6">
You can drag, zoom in, and zoom out to interact with and
simulate different focal lengths within the photo.
</p>
</p>
<h3 id="useyourphoto"><a href="#useyourphoto" data-i18n="d-title.uyop">Use Your Own Photo</a></h3>
<p data-i18n="d.7">
It is completely offline and local! Nothing will be
uploaded to any cloud or server.
</p>
<p data-i18n="d.8">
Click "Choose File" and select the photo you wish to
simulate. The current photo will be replaced with the one
you selected.
</p>
<p data-i18n="d.9">
This tool attempts to retrieve the lens focal length from
your photo's EXIF data. If this fails, you will need to
input it manually.
</p>
<p data-i18n="d.10">
If you input the lens focal length manually or encounter
any issue, click "Reset Zoom" to reset the red bounding
box.
</p>
<h3 id="howtozoomin"><a href="#howtozoomin" data-i18n="d-title.htzi">How To Zoom In</a></h3>
<div>
<p data-i18n="d.11">
There are five ways to zoom in:
</p>
<ol>
<li data-i18n="z.1">Double Tap</li>
<li data-i18n="z.2">Gesture Zoom</li>
<li data-i18n="z.3">Wheel Scrolling</li>
<li data-i18n="z.4">Range Bar</li>
<li data-i18n="z.5">Manual Enter</li>
</ol>
</div>
</div>
</div>
</footer>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
image_upload_init();
i18n_init();
app_init();
}, false);
</script>
</html>