-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
325 lines (303 loc) · 9.4 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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SFS IMAGE TO STRUT</title>
<style>
#menu {
background: #292A2E;
color: #FFF;
height: 45px;
padding-left: 18px;
border-radius: 15px;
border: 2px solid #FFFFFF;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 41px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
text-transform: capitalize;
}
#menu a.dropdown-arrow:after {
content: "\23F7";
margin-left: 5px;
}
#menu li a:hover {
color: #FFFFFF;
background: #000000;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 45px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 41px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
text-transform: capitalize;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #000000;
color: #FFFFFF;
}
@media screen and (max-width: 800px){
#menu {position:relative}
#menu ul {background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.sub-menus {width:100%;position:static;}
#menu ul.sub-menus a {padding-left:30px;}
#menu li {display:block;float:none;width:auto;}
#menu input, #menu label {position:absolute;top:0;left:0;display:block}
#menu input {z-index:4}
#menu input:checked + label {color:white}
#menu input:checked + label:before {content:"\00d7"}
#menu input:checked ~ ul {display:block}
}
body {
font-family: Verdana, sans-serif;
background-color: #33343d;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 28px;
font-weight: bold;
}
h2 {
font-size: 14px;
}
p {
font-size: 12px;
}
hr {
width: 80%;
margin: 10px 0;
}
#uploadContainer {
display: flex;
align-items: center;
background-color: #a2a5b0;
padding: 10px;
}
#uploadText, #uploadButton {
font-weight: bold;
margin-right: 10px;
}
#imageContainer {
display: flex;
margin-top: 10px;
}
.image {
margin-right: 10px;
}
.image img {
width: 250px; /* Adjust the width as needed */
height: auto; /* Maintain aspect ratio */
}
.caption {
font-size: 10px;
margin-top: 5px;
}
#thanksText {
font-size: 20px;
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<nav id='menu'>
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='https://impasta1573.github.io/sfs-tools/index.html'>IMAGE TO STRUTS</a></li>
<li><a href='https://impasta1573.github.io/sfs-tools/toolb.html'>TANK SMOOTHER</a></li>
<li><a href='https://impasta1573.github.io/sfs-tools/toolc.html'>RANDOM PLANET </a></li>
<li><a href='https://impasta1573.github.io/sfs-tools/toold.html'>SAVE FIXER</a></li>
</ul>
</nav>
<h1>SFS IMAGE TO STRUT</h1>
<h2>(SITS)</h2>
<hr>
<p>
<b>ABOUT:</b> This program allows you to convert images into blueprints for Spaceflight Simulator,
using 1*1 struts. Please note that I might not be updating this program.
</p>
<p>
<b>USAGE:</b> Just upload your pixel art image using the "UPLOAD HERE" button.
Be cautious about using large images to prevent in-game lag.
NOTE: The blueprints might be off-center, and only 1x1 struts are used in the conversion.
</p>
<hr>
<div id="uploadContainer">
<p id="uploadText">UPLOAD IMG</p><br>
<input type="file" id="imageInput" accept="image/*" onchange="handleImage()">
</div>
<div id="imageContainer">
<div class="image">
<img src="regularimg.png" alt="Image 1" height="200px">
<p class="caption" contenteditable="true">This program is pretty <br>basic, but it works.</p>
</div>
<div class="image">
<img src="pngfail.png" alt="Image 2" height="200px">
<p class="caption" contenteditable="true">Make sure <i>all</i> PNGs<br> have no backgrounds!<br> (Intended circle)</p>
</div>
<div class="image">
<img src="colorfail.png" alt="Image 3" height="200px">
<p class="caption" contenteditable="true">This only uses struts, so<br> there will <i>not</i> be any color.<br>(Intended USA flag)</p>
</div>
</div>
<br>
<p id="thanksText">Thanks for visiting!</p>
<audio id="mousedownSound" src="down.mp3"></audio>
<audio id="mouseupSound" src="up.mp3"></audio>
<script>
function isNonWhite(pixelData) {
// Check if the pixel is not white
return pixelData[0] !== 255 || pixelData[1] !== 255 || pixelData[2] !== 255;
}
function generateBlueprint(pixelArray) {
const blueprint = {
center: 10.0,
parts: [],
stages: [],
rotation: 0.0,
offset: {
x: 0.0,
y: 0.0
},
interiorView: true
};
for (let y = 0; y < pixelArray.length; y++) {
const row = pixelArray[y];
for (let x = 0; x < row.length; x++) {
if (row[x] === 'T') {
const xpos = x * 0.5 + 10; // Adjust as needed
const ypos = (pixelArray.length - 1 - y) * 0.5; // Flip y-values
const strut = {
n: "Strut",
p: {
x: xpos,
y: ypos
},
o: {
x: 1.0,
y: 1.0,
z: 0.0
},
t: "-Infinity",
N: {
size: 0.5
}
};
blueprint.parts.push(strut);
}
}
}
// Add the last pixel
const lastPixel = blueprint.parts[blueprint.parts.length - 1];
if (lastPixel) {
blueprint.parts.push(lastPixel);
}
return JSON.stringify(blueprint, null, 2);
}
function handleImage() {
const input = document.getElementById('imageInput');
const fileSize = input.files[0].size; // Get the size of the uploaded file in bytes
if (fileSize > 100024) { // 100kb limit
alert('Please upload an image that is 100kb or smaller.');
} else {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
const imageData = ctx.getImageData(0, 0, img.width, img.height);
const pixelArray = [];
for (let y = 0; y < img.height; y++) {
const row = [];
for (let x = 0; x < img.width; x++) {
const startIndex = (y * img.width + x) * 4;
const alpha = imageData.data[startIndex + 3];
const color = Array.from(imageData.data.slice(startIndex, startIndex + 3));
row.push(alpha > 0 && isNonWhite(color) ? 'T' : 'F');
}
pixelArray.push(row);
}
const blueprintText = generateBlueprint(pixelArray);
downloadBlueprint(blueprintText);
document.getElementById('thanksText').style.display = 'block';
};
img.src = URL.createObjectURL(input.files[0]);
}
}
function downloadBlueprint(blueprintText) {
const blob = new Blob([blueprintText], { type: 'text/plain' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'Blueprint.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
document.getElementById('mousedownSound').play();
}
document.addEventListener('mousedown', function() {
document.getElementById('mousedownSound').play();
});
document.addEventListener('mouseup', function() {
document.getElementById('mouseupSound').play();
});
</script>
</body>
</html>