0

Javascript is a new languaje for me so this is a simple task that I cannot achieve. I can set the slider and update the position of my element when I change the slider with:

// Setup a ui.
webglLessonsUI.setupSlider("#x", {slide: updatePosition(0), max: gl.canvas.width });
webglLessonsUI.setupSlider("#y", {slide: updatePosition(1), max: gl.canvas.height});

Where update position is:

function updatePosition(index) {
  return function(event, ui) {
    translation[index] = ui.value;
    drawScene();
  };
}

But now I want just to set the value of the slider (because I have a back to default position function), and I am no able. I tried many things, such as:

webglLessonsUI.UpdateUI($('#x'), 0);

And:

$('#x').value = 0;

Or:

$('#x').slide = 0;

The tutorial where these UI components are used is this one:

https://webgl2fundamentals.org/webgl/lessons/webgl-2d-translation.html

And the ui componenents are here, can be used directly if link added to html, or even the tutorial itself (link above) has all the code needed to run the slider in the web itself.

https://webgl2fundamentals.org/webgl/resources/webgl-lessons-ui.js

Just want to manipulate the value of the slider directly. Any help is much appreciated, thanks

rustyBucketBay
  • 4,320
  • 3
  • 17
  • 47

1 Answers1

1

There's a couple of things that needed to be done in my opinion to achieve this based on the example you provided. First, the main() function on lines 98 and 99 is setting up the sliders like so:

webglLessonsUI.setupSlider("#x", {slide: updatePosition(0), max: gl.canvas.width }); webglLessonsUI.setupSlider("#y", {slide: updatePosition(1), max: gl.canvas.height});

If we check the library you provided (around line 99) we can see that the function setupSlider returns an object with both the html reference and a function to update its value:

    return {
  elem: parent,
  updateValue: (v) => {
    v /= step;
    sliderElem.value = v;
    updateValue(v);
  },
};

The problem here is that the code is not assigning this object to any references (variables) that you access, so basically the elements get created, the listeners get set to the HTML elements but when you call $('#x') you are accessing the HTML reference, not the object with the update function.

So the first thing I did was to add a couple of global variables to store the returned objects from setupSlider:

let slider1,
slider2

Then we change lines 99 and 98 of the example to store the returned objects like so:

slider1 = webglLessonsUI.setupSlider("#x", {slide: updatePosition(0), max: gl.canvas.width });

slider2 = webglLessonsUI.setupSlider("#y", {slide: updatePosition(1), max: gl.canvas.height});

This allows us to access them on other functions, so I created a function that changes the value of a given slider object:

function updateSlider(slider, value) {slider.updateValue(value)}

And in my case I created a timeout that calls this function after 2 seconds for simplicity but you can assign this function to a onClick event or basically anything you want.

Here is the example I made:

Example on codepen

If you wait a couple of seconds you should see slider x update its value to a 100, I didn't worry about updating the rest of the Ui but I figured that was outside the scope of the question.

Hope it helps!

Itsca
  • 378
  • 3
  • 8