m/pbm-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor viewer example

Browse Source
This commit is contained in:
Michael Smith 2023-05-27 21:16:18 +02:00
parent 8375261eb1
commit 24875d989b
1 changed files with 39 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
main.js
View File

@ -39,16 +39,7 @@ let running = false;
let cycleSpeed = 15.0; let cycleSpeed = 15.0;
function loadImage(buffer) { // Drawing
image = new PBM(buffer);
thumbnailCanvas.width = image.thumbnail.width;
thumbnailCanvas.height = image.thumbnail.height;
imageCanvas.width = image.width;
imageCanvas.height = image.height;
return image;
}
function drawPalette() { function drawPalette() {
const colorSize = 20; // in pixels const colorSize = 20; // in pixels
const width = 4 * colorSize; // 4 columns const width = 4 * colorSize; // 4 columns
@ -95,21 +86,37 @@ function drawImage(anImage, ctx) {
ctx.putImageData(pixels, 0, 0); ctx.putImageData(pixels, 0, 0);
} }
function handleFile() { // Image loading
const imageFile = this.files[0]; function loadImage(buffer) {
const reader = new FileReader(); image = new PBM(buffer);
thumbnailCanvas.width = image.thumbnail.width;
thumbnailCanvas.height = image.thumbnail.height;
imageCanvas.width = image.width;
imageCanvas.height = image.height;
reader.onload = (evt) => { return image;
image = loadImage(evt.target.result);
drawPalette(image.palette, currentPalettePage, paletteContext);
drawImage(image.thumbnail, thumbnailContext);
drawImage(image, imageContext);
};
reader.readAsArrayBuffer(imageFile);
} }
function paletteLeft() { document.getElementById('imagefile').addEventListener(
'change',
(e) => {
const imageFile = e.target.files[0];
const reader = new FileReader();
reader.onload = (evt) => {
image = loadImage(evt.target.result);
drawPalette(image.palette, currentPalettePage, paletteContext);
drawImage(image.thumbnail, thumbnailContext);
drawImage(image, imageContext);
};
reader.readAsArrayBuffer(imageFile);
},
false
);
// Palette navigation
document.getElementById('paletteLeft').addEventListener('click', () => {
if (currentPalettePage === 0) { if (currentPalettePage === 0) {
currentPalettePage = 3; currentPalettePage = 3;
} else { } else {
@ -118,9 +125,9 @@ function paletteLeft() {
document.getElementById('palettePageLabel').innerText = document.getElementById('palettePageLabel').innerText =
currentPalettePage + 1; currentPalettePage + 1;
drawPalette(); drawPalette();
} });
function paletteRight() { document.getElementById('paletteRight').addEventListener('click', () => {
if (currentPalettePage === 3) { if (currentPalettePage === 3) {
currentPalettePage = 0; currentPalettePage = 0;
} else { } else {
@ -129,8 +136,9 @@ function paletteRight() {
document.getElementById('palettePageLabel').innerText = document.getElementById('palettePageLabel').innerText =
currentPalettePage + 1; currentPalettePage + 1;
drawPalette(); drawPalette();
} });
// Color cycling
function cycleColors(now) { function cycleColors(now) {
image.cyclingRanges.forEach((range) => { image.cyclingRanges.forEach((range) => {
if (range.active) { if (range.active) {
@ -160,11 +168,13 @@ function animate(now) {
if (running) requestAnimationFrame(animate); if (running) requestAnimationFrame(animate);
} }
const inputElement = document.getElementById('imagefile'); document
inputElement.addEventListener('change', handleFile, false); .getElementById('cyclingSpeedSlider')
.addEventListener('input', (evt) => {
cycleSpeed = evt.target.value;
document.getElementById('cyclingSpeedLabel').innerText = cycleSpeed;
});
document.getElementById('paletteLeft').addEventListener('click', paletteLeft);
document.getElementById('paletteRight').addEventListener('click', paletteRight);
document.getElementById('cycleColors').addEventListener('click', () => { document.getElementById('cycleColors').addEventListener('click', () => {
if (running) { if (running) {
running = false; running = false;
@ -173,19 +183,3 @@ document.getElementById('cycleColors').addEventListener('click', () => {
animate(); animate();
} }
}); });
document
.getElementById('cyclingSpeedSlider')
.addEventListener('input', (evt) => {
cycleSpeed = evt.target.value;
document.getElementById('cyclingSpeedLabel').innerText = cycleSpeed;
});
fetch('/assets/TEST.LBM')
.then((response) => response.arrayBuffer())
.then((buffer) => {
image = loadImage(buffer);
drawPalette(image.palette, currentPalettePage, paletteContext);
drawImage(image.thumbnail, thumbnailContext);
drawImage(image, imageContext);
});