-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
278 lines (275 loc) · 30 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="google-site-verification" content="liKZbDqIRDY0LvJpfxZh3mEFp6NKFKMlzk-RbaYhzjw" />
<meta name="author" content="Edgar Alexander Franco" />
<meta name="description" content="Convert your hand-drawings into transparent images online!" />
<meta name="keywords" content="draw2png, draw, 2, png, edgar, alexander, franco, navasquez, edgaralexanderfr, github, git, github.io, software, program, hand-drawing, hand-drawings, hand, hands, drawing, drawings, digitize, transparent, transparency, alpha, channel, opacity, opaque, web, app, application, online, favourite, favourites, favorite, favorites, client-side, client, side, scan, scanned, scanning, jpg, jpeg, svg, gif, bmp, image, images, convert, convertion, process, processing, preview, replace, replacement, brightness, sprite, sprites, sketch, sketches, design, designs, designed, videogame, videogames, video, videos, games, tablet, tablets, wacom, intuos, programa, hecho, mano, manos, dibujo, dibujos, digitizar, digitalizar, transparente, transparencia, alfa, canal, opacidad, opaco, red, aplicacion, en-linea, linea, favorito, favoritos, lado-cliente, lado, cliente, escaneo, escaneado, escaneando, imagen, imagenes, convertir, conversion, proceso, procesamiento, previsualizacion, reemplazar, reemplazamiento, brillo, duende, duendes, diseno, disenos, disenado, videojuego, videojuegos, video, videos, juegos, tableta, tabletas" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#399ed1">
<meta name="og:url" content="https://edgaralexanderfr.github.io/draw2png/" />
<meta name="og:title" content="Draw2PNG" />
<meta name="og:description" content="Convert your hand-drawings into transparent images online!" />
<meta name="og:site_name" content="Edgar Alexander Franco" />
<meta name="og:image" content="https://edgaralexanderfr.github.io/draw2png/res/img/logo.jpg" />
<meta name="og:type" content="product" />
<meta name="og:locale:alternate" content="en_US" />
<meta name="og:locale:alternate" content="es_LA" />
<link rel="shortcut icon" href="res/img/favicon.ico" />
<link rel="icon" sizes="192x192" href="res/img/logo-chrome.jpg">
<link type="text/css" rel="stylesheet" href="res/lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="res/lib/bootstrap-colorpicker-master/dist/css/bootstrap-colorpicker.min.css" />
<link type="text/css" rel="stylesheet" href="res/lib/slider/css/slider.css" />
<link type="text/css" rel="stylesheet" href="res/css/app.css" />
<link type="text/css" rel="stylesheet" href="res/css/appWindow.css" />
<link type="text/css" rel="stylesheet" href="res/css/helpWindow.css" />
<script type="text/javascript" src="res/lib/jquery-1.11.3/jquery.min.js"></script>
<!--
You can uncomment every single source for development purposes.
Order is important and is the same we have to keep for compiling
when calling gulp task 'compile-core' in _./gulpfile.js_:
-->
<!--<script type="text/javascript" src="res/js/Draw2PNG/src/functions/toElementLocalCoords.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/functions/extend.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/functions/openLink.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/functions/downloadFile.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/functions/inArray.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/functions/removeFileNameExtension.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/functions/setCookie.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/functions/getCookie.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/functions/deleteCookie.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/classes/Language.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/Color.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/Pixmap.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/Filter.js"></script>
<script type="text/javascript" src="res/js/Draw2PNG/src/ColorToleranceFilter.js"></script>-->
<script type="text/javascript" src="res/js/Draw2PNG/dist/Draw2PNG.min.js"></script>
<script type="text/javascript" src="res/js/controllers/index.js"></script>
<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-71617690-2', 'auto');
ga('send', 'pageview');
</script>
<!--[if lt IE 9]>
<script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title data-langTextName="t1">Draw2PNG v1.3.1</title>
</head>
<body>
<!-- helpWindow -->
<div class="appWindowBackground"></div>
<div id="helpWindowContainer" class="appWindowContainer">
<div class="appWindow">
<div class="modal-header">
<button id="helpWindowCloseButton" class="bootbox-close-button close" aria-hidden="true">×</button>
</div>
<div class="appWindowContent">
<div class="helpWindowCenteredItem">
<img class="helpWindowLogo" src="res/img/rounded-logo.png" width="100" height="100" alt="Draw2PNG" />
</div>
<div class="helpWindowCenteredItem helpWindowTitle" data-langTextName="t2"><span>Draw2PNG v1.3.1</div>
<div class="helpWindowCenteredItem helpWindowTitle"><a href="https://github.com/edgaralexanderfr/draw2png/releases/latest" target="_blank">CHANGELOG</a></div>
<p class="helpWindowParagraph" data-langTextName="t3"><span class="helpWindowHighlight">Draw2PNG</span> is a tool you can use to <span class="helpWindowHighlight">extract the outline from your scanned drawing</span>, improve it, change its color and more!</p>
<p class="helpWindowParagraph" data-langTextName="t4">This application was originally intended to digitize sprites for videogames made by hand drawing, since drawing <span class="helpWindowHighlight">tablets could be quite expensive</span> for some people (like me), usually I scanned the drawing, and then I used it as a guide layer in softwares like <span class="helpWindowHighlight">Adobe Photoshop©</span> in order to create the definitive <span class="helpWindowHighlight">transparent</span> drawing stroking it with the mouse, however, it was something really toilsome.</p>
<p class="helpWindowParagraph" data-langTextName="t5">Sounds interesting, isn't it...? so, let's get started then!</p>
<p class="helpWindowParagraph" data-langTextName="t6">First off, keep in mind that you can select a <span class="helpWindowHighlight">language</span> from your preference, by now, the only languages that my application supports are <span class="helpWindowHighlight">English</span> and <span class="helpWindowHighlight">Spanish</span>, you can easily setup that by clicking the <span class="helpWindowHighlight">Idioma/Language</span> tab and then selecting your prefered language.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-1.jpg" width="480" height="270" alt="Help step 1" />
</p>
<p class="helpWindowParagraph" data-langTextName="t7">Once you feel comfortable with your interface language, you can proceed to digitize your first drawing. There are two ways to <span class="helpWindowHighlight">import</span> your desired drawing to the application, the first one could be done by clicking the <span class="helpWindowHighlight">File</span> tab and then selecting the <span class="helpWindowHighlight">Open</span> option.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-2.jpg" width="480" height="270" alt="Help step 2" />
</p>
<p class="helpWindowParagraph" data-langTextName="t8">A <span class="helpWindowHighlight">file selection dialog</span> will be displayed and you can import your drawing from there. The second way is by <span class="helpWindowHighlight">dragging and dropping</span> your drawing to the application.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-3.jpg" width="480" height="270" alt="Help step 3" />
</p>
<p class="helpWindowParagraph" data-langTextName="t9">You can import any of the following image types: <span class="helpWindowHighlight">PNG, JPEG, SVG, GIF and BMP</span>, depending on the file size of your image, the application will take some time to read it and show it on the interface. There are two key windows in the application, the left one shows your <span class="helpWindowHighlight">original drawing on its original size</span>, if you move your cursor above the original image you can see that your cursor is now an <span class="helpWindowHighlight">eyedropper</span>, it means that if you click any part from the original image, it will set the color tolerance from your clicked pixel within the original canvas.</p>
<p class="helpWindowParagraph" data-langTextName="t10">On the other hand we have the <span class="helpWindowHighlight">output image window</span> at the right, this is the window where the drawing outline will be shown, usually scaled at the original image size.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-4.jpg" width="480" height="270" alt="Help step 4" />
</p>
<p class="helpWindowParagraph" data-langTextName="t11">On the top panel, there are several parameters you can adjust in order to obtain your desired output, they are <span class="helpWindowHighlight">Color Tolerance</span>, <span class="helpWindowHighlight">Output Color</span> and <span class="helpWindowHighlight">Background Color</span>. The <span class="helpWindowHighlight">Color Tolerance</span> is the max color that the application will considerate when scanning the input drawing, it means that all the pixels bellow or equal the adjusted color tolerance will be kept in the output and the rest will be processed as background colors.</p>
<p class="helpWindowParagraph" data-langTextName="t12">The <span class="helpWindowHighlight">Output Color</span> is the color replacement that all the matched colors (lower/equal than tolerance) in the scanning will have while the <span class="helpWindowHighlight">Background Color</span> is the opposite, basically the output drawing will consist only of two colors. If the <span class="helpWindowHighlight">Allow output color option</span> is not ticked, then the output color will be ignored and the result will keep the original matched color in the final image.</p>
<p class="helpWindowParagraph" data-langTextName="t13">Once you've adjusted your desired parameters, you have to click on the <span class="helpWindowHighlight">Process button</span> in order to see your output image. Keep in mind that for an optimal scanning, your drawing should be marked as dark as possible so the program can easily extract the outline with more precision, this process works very like the <span class="helpWindowHighlight">chroma key</span>, but in a simpler way. You can keep repeating this process by re-adjusting your parameters until you get a satisfactory result, remember that the <span class="helpWindowHighlight">Color Tolerance Slider tool</span> (right next to the color tolerance) makes things easier.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-5.jpg" width="480" height="270" alt="Help step 5" />
</p>
<p class="helpWindowParagraph" data-langTextName="t14">Sometimes the output outline with its original color is not so dark enough as expected, you can adjust your output image brightness by using the <span class="helpWindowHighlight">Brightness Slider Tool</span> (right next to the Background color) in order to give it a better look.</p>
<p class="helpWindowParagraph" data-langTextName="t15">If you wish so, you can click on the <span class="helpWindowHighlight">Preview in new window button</span> to open the processed image in a new tab/window. Since zooming in mobile devices is not possible, this is the only way you can do it ATM for small images.</p>
<p class="helpWindowParagraph" data-langTextName="t16">You can also control the <span class="helpWindowHighlight">zoom</span> from both windows by pressing the <span class="helpWindowHighlight">Z</span> key. While pressing <span class="helpWindowHighlight">Z</span> you can use your <span class="helpWindowHighlight">mouse wheel</span> for zoom in or zoom out, you can also use the <span class="helpWindowHighlight">I</span> and <span class="helpWindowHighlight">O</span> keys for zoom respectively while holding <span class="helpWindowHighlight">Z</span> and if you press <span class="helpWindowHighlight">R</span>, the zoom will be reset to its original size.</p>
<p class="helpWindowParagraph" data-langTextName="t17">The zoom will be applied to a specific window depending on where your cursor is, for example, if your cursor is above the original drawing window, then the zoom is going to be applied only for that window, with the output image window happens the same thing. If your cursor is not above any window, then the zoom will be applied to both, this behavior is present while using the <span class="helpWindowHighlight">I</span>, <span class="helpWindowHighlight">O</span> and <span class="helpWindowHighlight">R</span> keys also.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-6.jpg" width="480" height="270" alt="Help step 6" />
</p>
<p class="helpWindowParagraph" data-langTextName="t18">Once you feel comfortable with your output, you can proceed to <span class="helpWindowHighlight">export</span> it. You can export your image in <span class="helpWindowHighlight">PNG</span> or <span class="helpWindowHighlight">JPEG</span> format by clicking <span class="helpWindowHighlight">File</span> and selecting your desired image type to export.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-7.jpg" width="480" height="270" alt="Help step 7" />
</p>
<p class="helpWindowParagraph" data-langTextName="t19">An <span class="helpWindowHighlight">input dialog</span> will prompt a request for the name of the file to export in either case, just provide the name that you want and the browser will download the file.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-8.jpg" width="480" height="270" alt="Help step 8" />
</p>
<p class="helpWindowParagraph" data-langTextName="t20">Be aware that <span class="helpWindowHighlight">some browsers don't support downloading files (like Opera)</span>, since they don't implement the <span class="helpWindowHighlight">Blob</span> and <span class="helpWindowHighlight">window.URL JavaScript APIs</span> required for the application, hence nothing happens once you press <span class="helpWindowHighlight">ENTER</span> or click <span class="helpWindowHighlight">OK</span> in the input dialog. You can fix this problem depending on which browser you're using, for example, <span class="helpWindowHighlight">some browsers allow you to download images through the context menu</span> by right clicking the desired image (like chrome), but again, this really depends on the browser capability and is only a partial solution.</p>
<p class="helpWindowCenteredItem">
<img class="helpWindowImage" src="res/img/help-step-9.jpg" width="480" height="270" alt="Help step 9" />
</p>
<p class="helpWindowParagraph" data-langTextName="t21">The only version of <span class="helpWindowHighlight">Safari</span> I've tested is the elder <span class="helpWindowHighlight">5.1.7 from 2012 on Windows</span>, and <span class="helpWindowHighlight">importing files is not possible since it doesn't supports the FileReader JavaScript class</span>. With <span class="helpWindowHighlight">Internet Explorer</span>... well... guess... it looks awful since it has <span class="helpWindowHighlight">problems rendering the canvas within a scroll frame</span> and it <span class="helpWindowHighlight">doesn't get the image data correctly</span>. So the most optimal browsers I suggest you to use are <span class="helpWindowHighlight">Google Chrome, Mozilla Firefox, Android and Opera Browser</span> (if you dare to seek how to export the image).</p>
<p class="helpWindowParagraph" data-langTextName="t22">Despite that, is not perfect, like everything, but if you're in <span class="helpWindowHighlight">Chrome</span> (and I hope you do!) you will get the best experience, trust me, this app is intended for digitizing <span class="helpWindowHighlight">simple drawings</span>, and you can remove imperfections using softwares like <span class="helpWindowHighlight">Adobe Photoshop©</span> and using the <span class="helpWindowHighlight">eraser tool</span> (that's what I do). Then, you can <span class="helpWindowHighlight">paint it</span> and do whatever you want with it, if you have any question, don't hesitate to contact with me :)</p>
<p class="helpWindowCenteredItem">
<a href="http://edgaralexanderfr.com/" target="_blank">edgaralexanderfr.com</a>
</p>
</div>
</div>
</div>
<!-- /helpWindow -->
<!-- dropFileMessage -->
<div id="dropFileMessage"></div>
<!-- /dropFileMessage -->
<input id="fileInput" type="file" />
<!-- appPanel -->
<nav class="navbar navbar-default" id="appPanel">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menubar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menubar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-hdd"></span> <span data-langTextName="t23">File</span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="openFileLink" href="#"><span class="glyphicon glyphicon-open-file"></span> <span data-langTextName="t24">Open</span></a></li>
<li role="separator" class="divider"></li>
<li><a id="exportAsPngLink" href="#"><span class="glyphicon glyphicon-export"></span> <span data-langTextName="t25">Export as PNG</span></a></li>
<li><a id="exportAsJpegLink" href="#"><span class="glyphicon glyphicon-export"></span> <span data-langTextName="t26">Export as JPEG</span></a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-globe"></span> <span data-langTextName="t27">Idioma</span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="englishLangLink" href="#" data-langTextName="t28">English</a></li>
<li><a id="spanishLangLink" href="#" data-langTextName="t29">Español</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-picture"></span> <span data-langTextName="t66">Image</span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="enableInstantProcessingLink" href="#"><span class="glyphicon glyphicon-ok-circle"></span> <span data-langTextName="t67">Enable instant processing</span></a></li>
<li><a id="disableInstantProcessingLink" href="#"><span class="glyphicon glyphicon-remove-circle"></span> <span data-langTextName="t68">Disable instant processing</span></a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-eye-open"></span> <span data-langTextName="t54">View</span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="zoomInAllLink" href="#" data-toggle="tooltip" data-langTextName="t58" data-langTextTarget="data-original-title" title="Z + WHEEL/I"><span class="glyphicon glyphicon-zoom-in"></span> <span data-langTextName="t55">Zoom in all</span></a></li>
<li><a id="zoomOutAllLink" href="#" data-toggle="tooltip" data-langTextName="t59" data-langTextTarget="data-original-title" title="Z + WHEEL/O"><span class="glyphicon glyphicon-zoom-out"></span> <span data-langTextName="t56">Zoom out all</span></a></li>
<li><a id="resetAllZoomLink" href="#" data-toggle="tooltip" title="Z + R"><span class="glyphicon glyphicon-eye-close"></span> <span data-langTextName="t57">Reset all</span></a></li>
<li role="separator" class="divider"></li>
<li><a id="zoomInOriginalLink" href="#" data-toggle="tooltip" data-langTextName="t58" data-langTextTarget="data-original-title" title="Z + WHEEL/I"><span class="glyphicon glyphicon-zoom-in"></span> <span data-langTextName="t60">Zoom in original</span></a></li>
<li><a id="zoomOutOriginalLink" href="#" data-toggle="tooltip" data-langTextName="t59" data-langTextTarget="data-original-title" title="Z + WHEEL/O"><span class="glyphicon glyphicon-zoom-out"></span> <span data-langTextName="t61">Zoom out original</span></a></li>
<li><a id="resetOriginalZoomLink" href="#" data-toggle="tooltip" title="Z + R"><span class="glyphicon glyphicon-eye-close"></span> <span data-langTextName="t62">Reset original</span></a></li>
<li role="separator" class="divider"></li>
<li><a id="zoomInResultLink" href="#" data-toggle="tooltip" data-langTextName="t58" data-langTextTarget="data-original-title" title="Z + WHEEL/I"><span class="glyphicon glyphicon-zoom-in"></span> <span data-langTextName="t63">Zoom in result</span></a></li>
<li><a id="zoomOutResultLink" href="#" data-toggle="tooltip" data-langTextName="t59" data-langTextTarget="data-original-title" title="Z + WHEEL/O"><span class="glyphicon glyphicon-zoom-out"></span> <span data-langTextName="t64">Zoom out result</span></a></li>
<li><a id="resetResultZoomLink" href="#" data-toggle="tooltip" title="Z + R"><span class="glyphicon glyphicon-eye-close"></span> <span data-langTextName="t65">Reset result</span></a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-question-sign"></span> <span data-langTextName="t30">Help</span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="manualLink" href="#" data-toggle="tooltip" title="H"><span class="glyphicon glyphicon-book"></span> <span data-langTextName="t31">Manual</span></a></li>
<li role="separator" class="divider"></li>
<li><a id="githubLink" href="https://github.com/edgaralexanderfr/draw2png" target="_blank"><span class="glyphicon glyphicon-console"></span> Fork me on GitHub</a></li>
<li><a id="authorWebsiteLink" href="http://edgaralexanderfr.com/" target="_blank" data-toggle="tooltip" title="edgaralexanderfr.com"><span class="glyphicon glyphicon-link"></span> <span data-langTextName="t32">Author website</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- appPanelControllers -->
<div class="container-fluid appPanelControllers">
<div class="row">
<div class="col-md-3 col-sm-12 appPanelControllersCol"><label data-langTextName="t33">Color tolerance:</label></div>
<div class="col-md-2 col-sm-6 appPanelControllersCol">
<div id="colorTolerancePicker" class="input-group colorpicker-component">
<input type="text" value="#808080" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<div class="col-md-2 col-sm-6 appPanelControllersCol">
<input id="colorToleranceSlider" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="50" />
</div>
<div class="col-md-2 col-sm-12 appPanelControllersCol"><label for="outputColorCheckbox" data-langTextName="t34">Output color:</label></div>
<div class="col-md-1 col-sm-6 appPanelControllersCol">
<input id="outputColorCheckbox" type="checkbox" data-toggle="tooltip" data-langTextName="t35" data-langTextTarget="data-original-title" title="Allow custom output color" checked />
</div>
<div class="col-md-2 col-sm-6 appPanelControllersCol">
<div id="outputColorPicker" class="input-group colorpicker-component">
<input type="text" value="#000000" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-12 appPanelControllersCol"><label data-langTextName="t36">Background color:</label></div>
<div class="col-md-2 col-sm-12 appPanelControllersCol">
<div id="backgroundColorPicker" class="input-group colorpicker-component">
<input type="text" value="#ffffff" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<div class="col-md-1 col-sm-6 appPanelControllersCol" data-toggle="tooltip" data-langTextName="t37" data-langTextTarget="data-original-title" title="Adjust output brightness"><label data-langTextName="t38">Brightness:</label></div>
<div class="col-md-3 col-sm-6 appPanelControllersCol">
<input id="brightnessSlider" type="text" class="span2" value="" data-slider-min="-100" data-slider-max="100" data-slider-value="0" />
</div>
<div class="col-md-1 col-sm-12 appPanelControllersCol">
<button id="processButton" type="button" class="btn btn-default"><span class="glyphicon glyphicon-picture"></span> <span data-langTextName="t39">Process</span></button>
</div>
<div class="col-md-3 col-sm-12 appPanelControllersCol">
<button id="previewInNewTabButton" type="button" class="btn btn-default"><span class="glyphicon glyphicon-new-window"></span> <span data-langTextName="t40">Preview in new tab</span></button>
</div>
</div>
</div>
<!-- /appPanelControllers -->
</nav>
<!-- /appPanel -->
<!-- displayWindowsContainer -->
<div class="container-fluid" id="displayWindowsContainer">
<div class="row displayWindowsContainerRow">
<div id="originalImageWindow" class="col-md-6 col-xs-6 displayWindow" data-toggle="tooltip" data-langTextName="t41" data-langTextTarget="data-original-title" title="Z + WHEEL/I/O/R TO ZOOM">
<canvas id="originalImageCanvas" width="128" height="128" data-langTextName="t42">Your browser doesn't support HTML5 canvas.</canvas>
</div>
<div id="processedImageWindow" class="col-md-6 col-xs-6 displayWindow" data-toggle="tooltip" data-langTextName="t43" data-langTextTarget="data-original-title" title="Z + WHEEL/I/O/R TO ZOOM">
<canvas id="outputImageCanvas" width="128" height="128" data-langTextName="t44">Your browser doesn't support HTML5 canvas.</canvas>
</div>
</div>
</div>
<!-- /displayWindowsContainer -->
<!-- /ui messages -->
<input data-langTextName="t45" data-langTextTarget="value" type="hidden" value="You need to provide one file at least." />
<input data-langTextName="t46" data-langTextTarget="value" type="hidden" value="You can only import valid image files." />
<input data-langTextName="t47" data-langTextTarget="value" type="hidden" value="An error has occurred while opening the provided file." />
<input data-langTextName="t48" data-langTextTarget="value" type="hidden" value="The image you provided couldn't be loaded." />
<input data-langTextName="t49" data-langTextTarget="value" type="hidden" value="An unknown error has occurred: The selected file couldn't be opened." />
<input data-langTextName="t50" data-langTextTarget="value" type="hidden" value="Save JPEG Image as:" />
<input data-langTextName="t51" data-langTextTarget="value" type="hidden" value="Save PNG Image as:" />
<input data-langTextName="t52" data-langTextTarget="value" type="hidden" value=" outlined" />
<input data-langTextName="t53" data-langTextTarget="value" type="hidden" value="New outline" />
<!-- /ui messages -->
<script src="res/lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="res/lib/bootstrap-colorpicker-master/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="res/lib/slider/js/bootstrap-slider.js"></script>
<script src="res/lib/bootbox/bootbox.min.js"></script>
</body>
</html>