-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
68 lines (64 loc) · 2.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>Mindustry Image Generator</title>
</head>
<body>
<div class="main">
<h1>Mindustry Image Generator</h1>
<a href="https://github.com/sudobeans/mindustry-image-generator/"><p>Github repository</p></a>
<a href="https://github.com/8dcc/mindustry-image-generator"><p>40x40 image generator by 8dcc</p></a>
<!-- Text box at the top of the page -->
<div class="textboxborder">
<p>Converts images into code for a Mindustry Micro Processor, so that you can print images on logic displays in the game.</p>
<p>The image you upload will be resized to a 20x20 image so it can be displayed correctly.</p>
<p>NOTE: If the copy buttons don't work, try copying the code by right-clicking on it.</p>
<img src="working-picture.png" alt="Logic display showing a picture of a sunflower"> <!-- Image is from https://commons.wikimedia.org/wiki/File:Sunflower_sky_backdrop.jpg -->
<!-- collapsible how to menu -->
<button type="button" class="collapsible">How to use</button>
<div class="content">
<ol>
<li>Copy this schematic.
<button onclick="copySchematic()">Copy code</button>
<input id="schematicTextArea" value="If you are seeing this text, something isn't working!">
</li>
<li>Import the schematic into the game. If you don't know how, <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=1933022628">this guide might help you.</a></li>
<li>Place down the schematic.</li>
<li>Upload your image to this website.</li>
<li>Copy the code generated from your image.</li>
<li>
Import that code into the Micro Processor in the game:
<ol>
<li>Click the Micro Processor block.</li>
<li>Click the pen that shows up under it.</li>
<li>Inside the menu, click the "Edit" button.</li>
<li>Click "Import from clipboard."</li>
</ol>
</li>
<li>Then, click the switch block next to the Micro Processor.</li>
</ol>
</div>
</div>
<!-- Image uploading area -->
<div>
<h2>Upload an image:</h2>
<input type="file" id="fileInput" name="file" />
<h2>Your image:</h2>
<img id="imageSrc" alt="No Image" />
<h2>Your image (resized preview):</h2>
<canvas id="resizedImageCanvas"></canvas>
</div>
<!-- Code output area -->
<div>
<h2>Code generated from the image:</h2>
<button onclick="copyCodeOutput()">Copy code</button>
<div class="textboxborder">
<textarea id="codeoutput">Your code will show up once you upload an image!</textarea>
</div>
</div>
</body>
<script src="index.js" type="text/javascript"></script>
<script src="opencv.js" type="text/javascript"></script>
</html>