update trackbar from javascript


I have a series javascript functions that loads a series of bitmaps on a canvas control. It uses a timer loop to play through the bitmaps one by one. The following script playForward — increments a frame count and loops through calling the loadImage function that puts the bitmap on canvas. All works ok. But I’m unable to update a trackbar control so it moves as the bitmaps are displayed on the canvas. I’ve tried to put code in the playForward function.

svv.setCanvas = function (canvas) {
svv.canvas = document.getElementById(canvas.getId());

function playforward() {


// put code here to update trackbar control
if (svv.isPlaying) {
setTimeout(function () { playforward(); }, svv.playMills);

function loadImage(frame) {
var img = new Image;
//var xx = svv.frameNbr;
img.onload = function () {
var ctx1 = svv.canvas.getContext(‘2d’);
var w = svv.canvas.offsetWidth;
var h = svv.canvas.offsetHeight;
try {
ctx1.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, w, h);
} catch (e) {
ctx1.drawImage(img, 0, 0, 360, 240, 0, 0, w, h);
img.src = “data:image/jpg;base64,” + svv.frames[frame];

I tried, unsuccessfully, to put code in this function to also update a trackbar control



  • You must to post comments

Got both working! Small adjustments for VB syntax. Thank you, Luca

  • You must to post comments

See attached sample. Shows several concepts:

  • How to add and load a plain .js file to a page, see the JavaScript1 component on Page1 and see the JavaScriptSource property added to the page linking the JavaScrip1.cs file.
  • How to pass a Wisej server control to a Wisej client widget as a parameter in a js call! Sounds impossible but in Wisej it’s as easy as Call(“methodName”, this.progressBar1). Wisej converts the control into an id and back into a widget transparently.
  • How to call a server side function from javascript as if it was a javascript function.

There are 2 buttons. The first starts a javascript interval loop and passes the progressBar to update to the function:

 private void button1_Click(object sender, EventArgs e)
   Call("runUpdateLoop", this.progressBar1);

The javascript function starts a timer and simply uses the progressbar widget on the client directly:


The second button calls a different js function that starts the timer and receives the maxim value of the progress bar instead:

 Call("runUpdateLoopWithCallback", this.progressBar2.Maximum);

The js function calls back the page server method to update the progress bar just like any other javascript function:

 // this is a web method call.

On the page we have the C# method that updates the progress bar.

 public void UpdateProgressBar(int value)
   this.progressBar2.Value = value;

In the first case the client updates the progress bar without notifying the server app. In the second case it’s the server side that receives the progress updates.

There are several other ways to do this too in Wisej depending on the requirements of the app.


  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.