-
Notifications
You must be signed in to change notification settings - Fork 0
/
info.html
107 lines (96 loc) · 6.27 KB
/
info.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
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="mediaUtils.css">
<link rel="stylesheet" type="text/css" href="transformUtils.css">
<style>
body {
font-family: Arial ;
background-color: #ccc;
}
li {
list-style-type: none;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41066114-3', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<h3>Quick Start - How to rotate a 360 photo:</h3>
Use the mouse to move the photo around. Click on
<img class="transformControlIcon" src="icons/rotateLeft.png" /> and
<img class="transformControlIcon" src="icons/rotateRight.png" /> to rotate it as desired.
Click on <img class="transformControlIcon" src="icons/download.png" /> to save.
<h3>Details:</h3>
This page is inspired by several articles by Henry Segerman on Möbius transformations and spherical image editing. I wrote about the design of this page <a href="http://rwoodley.org/?p=1238">here</a>.
There is a video showing how to use it <a href="https://youtu.be/WmNrGE0aLlc">here</a>.
<p/>
<h3>Transformations:</h3>
<h4>Möbius transformations:</h4>
<li><img class="transformControlIcon" src="icons/rotateLeft.png" /> Rotate left around fixed points.(*) Successive clicks speed up the rotation speed.</li>
<li><img class="transformControlIcon" src="icons/rotateRight.png" /> Rotate right. </li>
<li><img class="transformControlIcon" src="icons/pause.png" /> Stop rotating. </li>
<li><img class="transformControlIcon" src="icons/stop.png" /> No rotation. </li>
<li><img class="transformControlIcon" src="icons/zoomIn.png" /> Do conformal zoom in on point 1, out on point 2. (*)</li>
<li><img class="transformControlIcon" src="icons/zoomOut.png" /> Do conformal zoom out on point 1, in on point 2. (*)</li>
<li><img class="transformControlIcon" src="icons/cancel.png" /> Cancel zoom. </li>
<li><img class="transformControlIcon" src="icons/Epsilon1.svg" /> Set Fixed Point 1 at center of viewport. When debugging, this point is represented by a red dot on the image.</li>
<li><img class="transformControlIcon" src="icons/Epsilon2.svg" /> Set Fixed Point 2 at center of viewport. When debugging, this point is represented by a blue dot on the image.</li>
<li><img class="transformControlIcon" src="icons/debug.png" /> Show/hide dots representing fixed points. </li>
<p/>
(*) If you click on rotate or zoom without having first selected the fixed points, the system will set the current center of the viewport to be fixed point 1, and the antipodal point to be fixed point 2.
<h4>Complex transformations:</h4>
If selected, these are applied after the Möbius transformations have been applied. The effects can be combined.
<li><img class="transformControlIcon" src="icons/transform1Icon.png" /> Successive clicks increment n.</li>
<li><img class="transformControlIcon" src="icons/transform2Icon.png" /> Successive clicks decrement n. </li>
<li><img class="transformControlIcon" src="icons/transform3Icon.png" /> Successive clicks toggle the effect on/off. </li>
<li><img class="transformControlIcon" src="icons/transform4Icon.png" /> Successive clicks toggle the effect on/off. </li>
<h4>Miscellaneous other functions:</h4>
<li><img class="transformControlIcon" src="icons/download.png" /> Download the modified 360 photo as an equirectangular image. </li>
<li><img class="transformControlIcon" src="icons/reset.png" /> Turn off all transforms, revert to original image. </li>
<li><img class="transformControlIcon" src="icons/toggle.png" /> Toggle view to see effect of transformations on the rectangular texture. </li>
<h3>Camera Controls:</h3>
These have no effect on the image that is downloaded. They just effect how the camera works, but not the underlying image.
<li><img class="cameraControlIcon" src="icons/left.png" /> Rotate camera to left. Successive clicks increase the speed. </li>
<li><img class="cameraControlIcon" src="icons/up.png" /> Rotate camera up. Stops at the zenith. </li>
<li><img class="cameraControlIcon" src="icons/down.png" /> Rotate camera down. Stops at the nadir. </li>
<li><img class="cameraControlIcon" src="icons/right.png" /> Rotate camera to the right. </li>
<li><img class="cameraControlIcon" src="icons/pause.png" /> Stop rotating the camera. </li>
<li><img class="cameraControlIcon" src="icons/flipCamera.png" /> Flip camera around to view the antipodal point opposite the current position. </li>
<li><img class="cameraControlIcon" src="icons/fovNarrow.png" /> Decrease the field of view by 15%. </li>
<li><img class="cameraControlIcon" src="icons/fovWide.png" /> Increase the field of view by 15%. </li>
<p/>
The code is on GitHub at: <a href="https://github.com/rwoodley/SphericalPhotoToolkit">https://github.com/rwoodley/SphericalPhotoToolkit</a>
<p/>
Note that if you plan to upload a picture that has been created by this app to something like Facebook, some post-processing is required. This app does not insert the EXIF tags that Facebook and others require. These are the steps required to get Facebook to recognize your photo as a 360 photo:<br/>
1 - Convert it from a PNG to a JPG. Many ways to do this.<br/>
2 - I use exiftool to add in the meta data. For instance:<br/>
<pre>
exiftool -MAKE='RICOH' -Model='RICOH THETA S' mypic.jpg
</pre>
<p/>
<hr/>
<p/>
Robert Woodley, 2016-2017.<br/>
<a href="http://rwoodley.org">rwoodley.org</a><br/>
<a href="http://twitter.com/rwoodley">@rwoodley</a><br/>
<p/>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
<p/>
<a href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
<p/>
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
</body>
</html>