forked from Allar/fpstoms
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (210 loc) · 8.47 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FPS to MS</title>
<meta name="description" content="A simple tool for converting Frames Per Second to and from Milliseconds." />
<meta name="author" content="Michael Allar @michaelallar" />
<meta property="og:title" content="FPS to MS" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://fpstoms.com" />
<meta property="og:description" content="A simple tool for converting Frames Per Second to and from Milliseconds." />
<meta property="og:image" content="image.png" />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link href="/css/styles.css" rel="stylesheet" />
<script defer src="https://unpkg.com/[email protected]/dist/cdn.js"></script>
</head>
<body class="bg-gray-700">
<div x-data="timing">
<!-- common card -->
<div class="container mt-8 mx-auto">
<div class="shadow sm:rounded-md overflow-hidden">
<div class="px-4 py-5 bg-gray-400 space-y-6 sm:p-6">
<div class="grid grid-cols-2 gap-3 items-center justify-center">
<div class="col-span-2">
<p class="text-3xl text-center">FPS to MS</p>
<p class="text-xl text-center">Frames Per Second to Milliseconds</p>
</div>
<div class="col-span-2 mx-auto text-center">
A website by <a class="underline" href="https://twitter.com/michaelallar">Michael Allar</a> who was tired of not having this exact reference. Make it better and contribute to the <a class="underline" href="https://github.com/Allar/fpstoms">Github Repo</a>.
</div>
</div>
</div>
</div>
</div>
<!-- common card -->
<div class="container mt-5 mx-auto">
<div class="shadow sm:rounded-md overflow-hidden">
<div class="px-4 py-5 bg-gray-400 space-y-6 sm:p-6">
<div class="grid grid-cols-2 gap-3 items-center justify-center">
<div class="col-span-2">
<p class="text-xl text-center">Common Frame Rates and Intervals</p>
</div>
<div class="col-span-2 sm:col-span-1 sm:mt-2 mx-auto text-center">
<p class="text-lg mb-4">Games</p>
<ul class="mt-2">
<li class="mt-1">30 FPS is 33.33333 MS</li>
<li class="mt-1">60 FPS is 16.66666 MS</li>
<li class="mt-1">90 FPS is 11.11111 MS</li>
<li class="mt-1">120 FPS is 8.33333 MS</li>
<li class="mt-1">140 FPS is 7.14285 MS</li>
<li class="mt-1">144 FPS is 6.94444 MS</li>
<li class="mt-1">180 FPS is 5.55555 MS</li>
<li class="mt-1">240 FPS is 4.16666 MS</li>
<li class="mt-1">360 FPS is 2.17777 MS</li>
<li class="mt-1">480 FPS is 2.08333 MS</li>
<li class="mt-1">500 FPS is 2.00000 MS</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1 mt-6 sm:mt-2 mx-auto text-center">
<p class="text-lg mb-4">Film</p>
<ul class="mt-2">
<li class="mt-1">23.976 FPS is 41.70838 MS</li>
<li class="mt-1">24.000 FPS is 41.66666 MS</li>
<li class="mt-1">25.000 FPS is 40.00000 MS</li>
<li class="mt-1">29.970 FPS is 33.36670 MS</li>
<li class="mt-1">30.000 FPS is 33.33333 MS</li>
<li class="mt-1">48.000 FPS is 20.83333 MS</li>
<li class="mt-1">59.940 FPS is 16.68335 MS</li>
<li class="mt-1">60.000 FPS is 16.66666 MS</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- converter card -->
<div class="container mt-5 mx-auto">
<div class="shadow sm:rounded-md overflow-hidden">
<div class="px-4 py-5 bg-gray-400 space-y-6 sm:p-6">
<div class="grid grid-cols-3 gap-6 items-center">
<div class="col-span-3">
<p class="text-xl text-center">Converter</p>
</div>
<div class="col-span-1">
<div class="mt-1 flex rounded-md shadow-sm">
<input
type="number"
name="fps"
id="fps"
x-model.number="desiredFPS"
class="
focus:ring-indigo-500 focus:border-indigo-500
flex-1
block
w-full
rounded-none rounded-l-md
sm:text-sm
border-gray-300
"
/>
<span
class="
inline-flex
items-center
px-3
rounded-none rounded-r-md
border border-l-0 border-gray-300
bg-gray-50
text-gray-500 text-sm
"
>
FPS
</span>
</div>
</div>
<div class="col-span-1">
<div class="mt-1 text-center align-center">is</div>
</div>
<div class="col-span-1">
<div class="mt-1 flex rounded-md shadow-sm">
<input
type="number"
name="ms"
id="ms"
x-model.number="desiredMS"
class="
focus:ring-indigo-500 focus:border-indigo-500
flex-1
block
w-full
rounded-none rounded-l-md
sm:text-sm
border-gray-300
"
/>
<span
class="
inline-flex
items-center
px-3
rounded-none rounded-r-md
border border-l-0 border-gray-300
bg-gray-50
text-gray-500 text-sm
"
>
MS
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end converter card -->
</div>
</body>
</html>
<script>
TIME_TYPE_FPS = 0;
TIME_TYPE_MS = 1;
TIME_TYPE_S = 2;
reportUnsupportedIntervalConvert = (interval, intervalType, desiredType) => {
console.error(`Converting interval ${interval} from type ${intervalType} to type ${desiredType} is currently unsupported.`);
return interval;
};
intervalConvert = (interval, intervalType, desiredType) => {
if (interval == 0) return 0;
if (intervalType === desiredType) return interval;
switch (true) {
case (intervalType == TIME_TYPE_FPS && desiredType == TIME_TYPE_S):
return 1.0 / interval
case (intervalType == TIME_TYPE_FPS && desiredType == TIME_TYPE_MS):
return 1000.0 / interval
case (intervalType == TIME_TYPE_S && desiredType == TIME_TYPE_MS):
return 1000.0 * interval
case (intervalType == TIME_TYPE_S && desiredType == TIME_TYPE_FPS):
return 1.0 / interval
case (intervalType == TIME_TYPE_MS && desiredType == TIME_TYPE_S):
return interval / 1000.0
case (intervalType == TIME_TYPE_MS && desiredType == TIME_TYPE_FPS):
return 1000.0 / interval
default:
return reportUnsupportedIntervalConvert(interval, intervalType, desiredType)
}
};
document.addEventListener("alpine:init", () => {
Alpine.data("timing", () => ({
intervalType: TIME_TYPE_FPS,
interval: 60,
get desiredFPS() {
return intervalConvert(this.interval, this.intervalType, TIME_TYPE_FPS)
},
set desiredFPS(v) {
this.intervalType = TIME_TYPE_FPS
this.interval = v;
},
get desiredMS() {
return intervalConvert(this.interval, this.intervalType, TIME_TYPE_MS)
},
set desiredMS(v) {
this.intervalType = TIME_TYPE_MS
this.interval = v;
},
}));
});
</script>