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
|
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Orienta|Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
font-family: 'Roboto', sans-serif;
}
.title{
font-family: 'Orienta', sans-serif;
font-size:3em;
text-shadow: 2px 4px 3px rgba(153,153,153,0.3);
color: #1C1C1C;
}
#sample
{
border-style: outset;
border-color: gray;
border-width: 5px;
}
table.dithertable {
border-width: 5px;
border-spacing: 3px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: rgb(250, 240, 230);
}
table.dithertable th {
border-width: medium;
padding: 2px;
border-style: ridge;
border-color: gray;
background-color: rgb(255, 255, 240);
-moz-border-radius: ;
}
table.dithertable td {
border-width: medium;
padding: 2px;
border-style: ridge;
border-color: gray;
background-color: rgb(255, 255, 240);
-moz-border-radius: ;
background-color:white;
}
.patterns
{
width:10px;
height:10px;
cursor:pointer;
}
#dithertable
{
width:50%;
display:inline-block;
}
tr
{
height:40px;
}
.dontshowme{
display: none;
}
</style>
</head>
<body>
<div id="imdither">
<img src="img/impattern.png"/>
</div>
<div id="step1">
Step 1: Choose your dither
</div>
<table class="dithertable" id="dithertable">
<tr>
<td class='patterns' style='background-image:url(patterns/1.png)' id='dither_1'> </td>
<td class='patterns' style='background-image:url(patterns/10.png)' id='dither_10'> </td>
<td class='patterns' style='background-image:url(patterns/11.png)' id='dither_11'></td>
<td class='patterns' style='background-image:url(patterns/12.png)' id='dither_12'></td>
<td class='patterns' style='background-image:url(patterns/13.png)' id='dither_13'></td>
<td class='patterns' style='background-image:url(patterns/14.png)' id='dither_14'></td>
<td class='patterns' style='background-image:url(patterns/15.png)' id='dither_15'></td>
<td class='patterns' style='background-image:url(patterns/16.png)' id='dither_16'></td>
<td class='patterns' style='background-image:url(patterns/17.png)' id='dither_17'></td>
<td class='patterns' style='background-image:url(patterns/18.png)' id='dither_18'></td>
<td class='patterns' style='background-image:url(patterns/19.png)' id='dither_19'></td>
<td class='patterns' style='background-image:url(patterns/2.png)' id='dither_2'></td>
<td class='patterns' style='background-image:url(patterns/20.png)' id='dither_20'></td>
<td class='patterns' style='background-image:url(patterns/21.png)' id='dither_21'></td>
<td class='patterns' style='background-image:url(patterns/22.png)' id='dither_22'></td>
<td class='patterns' style='background-image:url(patterns/23.png)' id='dither_23'></td>
<td class='patterns' style='background-image:url(patterns/24.png)' id='dither_24'></td>
<td class='patterns' style='background-image:url(patterns/25.png)' id='dither_25'></td>
<td class='patterns' style='background-image:url(patterns/26.png)' id='dither_26'></td>
<td class='patterns' style='background-image:url(patterns/27.png)' id='dither_27'></td>
<td class='patterns' style='background-image:url(patterns/28.png)' id='dither_28'></td>
<td class='patterns' style='background-image:url(patterns/29.png)' id='dither_29'></td>
<td class='patterns' style='background-image:url(patterns/3.png)' id='dither_3'></td>
<td class='patterns' style='background-image:url(patterns/30.png)' id='dither_30'></td>
</tr>
<tr>
<td class='patterns' style='background-image:url(patterns/31.png)' id='dither_31'></td>
<td class='patterns' style='background-image:url(patterns/32.png)' id='dither_32'></td>
<td class='patterns' style='background-image:url(patterns/33.png)' id='dither_33'></td>
<td class='patterns' style='background-image:url(patterns/34.png)' id='dither_34'></td>
<td class='patterns' style='background-image:url(patterns/35.png)' id='dither_35'></td>
<td class='patterns' style='background-image:url(patterns/36.png)' id='dither_36'></td>
<td class='patterns' style='background-image:url(patterns/37.png)' id='dither_37'></td>
<td class='patterns' style='background-image:url(patterns/38.png)' id='dither_38'></td>
<td class='patterns' style='background-image:url(patterns/39.png)' id='dither_39'></td>
<td class='patterns' style='background-image:url(patterns/4.png)' id='dither_4'></td>
<td class='patterns' style='background-image:url(patterns/40.png)' id='dither_40'></td>
<td class='patterns' style='background-image:url(patterns/41.png)' id='dither_41'></td>
<td class='patterns' style='background-image:url(patterns/42.png)' id='dither_42'></td>
<td class='patterns' style='background-image:url(patterns/43.png)' id='dither_43'></td>
<td class='patterns' style='background-image:url(patterns/44.png)' id='dither_44'></td>
<td class='patterns' style='background-image:url(patterns/45.png)' id='dither_45'></td>
<td class='patterns' style='background-image:url(patterns/46.png)' id='dither_46'></td>
<td class='patterns' style='background-image:url(patterns/47.png)' id='dither_47'></td>
<td class='patterns' style='background-image:url(patterns/48.png)' id='dither_48'></td>
<td class='patterns' style='background-image:url(patterns/49.png)' id='dither_49'></td>
<td class='patterns' style='background-image:url(patterns/5.png)' id='dither_5'></td>
<td class='patterns' style='background-image:url(patterns/50.png)' id='dither_50'></td>
<td class='patterns' style='background-image:url(patterns/51.png)' id='dither_51'></td>
<td class='patterns' style='background-image:url(patterns/52.png)' id='dither_52'></td>
</tr>
<tr>
<td class='patterns' style='background-image:url(patterns/53.png)' id='dither_53'></td>
<td class='patterns' style='background-image:url(patterns/54.png)' id='dither_54'></td>
<td class='patterns' style='background-image:url(patterns/55.png)' id='dither_55'></td>
<td class='patterns' style='background-image:url(patterns/56.png)' id='dither_56'></td>
<td class='patterns' style='background-image:url(patterns/57.png)' id='dither_57'></td>
<td class='patterns' style='background-image:url(patterns/58.png)' id='dither_58'></td>
<td class='patterns' style='background-image:url(patterns/59.png)' id='dither_59'></td>
<td class='patterns' style='background-image:url(patterns/6.png)' id='dither_6'></td>
<td class='patterns' style='background-image:url(patterns/60.png)' id='dither_60'></td>
<td class='patterns' style='background-image:url(patterns/61.png)' id='dither_61'></td>
<td class='patterns' style='background-image:url(patterns/62.png)' id='dither_62'></td>
<td class='patterns' style='background-image:url(patterns/63.png)' id='dither_63'></td>
<td class='patterns' style='background-image:url(patterns/64.png)' id='dither_64'></td>
<td class='patterns' style='background-image:url(patterns/65.png)' id='dither_65'></td>
<td class='patterns' style='background-image:url(patterns/66.png)' id='dither_66'></td>
<td class='patterns' style='background-image:url(patterns/67.png)' id='dither_67'></td>
<td class='patterns' style='background-image:url(patterns/68.png)' id='dither_68'></td>
<td class='patterns' style='background-image:url(patterns/69.png)' id='dither_69'></td>
<td class='patterns' style='background-image:url(patterns/7.png)' id='dither_7'></td>
<td class='patterns' style='background-image:url(patterns/70.png)' id='dither_70'></td>
<td class='patterns' style='background-image:url(patterns/71.png)' id='dither_71'></td>
<td class='patterns' style='background-image:url(patterns/72.png)' id='dither_72'></td>
<td class='patterns' style='background-image:url(patterns/73.png)' id='dither_73'></td>
<td class='patterns' style='background-image:url(patterns/74.png)' id='dither_74'></td>
</tr>
<tr>
<td class='patterns' style='background-image:url(patterns/75.png)' id='dither_75'></td>
<td class='patterns' style='background-image:url(patterns/76.png)' id='dither_76'></td>
<td class='patterns' style='background-image:url(patterns/77.png)' id='dither_77'></td>
<td class='patterns' style='background-image:url(patterns/78.png)' id='dither_78'></td>
<td class='patterns' style='background-image:url(patterns/79.png)' id='dither_79'></td>
<td class='patterns' style='background-image:url(patterns/8.png)' id='dither_8'></td>
<td class='patterns' style='background-image:url(patterns/80.png)' id='dither_80'></td>
<td class='patterns' style='background-image:url(patterns/81.png)' id='dither_81'></td>
<td class='patterns' style='background-image:url(patterns/82.png)' id='dither_82'></td>
<td class='patterns' style='background-image:url(patterns/83.png)' id='dither_83'></td>
<td class='patterns' style='background-image:url(patterns/84.png)' id='dither_84'></td>
<td class='patterns' style='background-image:url(patterns/85.png)' id='dither_85'></td>
<td class='patterns' style='background-image:url(patterns/86.png)' id='dither_86'></td>
<td class='patterns' style='background-image:url(patterns/87.png)' id='dither_87'></td>
<td class='patterns' style='background-image:url(patterns/88.png)' id='dither_88'></td>
<td class='patterns' style='background-image:url(patterns/89.png)' id='dither_89'></td>
<td class='patterns' style='background-image:url(patterns/9.png)' id='dither_9'></td>
<td class='patterns' style='background-image:url(patterns/90.png)' id='dither_90'></td>
<td class='patterns' style='background-image:url(patterns/91.png)' id='dither_91'></td>
<td class='patterns' style='background-image:url(patterns/92.png)' id='dither_92'></td>
<td class='patterns' style='background-image:url(patterns/93.png)' id='dither_93'></td>
<td class='patterns' style='background-image:url(patterns/94.png)' id='dither_94'></td>
<td class='patterns' style='background-image:url(patterns/95.png)' id='dither_95'></td>
<td class='patterns' style='background-image:url(patterns/96.png)' id='dither_96'></td>
</tr>
<tr>
<td class='patterns' style='background-image:url(patterns/a0.png)' id='dither_a0'></td>
<td class='patterns' style='background-image:url(patterns/a1.png)' id='dither_a1'></td>
<td class='patterns' style='background-image:url(patterns/a10.png)' id='dither_a10'></td>
<td class='patterns' style='background-image:url(patterns/a11.png)' id='dither_a11'></td>
<td class='patterns' style='background-image:url(patterns/a12.png)' id='dither_a12'></td>
<td class='patterns' style='background-image:url(patterns/a13.png)' id='dither_a13'></td>
<td class='patterns' style='background-image:url(patterns/a14.png)' id='dither_a14'></td>
<td class='patterns' style='background-image:url(patterns/a15.png)' id='dither_a15'></td>
<td class='patterns' style='background-image:url(patterns/a16.png)' id='dither_a16'></td>
<td class='patterns' style='background-image:url(patterns/a17.png)' id='dither_a17'></td>
<td class='patterns' style='background-image:url(patterns/a18.png)' id='dither_a18'></td>
<td class='patterns' style='background-image:url(patterns/a19.png)' id='dither_a19'></td>
<td class='patterns' style='background-image:url(patterns/a2.png)' id='dither_a2'></td>
<td class='patterns' style='background-image:url(patterns/a20.png)' id='dither_a20'></td>
<td class='patterns' style='background-image:url(patterns/a21.png)' id='dither_a21'></td>
<td class='patterns' style='background-image:url(patterns/a22.png)' id='dither_a22'></td>
<td class='patterns' style='background-image:url(patterns/a23.png)' id='dither_a23'></td>
<td class='patterns' style='background-image:url(patterns/a24.png)' id='dither_a24'></td>
<td class='patterns' style='background-image:url(patterns/a25.png)' id='dither_a25'></td>
<td class='patterns' style='background-image:url(patterns/a26.png)' id='dither_a26'></td>
<td class='patterns' style='background-image:url(patterns/a27.png)' id='dither_a27'></td>
<td class='patterns' style='background-image:url(patterns/a28.png)' id='dither_a28'></td>
<td class='patterns' style='background-image:url(patterns/a29.png)' id='dither_a29'></td>
<td class='patterns' style='background-image:url(patterns/a3.png)' id='dither_a3'></td>
</tr>
<tr>
<td class='patterns' style='background-image:url(patterns/a30.png)' id='dither_a30'></td>
<td class='patterns' style='background-image:url(patterns/a31.png)' id='dither_a31'></td>
<td class='patterns' style='background-image:url(patterns/a32.png)' id='dither_a32'></td>
<td class='patterns' style='background-image:url(patterns/a33.png)' id='dither_a33'></td>
<td class='patterns' style='background-image:url(patterns/a34.png)' id='dither_a34'></td>
<td class='patterns' style='background-image:url(patterns/a35.png)' id='dither_a35'></td>
<td class='patterns' style='background-image:url(patterns/a36.png)' id='dither_a36'></td>
<td class='patterns' style='background-image:url(patterns/a37.png)' id='dither_a37'></td>
<td class='patterns' style='background-image:url(patterns/a38.png)' id='dither_a38'></td>
<td class='patterns' style='background-image:url(patterns/a39.png)' id='dither_a39'></td>
<td class='patterns' style='background-image:url(patterns/a4.png)' id='dither_a4'></td>
<td class='patterns' style='background-image:url(patterns/a40.png)' id='dither_a40'></td>
<td class='patterns' style='background-image:url(patterns/a41.png)' id='dither_a41'></td>
<td class='patterns' style='background-image:url(patterns/a5.png)' id='dither_a5'></td>
<td class='patterns' style='background-image:url(patterns/a6.png)' id='dither_a6'></td>
<td class='patterns' style='background-image:url(patterns/a7.png)' id='dither_a7'></td>
<td class='patterns' style='background-image:url(patterns/a8.png)' id='dither_a8'></td>
<td class='patterns' style='background-image:url(patterns/a9.png)' id='dither_a9'></td>
</tr>
</table>
<div id="sample">
</div>
</br>
<span class="parameter">Image to overlay:</span><input type="text/css" class="image_input" value="Enter an image url here"></input>
<span class="parameter">Or Upload</span><input type="text/css" class="image_input" value="Enter an image url here"></input>
</br><span class="uploadError dontshowme unsubmitted"></span>
<button id="submit">SUBMIT</button>
<div class="processing dontshowme"></div>
<div class="result dontshowme"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="Math.uuid.js"></script>
<script type="text/javascript">
function makesample(){
theheight = $('#dithertable').height()
$('#sample').css({'width':"20%",'height':theheight,'display':'inline-block'})
}
makesample()
var preview_box = $("#sample")
$('.patterns').click(function(){
$('.patterns').css({'border-color':'gray','-moz-box-shadow': 'none','-webkit-box-shadow':'none','box-shadow': 'none'});
$(this).css({'border-color':'#EE0000','-moz-box-shadow': '0px 0px 9px 3px firebrick','-webkit-box-shadow':'0px 0px 9px 3px firebrick','box-shadow': '0px 0px 9px 3px firebrick'})
var dither = $(this).css("background-image");
preview_box.css("background-image", dither);
});
$(".image_input").clicked = false;
$(".image_input").click(function(){
if(! $(this).clicked){
$(this).attr("value", "");
$(this).clicked = true;
}
})
function showResult(src){
img = document.createElement("img");
img.src = src;
document.body.appendChild(img);
}
$("#submit").click(function(){
var unique_id = Math.uuid(5,10).toString + "_imdither";
if (! $(".uploadError").hasClass("dontshowme") ){
$(".uploadError").addClass("dontshowme")
}
var image_url = $(".image_input").val()
if (! image_url || image_url == "Enter an image url here"){
uploadError = $(".uploadError")
uploadError.html("you didn't provide an image url")
uploadError.removeClass("dontshowme")
return false;
}
$.ajax({
type: "POST",
url: "process",
data: {
url: image_url,
unique_id: unique_id
}
}).done(function( data ) {
console.log( "Data Saved: " + data );
showResult(data);
});
})
</script>
</body>
</html>
|
