Click here to Skip to main content
15,117,889 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
Hi. May someone could tell me why my web worker does not work?
I draw an animated canvas that is run well. But when I resize it via text boxes, it stops running until the JavaScript executed. Now, I create a worker to assume the task of resize the graphic without stopping the movement of canvas. I want it to update the value of the hidden field, by taking the values the text boxes, convert to string, then set the result to the hidden field value. For that I make to files. I mean no JavaScript code in the html markup. the code files are the follow

/* Code that will be run by the worker */
function applyChanges(radius, size) {
    return radius + "," + size;
}
/*
    Add an event listener to the worker, this will be called when      
    the worker receives a message from the main page.
*/
this.onmessage = function (event) {
    var data = event.data;
    // Message sent by the worker to the main page.
    postMessage(applyChanges(data.radius, data.size));
}
/* Worker's code */
// Create a new worker
var myWorker = new Worker("C:\applications\bb\scripts\setValues.js");
/*
    Add a event listener to the worker, this will be called whenever the worker posts any message.
*/
myWorker.onmessage = function (event) {
    document.getElementById().value = event.data;
};
// Register events for button.
document.getElementById("button").onclick = function () {
    var circle = document.getElementById("tcircle");
    var square = document.getElementById("tsquare");
    var radius = circle.value;
    var size = square.value;
    // check if those are numerics
    if (!isNaN(radius) && !isNaN(size)) {
        // verify that the won't hide more the 1/4 of the circle.
        if (radius >= size / Math.SQRT2) {
            // since we are going to test scrolling and zooming, we are not going to  set max values of radius and size.
            message = { "tcircle": radius, "tsize": size };
            // Message sent by the main page to the worker.
            myWorker.postMessage(message);
        }
        else {
            alert("The radius must not be less that: size/sqrt(2)");
        }
    }
    else {
        alert("Required numeric type!");
    }
}
// Terminate the worker.
myWorker.terminate();
Posted
Updated 25-Apr-11 16:09pm
v2

1 solution

Try constructing your Worker with a relative path:
new Worker("setValues.js");


If that doesn't work, you need to do some investigation:

If you're using Google Chrome, press Ctrl+Shift+J to open the developer tools.

- Press the Network tab, click the Record button and refresh. Check to make sure setValues.js is loaded.

- Press the Scripts tab, and click 'Debug' beside the Workers item on the right. Then you will be able to place a breakpoint in your Worker.

Good luck!
   
Comments
Le_Bedel 28-Apr-11 4:44am
   
Thank you. No I am not using chrome. In fact the application target on Blackberry mobile. Anyway I will try then let you know.
Jonathan Cardy 28-Apr-11 5:25am
   
You might want to try Chrome - it provides useful debugging features for Web Workers and will give you a pretty accurate picture of what the end result will be in Blackberry.
Le_Bedel 30-Apr-11 18:22pm
   
Thanks again. I try to run a worker example on Chrome and it is running fine. But I don't understand what's wrong in my code. I reduce the code. But still not working and I can't detect the problem.
// worker.js

function applyValues(radius, size) {
return radius + "," + size;
}

/*
Add a event listener to the worker, this will
be called when the worker receives a message
from the main page.
*/
this.onmessage = function(event) {
var data = event.data;
postMessage(applyValues(data.radius, data.size));
};

// Worker
/* Check if Web Workers are supported */
function getWebWorkerSupport() {
return (typeof (Worker) !== "undefined") ? true : false;
}

if (getWebWorkerSupport() == true) {
var radius, size, message;

worker = new worker("worker.js");

/*
Add a event listener to the worker, this will
be called when the worker posts a message.
*/
worker.onmessage = function(event) {
alert(event.data);
document.getElementById("hidden").value = event.data;
};

// Register event for button
document.getElementById("btn").onclick = function() {
radius = document.getElementById("tcircle").value;
size = document.getElementById("tsquare").value;
message = {'radius': radius, 'size': size };
worker.postMessage(message);
}
}
Jonathan Cardy 1-May-11 4:17am
   
Your code is fine, I just made some small changes to get it to work:

- Wrapped your code in the window load event
- Uppercase 'W' in Worker

Also, does your browser definitely support Web Workers?

worker.js:
function applyValues(radius, size) {
return radius + "," + size;
}

/*
Add a event listener to the worker, this will
be called when the worker receives a message
from the main page.
*/
self.onmessage = function(event) {
var data = event.data;
postMessage(applyValues(data.radius, data.size));
};


page:
window.addEventListener("load", function(){
if (typeof (Worker) !== "undefined") {
var radius, size, message,
worker = new Worker("worker.js");

/*
Add a event listener to the worker, this will
be called when the worker posts a message.
*/
worker.onmessage = function(event) {
alert(event.data);
};

// Register event for button
document.getElementById("btn").onclick = function() {
message = {'radius': 2, 'size': 3 };
worker.postMessage(message);
}
}
}, false);
Le_Bedel 1-May-11 7:23am
   
Thanks a lot. It is working. But I think the philosophy of using it is wrong. I have an animated canvas and I want to re-size the shapes dimension without stop the motion of the canvas. but when it stops whenever the dialog box of "alert" pop up. The more, I want to apply the result as a value of a hidden field. Then take that value and split it and apply them as new values of drawing: radius and size.
Thank you for you time.
Jonathan Cardy 1-May-11 7:27am
   
Yes, you're right: unless you are doing a lot of intensive computation in the Worker, it's pointless.
Le_Bedel 1-May-11 19:04pm
   
Thank you.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900