Color Lookup Table Demo
Display
Frame Buffer
The HTML file:
<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>
<body>
<h1>Color Lookup Table Demo</h1>
<h2>Display<h2>
<canvas id="canvas" width="200" height="200"></canvas>
<p>
<h2>Frame Buffer</h2>
<script type="text/javascript">
'use strict'
let canvas = document.getElementById("canvas");
let width = canvas.width;
let height = canvas.height;
const DIVS = 10;
let colors = ["black","white","red","green","blue"];
let dx = width/DIVS;
let dy = height/DIVS;
let ctx = canvas.getContext('2d');
function ChangeColor(id){
let button = document.getElementById(id);
let value = parseInt(button.value);
let newValue = value+1;
if (newValue > 4) {
newValue = 0;
}
button.value = newValue;
button.innerHTML = newValue;
DrawPicture();
}
function MakeButton(id) {
let button = document.createElement("button");
button.innerHTML = "0";
button.type="submit";
button.value = 0;
button.id = id;
button.onclick=function() {ChangeColor(this.id);};
document.body.appendChild(button);
}
function MakeFB() {
let i,j;
let brk;
for(i = 0; i < DIVS; i++) {
for(j =0; j < DIVS; j++) {
MakeButton(String(j)+","+String(i));
}
brk = document.createElement("br");
document.body.appendChild(brk);
}
}
function LUTChange(id) {
let newColor = document.getElementById(id).value;
let pos = parseInt(id.substr(5,1));
colors[pos] = newColor;
DrawPicture();
}
function MakeLUT() {
let i,j;
let brk;
let title = document.createElement("h2");
title.innerHTML = "Look Up Table";
document.body.appendChild(title);
for(i=0; i < colors.length; i++) {
let button = document.createElement("select");
button.value = i;
for(j = 0; j < colors.length;j++) {
let option = document.createElement("option");
option.text=colors[j];
button.add(option);
}
button.id = "color"+i;
button.value = colors[i];
button.onclick=function() {LUTChange(this.id);};
document.body.appendChild(button);
brk = document.createElement("br");
document.body.appendChild(brk);
}
}
function DrawPicture() {
let i,j;
let id;
ctx.strokeStyle = "black";
ctx.beginPath();
for(i = 0; i < DIVS; i++) {
for(j = 0; j < DIVS; j++) {
id = (String(i)+","+String(j));
let value = document.getElementById(id).value;
ctx.fillStyle = colors[value];
ctx.fillRect(i*dx, j*dy, dx, dy);
}
}
ctx.stroke();
return;
}
function Draw() {
ctx.clearRect(0,0,canvas.width, canvas.height);
DrawPicture();
return;
}
MakeFB();
MakeLUT();
Draw();
</script>