Skip to content

Commit

Permalink
examples: update colorspace converter
Browse files Browse the repository at this point in the history
  • Loading branch information
@arrufat
arrufat committed Oct 15, 2024
1 parent a057c6d commit 2d81e6a
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 99 deletions.
2 changes: 1 addition & 1 deletion examples/lib/colorspace.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<h1>Color Space Converter</h1>
<div id="hex">
<label><code>HEX:</code></label>
<input type="text" id="hex-str" value="#000000">
<input type="text" id="hex-#" value="#000000">
</div>
<div id="rgb">
<label><code>RGB:</code></label>
Expand Down
154 changes: 76 additions & 78 deletions examples/lib/colorspace.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,61 +48,68 @@
wasm_exports = obj.instance.exports;
window.wasm = obj;
// Event listeners for HEX
document.getElementById('hex-str').addEventListener('input', updateHex);
document.getElementById('hex-#').addEventListener('input', updateFromHex);
// Event listeners for RGB
document.getElementById('rgb-r').addEventListener('input', updateRgb);
document.getElementById('rgb-g').addEventListener('input', updateRgb);
document.getElementById('rgb-b').addEventListener('input', updateRgb);
document.getElementById('rgb-r').addEventListener('input', updateFromRgb);
document.getElementById('rgb-g').addEventListener('input', updateFromRgb);
document.getElementById('rgb-b').addEventListener('input', updateFromRgb);
// Event listeners for HSL
document.getElementById('hsl-h').addEventListener('input', updateHsl);
document.getElementById('hsl-s').addEventListener('input', updateHsl);
document.getElementById('hsl-l').addEventListener('input', updateHsl);
document.getElementById('hsl-h').addEventListener('input', updateFromHsl);
document.getElementById('hsl-s').addEventListener('input', updateFromHsl);
document.getElementById('hsl-l').addEventListener('input', updateFromHsl);
// Event listeners for HSV
document.getElementById('hsv-h').addEventListener('input', updateHsv);
document.getElementById('hsv-s').addEventListener('input', updateHsv);
document.getElementById('hsv-v').addEventListener('input', updateHsv);
document.getElementById('hsv-h').addEventListener('input', updateFromHsv);
document.getElementById('hsv-s').addEventListener('input', updateFromHsv);
document.getElementById('hsv-v').addEventListener('input', updateFromHsv);
// Event listeners for XYZ
document.getElementById('xyz-x').addEventListener('input', updateXyz);
document.getElementById('xyz-y').addEventListener('input', updateXyz);
document.getElementById('xyz-z').addEventListener('input', updateXyz);
document.getElementById('xyz-x').addEventListener('input', updateFromXyz);
document.getElementById('xyz-y').addEventListener('input', updateFromXyz);
document.getElementById('xyz-z').addEventListener('input', updateFromXyz);
// Event listeners for LAB
document.getElementById('lab-l').addEventListener('input', updateLab);
document.getElementById('lab-a').addEventListener('input', updateLab);
document.getElementById('lab-b').addEventListener('input', updateLab);
document.getElementById('lab-l').addEventListener('input', updateFromLab);
document.getElementById('lab-a').addEventListener('input', updateFromLab);
document.getElementById('lab-b').addEventListener('input', updateFromLab);

function updateHex() {
const hex = document.getElementById('hex-str').value;
function updateFromHex() {
const hex = document.getElementById('hex-#').value;
const rgb = hex2rgb(hex);
if (rgb) {
document.getElementById('rgb-r').value = rgb.r;
document.getElementById('rgb-g').value = rgb.g;
document.getElementById('rgb-b').value = rgb.b;
updateRgb();
updateFromRgb();
}
}

function updateHex() {
document.getElementById('rgb-r').value = rgb.r;
document.getElementById('rgb-g').value = rgb.g;
document.getElementById('rgb-b').value = rgb.b;
document.getElementById('hex-#').value = rgb2hex(r, g, b);
}

// --- RGB ---
function rgb2hsl(r, g, b) {
const hslPtr = wasm_exports.alloc(3 * 4);
const hsl = new Float32Array(wasm_exports.memory.buffer, hslPtr, 3);
const hsl = new Float64Array(wasm_exports.memory.buffer, hslPtr, 3);
wasm_exports.rgb2hsl(r, g, b, hslPtr);
document.getElementById('hsl-h').value = Math.round(hsl[0]);
document.getElementById('hsl-s').value = Math.round(hsl[1]);
document.getElementById('hsl-l').value = Math.round(hsl[2]);
document.getElementById('hsl-h').value = hsl[0];
document.getElementById('hsl-s').value = hsl[1];
document.getElementById('hsl-l').value = hsl[2];
}

function rgb2hsv(r, g, b) {
const hsvPtr = wasm_exports.alloc(3 * 4);
const hsv = new Float32Array(wasm_exports.memory.buffer, hsvPtr, 3);
const hsv = new Float64Array(wasm_exports.memory.buffer, hsvPtr, 3);
wasm_exports.rgb2hsv(r, g, b, hsvPtr);
document.getElementById('hsv-h').value = Math.round(hsv[0]);
document.getElementById('hsv-s').value = Math.round(hsv[1]);
document.getElementById('hsv-v').value = Math.round(hsv[2]);
document.getElementById('hsv-h').value = hsv[0];
document.getElementById('hsv-s').value = hsv[1];
document.getElementById('hsv-v').value = hsv[2];
}

function rgb2xyz(r, g, b) {
const xyzPtr = wasm_exports.alloc(3 * 4);
const xyz = new Float32Array(wasm_exports.memory.buffer, xyzPtr, 3);
const xyz = new Float64Array(wasm_exports.memory.buffer, xyzPtr, 3);
wasm_exports.rgb2xyz(r, g, b, xyzPtr);
document.getElementById('xyz-x').value = xyz[0];
document.getElementById('xyz-y').value = xyz[1];
Expand All @@ -111,22 +118,22 @@

function rgb2lab(r, g, b) {
const labPtr = wasm_exports.alloc(3 * 4);
const lab = new Float32Array(wasm_exports.memory.buffer, labPtr, 3);
const lab = new Float64Array(wasm_exports.memory.buffer, labPtr, 3);
wasm_exports.rgb2lab(r, g, b, labPtr);
document.getElementById('lab-l').value = lab[0];
document.getElementById('lab-a').value = lab[1];
document.getElementById('lab-b').value = lab[2];
}

function updateRgb() {
function updateFromRgb() {
const r = parseInt(document.getElementById('rgb-r').value);
const g = parseInt(document.getElementById('rgb-g').value);
const b = parseInt(document.getElementById('rgb-b').value);
rgb2hsl(r, g, b);
rgb2hsv(r, g, b);
rgb2xyz(r, g, b);
rgb2lab(r, g, b);
document.getElementById('hex-str').value = rgb2hex(r, g, b);
document.getElementById('hex-#').value = rgb2hex(r, g, b);
}

// --- HSL ---
Expand All @@ -142,16 +149,16 @@

function hsl2hsv(h, s, l) {
const hsvPtr = wasm_exports.alloc(3 * 4);
const hsv = new Float32Array(wasm_exports.memory.buffer, hsvPtr, 3);
const hsv = new Float64Array(wasm_exports.memory.buffer, hsvPtr, 3);
wasm_exports.hsl2hsv(h, s, l, hsvPtr);
document.getElementById('hsv-h').value = Math.round(hsv[0]);
document.getElementById('hsv-s').value = Math.round(hsv[1]);
document.getElementById('hsv-v').value = Math.round(hsv[2]);
document.getElementById('hsv-h').value = hsv[0];
document.getElementById('hsv-s').value = hsv[1];
document.getElementById('hsv-v').value = hsv[2];
}

function hsl2xyz(h, s, l) {
const xyzPtr = wasm_exports.alloc(3 * 4);
const xyz = new Float32Array(wasm_exports.memory.buffer, xyzPtr, 3);
const xyz = new Float64Array(wasm_exports.memory.buffer, xyzPtr, 3);
wasm_exports.hsl2xyz(h, s, l, xyzPtr);
document.getElementById('xyz-x').value = xyz[0];
document.getElementById('xyz-y').value = xyz[1];
Expand All @@ -160,14 +167,14 @@

function hsl2lab(h, s, l) {
const labPtr = wasm_exports.alloc(3 * 4);
const lab = new Float32Array(wasm_exports.memory.buffer, labPtr, 3);
const lab = new Float64Array(wasm_exports.memory.buffer, labPtr, 3);
wasm_exports.hsl2lab(h, s, l, labPtr);
document.getElementById('lab-l').value = lab[0];
document.getElementById('lab-a').value = lab[1];
document.getElementById('lab-b').value = lab[2];
}

function updateHsl() {
function updateFromHsl() {
const h = parseFloat(document.getElementById('hsl-h').value);
const s = parseFloat(document.getElementById('hsl-s').value);
const l = parseFloat(document.getElementById('hsl-l').value);
Expand All @@ -178,7 +185,7 @@
const red = parseInt(document.getElementById('rgb-r').value);
const green = parseInt(document.getElementById('rgb-g').value);
const blue = parseInt(document.getElementById('rgb-b').value);
document.getElementById('hex-str').value = rgb2hex(red, green, blue);
document.getElementById('hex-#').value = rgb2hex(red, green, blue);
}

// --- HSV ---
Expand All @@ -194,16 +201,16 @@

function hsv2hsl(h, s, v) {
const hslPtr = wasm_exports.alloc(3 * 4)
const hsl = new Float32Array(wasm_exports.memory.buffer, hslPtr, 3);
const hsl = new Float64Array(wasm_exports.memory.buffer, hslPtr, 3);
wasm_exports.hsv2hsl(h, s, v, hslPtr);
document.getElementById('hsl-h').value = Math.round(hsl[0]);
document.getElementById('hsl-s').value = Math.round(hsl[1]);
document.getElementById('hsl-l').value = Math.round(hsl[2]);
document.getElementById('hsl-h').value = hsl[0];
document.getElementById('hsl-s').value = hsl[1];
document.getElementById('hsl-l').value = hsl[2];
}

function hsv2xyz(h, s, v) {
const xyzPtr = wasm_exports.alloc(3 * 4)
const xyz = new Float32Array(wasm_exports.memory.buffer, xyzPtr, 3);
const xyz = new Float64Array(wasm_exports.memory.buffer, xyzPtr, 3);
wasm_exports.hsv2xyz(h, s, v, xyzPtr);
document.getElementById('xyz-x').value = xyz[0];
document.getElementById('xyz-y').value = xyz[1];
Expand All @@ -212,25 +219,22 @@

function hsv2lab(h, s, v) {
const labPtr = wasm_exports.alloc(3 * 4)
const lab = new Float32Array(wasm_exports.memory.buffer, labPtr, 3);
const lab = new Float64Array(wasm_exports.memory.buffer, labPtr, 3);
wasm_exports.hsv2lab(h, s, v, labPtr);
document.getElementById('lab-l').value = lab[0];
document.getElementById('lab-a').value = lab[1];
document.getElementById('lab-b').value = lab[2];
}

function updateHsv() {
function updateFromHsv() {
const h = parseFloat(document.getElementById('hsv-h').value);
const s = parseFloat(document.getElementById('hsv-s').value);
const v = parseFloat(document.getElementById('hsv-v').value);
hsv2rgb(h, s, v);
hsv2hsl(h, s, v);
hsv2xyz(h, s, v);
hsv2lab(h, s, v);
const red = parseInt(document.getElementById('rgb-r').value);
const green = parseInt(document.getElementById('rgb-g').value);
const blue = parseInt(document.getElementById('rgb-b').value);
document.getElementById('hex-str').value = rgb2hex(red, green, blue);
updateHex();
}

// --- XYZ ---
Expand All @@ -246,43 +250,40 @@

function xyz2hsl(x, y, z) {
const hslPtr = wasm_exports.alloc(3 * 4)
const hsl = new Float32Array(wasm_exports.memory.buffer, hslPtr, 3);
const hsl = new Float64Array(wasm_exports.memory.buffer, hslPtr, 3);
wasm_exports.xyz2hsl(x, y, z, hslPtr);
document.getElementById('hsl-h').value = Math.round(hsl[0]);
document.getElementById('hsl-s').value = Math.round(hsl[1]);
document.getElementById('hsl-l').value = Math.round(hsl[2]);
document.getElementById('hsl-h').value = hsl[0];
document.getElementById('hsl-s').value = hsl[1];
document.getElementById('hsl-l').value = hsl[2];
}

function xyz2hsv(x, y, z) {
const hsvPtr = wasm_exports.alloc(3 * 4)
const hsv = new Float32Array(wasm_exports.memory.buffer, hsvPtr, 3);
const hsv = new Float64Array(wasm_exports.memory.buffer, hsvPtr, 3);
wasm_exports.xyz2hsv(x, y, z, hsvPtr);
document.getElementById('hsl-h').value = Math.round(hsv[0]);
document.getElementById('hsl-s').value = Math.round(hsv[1]);
document.getElementById('hsl-l').value = Math.round(hsv[2]);
document.getElementById('hsl-h').value = hsv[0];
document.getElementById('hsl-s').value = hsv[1];
document.getElementById('hsl-l').value = hsv[2];
}

function xyz2lab(x, y, z) {
const labPtr = wasm_exports.alloc(3 * 4)
const lab = new Float32Array(wasm_exports.memory.buffer, labPtr, 3);
const lab = new Float64Array(wasm_exports.memory.buffer, labPtr, 3);
wasm_exports.xyz2lab(x, y, z, labPtr);
document.getElementById('lab-l').value = lab[0];
document.getElementById('lab-a').value = lab[1];
document.getElementById('lab-b').value = lab[2];
}

function updateXyz() {
function updateFromXyz() {
const x = parseFloat(document.getElementById('xyz-x').value);
const y = parseFloat(document.getElementById('xyz-y').value);
const z = parseFloat(document.getElementById('xyz-z').value);
xyz2rgb(x, y, z);
xyz2hsl(x, y, z);
xyz2hsv(x, y, z);
xyz2lab(x, y, z);
const red = parseInt(document.getElementById('rgb-r').value);
const green = parseInt(document.getElementById('rgb-g').value);
const blue = parseInt(document.getElementById('rgb-b').value);
document.getElementById('hex-str').value = rgb2hex(red, green, blue);
updateHex();
}

// --- LAB ---
Expand All @@ -298,43 +299,40 @@

function lab2hsl(l, a, b) {
const hslPtr = wasm_exports.alloc(3 * 4)
const hsl = new Float32Array(wasm_exports.memory.buffer, hslPtr, 3);
const hsl = new Float64Array(wasm_exports.memory.buffer, hslPtr, 3);
wasm_exports.lab2hsl(l, a, b, hslPtr);
document.getElementById('hsl-h').value = Math.round(hsl[0]);
document.getElementById('hsl-s').value = Math.round(hsl[1]);
document.getElementById('hsl-l').value = Math.round(hsl[2]);
document.getElementById('hsl-h').value = hsl[0];
document.getElementById('hsl-s').value = hsl[1];
document.getElementById('hsl-l').value = hsl[2];
}

function lab2hsv(l, a, b) {
const hsvPtr = wasm_exports.alloc(3 * 4)
const hsv = new Float32Array(wasm_exports.memory.buffer, hsvPtr, 3);
const hsv = new Float64Array(wasm_exports.memory.buffer, hsvPtr, 3);
wasm_exports.lab2hsv(l, a, b, hsvPtr);
document.getElementById('hsl-h').value = Math.round(hsv[0]);
document.getElementById('hsl-s').value = Math.round(hsv[1]);
document.getElementById('hsl-l').value = Math.round(hsv[2]);
document.getElementById('hsl-h').value = hsv[0];
document.getElementById('hsl-s').value = hsv[1];
document.getElementById('hsl-l').value = hsv[2];
}

function lab2xyz(l, a, b) {
const xyzPtr = wasm_exports.alloc(3 * 4)
const xyz = new Float32Array(wasm_exports.memory.buffer, xyzPtr, 3);
const xyz = new Float64Array(wasm_exports.memory.buffer, xyzPtr, 3);
wasm_exports.lab2xyz(l, a, b, xyzPtr);
document.getElementById('lab-l').value = xyz[0];
document.getElementById('lab-a').value = xyz[1];
document.getElementById('lab-b').value = xyz[2];
}

function updateLab() {
function updateFromLab() {
const l = parseFloat(document.getElementById('lab-l').value);
const a = parseFloat(document.getElementById('lab-a').value);
const b = parseFloat(document.getElementById('lab-b').value);
lab2rgb(l, a, b);
lab2hsl(l, a, b);
lab2hsv(l, a, b);
lab2xyz(l, a, b);
const red = parseInt(document.getElementById('rgb-r').value);
const green = parseInt(document.getElementById('rgb-g').value);
const blue = parseInt(document.getElementById('rgb-b').value);
document.getElementById('hex-str').value = rgb2hex(red, green, blue);
updateHex();
}

});
Expand Down
Loading

0 comments on commit 2d81e6a

Please sign in to comment.