Skip to content

Commit e58c0b5

Browse files
mfbx9da4mfbx9da4
committed
fixing minor UI
1 parent 3e4f787 commit e58c0b5

File tree

4 files changed

+241
-203
lines changed

4 files changed

+241
-203
lines changed

‎SeamCarver.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ class SeamCarver {
108108

109109
var p = this.picture; // Just to make it more readable ...
110110

111-
// TODO: Should include self in this calculation
111+
// TODO: Could include self in this calculation
112112
var score = Math.sqrt(
113113
(p[pos_xpost+RED] - p[pos_xant+RED]) *(p[pos_xpost+RED] - p[pos_xant+RED]) +
114114
(p[pos_xpost+GREEN] - p[pos_xant+GREEN])*(p[pos_xpost+GREEN] - p[pos_xant+GREEN]) +
@@ -292,7 +292,6 @@ class SeamCarver {
292292
var deletedCol = vseam[row];
293293
var affectedCols = [];
294294

295-
// TODO: check this covers all cases (up, down, left, right)
296295
for (var i = -1; i < 1; i ++) {
297296
var col = deletedCol + i;
298297

@@ -352,7 +351,6 @@ class SeamCarver {
352351
if (row === 0) continue;
353352

354353
// Only enqueue the children if the vminsum has changed
355-
// TODO: verify this assumption
356354
if (oldVminsum === this.minsumMatrix[col][row]) continue;
357355

358356
// enqueue three affected children from row above

‎demo/javascript/build/bundle.js

Lines changed: 115 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ class SeamCarver {
109109

110110
var p = this.picture; // Just to make it more readable ...
111111

112-
// TODO: Should include self in this calculation
112+
// TODO: Could include self in this calculation
113113
var score = Math.sqrt(
114114
(p[pos_xpost+RED] - p[pos_xant+RED]) *(p[pos_xpost+RED] - p[pos_xant+RED]) +
115115
(p[pos_xpost+GREEN] - p[pos_xant+GREEN])*(p[pos_xpost+GREEN] - p[pos_xant+GREEN]) +
@@ -293,7 +293,6 @@ class SeamCarver {
293293
var deletedCol = vseam[row];
294294
var affectedCols = [];
295295

296-
// TODO: check this covers all cases (up, down, left, right)
297296
for (var i = -1; i < 1; i ++) {
298297
var col = deletedCol + i;
299298

@@ -353,7 +352,6 @@ class SeamCarver {
353352
if (row === 0) continue;
354353

355354
// Only enqueue the children if the vminsum has changed
356-
// TODO: verify this assumption
357355
if (oldVminsum === this.minsumMatrix[col][row]) continue;
358356

359357
// enqueue three affected children from row above
@@ -507,145 +505,173 @@ var key = require('keymaster');
507505
window.demo = {};
508506
var demo = window.demo;
509507
demo.config = {
510-
draw: {
511-
field: 'rgb',
512-
actualSize: true
513-
},
514-
seamColor: "#32cd32",
515-
autoIterate: false,
516-
iterationState: 0
508+
draw: {
509+
field: 'rgb',
510+
actualSize: true
511+
},
512+
seamColor: "#32cd32",
513+
autoIterate: false,
514+
images: [
515+
'images/chameleon.png',
516+
'images/3x4.png',
517+
'images/6x5.png',
518+
'images/12x10.png',
519+
'images/70x70.png',
520+
'images/200x100.png',
521+
'images/casa-de-madeira.jpg',
522+
'images/HJocean.png',
523+
'images/IMG_4445.jpg',
524+
'images/white_building_in_field_by_mslash67.jpg',
525+
'images/butterfly.png',
526+
'images/1000x300.jpg',
527+
'images/1000x500.jpg',
528+
'images/1600x1200.jpg',
529+
'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fchameleon.png',
530+
'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fbutterfly.jpg',
531+
'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fbamboo.jpg',
532+
'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fanimals.jpg'
533+
]
517534
};
535+
demo.iteration = 0;
518536
demo.image = new Image();
519537
demo.canvas = document.querySelector('canvas.image');
538+
demo.selectImage = document.querySelector('#select-image');
520539
demo.currentSeam = [];
540+
521541
demo.findSeam = function (ctx) {
522-
demo.currentSeam = demo.smc.findVerticalSeam();
523-
// draw vertical seam
524-
for (var y = 0; y < demo.currentSeam.length; y ++) {
525-
var x = demo.currentSeam[y];
526-
demo.ctx.fillStyle = demo.config.seamColor;
527-
demo.ctx.fillRect(x, y, 1, 1);
528-
}
529-
return demo.currentSeam;
542+
document.querySelector('.find-seam').style.display = 'none';
543+
document.querySelector('.remove-seam').style.display = 'block';
544+
demo.currentSeam = demo.smc.findVerticalSeam();
545+
// draw vertical seam
546+
for (var y = 0; y < demo.currentSeam.length; y ++) {
547+
var x = demo.currentSeam[y];
548+
demo.ctx.fillStyle = demo.config.seamColor;
549+
demo.ctx.fillRect(x, y, 1, 1);
550+
}
551+
return demo.currentSeam;
530552
};
531553

532-
demo.removeSeam = function () {
533-
if (demo.currentSeam.length === 0) return;
534-
demo.smc.removeVerticalSeam(demo.currentSeam);
535-
demo.smc.reDrawImage(demo.config.draw);
536-
demo.currentSeam = [];
554+
demo.removeSeam = function (options) {
555+
options = options || {};
556+
if (!('reDrawImage' in options)) {
557+
options.reDrawImage = true;
558+
}
559+
document.querySelector('.find-seam').style.display='block';
560+
document.querySelector('.remove-seam').style.display='none';
561+
if (demo.currentSeam.length === 0) return;
562+
demo.smc.removeVerticalSeam(demo.currentSeam);
563+
if (options.reDrawImage) {
564+
demo.smc.reDrawImage(demo.config.draw);
565+
}
566+
demo.currentSeam = [];
537567
};
538568

539-
demo.iteration = 0;
540-
541569
demo.iterate = function () {
542-
demo.findSeam(demo.ctx);
543-
setTimeout(function () {
544-
demo.removeSeam()
545-
demo.iteration++;
546-
if (demo.config.autoIterate) {
547-
demo.iterate();
548-
}
549-
}, 0);
570+
demo.findSeam(demo.ctx);
571+
setTimeout(function () {
572+
demo.removeSeam({reDrawImage: false})
573+
demo.iteration++;
574+
if (demo.config.autoIterate) {
575+
demo.iterate();
576+
} else {
577+
demo.smc.reDrawImage(demo.config.draw);
578+
}
579+
}, 0);
550580
};
551581

552582
demo.image.onload = function () {
553-
demo.canvas.width = demo.image.width;
554-
demo.canvas.height = demo.image.height;
555-
demo.ctx = demo.canvas.getContext("2d");
556-
demo.ctx.drawImage(demo.image, 0, 0);
557-
demo.smc = new SeamCarver(demo.canvas);
558-
demo.smc.reDrawImage(demo.config.draw);
583+
demo.canvas.width = demo.image.width;
584+
demo.canvas.height = demo.image.height;
585+
demo.ctx = demo.canvas.getContext("2d");
586+
demo.ctx.drawImage(demo.image, 0, 0);
587+
demo.smc = new SeamCarver(demo.canvas);
588+
demo.smc.reDrawImage(demo.config.draw);
559589
};
560590

561591
demo.togglePixelation = function () {
562-
if (demo.canvas.style.imageRendering === 'pixelated') {
563-
demo.canvas.style.imageRendering = 'auto';
564-
} else {
565-
demo.canvas.style.imageRendering = 'pixelated';
566-
}
592+
if (demo.canvas.style.imageRendering === 'pixelated') {
593+
demo.canvas.style.imageRendering = 'auto';
594+
} else {
595+
demo.canvas.style.imageRendering = 'pixelated';
596+
}
567597
}
568598

569599
key('i', function () {
570-
demo.config.autoIterate = !demo.config.autoIterate;
571-
demo.iterate();
600+
demo.config.autoIterate = !demo.config.autoIterate;
601+
demo.iterate();
572602
});
573603

574604
key('f', function () {
575-
demo.findSeam();
605+
demo.findSeam();
606+
document.querySelector('.find-seam').style.display='none';
607+
document.querySelector('.remove-seam').style.display='block';
608+
});
609+
610+
key('r', function () {
611+
demo.removeSeam();
576612
});
577613

578614
key('a', function () {
579-
demo.toggleActualSize();
615+
demo.toggleActualSize();
580616
});
581617

582618
key('e', function () {
583-
demo.reDraw('energy');
619+
demo.reDraw('energy');
584620
});
585621

586622
key('s', function () {
587-
demo.reDraw('minsum');
623+
demo.reDraw('minsum');
588624
});
589625

590626
key('c', function () {
591-
demo.reDraw('rgb');
627+
demo.reDraw('rgb');
592628
});
593629

594630
key('x', function () {
595-
demo.reDraw('minx');
596-
});
597-
598-
key('r', function () {
599-
demo.removeSeam();
631+
demo.reDraw('minx');
600632
});
601633

602634
key('p', function () {
603-
demo.togglePixelation();
635+
demo.togglePixelation();
604636
});
605637

606638
key('esc', function () {
607-
demo.reset();
639+
demo.reset();
608640
});
609641

610642
demo.reDraw = function (field) {
611-
demo.config.draw.field = field;
612-
demo.smc.reDrawImage(demo.config.draw);
643+
demo.config.draw.field = field;
644+
demo.smc.reDrawImage(demo.config.draw);
613645
};
614646

615647
demo.toggleActualSize = function () {
616-
demo.config.draw.actualSize = !demo.config.draw.actualSize;
617-
demo.smc.reDrawImage(demo.config.draw);
648+
demo.config.draw.actualSize = !demo.config.draw.actualSize;
649+
demo.smc.reDrawImage(demo.config.draw);
650+
};
651+
652+
demo.createSelectImage = function () {
653+
demo.selectImage.innerHTML = '';
654+
demo.config.images.map(function (image) {
655+
var option = document.createElement('option');
656+
option.value = image;
657+
option.text = image;
658+
demo.selectImage.appendChild(option);
659+
});
660+
demo.selectImage.value = demo.config.images[0];
661+
};
662+
demo.createSelectImage();
663+
664+
demo.changeImage = function (image) {
665+
demo.image.setAttribute('crossOrigin', '');
666+
demo.image.crossOrigin = 'Anonymous';
667+
demo.image.src = image || demo.image.src || demo.selectImage.value;
618668
};
619669

620-
demo.reset = function () {
621-
demo.image.setAttribute('crossOrigin', '');
622-
demo.image.crossOrigin = 'Anonymous';
623-
if (false && localStorage.seamCarverImage) {
624-
demo.image.src = localStorage.seamCarverImage;
625-
} else {
626-
// demo.image.src = 'images/3x4.png';
627-
// demo.image.src = 'images/6x5.png';
628-
demo.image.src = 'images/12x10.png';
629-
// demo.image.src = 'images/70x70.png';
630-
// demo.image.src = 'images/200x100.png';
631-
// demo.image.src = 'images/chameleon.png';
632-
// demo.image.src = 'images/casa-de-madeira.jpg';
633-
// demo.image.src = 'images/HJocean.png';
634-
// demo.image.src = 'images/IMG_4445.jpg';
635-
// demo.image.src = 'images/white_building_in_field_by_mslash67.jpg';
636-
// demo.image.src = 'images/butterfly.png';
637-
demo.image.src = 'images/1000x300.jpg';
638-
// demo.image.src = 'images/1000x500.jpg';
639-
// demo.image.src = 'images/1600x1200.jpg';
640-
// demo.image.src = 'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fchameleon.png';
641-
// demo.image.src = 'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fbutterfly.jpg';
642-
// demo.image.src = 'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fbamboo.jpg';
643-
// demo.image.src = 'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fanimals.jpg';
644-
localStorage.seamCarverImage = demo.image.src;
645-
}
670+
demo.reset = function (image) {
671+
demo.changeImage();
646672
};
647673

648-
demo.reset();
674+
demo.changeImage();
649675

650676
},{"../../../SeamCarver":1,"keymaster":3}],3:[function(require,module,exports){
651677
// keymaster.js

0 commit comments

Comments
 (0)