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

Add palette viewer and color cycling to proof of concept viewer

Browse Source
This commit is contained in:
Michael Smith 2023-05-13 22:40:36 +02:00
parent 940523f72f
commit 6f779d0c04
4 changed files with 164 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -14,7 +14,7 @@ This is the format used by the PC version of Deluxe Paint II and is different fr
### In the browser ### In the browser
_Also see `index.html` and `main.js` for a more elaborate example that renders the palletized image data to a html5 canvas._ _Also see `index.html` and `main.js` for a more elaborate example that renders the image and palette data to an html5 canvas and supports color cycling._
```javascript ```javascript
import PBM from "./src/pbm.js"; import PBM from "./src/pbm.js";

32
index.html
View File

@ -9,9 +9,33 @@
<title>IFF PBM image viewer</title> <title>IFF PBM image viewer</title>
</head> </head>
<body> <body>
<input type="file" id="imagefile" /> <p>
<input type="file" id="imagefile" />
<canvas id="thumbnail-canvas"></canvas> </p>
<canvas id="image-canvas"></canvas> <p>
<button id="cycleColors">Cycle colors</button>
<input type="range" min="10" max="50" value="15" id="cyclingSpeedSlider">
<span id="cyclingSpeedLabel"></span>
</p>
<div class="container">
<div class="item">
<canvas id="image-canvas"></canvas>
</div>
<div class="item">
<div class="sidebar">
<div class="item">
<canvas id="thumbnail-canvas"></canvas>
</div>
<div class="item">
<canvas id="palette-canvas"></canvas>
<div class="buttons">
<button id="paletteLeft"><-</button>
<span id="palettePageLabel">1</span>
<button id="paletteRight">-></button>
</div>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

120
main.js
View File

@ -30,17 +30,51 @@ const thumbnailCanvas = document.getElementById("thumbnail-canvas");
const thumbnailContext = thumbnailCanvas.getContext("2d"); const thumbnailContext = thumbnailCanvas.getContext("2d");
const imageCanvas = document.getElementById("image-canvas"); const imageCanvas = document.getElementById("image-canvas");
const imageContext = imageCanvas.getContext("2d"); const imageContext = imageCanvas.getContext("2d");
const paletteCanvas = document.getElementById("palette-canvas");
const paletteContext = paletteCanvas.getContext("2d");
const inputElement = document.getElementById("imagefile"); const inputElement = document.getElementById("imagefile");
inputElement.addEventListener("change", handleFile, false); inputElement.addEventListener("change", handleFile, false);
document.getElementById("paletteLeft").addEventListener("click", paletteLeft);
document.getElementById("paletteRight").addEventListener("click", paletteRight);
document.getElementById("cycleColors").addEventListener("click", () => {
if (running) {
running = false;
} else {
running = true;
animate();
}
});
const palettePageLabelEl = document.getElementById("palettePageLabel");
const cyclingSpeedLabel = document.getElementById("cyclingSpeedLabel");
cyclingSpeedLabel.innerText = cyclingSpeedSlider.value;
let currentPalettePage = 0;
let image = null;
let running = false;
let cycleSpeed = 15.0;
document
.getElementById("cyclingSpeedSlider")
.addEventListener("input", (evt) => {
cycleSpeed = evt.target.value;
cyclingSpeedLabel.innerText = cycleSpeed;
});
fetch("/assets/TEST.LBM") fetch("/assets/TEST.LBM")
.then((response) => { .then((response) => {
return response.arrayBuffer(); return response.arrayBuffer();
}) })
.then((buffer) => { .then((buffer) => {
const image = loadImage(buffer); image = loadImage(buffer);
drawPalette(image.palette, currentPalettePage, paletteContext);
drawImage(image.thumbnail, thumbnailContext); drawImage(image.thumbnail, thumbnailContext);
drawImage(image, imageContext); drawImage(image, imageContext);
console.log(image.cyclingRanges);
}); });
function handleFile() { function handleFile() {
@ -48,7 +82,8 @@ function handleFile() {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (evt) => { reader.onload = (evt) => {
const image = loadImage(evt.target.result); image = loadImage(evt.target.result);
drawPalette(image.palette, currentPalettePage, paletteContext);
drawImage(image.thumbnail, thumbnailContext); drawImage(image.thumbnail, thumbnailContext);
drawImage(image, imageContext); drawImage(image, imageContext);
}; };
@ -57,7 +92,7 @@ function handleFile() {
} }
function loadImage(buffer) { function loadImage(buffer) {
const image = new PBM(buffer); image = new PBM(buffer);
thumbnailCanvas.width = image.thumbnail.width; thumbnailCanvas.width = image.thumbnail.width;
thumbnailCanvas.height = image.thumbnail.height; thumbnailCanvas.height = image.thumbnail.height;
imageCanvas.width = image.width; imageCanvas.width = image.width;
@ -66,9 +101,51 @@ function loadImage(buffer) {
return image; return image;
} }
function drawImage(image, context) { function paletteLeft(evt) {
context.clearRect(0, 0, image.width, image.height); if (currentPalettePage === 0) {
let pixels = context.createImageData(image.width, image.height); currentPalettePage = 3;
} else {
currentPalettePage--;
}
palettePageLabelEl.innerText = currentPalettePage + 1;
drawPalette();
}
function paletteRight(evt) {
if (currentPalettePage === 3) {
currentPalettePage = 0;
} else {
currentPalettePage++;
}
palettePageLabelEl.innerText = currentPalettePage + 1;
drawPalette();
}
function drawPalette() {
const colorSize = 20; // in pixels
const width = 4 * colorSize; // 4 columns
const height = 16 * colorSize; // 16 rows
paletteCanvas.width = width;
paletteCanvas.height = height;
paletteContext.clearRect(0, 0, width, height);
for (let y = 0; y < 16; y++) {
for (let x = 0; x < 4; x++) {
const index = currentPalettePage * 64 + (y * 4 + x);
const color = `rgb(${image.palette[index][0]}, ${image.palette[index][1]}, ${image.palette[index][2]})`;
paletteContext.fillStyle = color;
paletteContext.fillRect(x * colorSize, y * colorSize, width, height);
}
}
}
function drawImage(image, ctx) {
ctx.clearRect(0, 0, image.width, image.height);
let pixels = ctx.createImageData(image.width, image.height);
for (let x = 0; x < image.width; x++) { for (let x = 0; x < image.width; x++) {
for (let y = 0; y < image.height; y++) { for (let y = 0; y < image.height; y++) {
@ -87,5 +164,34 @@ function drawImage(image, context) {
} }
} }
context.putImageData(pixels, 0, 0); ctx.putImageData(pixels, 0, 0);
}
function cycleColors(now) {
image.cyclingRanges.forEach((range) => {
if (range.active) {
if (!range.lastTime) range.lastTime = now;
if (now - range.lastTime > range.rate / cycleSpeed) {
if (range.direction === "forward") {
// Move last color to first position
const lastColor = image.palette.splice(range.high, 1)[0];
image.palette.splice(range.low, 0, lastColor);
} else if (range.direction === "reverse") {
// Move first color to last position
const firstColor = image.palette.splice(range.low, 1)[0];
image.palette.splice(range.high, 0, firstColor);
}
range.lastTime = now;
}
}
});
}
function animate(now) {
cycleColors(now);
drawPalette();
drawImage(image, imageContext);
if (running) requestAnimationFrame(animate);
} }

36
style.css
View File

@ -1,17 +1,25 @@
#image-canvas { .container {
position: absolute; display: flex;
top: 50%; justify-content: space-evenly;
left: 50%;
transform: translate(-50%, -50%);
width: 640px;
height: 480px;
} }
#thumbnail-canvas { .sidebar {
position: absolute; height: 500px;
top: 50%; display: flex;
left: 15%; flex-direction: column;
transform: translate(-50%, -50%); justify-content: space-evenly;
width: 80px; align-items: center;
height: 60px; }
.buttons {
display: flex;
justify-content: space-around;
}
#palette-canvas {
border: 1px solid black;
}
#cyclingSpeedSlider {
width: 70%;
} }