kuharan/converter.js

## converter.js
function hexToRgb(hex) {
    r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
    if (r) {
        return r.slice(1, 4).map(function(x) {
            return parseInt(x, 16);
        });
    }
    return null;
}

function hexToCMYK(hex) {
    var computedC = 0;
    var computedM = 0;
    var computedY = 0;
    var computedK = 0;
    hex = (hex.charAt(0) == "#") ? hex.substring(1, 7) : hex;

    if (hex.length != 6) {
        alert('Invalid length of the input hex value!');
        return;
    }
    if (/[0-9a-f]{6}/i.test(hex) != true) {
        alert('Invalid digits in the input hex value!');
        return;
    }

    var r = parseInt(hex.substring(0, 2), 16);
    var g = parseInt(hex.substring(2, 4), 16);
    var b = parseInt(hex.substring(4, 6), 16);

    // BLACK
    if (r == 0 && g == 0 && b == 0) {
        computedK = 1;
        return [0, 0, 0, 1];
    }

    computedC = 1 - (r / 255);
    computedM = 1 - (g / 255);
    computedY = 1 - (b / 255);

    var minCMY = Math.min(computedC, Math.min(computedM, computedY));

    computedC = round((computedC - minCMY) * 100 / (1 - minCMY));
    computedM = round((computedM - minCMY) * 100 / (1 - minCMY));
    computedY = round((computedY - minCMY) * 100 / (1 - minCMY));
    computedK = round(minCMY * 100);
    return [computedC, computedM, computedY, computedK].join();
}

function round(value) {
    return Number(Math.round(value + 'e' + 3) + 'e-' + 3);
}

## viz-elements.js
var colorDict = {
    0: '#50BFE6',
    1: '#FE6F5E',
    2: '#FFCC33',
    3: '#3AA655'
};
var textDict = {
    0: 'One',
    1: 'Hot',
    2: 'Encoder',
    3: 'Explained'
};

var c = document.getElementById("MainCanvas");
var ctx = c.getContext("2d");

function loadElements(boxShadowblur, boxShadowColor, startX) {
    var boxCount;
    for (boxCount = 0; boxCount < 4; boxCount++) {
        loadBox(boxCount, boxShadowblur, boxShadowColor, startX);
        posX = startX + 10;
        writeTextLine(boxCount, posX);
        startX += 270;
    }
}

function loadBox(boxCount, boxShadowblur, boxShadowColor, startX) {
    ctx.shadowBlur = boxShadowblur;
    ctx.shadowOffsetX = 5;
    ctx.shadowColor = boxShadowColor;
    ctx.fillStyle = getFillColor(boxCount);
    ctx.fillRect(startX, 20, 250, 400);
}

function getFillColor(boxCount) {
    return colorDict[boxCount];
}

function writeTextLine(boxCount, posX) {
    setTextLineProperties();
    ctx.fillText(getTextLine(boxCount), posX, 340);
    setSubTextProperties();
    ctx.fillText(getSubTextLine1(boxCount), posX, 360);
    ctx.fillText(getSubTextLine2(boxCount), posX, 375);
    ctx.fillText(getSubTextLine3(boxCount), posX, 390);
}

function setTextLineProperties() {
    ctx.fillStyle = "#F2EBF0";
    ctx.shadowOffsetX = 1;
    ctx.font = "40px Courier";
    ctx.shadowColor = "Black";
    ctx.shadowBlur = 1;
}

function setSubTextProperties() {
    ctx.fillStyle = "#F2EBF0";
    ctx.shadowColor = "Grey";
    ctx.shadowOffsetX = 0;
    ctx.font = "15px Helvetica";
}

function getTextLine(boxCount) {
    return textDict[boxCount];
}

function getSubTextLine1(boxCount) {
    return "HEX: " + colorDict[boxCount];
}

function getSubTextLine2(boxCount) {
    return "RGB: " + hexToRgb(colorDict[boxCount]);
}

function getSubTextLine3(boxCount) {
    return "CMYK: " + hexToCMYK(colorDict[boxCount]);
}

document.getElementById("MainCanvas").innerHTML = loadElements(10, "grey", 20, 20, 220, 400);

## viz.html
<!DOCTYPE html>

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<canvas id="MainCanvas" width=1500 height=1000 style="border:1px solid #d3d3d3;"></canvas>
<script src="viz-elements.js">
</script>
</body>
</html>
	function hexToRgb(hex) {
	r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
	if (r) {
	return r.slice(1, 4).map(function(x) {
	return parseInt(x, 16);
	});
	}
	return null;
	}

	function hexToCMYK(hex) {
	var computedC = 0;
	var computedM = 0;
	var computedY = 0;
	var computedK = 0;
	hex = (hex.charAt(0) == "#") ? hex.substring(1, 7) : hex;

	if (hex.length != 6) {
	alert('Invalid length of the input hex value!');
	return;
	}
	if (/[0-9a-f]{6}/i.test(hex) != true) {
	alert('Invalid digits in the input hex value!');
	return;
	}

	var r = parseInt(hex.substring(0, 2), 16);
	var g = parseInt(hex.substring(2, 4), 16);
	var b = parseInt(hex.substring(4, 6), 16);

	// BLACK
	if (r == 0 && g == 0 && b == 0) {
	computedK = 1;
	return [0, 0, 0, 1];
	}

	computedC = 1 - (r / 255);
	computedM = 1 - (g / 255);
	computedY = 1 - (b / 255);

	var minCMY = Math.min(computedC, Math.min(computedM, computedY));

	computedC = round((computedC - minCMY) * 100 / (1 - minCMY));
	computedM = round((computedM - minCMY) * 100 / (1 - minCMY));
	computedY = round((computedY - minCMY) * 100 / (1 - minCMY));
	computedK = round(minCMY * 100);
	return [computedC, computedM, computedY, computedK].join();
	}

	function round(value) {
	return Number(Math.round(value + 'e' + 3) + 'e-' + 3);
	}
	var colorDict = {
	0: '#50BFE6',
	1: '#FE6F5E',
	2: '#FFCC33',
	3: '#3AA655'
	};
	var textDict = {
	0: 'One',
	1: 'Hot',
	2: 'Encoder',
	3: 'Explained'
	};

	var c = document.getElementById("MainCanvas");
	var ctx = c.getContext("2d");

	function loadElements(boxShadowblur, boxShadowColor, startX) {
	var boxCount;
	for (boxCount = 0; boxCount < 4; boxCount++) {
	loadBox(boxCount, boxShadowblur, boxShadowColor, startX);
	posX = startX + 10;
	writeTextLine(boxCount, posX);
	startX += 270;
	}
	}

	function loadBox(boxCount, boxShadowblur, boxShadowColor, startX) {
	ctx.shadowBlur = boxShadowblur;
	ctx.shadowOffsetX = 5;
	ctx.shadowColor = boxShadowColor;
	ctx.fillStyle = getFillColor(boxCount);
	ctx.fillRect(startX, 20, 250, 400);
	}

	function getFillColor(boxCount) {
	return colorDict[boxCount];
	}

	function writeTextLine(boxCount, posX) {
	setTextLineProperties();
	ctx.fillText(getTextLine(boxCount), posX, 340);
	setSubTextProperties();
	ctx.fillText(getSubTextLine1(boxCount), posX, 360);
	ctx.fillText(getSubTextLine2(boxCount), posX, 375);
	ctx.fillText(getSubTextLine3(boxCount), posX, 390);
	}

	function setTextLineProperties() {
	ctx.fillStyle = "#F2EBF0";
	ctx.shadowOffsetX = 1;
	ctx.font = "40px Courier";
	ctx.shadowColor = "Black";
	ctx.shadowBlur = 1;
	}

	function setSubTextProperties() {
	ctx.fillStyle = "#F2EBF0";
	ctx.shadowColor = "Grey";
	ctx.shadowOffsetX = 0;
	ctx.font = "15px Helvetica";
	}

	function getTextLine(boxCount) {
	return textDict[boxCount];
	}

	function getSubTextLine1(boxCount) {
	return "HEX: " + colorDict[boxCount];
	}

	function getSubTextLine2(boxCount) {
	return "RGB: " + hexToRgb(colorDict[boxCount]);
	}

	function getSubTextLine3(boxCount) {
	return "CMYK: " + hexToCMYK(colorDict[boxCount]);
	}

	document.getElementById("MainCanvas").innerHTML = loadElements(10, "grey", 20, 20, 220, 400);
	<!DOCTYPE html>

	<html>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<body>
	<canvas id="MainCanvas" width=1500 height=1000 style="border:1px solid #d3d3d3;"></canvas>
	<script src="viz-elements.js">
	</script>
	</body>
	</html>