| blob | ef648f67727ffee464e7940df841b007c3c1adb8 |
1 (function($) {
3 var PE = PixasticEditor;
5 PE.UI.data = {
6 tabs : [
7 {
8 title : "Reshape",
9 id : "reshape",
10 actions : [
11 {
12 title : "Resize",
13 id : "resize",
14 isAction : true,
15 controls : [
16 {
17 type : "output",
18 content : "Enter new dimensions below."
19 },
20 {
21 label : "Width",
22 labelRight : "px",
23 option : "width",
24 type : "number",
25 range : [1,10000],
26 step : 1,
27 defaultValue : function() { return PE.getImageWidth(); },
28 ui : "text"
29 },
30 {
31 label : "Height",
32 labelRight : "px",
33 option : "height",
34 type : "number",
35 range : [1,10000],
36 step : 1,
37 defaultValue : function() { return PE.getImageHeight(); },
38 ui : "text"
39 }
40 ]
41 },
42 {
43 title : "Crop",
44 id : "crop",
45 isAction : true,
46 controls : [
47 {
48 type : "output",
49 content : "Enter new crop values below or use mouse to select crop area."
50 },
51 {
52 label : "X",
53 labelRight : "px",
54 option : "left",
55 type : "number",
56 range : [0,10000],
57 step : 1,
58 defaultValue : 0,
59 ui : "text"
60 },
61 {
62 label : "Y",
63 labelRight : "px",
64 option : "top",
65 type : "number",
66 range : [0,10000],
67 step : 1,
68 defaultValue : 0,
69 ui : "text"
70 },
71 {
72 label : "Width",
73 labelRight : "px",
74 option : "width",
75 type : "number",
76 range : [1,10000],
77 step : 1,
78 defaultValue : function() { return PE.getImageWidth(); },
79 ui : "text"
80 },
81 {
82 label : "Height",
83 labelRight : "px",
84 option : "height",
85 type : "number",
86 range : [1,10000],
87 step : 1,
88 defaultValue : function() { return PE.getImageHeight(); },
89 ui : "text"
90 }
91 ],
92 onactivate : function() {
93 var $canvas = PE.getDisplayCanvas();
94 var onchange = function(c) {
95 var doc = PE.getDocument();
96 $j("#input-numeric-crop-left", doc).val(c.x).change();
97 $j("#input-numeric-crop-top", doc).val(c.y).change();
98 $j("#input-numeric-crop-width", doc).val(c.w).change();
99 $j("#input-numeric-crop-height", doc).val(c.h).change();
100 $j("#input-hidden-crop-left", doc).val(c.x).change();
101 $j("#input-hidden-crop-top", doc).val(c.y).change();
102 $j("#input-hidden-crop-width", doc).val(c.w).change();
103 $j("#input-hidden-crop-height", doc).val(c.h).change();
104 }
105 $canvas.data("Jcrop-onchange", onchange);
106 $canvas.Jcrop({onChange:onchange}, PE.getDocument());
107 },
108 ondeactivate : function() {
109 var $canvas = PE.getDisplayCanvas();
110 if ($canvas.data("Jcrop") && $canvas.data("Jcrop").destroy)
111 $canvas.data("Jcrop").destroy();
112 },
113 onafteraction : function(action, isPreview) {
114 action.ondeactivate();
115 action.onactivate();
116 /*
117 var $canvas = PE.getDisplayCanvas();
118 if ($canvas.data("Jcrop") && $canvas.data("Jcrop").destroy)
119 $canvas.data("Jcrop").destroy();
120 var onchange = $canvas.data("Jcrop-onchange");
121 $canvas.Jcrop({onChange:onchange});
122 */
123 }
124 },
125 {
126 title : "Rotate",
127 id : "rotate",
128 isAction : true,
129 preview : true,
130 forcePreview : true,
131 controls : [
132 {
133 type : "output",
134 content : "Enter the angle (-180° to 180°) you want to rotate the picture. Use negative values for clockwise rotation, positive for counterclockwise."
135 },
136 {
137 label : "Angle",
138 labelRight : "°",
139 option : "angle",
140 type : "number",
141 range : [-180,180],
142 step : 1,
143 defaultValue : 0,
144 ui : "text"
145 }
146 ],
147 onactivate : function() {
148 var doc = PE.getDocument();
149 var $displayCanvas = PE.getDisplayCanvas();
150 var dim = Math.min($displayCanvas.attr("height"), 200);
151 var $canvas = $j("<canvas></canvas>", doc);
152 PE.getOverlay().append($canvas);
154 $canvas.attr("width", dim);
155 $canvas.attr("height", dim);
156 $canvas.width(dim);
157 $canvas.height(dim);
159 $canvas.css("marginTop", (($displayCanvas.attr("height") - dim) * 0.5) + "px");
161 var lineWidth = 20;
162 var radius = dim/2 - lineWidth;
163 if (radius < 1) radius = 1;
165 var ctx = $canvas.get(0).getContext("2d");
166 ctx.beginPath()
167 ctx.arc(dim/2, dim/2, radius, 0, Math.PI*2, true);
168 ctx.closePath();
169 ctx.fillStyle = "rgba(200,200,200,0.2)";
170 ctx.fill();
171 ctx.strokeStyle = "rgba(200,200,200,0.5)";
172 ctx.lineWidth = 20;
173 ctx.stroke();
175 $j("#image-area", doc).css("cursor", "move");
177 $overlay = PE.getOverlay();
179 $canvas.get(0).ondragstart = function() {return false;}
180 $canvas.get(0).onselectstart = function() {return false;}
182 var mx = 0, my = 0;
183 var startMouseAngle = 0;
184 var startAngle = 0;
185 var deltaAngle = 0;
186 var angle = 0;
188 var mouseIsDown = false;
189 var onmousedown = function(e) {
190 mouseIsDown = true;
191 var offset = $displayCanvas.offset();
192 mx = (e.pageX - offset.left) - $displayCanvas.attr("width")*0.5;
193 my = (e.pageY - offset.top) - $displayCanvas.attr("height")*0.5;
194 startMouseAngle = Math.atan2(my, mx);
195 startAngle = parseInt($j("#input-numeric-rotate-angle", doc).val(), 10) * Math.PI / 180;
196 }
197 var onmousemove = function(e) {
198 if (!mouseIsDown) return;
200 var offset = $displayCanvas.offset();
201 mx = (e.pageX - offset.left) - $displayCanvas.attr("width")*0.5;
202 my = (e.pageY - offset.top) - $displayCanvas.attr("height")*0.5;
203 deltaAngle = Math.atan2(my, mx) - startMouseAngle;
204 angle = startAngle - deltaAngle;
205 if (angle < -Math.PI) angle += 2*Math.PI;
206 if (angle > Math.PI) angle -= 2*Math.PI;
207 $j("#input-numeric-rotate-angle", doc).val(Math.round(angle * 180 / Math.PI));
208 $j("#input-numeric-rotate-angle", doc).change();
209 }
210 var onmouseup = function() {
211 mouseIsDown = false;
212 }
214 $j("#image-area", doc).bind("mousedown", onmousedown);
215 $j("#image-area", doc).bind("mousemove", onmousemove);
216 $j("#image-area", doc).bind("mouseup", onmouseup);
217 $canvas.data("onmousedown", onmousedown);
218 $canvas.data("onmousemove", onmousemove);
219 $canvas.data("onmouseup", onmouseup);
220 $displayCanvas.data("rotateCanvas", $canvas);
221 },
222 ondeactivate : function() {
223 var doc = PE.getDocument();
224 var $displayCanvas = PE.getDisplayCanvas();
225 $overlay = PE.getOverlay();
226 $j("#image-area", doc).css("cursor", "default");
228 var $canvas = $displayCanvas.data("rotateCanvas");
230 $j("#image-area", doc).unbind("mousedown", $canvas.data("onmousedown"));
231 $j("#image-area", doc).unbind("mousemove", $canvas.data("onmousemove"));
232 $j("#image-area", doc).unbind("mouseup", $canvas.data("onmouseup"));
233 $displayCanvas.removeData("rotateCanvas");
234 $canvas.remove();
235 },
236 onafteraction : function(action, isPreview) {
237 if (!isPreview) { // rebuild the rotate widget
238 action.ondeactivate();
239 action.onactivate();
240 }
241 },
242 onoverlayupdate : function() {
243 var $canvas = PE.getDisplayCanvas().data("rotateCanvas");
244 if ($canvas) {
245 $canvas.css("marginTop", ((PE.getDisplayCanvas().get(0).height - $canvas.get(0).height) * 0.5) + "px");
246 }
247 }
248 },
249 {
250 title : "Flip",
251 id : "flip",
252 isAction : true,
253 controls : [
254 {
255 label : "Axis",
256 option : "axis",
257 type : "string",
258 values : [
259 {name:"Horizontal", value:"horizontal"},
260 {name:"Vertical", value:"vertical"}
261 ],
262 defaultValue : "vertical",
263 ui : "select"
264 }
265 ]
266 }
267 ]
268 },
269 {
270 title : "Develop",
271 id : "develop",
272 actions : [
273 {
274 title : "Brightness & Contrast",
275 id : "brightness",
276 isAction : true,
277 preview : true,
278 controls : [
279 {
280 type : "output",
281 content : "Use the sliders below to adjust the brightness and/or contrast of the image."
282 },
283 {
284 label : "Brightness",
285 option : "brightness",
286 type : "number",
287 range : [-100,100],
288 defaultValue : 0,
289 ui : "slider",
290 step : 1
291 },
292 {
293 label : "Contrast",
294 option : "contrast",
295 type : "number",
296 range : [-1,1],
297 defaultValue : 0,
298 ui : "slider",
299 step : 0.01
300 },
301 {
302 label : "Legacy mode",
303 option : "legacy",
304 type : "boolean",
305 defaultValue : false,
306 ui : "checkbox"
307 }
308 ]
309 },
310 {
311 title : "Hue/Saturation/Lightness",
312 id : "hsl",
313 isAction : true,
314 preview : true,
315 controls : [
316 {
317 type : "output",
318 content : "Use the sliders below to adjust the hue, saturation and/or lightness of the image."
319 },
320 {
321 label : "Hue",
322 option : "hue",
323 type : "number",
324 range : [-180,180],
325 defaultValue : 0,
326 ui : "slider",
327 step : 1
328 },
329 {
330 label : "Saturation",
331 option : "saturation",
332 type : "number",
333 range : [-100,100],
334 defaultValue : 0,
335 ui : "slider",
336 step : 1
337 },
338 {
339 label : "Lightness",
340 option : "lightness",
341 type : "number",
342 range : [-100,100],
343 defaultValue : 0,
344 ui : "slider",
345 step : 1
346 }
347 ]
348 },
349 {
350 title : "Adjust colors",
351 id : "coloradjust",
352 isAction : true,
353 preview : true,
354 controls : [
355 {
356 type : "output",
357 content : "Use the sliders below to shift the R, G and B channels of the image."
358 },
359 {
360 label : "Red",
361 option : "red",
362 type : "number",
363 range : [-1,1],
364 defaultValue : 0,
365 ui : "slider",
366 step : 0.01
367 },
368 {
369 label : "Green",
370 option : "green",
371 type : "number",
372 range : [-1,1],
373 defaultValue : 0,
374 ui : "slider",
375 step : 0.01
376 },
377 {
378 label : "Blue",
379 option : "blue",
380 type : "number",
381 range : [-1,1],
382 defaultValue : 0,
383 ui : "slider",
384 step : 0.01
385 }
386 ]
387 },
388 {
389 title : "Desaturate",
390 id : "desaturate",
391 isAction : true,
392 preview : true,
393 controls : [
394 {
395 type : "output",
396 content : "This will desaturate the image. Select \"Use average\" to use the average value of the R, G and B channels rather than the default mix of 30% red, 59% green and 11% blue."
397 },
398 {
399 label : "Use average",
400 option : "average",
401 type : "boolean",
402 defaultValue : false,
403 ui : "checkbox"
404 }
405 ]
406 },
407 {
408 title : "Sepia toning",
409 id : "sepia",
410 isAction : true,
411 preview : true,
412 controls : [
413 {
414 type : "output",
415 content : "Applies a sepia toning effect to the image."
416 }
417 ]
418 },
419 {
420 title : "Invert",
421 id : "invert",
422 isAction : true,
423 preview : true,
424 controls : [
425 {
426 type : "output",
427 content : "This will invert the colors of the image."
428 }
429 ]
430 },
431 {
432 title : "Lighten",
433 id : "lighten",
434 isAction : true,
435 preview : true,
436 controls : [
437 {
438 type : "output",
439 content : "Use the slider below to lighten or darken the image."
440 },
441 {
442 label : "Amount",
443 option : "amount",
444 type : "number",
445 range : [-1,1],
446 defaultValue : 0,
447 ui : "slider",
448 step : 0.01
449 }
450 ]
451 },
452 {
453 title : "Unsharp mask",
454 id : "unsharpmask",
455 isAction : true,
456 preview : true,
457 controls : [
458 {
459 type : "output",
460 content : "Use the sliders below to adjust the unsharp mask parameters."
461 },
462 {
463 label : "Amount",
464 option : "amount",
465 type : "number",
466 range : [0,500],
467 defaultValue : 200,
468 ui : "slider",
469 step : 2
470 },
471 {
472 label : "Radius",
473 option : "radius",
474 type : "number",
475 range : [0,5],
476 defaultValue : 2,
477 ui : "slider",
478 step : 0.1
479 },
480 {
481 label : "Threshold",
482 option : "amount",
483 type : "number",
484 range : [0,255],
485 defaultValue : 25,
486 ui : "slider",
487 step : 1
488 }
489 ]
490 }
492 ]
493 },
494 {
495 title : "Effects",
496 id : "effects",
497 actions : [
498 {
499 title : "Blur",
500 id : "blurfast",
501 isAction : true,
502 preview : true,
503 controls : [
504 {
505 type : "output",
506 content : "Use the slider to set the blur amount."
507 },
508 {
509 label : "Amount",
510 option : "amount",
511 type : "number",
512 range : [0,1],
513 defaultValue : 0.5,
514 ui : "slider",
515 step : 0.01
516 }
517 ]
519 },
520 {
521 title : "Edge detection",
522 id : "edges",
523 isAction : true,
524 preview : true,
525 controls : [
526 {
527 type : "output",
528 content : "Performs edge detection on the image."
529 },
530 {
531 label : "Greyscale",
532 option : "mono",
533 type : "boolean",
534 defaultValue : false,
535 ui : "checkbox"
536 },
537 {
538 label : "Invert",
539 option : "invert",
540 type : "boolean",
541 defaultValue : false,
542 ui : "checkbox"
543 }
544 ]
545 },
546 {
547 title : "Emboss",
548 id : "emboss",
549 isAction : true,
550 preview : true,
551 controls : [
552 {
553 type : "output",
554 content : "Adds an emboss-like effect to the image. Use the controls below to control the appearance of the effect. Choose \"Blend\" to blend the effect with the original image."
555 },
556 {
557 label : "Strength",
558 option : "strength",
559 type : "number",
560 range : [0,10],
561 defaultValue : 1,
562 ui : "slider",
563 step : 0.1
564 },
565 {
566 label : "Grey level",
567 option : "greyLevel",
568 type : "number",
569 range : [0,255],
570 defaultValue : 180,
571 ui : "slider",
572 step : 1
573 },
574 {
575 label : "Direction",
576 option : "direction",
577 type : "string",
578 values : [
579 {name:"Top left", value:"topleft"},
580 {name:"Top", value:"top"},
581 {name:"Top right", value:"topright"},
582 {name:"Right", value:"right"},
583 {name:"Bottom right", value:"bottomright"},
584 {name:"Bottom", value:"bottom"},
585 {name:"Bottom left", value:"bottomleft"},
586 {name:"Left", value:"left"}
587 ],
588 defaultValue : "topleft",
589 ui : "select"
590 },
591 {
592 label : "Blend",
593 option : "blend",
594 type : "boolean",
595 defaultValue : false,
596 ui : "checkbox"
597 }
598 ]
600 },
601 {
602 title : "Glow",
603 id : "glow",
604 isAction : true,
605 preview : true,
606 controls : [
607 {
608 type : "output",
609 content : "Creates a glowing effect on the image."
610 },
611 {
612 label : "Amount",
613 option : "amount",
614 type : "number",
615 range : [0,1],
616 defaultValue : 0.5,
617 ui : "slider",
618 step : 0.01
619 },
620 {
621 label : "Radius",
622 option : "radius",
623 type : "number",
624 range : [0,1],
625 defaultValue : 0.5,
626 ui : "slider",
627 step : 0.01
628 }
629 ]
630 },
631 {
632 title : "Add noise",
633 id : "noise",
634 isAction : true,
635 preview : true,
636 controls : [
637 {
638 type : "output",
639 content : "Add random noise to the image."
640 },
641 {
642 label : "Amount",
643 option : "amount",
644 type : "number",
645 range : [0,1],
646 defaultValue : 0.5,
647 ui : "slider",
648 step : 0.01
649 },
650 {
651 label : "Strength",
652 option : "strength",
653 type : "number",
654 range : [0,1],
655 defaultValue : 0.5,
656 ui : "slider",
657 step : 0.01
658 },
659 {
660 label : "Greyscale",
661 option : "mono",
662 type : "boolean",
663 defaultValue : false,
664 ui : "checkbox"
665 }
666 ]
667 },
668 {
669 title : "Remove noise",
670 id : "removenoise",
671 isAction : true,
672 preview : true,
673 controls : [
674 {
675 type : "output",
676 content : "Attempts to remove noise from the image. Works best for getting rid of single pixels that stand out."
677 }
678 ]
679 },
680 {
681 title : "Pointillize",
682 id : "pointillize",
683 isAction : true,
684 preview : true,
685 controls : [
686 {
687 type : "output",
688 content : "Paints the picture with circular points."
689 },
690 {
691 label : "Point radius",
692 option : "radius",
693 type : "number",
694 range : [1,50],
695 defaultValue : 5,
696 ui : "slider",
697 step : 1
698 },
699 {
700 label : "Density",
701 option : "density",
702 type : "number",
703 range : [0,5],
704 defaultValue : 1,
705 ui : "slider",
706 step : 0.01
707 },
708 {
709 label : "Noise",
710 option : "noise",
711 type : "number",
712 range : [0,2],
713 defaultValue : 1,
714 ui : "slider",
715 step : 0.01
716 },
717 {
718 label : "Transparent",
719 option : "transparent",
720 type : "boolean",
721 defaultValue : false,
722 ui : "checkbox"
723 }
724 ]
725 },
726 {
727 title : "Posterize",
728 id : "posterize",
729 isAction : true,
730 preview : true,
731 controls : [
732 {
733 type : "output",
734 content : "Reduces the number of colours to a specified number of levels."
735 },
736 {
737 label : "Levels",
738 option : "levels",
739 type : "number",
740 range : [1,32],
741 defaultValue : 5,
742 ui : "slider",
743 step : 1
744 }
745 ]
746 },
747 {
748 title : "Solarize",
749 id : "solarize",
750 isAction : true,
751 preview : true,
752 controls : [
753 {
754 type : "output",
755 content : "Applies a solarize effect to the image."
756 }
757 ]
758 },
759 {
760 title : "Mosaic",
761 id : "mosaic",
762 isAction : true,
763 preview : true,
764 controls : [
765 {
766 type : "output",
767 content : "Creates a pixelated look."
768 },
769 {
770 label : "Block size",
771 option : "blockSize",
772 type : "number",
773 range : [1,100],
774 defaultValue : 5,
775 ui : "slider",
776 step : 1
777 }
778 ]
779 }
782 ]
783 },
784 {
785 title : "Done",
786 id : "done",
787 actions : [
788 {
789 title : "Save to page",
790 id : "savepage",
791 content : function($ctr) {
792 var doc = PE.getDocument();
793 $j("<div></div>", doc)
794 .addClass("action-output-text")
795 .html("This will save the image to the page.")
796 .appendTo($ctr);
798 var $buttonCtr = $j("<div></div>", doc).appendTo($ctr);
799 var $saveButton = $j("<button></button>", doc)
800 .html("Save image")
801 .appendTo($buttonCtr)
802 .click(function() {
803 PE.saveToPage();
804 });
806 }
807 },
808 {
809 title : "Save to file",
810 id : "savefile",
811 content : function(ctr) {
812 var doc = PE.getDocument();
813 $j("<div></div>", doc)
814 .addClass("action-output-text")
815 .html("This will save the image to your local computer.")
816 .appendTo(ctr);
818 var formats = PE.validSaveFormats();
820 var selectHtml = "<select>";
821 for (var i=0;i<formats.length;i++) {
822 selectHtml += "<option value='" + formats[i].mime + "'>" + formats[i].name + "</option>";
823 }
824 selectHtml += "</select>";
826 var selectCtr = $j("<div></div>", doc)
827 .addClass("ui-select-container");
830 var label = $j("<div></div>", doc)
831 .addClass("ui-select-label")
832 .html("Format:")
833 .appendTo(selectCtr);
835 var formatSelect = $j(selectHtml, doc).appendTo(selectCtr);
838 selectCtr.appendTo(ctr);
840 var buttonCtr = $j("<div></div>", doc).appendTo(ctr);
841 var saveButton = $j("<button></button>", doc)
842 .html("Save file")
843 .appendTo(buttonCtr)
845 saveButton.click(function() {
846 var selectElement = formatSelect.get(0);
847 var formatMime = selectElement.options[selectElement.selectedIndex].value;
848 var dataString = PE.getDataURI(formatMime);
850 var dialog = $j("<div></div>", doc)
851 .attr("id", "save-dialog")
852 .attr("title", "Download file")
853 .html(
854 "Right click the link below and select \"Save as...\" to save your file.<br/>"
855 + "<br/>"
856 + "<a href=\"" + dataString + "\">Image Link</a>"
857 )
858 .dialog();
860 // the dialog is added outside the Pixastic container, so get it back in.
861 var dialogParent = $j(dialog.get(0).parentNode);
862 $j("#pixastic-editor", doc).append(dialogParent);
863 });
864 }
865 },
866 /*
867 {
868 title : "Upload to Flickr",
869 id : "flickrupload",
870 content : function($ctr) {
871 var doc = PE.getDocument();
873 function flickrAuthed() {
874 var $text = $j("<div />", doc)
875 .addClass("action-output-text")
876 .html("Authorized as: " + PE.Flickr.getAuthName());
878 var $buttonCtr = $j("<div></div>", doc);
879 var $uploadButton = $j("<button></button>", doc)
880 .html("Upload image")
881 .appendTo($buttonCtr)
883 $uploadButton.click(function() {
884 PE.Flickr.uploadImage(PE.getDataURI());
885 });
887 $ctr.append($text, $buttonCtr);
888 }
890 var $authCtr = $j("<div />", doc).appendTo($ctr);
892 $j("<div />", doc)
893 .addClass("action-output-text")
894 .html("If you have a Flickr account you can now upload your image to Flickr. You will need to give access to your account first. Click the button below to open an authorization window.")
895 .appendTo($authCtr);
897 var $buttonCtr = $j("<div></div>", doc).appendTo($authCtr);
898 var $authButton = $j("<button></button>", doc)
899 .html("Authenticate")
900 .appendTo($buttonCtr)
902 var checkButtonAdded = false;
903 $authButton.click(function() {
904 PE.Flickr.auth();
905 if (!checkButtonAdded) {
906 checkButtonAdded = true;
908 var $text = $j("<div />", doc)
909 .addClass("action-output-text")
910 .html("Now click the button below when you have authorized access to your Flickr account.");
912 var $buttonCtr = $j("<div></div>", doc);
914 $authCtr.append($text, $buttonCtr);
916 var $checkButton = $j("<button></button>", doc)
917 .html("I have authenticated!")
918 .appendTo($buttonCtr);
920 $checkButton.click(function() {
921 PE.Flickr.checkAuth(function(res) {
922 if (res.stat == "ok") {
923 $authCtr.remove();
924 flickrAuthed();
925 }
926 });
927 });
928 }
930 });
931 }
932 },
933 */
934 {
935 title : "Quit",
936 id : "quit",
937 content : function(ctr) {
938 var doc = PE.getDocument();
940 $j("<div>Are you sure you want to quit?</div>", doc)
941 .addClass("action-output-text")
942 .appendTo(ctr);
943 var $buttonCtr = $j("<div></div>", doc).appendTo(ctr);
945 var $quitButton = PE.UI.makeButton("Yes, quit now!")
946 .appendTo($buttonCtr)
948 $quitButton.click(function() {
949 PE.unload();
950 });
952 var $saveButton = PE.UI.makeButton("Save to page and quit")
953 .appendTo($buttonCtr)
954 .click(function() {
955 PE.saveToPage();
956 PE.unload();
957 });
958 }
959 }
960 ]
961 }
962 ]
963 };
966 })(PixasticEditor.jQuery);