' +
84 | ' Colormap:
' + 86 | ' Center: ' + 87 | '
');
88 | var cmapUpdate = function() {
89 | var val = $('#cmapSelect').val();
90 | $('#cmapSelect').change(function() {
91 | updateCallback(val);
92 | });
93 | return cmaps[val];
94 | };
95 | var spinnerSlider = new SpinnerSlider({
96 | $element: $html.find('#cmapCenter'),
97 | init: 128,
98 | min: 1,
99 | sliderMax: 254,
100 | step: 1,
101 | updateCallback: updateCallback
102 | });
103 | return {
104 | html: $html,
105 | getParams: function() {
106 | return spinnerSlider.getValue();
107 | },
108 | getFilter: function() {
109 | /*eslint new-cap: 0*/
110 | return OpenSeadragon.Filters.COLORMAP(cmapUpdate(), spinnerSlider.getValue());
111 | },
112 | sync: true
113 | };
114 | }
115 | }, {
116 | name: 'Colorize',
117 | help: 'The adjustment range (strength) is from 0 to 100.' +
118 | 'The higher the value, the closer the colors in the ' +
119 | 'image shift towards the given adjustment color.' +
120 | 'Color values are between 0 to 255',
121 | generate: function(updateCallback) {
122 | var redSpinnerId = 'redSpinner-' + idIncrement;
123 | var greenSpinnerId = 'greenSpinner-' + idIncrement;
124 | var blueSpinnerId = 'blueSpinner-' + idIncrement;
125 | var strengthSpinnerId = 'strengthSpinner-' + idIncrement;
126 | /*eslint max-len: 0*/
127 | var $html = $('' + 86 | ' Center: ' + 87 | '
' +
128 | '
');
143 | var redSpinner = new Spinner({
144 | $element: $html.find('#' + redSpinnerId),
145 | init: 100,
146 | min: 0,
147 | max: 255,
148 | step: 1,
149 | updateCallback: updateCallback
150 | });
151 | var greenSpinner = new Spinner({
152 | $element: $html.find('#' + greenSpinnerId),
153 | init: 20,
154 | min: 0,
155 | max: 255,
156 | step: 1,
157 | updateCallback: updateCallback
158 | });
159 | var blueSpinner = new Spinner({
160 | $element: $html.find('#' + blueSpinnerId),
161 | init: 20,
162 | min: 0,
163 | max: 255,
164 | step: 1,
165 | updateCallback: updateCallback
166 | });
167 | var strengthSpinner = new Spinner({
168 | $element: $html.find('#' + strengthSpinnerId),
169 | init: 50,
170 | min: 0,
171 | max: 100,
172 | step: 1,
173 | updateCallback: updateCallback
174 | });
175 | return {
176 | html: $html,
177 | getParams: function() {
178 | var red = redSpinner.getValue();
179 | var green = greenSpinner.getValue();
180 | var blue = blueSpinner.getValue();
181 | var strength = strengthSpinner.getValue();
182 | return 'R: ' + red + ' G: ' + green + ' B: ' + blue +
183 | ' S: ' + strength;
184 | },
185 | getFilter: function() {
186 | var red = redSpinner.getValue();
187 | var green = greenSpinner.getValue();
188 | var blue = blueSpinner.getValue();
189 | var strength = strengthSpinner.getValue();
190 | return function(context, callback) {
191 | caman(context.canvas, function() {
192 | this.colorize(red, green, blue, strength);
193 | this.render(callback);
194 | });
195 | };
196 | }
197 | };
198 | }
199 | }, {
200 | name: 'Contrast',
201 | help: 'Range is from 0 to infinity, although sane values are from 0 ' +
202 | 'to 4 or 5. Values between 0 and 1 will lessen the contrast ' +
203 | 'while values greater than 1 will increase it.',
204 | generate: function(updateCallback) {
205 | var $html = $('');
206 | var spinnerSlider = new SpinnerSlider({
207 | $element: $html,
208 | init: 1.3,
209 | min: 0,
210 | sliderMax: 4,
211 | step: 0.1,
212 | updateCallback: updateCallback
213 | });
214 | return {
215 | html: $html,
216 | getParams: function() {
217 | return spinnerSlider.getValue();
218 | },
219 | getFilter: function() {
220 | return OpenSeadragon.Filters.CONTRAST(
221 | spinnerSlider.getValue());
222 | },
223 | sync: true
224 | };
225 | }
226 | }, {
227 | name: 'Exposure',
228 | help: 'Range is -100 to 100. Values < 0 will decrease ' +
229 | 'exposure while values > 0 will increase exposure',
230 | generate: function(updateCallback) {
231 | var $html = $('');
232 | var spinnerSlider = new SpinnerSlider({
233 | $element: $html,
234 | init: 10,
235 | min: -100,
236 | max: 100,
237 | step: 1,
238 | updateCallback: updateCallback
239 | });
240 | return {
241 | html: $html,
242 | getParams: function() {
243 | return spinnerSlider.getValue();
244 | },
245 | getFilter: function() {
246 | var value = spinnerSlider.getValue();
247 | return function(context, callback) {
248 | caman(context.canvas, function() {
249 | this.exposure(value);
250 | this.render(callback); // don't forget to call the callback.
251 | });
252 | };
253 | }
254 | };
255 | }
256 | }, {
257 | name: 'Gamma',
258 | help: 'Range is from 0 to infinity, although sane values ' +
259 | 'are from 0 to 4 or 5. Values between 0 and 1 will ' +
260 | 'lessen the contrast while values greater than 1 will increase it.',
261 | generate: function(updateCallback) {
262 | var $html = $('');
263 | var spinnerSlider = new SpinnerSlider({
264 | $element: $html,
265 | init: 0.5,
266 | min: 0,
267 | sliderMax: 5,
268 | step: 0.1,
269 | updateCallback: updateCallback
270 | });
271 | return {
272 | html: $html,
273 | getParams: function() {
274 | return spinnerSlider.getValue();
275 | },
276 | getFilter: function() {
277 | var value = spinnerSlider.getValue();
278 | return OpenSeadragon.Filters.GAMMA(value);
279 | }
280 | };
281 | }
282 | }, {
283 | name: 'Hue',
284 | help: 'hue value is between 0 to 100 representing the ' +
285 | 'percentage of Hue shift in the 0 to 360 range',
286 | generate: function(updateCallback) {
287 | var $html = $('');
288 | var spinnerSlider = new SpinnerSlider({
289 | $element: $html,
290 | init: 20,
291 | min: 0,
292 | max: 100,
293 | step: 1,
294 | updateCallback: updateCallback
295 | });
296 | return {
297 | html: $html,
298 | getParams: function() {
299 | return spinnerSlider.getValue();
300 | },
301 | getFilter: function() {
302 | var value = spinnerSlider.getValue();
303 | return function(context, callback) {
304 | caman(context.canvas, function() {
305 | this.hue(value);
306 | this.render(callback); // don't forget to call the callback.
307 | });
308 | };
309 | }
310 | };
311 | }
312 | }, {
313 | name: 'Saturation',
314 | help: 'saturation value has to be between -100 and 100',
315 | generate: function(updateCallback) {
316 | var $html = $('');
317 | var spinnerSlider = new SpinnerSlider({
318 | $element: $html,
319 | init: 50,
320 | min: -100,
321 | max: 100,
322 | step: 1,
323 | updateCallback: updateCallback
324 | });
325 | return {
326 | html: $html,
327 | getParams: function() {
328 | return spinnerSlider.getValue();
329 | },
330 | getFilter: function() {
331 | var value = spinnerSlider.getValue();
332 | return function(context, callback) {
333 | caman(context.canvas, function() {
334 | this.saturation(value);
335 | this.render(callback); // don't forget to call the callback.
336 | });
337 | };
338 | }
339 | };
340 | }
341 | }, {
342 | name: 'Vibrance',
343 | help: 'vibrance value has to be between -100 and 100',
344 | generate: function(updateCallback) {
345 | var $html = $('');
346 | var spinnerSlider = new SpinnerSlider({
347 | $element: $html,
348 | init: 50,
349 | min: -100,
350 | max: 100,
351 | step: 1,
352 | updateCallback: updateCallback
353 | });
354 | return {
355 | html: $html,
356 | getParams: function() {
357 | return spinnerSlider.getValue();
358 | },
359 | getFilter: function() {
360 | var value = spinnerSlider.getValue();
361 | return function(context, callback) {
362 | caman(context.canvas, function() {
363 | this.vibrance(value);
364 | this.render(callback); // don't forget to call the callback.
365 | });
366 | };
367 | }
368 | };
369 | }
370 | }, {
371 | name: 'Sepia',
372 | help: 'sepia value has to be between 0 and 100',
373 | generate: function(updateCallback) {
374 | var $html = $('');
375 | var spinnerSlider = new SpinnerSlider({
376 | $element: $html,
377 | init: 50,
378 | min: 0,
379 | max: 100,
380 | step: 1,
381 | updateCallback: updateCallback
382 | });
383 | return {
384 | html: $html,
385 | getParams: function() {
386 | return spinnerSlider.getValue();
387 | },
388 | getFilter: function() {
389 | var value = spinnerSlider.getValue();
390 | return function(context, callback) {
391 | caman(context.canvas, function() {
392 | this.sepia(value);
393 | this.render(callback); // don't forget to call the callback.
394 | });
395 | };
396 | }
397 | };
398 | }
399 | }, {
400 | name: 'Noise',
401 | help: 'Noise cannot be smaller than 0',
402 | generate: function(updateCallback) {
403 | var $html = $('');
404 | var spinnerSlider = new SpinnerSlider({
405 | $element: $html,
406 | init: 50,
407 | min: 0,
408 | step: 1,
409 | updateCallback: updateCallback
410 | });
411 | return {
412 | html: $html,
413 | getParams: function() {
414 | return spinnerSlider.getValue();
415 | },
416 | getFilter: function() {
417 | var value = spinnerSlider.getValue();
418 | return function(context, callback) {
419 | caman(context.canvas, function() {
420 | this.noise(value);
421 | this.render(callback); // don't forget to call the callback.
422 | });
423 | };
424 | }
425 | };
426 | }
427 | }, {
428 | name: 'Greyscale',
429 | generate: function() {
430 | return {
431 | html: '',
432 | getParams: function() {
433 | return '';
434 | },
435 | getFilter: function() {
436 | return OpenSeadragon.Filters.GREYSCALE();
437 | },
438 | sync: true
439 | };
440 | }
441 | }, {
442 | name: 'Sobel Edge',
443 | generate: function() {
444 | return {
445 | html: '',
446 | getParams: function() {
447 | return '';
448 | },
449 | getFilter: function() {
450 | return function(context, callback) {
451 | var imgData = context.getImageData(
452 | 0, 0, context.canvas.width, context.canvas.height);
453 | var pixels = imgData.data;
454 | var originalPixels = context.getImageData(0, 0, context.canvas.width, context.canvas.height).data;
455 | var oneRowOffset = context.canvas.width * 4;
456 | var onePixelOffset = 4;
457 | var Gy, Gx;
458 | var idx = 0;
459 | for (var i = 1; i < context.canvas.height - 1; i += 1) {
460 | idx = oneRowOffset * i + 4;
461 | for (var j = 1; j < context.canvas.width - 1; j += 1) {
462 | Gy = originalPixels[idx - onePixelOffset + oneRowOffset] + 2 * originalPixels[idx + oneRowOffset] + originalPixels[idx + onePixelOffset + oneRowOffset];
463 | Gy = Gy - (originalPixels[idx - onePixelOffset - oneRowOffset] + 2 * originalPixels[idx - oneRowOffset] + originalPixels[idx + onePixelOffset - oneRowOffset]);
464 | Gx = originalPixels[idx + onePixelOffset - oneRowOffset] + 2 * originalPixels[idx + onePixelOffset] + originalPixels[idx + onePixelOffset + oneRowOffset];
465 | Gx = Gx - (originalPixels[idx - onePixelOffset - oneRowOffset] + 2 * originalPixels[idx - onePixelOffset] + originalPixels[idx - onePixelOffset + oneRowOffset]);
466 | pixels[idx] = Math.sqrt(Gx * Gx + Gy * Gy); // 0.5*Math.abs(Gx) + 0.5*Math.abs(Gy);//100*Math.atan(Gy,Gx);
467 | pixels[idx + 1] = 0;
468 | pixels[idx + 2] = 0;
469 | idx += 4;
470 | }
471 | }
472 | context.putImageData(imgData, 0, 0);
473 | callback();
474 | };
475 | }
476 | };
477 | }
478 | }, {
479 | name: 'Brightness',
480 | help: 'Brightness must be between -255 (darker) and 255 (brighter).',
481 | generate: function(updateCallback) {
482 | var $html = $('');
483 | var spinnerSlider = new SpinnerSlider({
484 | $element: $html,
485 | init: 50,
486 | min: -255,
487 | max: 255,
488 | step: 1,
489 | updateCallback: updateCallback
490 | });
491 | return {
492 | html: $html,
493 | getParams: function() {
494 | return spinnerSlider.getValue();
495 | },
496 | getFilter: function() {
497 | return OpenSeadragon.Filters.BRIGHTNESS(
498 | spinnerSlider.getValue());
499 | },
500 | sync: true
501 | };
502 | }
503 | }, {
504 | name: 'Erosion',
505 | help: 'The erosion kernel size must be an odd number.',
506 | generate: function(updateCallback) {
507 | var $html = $('');
508 | var spinner = new Spinner({
509 | $element: $html,
510 | init: 3,
511 | min: 3,
512 | step: 2,
513 | updateCallback: updateCallback
514 | });
515 | return {
516 | html: $html,
517 | getParams: function() {
518 | return spinner.getValue();
519 | },
520 | getFilter: function() {
521 | return OpenSeadragon.Filters.MORPHOLOGICAL_OPERATION(
522 | spinner.getValue(), Math.min);
523 | }
524 | };
525 | }
526 | }, {
527 | name: 'Dilation',
528 | help: 'The dilation kernel size must be an odd number.',
529 | generate: function(updateCallback) {
530 | var $html = $('');
531 | var spinner = new Spinner({
532 | $element: $html,
533 | init: 3,
534 | min: 3,
535 | step: 2,
536 | updateCallback: updateCallback
537 | });
538 | return {
539 | html: $html,
540 | getParams: function() {
541 | return spinner.getValue();
542 | },
543 | getFilter: function() {
544 | return OpenSeadragon.Filters.MORPHOLOGICAL_OPERATION(
545 | spinner.getValue(), Math.max);
546 | }
547 | };
548 | }
549 | }, {
550 | name: 'Thresholding',
551 | help: 'The threshold must be between 0 and 255.',
552 | generate: function(updateCallback) {
553 | var $html = $('');
554 | var spinnerSlider = new SpinnerSlider({
555 | $element: $html,
556 | init: 127,
557 | min: 0,
558 | max: 255,
559 | step: 1,
560 | updateCallback: updateCallback
561 | });
562 | return {
563 | html: $html,
564 | getParams: function() {
565 | return spinnerSlider.getValue();
566 | },
567 | getFilter: function() {
568 | return OpenSeadragon.Filters.THRESHOLDING(
569 | spinnerSlider.getValue());
570 | },
571 | sync: true
572 | };
573 | }
574 | }];
575 | availableFilters.sort(function(f1, f2) {
576 | return f1.name.localeCompare(f2.name);
577 | });
578 |
579 | var idIncrement = 0;
580 | var hashTable = {};
581 |
582 | availableFilters.forEach(function(filter) {
583 | var $li = $('');
584 | var $plus = $('' +
129 | '
' +
142 | '' +
130 | ' Red: ' +
131 | '
' +
132 | ' ' +
133 | ' Green: ' +
134 | '
' +
135 | ' ' +
136 | ' Blue: ' +
137 | '
' +
138 | ' ' +
139 | ' Strength: ' +
140 | '
' +
141 | '
');
585 | $li.append($plus);
586 | $li.append(filter.name);
587 | $li.appendTo($('#available'));
588 | $plus.click(function() {
589 | var id = 'selected_' + idIncrement++;
590 | var generatedFilter = filter.generate(updateFilters);
591 | hashTable[id] = {
592 | name: filter.name,
593 | generatedFilter: generatedFilter
594 | };
595 | var $li = $('
' + filter.name + '
');
599 | if (filter.help) {
600 | var $help = $('