We Keep Coding

Haar wavelet result colors are messed up

I tried adjusting this code of Haar wavelet transform to work with OpenCV.js. The recursion works fine but the colors of the resulting image are all messed up. Here's a screenshot of my results:
Here's what the output should look like:
And here's my code:
function OneDHaarTransform(HaarMatrix)
{
var sum = 0;
var diff = 0;
var hMLen = HaarMatrix.length/2;
var tempHaar = [];
//It only recurses on first half of the array
for (var i = 0; i < hMLen; i++)
{
sum = HaarMatrix[2*i] + HaarMatrix[2*i + 1];
sum = sum / Math.sqrt(2);
diff = HaarMatrix[2*i] - HaarMatrix[2*i + 1];
diff = diff / Math.sqrt(2);
tempHaar[i] = sum;
tempHaar[i + hMLen] = diff
};
for (var i = 0; i < HaarMatrix.length; i++) {
HaarMatrix[i] = tempHaar[i];
};
};
function haarTransform(img, MaxStepHaar)
{
var width = img.cols;
var height = img.rows;
var currWidth = width;
var currHeight = height;
let pix=img.clone();
let altpix=[];
var rowSize = width;
var colSize = height;
// var Haar = [];
var Haar = createArray(height,width,3);
var tempHaar = [];
let dst = img.clone();
//Initialize the Haar matrix
for (var row = 0; row < height; row++)
{
for (var col = 0; col < width; col++) {
for (var i = 0; i < 3; i++) {
let pixel = pix.ucharPtr(row,col);
Haar[row][col][i] = pixel[i];
};
};
};
//Do a Haar Wavelet Transform
while( (currWidth > 1 || currHeight > 1) && (MaxStepHaar > 1) )
{
MaxStepHaar = MaxStepHaar - 1;
//Do it for each row first
if (currWidth > 1)
{
for(var row = 0; row < currHeight; row++)
{
for (var i = 0; i < 3; i++) {
for(col = 0; col < currWidth; col++) {
tempHaar[col] = Haar[row][col][i];
};
OneDHaarTransform(tempHaar);
for(col = 0; col < currWidth; col++) {
Haar[row][col][i] = tempHaar[col];
};
};
};
};
//Then perform Haar transform on each column
tempHaar = [];
if (currHeight > 1)
{
for(var col = 0; col < currWidth; col++)
{
for (var i = 0; i < 3; i++) {
for(row = 0; row < currHeight; row++) {
tempHaar[row] = Haar[row][col][i];
};
OneDHaarTransform(tempHaar);
for(row = 0; row < currHeight; row++) {
Haar[row][col][i] = tempHaar[row];
};
};
};
};
tempHaar = [];
if (currHeight > 1) {currHeight = currHeight/2};
if (currWidth > 1) {currWidth = currWidth/2};
};
//Copy pix data to canvas
for (var row = 0; row < height; row++) {
for (var col = 0; col < width; col++) {
pixel[0] = Haar[row][col][0];
pixel[1] = Haar[row][col][1];
pixel[2] = Haar[row][col][2];
pixel[3] = 1;
};
};
pix.delete();dst.delete();
};
I only changed it so the input and output would be Mat() objects. I've tried to see if the maximum value of the Mat() exceeds 255, but it doesn't. I don't know what went wrong, please help.

How "tblGene()" call on JavaScript page.I am want to call on HTML page using onclick.. Without click this Json table show on my web page

How tblGene() call on JavaScript page. I do not want to call on HTML page using onclick. Without click, this JSON table show on my web page. Please help me. When page was loaded this JSON table on my web page. I do not want to use input box for click.
<input type="button" onclick="tblGene()" value="Click Here to Generate Table" style="width:100% height:100%" />
<div id="showData"></div>
var people, asc1 = 1;
function tblGene() {
var data = [{"rollno":1234,'name': "jetta",'marks': 600,'percentage': 1222,'bestscore': 99},{"rollno":2341,'name': "jetta",'marks': 700,'percentage': 1222,'bestscore': 100},{"rollno":3421,'name': "jetta",'marks': 500,'percentage': 1222,'bestscore': 90},{"rollno":4321,'name': "jetta",'marks': 400,'percentage': 1222,'bestscore': 95},{"rollno":2043,'name': "jetta",'marks': 550,'percentage': 1222,'bestscore': 80},];
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
tbody.id = "people";
var tbl = document.createElement("table");
tbl.id = "tblSample";
var col = [];
for (var i = 0; i < data.length; i++) {
for (var colHdr in data[i]) {
if (col.indexOf(colHdr) === -1) {
col.push(colHdr);
}
}
}
var tr = tbl.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
th.dataset.key = i;
tr.appendChild(th);
}
thead.appendChild(tr);
for (var i = 0; i < data.length; i++) {
tr = tbl.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var td = document.createElement("td");
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = data[i][col[j]];
}
tbody.appendChild(tr);
}
tbl.appendChild(thead);
tbl.appendChild(tbody);
var divCntr = document.getElementById("showData");
divCntr.innerHTML = "";
divCntr.appendChild(tbl);
thead.addEventListener("click", function(event) {
var key = event.target.dataset.key;
people = document.getElementById("people");
sort_tbl(people, key, asc1);
});
function sort_tbl(tblSample, key, asc) {
var rows = tblSample.rows,
rlen = rows.length,
arr = new Array();
for (var i = 0; i < rlen; i++) {
var cells = rows[i].cells;
var clen = cells.length;
arr[i] = new Array();
for (var j = 0; j < clen; j++) {
arr[i][j] = cells[j].innerHTML;
}
}
arr.sort(function(x, y) {
if (isNaN(x[key]) && isNaN(y[key])) {
var a = String(x[key]).toUpperCase();
var b = String(y[key]).toUpperCase();
if (a > b)
return 1
if (a < b)
return -1
return 0;
} else {
return x[key] - y[key];
}
});
for (i = 0; i < rlen; i++) {
rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
}
}
}

Just remove the () from you onclick handler, like this onclick="tblGene".
If you leave the (), you're executing the function as soon as the <input> element is loaded - in your case on page load.

Injecting table into specific class

When I generate this table it is generated after the rest of the code is executed.
I want to be able to generate the code into a specific class like ".container".
How would I do this?
var listOfWords = [];
var rndWord = [];
var counter = 0;
var ul = document.getElementById("wordlist");
var i;
for (i = 0; i < ul.children.length; ++i) {
listOfWords.push({
"name": ul.children[i].getAttribute("data-word"),
"pic": ul.children[i].getAttribute("data-pic"),
"audio": ul.children[i].getAttribute("data-audio")
});
}
var chosenWords = [];
var copylist = listOfWords.slice();
for (var x = 0; x < 6; x++) {
var rand = Math.floor(Math.random() * (copylist.length));
chosenWords.push(copylist[rand].name);
copylist.splice(rand, 1);
if (chosenWords.length < 12) {
chosenWords.push(' ');
}
}
var shuffledWords = [];
shuffledWords = chosenWords.sort(function() {
return 0.5 - Math.random()
});
var guesses = {};
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {
var row = document.createElement('tr');
for (var j = i; j < i + wordsPerRow; ++j) {
var word = shuffledWords[j];
guesses[word] = [];
for (var k = 0; k < word.length; ++k) {
var cell = document.createElement('td');
$(cell).addClass('drop-box').attr('data-word', word).attr('data-letter', word[k]);
cell.textContent = word[k];
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
document.body.appendChild(tbl);
I thought changing the bottom line of this code from
document.body.appendChild(tbl);
to
document.container.appendChild(tbl);
would do it but it didn't.
Does anyone know how to put this table into container?

If you want to add the table to an element with a specific css class, you can do the following.
$(".container").append(tbl);

Making sure words do not repeat when populating grid

When my grid is created it is supposed to have 6 unique words in, but at the moment it generates 6 words that are sometimes duplicated.
I need someone to help me write a function to get around this problem.
Here I have the fiddle... http://jsfiddle.net/qBzPx/
Here is the list of words with sounds and images attached...
<ul style="display:none;" id="wordlist">
<li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>
<li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>
<li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li>
<li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li>
<li data-word="rat" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>
<li data-word="dad" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li>
Lastly here is the script....
var listOfWords = [];
var ul = document.getElementById("wordlist");
var i;
for(i = 0; i < ul.children.length; ++i){
listOfWords.push({
"name" : ul.children[i].getAttribute("data-word"),
"pic" : ul.children[i].getAttribute("data-pic"),
"audio" : ul.children[i].getAttribute("data-audio")
});
}
console.log(listOfWords);
var chosenWords = [];
for(var x = 0; x < 6; x++)
{
var rand = Math.floor(Math.random() * (listOfWords.length));
console.log('name ' + listOfWords[rand].name);
chosenWords.push(listOfWords[rand].name);
if (chosenWords.length < 12){
chosenWords.push(' ');
}
}
console.log(chosenWords);
var shuffledWords = [];
shuffledWords = chosenWords.sort(function() { return 0.5 - Math.random() });
var guesses = {};
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {
var row = document.createElement('tr');
console.log(shuffledWords);
for (var j = i; j < i + wordsPerRow; ++j) {
var word = shuffledWords[j];
console.log(j);
console.log(word);
guesses[word] = [];
for (var k = 0; k < word.length; ++k) {
var cell = document.createElement('td');
$(cell).addClass('drop').attr('data-word', word);
cell.textContent = word[k];
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
document.body.appendChild(tbl);

This is variant:
var helper_array = [];
var keysOfWords= {};
for(i = 0; i < ul.children.length; ++i){
keysOfWords[ul.children[i].getAttribute("data-word")] = i;
listOfWords.push({
"name" : ul.children[i].getAttribute("data-word"),
"pic" : ul.children[i].getAttribute("data-pic"),
"audio" : ul.children[i].getAttribute("data-audio")
});
helper_array.push({
"name" : ul.children[i].getAttribute("data-word"),
"pic" : ul.children[i].getAttribute("data-pic"),
"audio" : ul.children[i].getAttribute("data-audio")
});
}
var chosenWords = [];
for(var x = 0; x < 6; x++)
{
var rand = Math.floor(Math.random() * (helper_array.length));
console.log('name ' + helper_array[rand].name);
chosenWords.push(helper_array[rand].name);
helper_array.splice(rand,1);
if (chosenWords.length < 12){
chosenWords.push(' ');
}
}
And where we need play sound:
$("#mysoundclip").attr('src', listOfWords[keysOfWords[rndWord]].audio);

Since it's only six words, a quick way to do this would be to loop until the selected word list is six entries in size and keep generating random IDs until you have non-duplicated words in the list. All you have to do is keep checking the contents of the array against the random word until it's done.
I'm sure there are more elegant approaches, but it'll execute so fast your users won't notice anything.

JQuery - generating a grid from a list of words

Currently this script takes the words from the list and generates a grid, giving the words random positions each time. When the words are generated I want them to be split into individual characters, into cells next to each other so the word still makes sense - how do I do this?
var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", ];
var shuffledWords = listOfWords.slice(0, 12);
shuffledWords.sort(function () {
return 0.5 - Math.random();
});
var table = $('<table class="tablestyle">');
var rows = 6;
var cols = 2;
var tr;
var index;
for (var row = 0; row < rows; row++) {
tr = $('<tr>');
for (var col = 0; col < cols; col++) {
index = (row * cols) + col;
$('<td>').text(shuffledWords[index]).appendTo(tr);
}
tr.appendTo(table);
}
table.appendTo('body');
$('<table>' + innerTable + '</table>').appendTo('body');

Am I right to assume that for each word you want a new row, and for letter in the word you want a new cell?
Try this:
var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", ];
var shuffledWords = listOfWords.slice(0, 12);
shuffledWords.sort(function () {
return 0.5 - Math.random();
});
var tbl = document.createElement('table');
tbl.style.border='solid 1px silver';
for (var i = 0; i < shuffledWords.length; i++)
{
var word = shuffledWords[i];
var row = document.createElement('tr');
for (var j = 0; j < word.length; j++)
{
var cell = document.createElement('td');
cell.style.border='solid 1px silver';
cell.innerText = word[j];
// IF FIREFOX USE cell.textContent = word[j]; INSTEAD
row.appendChild(cell);
}
tbl.appendChild(row);
}
document.body.appendChild(tbl);
http://jsfiddle.net/YJjkB/1/