ui.ts
4.57 KB
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
import {QuantizationUsage} from "./usage";
var quantizeResult = null;
export function initialize() {
document.body.ondrop = event=> {
event.preventDefault();
var files = event.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
processDrag(files[ i ]);
}
//readfiles(event.dataTransfer.files);
console.log(event);
};
document.body.ondragover = event=> {
event.preventDefault();
};
}
export function update(quantize : boolean) {
if (quantize) {
var imageFoldersControl = (<webix.ui.grouplist>$$("image"));
var selectedId = imageFoldersControl.getSelectedId(true);
if (selectedId.length > 0) {
var node = imageFoldersControl.getItemNode(selectedId[ 0 ]);
if (node) {
var img : HTMLImageElement = (<any>node).firstElementChild;
if (img.tagName === "IMG") {
var colors = parseInt((<webix.ui.richselect>$$("option-colors")).getValue(), 10),
paletteQuantizerMethod = parseInt((<webix.ui.richselect>$$("option-palette")).getValue(), 10),
imageQuantizerMethod = parseInt((<webix.ui.richselect>$$("option-image")).getValue(), 10) - 2,
colorDistanceMethod = parseInt((<webix.ui.richselect>$$("option-distance")).getValue(), 10);
quantizeResult = (new QuantizationUsage()).quantize(img, colors, paletteQuantizerMethod, imageQuantizerMethod, colorDistanceMethod);
}
}
}
}
if (quantizeResult) {
fillClickToCompare(quantizeResult);
fillOriginalVsQuantized(quantizeResult);
}
}
function fillOriginalVsQuantized(result) {
var prefix = "id-imageView2-";
// CLEANUP
//container.innerHTML = "";
$$("imageView2-statistics").getNode().firstElementChild.innerHTML = " (SSIM: " + result.ssim.toFixed(2) + ", Time: " + result.time + " )";
// DRAW ORIGINAL IMAGE
var canvas = QuantizationUsage.drawPixels(result.original, result.original.getWidth());
canvas.id = prefix + "original-image";
canvas.className = "image-semi-transparent-background";
//canvas.style.display = "none";
var container = $$("imageView2-image-original").getNode().firstElementChild;
container.innerHTML = "";
container.appendChild(canvas);
// DRAW REDUCED/DITHERED IMAGE
canvas = QuantizationUsage.drawPixels(result.image, result.image.getWidth());
canvas.id = prefix + "reduced-image";
canvas.className = "image-semi-transparent-background";
container = $$("imageView2-image-quantized").getNode().firstElementChild;
container.innerHTML = "";
container.appendChild(canvas);
// DRAW PALETTE
canvas = QuantizationUsage.drawPixels(result.palette.getPointContainer(), 16, 128);
container = $$("imageView2-palette").getNode().firstElementChild;
container.innerHTML = "";
container.appendChild(canvas);
}
function fillClickToCompare(result) {
var prefix = "id-imageView2-";
// CLEANUP
$$("imageView1-statistics").getNode().firstElementChild.innerHTML = " (SSIM: " + result.ssim.toFixed(2) + ", Time: " + result.time + " )";
// DRAW ORIGINAL IMAGE
var canvasOriginal = QuantizationUsage.drawPixels(result.original, result.original.getWidth());
canvasOriginal.id = prefix + "original-image";
canvasOriginal.className = "image-semi-transparent-background";
canvasOriginal.style.display = "none";
var container = $$("imageView1-image").getNode().firstElementChild;
container.innerHTML = "";
container.appendChild(canvasOriginal);
// DRAW REDUCED/DITHERED IMAGE
var canvasReduced = QuantizationUsage.drawPixels(result.image, result.image.getWidth());
canvasReduced.id = prefix + "reduced-image";
canvasReduced.className = "image-semi-transparent-background";
container = $$("imageView1-image").getNode().firstElementChild;
container.appendChild(canvasReduced);
// Add Container handlers
container.onmousedown = () => {
canvasOriginal.style.display = "";
canvasReduced.style.display = "none";
};
container.onmouseup = () => {
canvasOriginal.style.display = "none";
canvasReduced.style.display = "";
};
// DRAW PALETTE
var canvasPalette = QuantizationUsage.drawPixels(result.palette.getPointContainer(), 16, 128);
container = $$("imageView1-palette").getNode().firstElementChild;
container.innerHTML = "";
container.appendChild(canvasPalette);
}
function processDrag(file) {
var reader = new FileReader();
reader.onload = function (event) {
(<webix.ui.grouplist>$$("image")).add({
id : 'image-' + file.name,
dataUrl : (<any>event.target).result
});
};
reader.readAsDataURL(file);
}