-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (124 loc) · 10.7 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
<!doctype html>
<html>
<head>
<title>CreatiSign Generator V3.4.2 (current)</title>
<meta charset="utf-8" />
<link href="css/placer.css?876578615276534132" rel="stylesheet">
<link href="css/style.css?876578615276534132" rel="stylesheet">
<script src="js/imgsrc.js?876578615276534132"></script>
<script src="js/settings.js?876578615276534132"></script>
<script src="js/placer.js?876578615276534132"></script>
<script src="js/edit.js?876578615276534132"></script>
<script src="js/inter.js?876578615276534132"></script>
<script src="js/color.js?876578615276534132"></script>
<script src="js/timeoutlooper.js?876578615276534132"></script>
<script src="js/gene.js?876578615276534132"></script>
</head>
<body>
<div id="main">
<div id="interface"></div>
<div id="output">
<h1 id="heading">CreatiSign Generator V3.4.2</h1>
<p>
<button class="rounded shadow" id="info-button">HELP / INFO</button>
<a class="rounded shadow" href="https://www.twitch.tv/collections/wf3tqvYU_xQEdA" target="_blank">Twitch Tutorials</a>
<a class="rounded shadow" href="https://github.com/entuland/creatisign" target="_blank">GitHub Repo</a>
<a class="rounded shadow" href="http://entuland.com/creatisign">Latest Live Version</a>
</p>
<p>
<a class="rounded shadow" target="_blank" href="http://entuland.com/creatisprites">CreatiSprites<br><small>(sprites picker)</small></a>
<a class="rounded shadow" target="_blank" href="http://entuland.com/creaticount">CreatiCount<br><small>(material counter)</small></a>
<a class="rounded shadow" target="_blank" href="http://entuland.com/creatimap">CreatiMap<br><small>(map viewer)</small></a>
</p>
<figure class="resultsPreview rounded shadow">
<figcaption>Results preview</figcaption>
<canvas id="resultsPreview"></canvas>
</figure>
<figure style="display: none">
<figcaption>Working canvas</figcaption>
<canvas id="workingCanvas"></canvas>
</figure>
<figure style="display: none">
<figcaption>Edit canvas</figcaption>
<canvas id="editcanvas"></canvas>
</figure>
<div id="errors" class="notices"></div>
<figure class="sourcePreview rounded shadow">
<figcaption>Source preview</figcaption>
<div id="cropcontainer">
<img id="sourcePreview">
<div id="cropmouse"><div id="cropmask" title="Click and drag for manual cropping"></div></div>
</div>
</figure>
<div id="edit-controls">
<label class="rounded shadow" title="Show or hide source settings (they will be used in any case)"><input type="checkbox" id="showsourcesettings">Show source settings</label>
<p id="sectionnotice"></p>
<div id="sourcesettings" style="display: none">
<label class="rounded shadow" title="Enable this to get a numeric box to specify the width of the source section"><input type="checkbox" id="forcewidth">Force source section width</label>
<label class="rounded shadow" style="visibility: hidden" title="The source will be scaled to this width before getting processed (remember that the autosize flag in the generation options may still give you a different amount of pixels, disable it if you know what it does)">Forced width: <input type="number" id="sectionwidth" value="100" min="1" step="1"></label>
<label class="rounded shadow" title="Split the source in multiple columns for processing sections separately">Cols: <input type="number" id="splitcolumns" value="1" min="1" step="1"></label>
<label class="rounded shadow" title="Split the source in multiple rows for processing sections separately">Rows: <input type="number" id="splitrows" value="1" min="1" step="1"></label>
<button class="rounded shadow" id="rotateleft" title="Rotate the whole source image 90 degrees counterclockwise">Rotate left</button>
<label class="rounded shadow">Crop top: <input type="number" id="croptop" value="0" min="0" step="1"></label>
<button class="rounded shadow" id="rotateright" title="Rotate the whole source image 90 degrees clockwise">Rotate right</button>
<label class="rounded shadow">Crop left: <input type="number" id="cropleft" value="0" min="0" step="1"></label>
<label class="rounded shadow" title="Change this value to give equal cropping on all sides">Crop all: <input type="number" id="cropall" value="" min="0" step="1"></label>
<label class="rounded shadow">Crop right: <input type="number" id="cropright" value="0" min="0" step="1"></label>
<button class="rounded shadow" id="mirrorhorizontal" title="Flip the image horizontally (left-right)">Mirror horizontal</button>
<label class="rounded shadow">Crop bottom: <input type="number" id="cropbottom" value="0" min="0" step="1"></label>
<button class="rounded shadow" id="mirrorvertical" title="Flip the image vertically (top-bottom)">Mirror vertical</button>
<label class="rounded shadow" title="Insert one or more hex values for colors to convert to transparent, separate them as you better prefer. Imprecise feature, use a real image editing program for better control">Transparent colors:<br><textarea id="transparents"></textarea></label>
</div>
</div>
<div id="textareas" class="rounded shadow"></div>
<div id="placer-container"></div>
<div id="commands">
<div>Settings:</div>
<button id="export" title="Export all settings">Export</button>
<button id="import" title="Import all settings">Import</button>
<button id="reset" title="Click twice to really reset. Only resets generation settings (left-hand-side settings)">Reset?</button>
<div>Select or drag image here:</div><input type="file" id="fileSelector">
<button id="execute">Execute</button>
</div>
</div>
<div id="cover"><div id="progress"></div></div>
<div id="info-cover" class="cover" style="display: none" title="click here to close"></div>
<div id="info-content" class="cover-content rounded shadow" style="display: none">
<h2>CreatiSign Generator V3.4.2</h2>
<p>This tool lets you convert images into codes that you can put into Arc Signs in the game <a href="http://store.steampowered.com/app/280790" target="_blank">Creativerse</a>.</p>
<p>Check out the <a href="http://entuland.com/creatisprites" target="_blank"><strong>CreatiSprites Picker</strong></a> to easily choose and arrange sprites and the <a href="http://entuland.com/creaticount" target="_blank"><strong>CreatiCount Tool</strong></a> to get some help counting materials and their ingredients for your builds!</p>
<p>This generator can be very simple or very complex to use, it has a lot of settings. You can watch my <a href="https://www.twitch.tv/entuland/videos/all" target="_blank">video tutorials on Twitch</a> and you can also read this work-in-progress <a href="http://entuland.com/creatisign/guide" target="_blank">guide about Arc Sign codes</a> to get further insight about the stuff you'll be dealing with.</p>
<h2>Main usage</h2>
<p>Select the image you want to convert to CreatiSign code (or drag it onto the file selector at the bottom of this page), then alter the settings as you please and click the "Execute" button.</p>
<p>Once the yellow textareas get filled with codes copy them one at a time and paste them into Arc Signs in the game. You cannot use the mouse to paste in the game, you need to select the Arc Sign content area and use the CONTROL+V keyboard shortcut (COMMAND+V if you're on Mac).</p>
<p>Only tested in Chrome, may work in other browsers. Some settings have additional info in their tooltips (hover on them and wait a little).</p>
<h2>Right-hand-side Options (source options)</h2>
<p>Once you've loaded an image you can crop it (either using the numeric values or by click and drag in the image preview), rotate, mirror and divide it into different sections (by using the cols / rows values). You can then click on a section to select it to be processed.</p>
<p>You can also force the width of that section to a specific value: this will let you control the width of the final output only when used along with the autosize option disabled; you can also use it to reduce the resolution of the source, but it's not of great use.</p>
<p>If you want particular colors to get converted to transparent type their values (in whatever RGBA format) into the appropriate textbox, separated by a space or anything that isn't an hexadecimal digit. This is a limited feature that only works decently if you have a uniform background, and the matching will be performed against the values produced by the generation code (that is, they will be removed only if they match exactly the values that you'll get in the yellow textareas)</p>
<p>None of these options will be stored across page reloads. Refresh the page to reset them to their default values.</p>
<h2>Left-hand-side Options (generation options)</h2>
<p>These options decide how to convert the section you have chosen in the right-hand-side interface. The <a href="https://www.twitch.tv/entuland/videos/all" target="_blank">video tutorials</a> and the <a href="http://entuland.com/creatisign/guide" target="_blank">guide</a> should provide you with more info about these options.</p>
<p>These options will be stored across page reloads. Click twice on the "Reset settings?" button to get the default values back.</p>
<h2>Placement Preview Area</h2>
<p>The semiopaque square on the bottom-right corner can be hovered to enlarge it and get access to the actual placement of single Arc Signs. More instructions there, hover it and check the green box on its top.</p>
<h2>Notes / Links</h2>
<p>The image will NOT be sent to any server. You can save this page on your desktop and use it offline too, if you're concerned about that :)</p>
<p><a href="http://steamcommunity.com/app/280790/discussions/3/1479857071263583178/" target="_blank">CreatiSign Generator discussion</a> (on Steam forum), <a href="http://entuland.com/creatisign/changelog.txt" target="_blank">Changelog</a> (txt file)</p>
<p>Previous versions:
<a href="http://entuland.com/creatisign/v3.4" target="_blank">V3.4</a>,
<a href="http://entuland.com/creatisign/v3.3" target="_blank">V3.3</a>,
<a href="http://entuland.com/creatisign/v3.2" target="_blank">V3.2</a>,
<a href="http://entuland.com/creatisign/v3.1.beta" target="_blank">V3.1.BETA</a>,
<a href="http://entuland.com/creatisign/v3" target="_blank">V3</a>,
<a href="http://entuland.com/creatisign/v2.6" target="_blank">V2.6</a>,
<a href="http://entuland.com/creatisign/v2.5" target="_blank">V2.5</a>,
<a href="http://entuland.com/creatisign/v2.4" target="_blank">V2.4</a>,
<a href="http://entuland.com/creatisign/v2.3" target="_blank">V2.3</a>,
<a href="http://entuland.com/creatisign/v2.2" target="_blank">V2.2</a>,
<a href="http://entuland.com/creatisign/v2.1" target="_blank">V2.1</a>,
<a href="http://entuland.com/creatisign/v1" target="_blank">V1</a>
</p>
</div>
</body>
</html>