CODEWITHSUNDEEP
javascripthtmlcsscanvas
Rifan
Rifan

Reputation: 3

Canvas Slideshow with slider

I wanted to create canvas slideshow with speed controller. But slider is not working. It’s not controlling the speed of slideshow. I can change the value manually from setinterval value but I want to control when I move the slider but it’s not working. Other than that everything working fine. Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> Slider </h1>
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #d3d3d3;">
</canvas>
   
<div class="slideshow-container">
<div style="text-align:left">  
    <input id="speed" name="speed" type="range" min="1" max="5" value="3">
    <p style="color: black">Value: <span id="speedValue"></span></p>  </div>
       
   <script>     
         
            var slider = document.getElementById("speed");
            var output = document.getElementById("speedValue");
            var speedMod= 3;
            output.innerHTML = slider.value;
            
            slider.oninput = function() {
            output.innerHTML = this.value;
            speedMod = this.value; 
            }
                        
var image0 = new Image();
image0.src = "http://placekitten.com/200/300";
var image1 = new Image();
image1.src = "http://placekitten.com/205/305";
var image2 = new Image();
image2.src = "http://placekitten.com/300/400";
var image3 = new Image();
image3.src = "http://placekitten.com/800/600";

images = new Array(image0, image1, image2, image3);

var counter = 0, ctx;
​
function draw(){
    myCanvas = document.getElementById("myCanvas");
    ctx = myCanvas.getContext("2d");         
               
}
​

function draw_next_image(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.drawImage(images[counter], 0, 0);
    counter++;
   if (counter==images.length) {counter=0;}
    ;
     
}
setInterval(draw_next_image, speedMod*1000);
window.onload = draw;
​
</script>

Upvotes: 0

Views: 802

Answers (1)

A Haworth
A Haworth

Reputation: 36512

There are two main problems with this code:

  1. the new interval is not being set when the slider is moved
  2. the speed settings are reversed so that a 5 gives an interval of 5 seconds and 1 gives an interval of 1 second.

For the first problem we need to reset the interval by calling setInterval BUT be aware that if you just did that you would set up a new interval timer each time the slider is moved but the old one would still be running, so you'd get some odd timing effects (and eventually even run into storage problems).

On setting a time interval you must clear any previous setting.

For the speeds being the wrong way round this snippet simply subtracts the slider value from 6 to give 1second when the value is 5 and 5 seconds when the value is 1. If you are thinking of experimenting with different ranges put in some more sophisticated code which will calculate the desired interval from any range.

            var slider = document.getElementById("speed");
            var output = document.getElementById("speedValue");
            var speedMod= 3;
            let interval; //will be set by setInterval
            
            output.innerHTML = slider.value;
            
            slider.oninput = function() {
            output.innerHTML = this.value;
            speedMod = this.value;
            clearInterval(interval);
            interval = setInterval(draw_next_image, (6-speedMod)*1000);            
            }
                        
var image0 = new Image();
image0.src = "http://placekitten.com/200/300";
var image1 = new Image();
image1.src = "http://placekitten.com/205/305";
var image2 = new Image();
image2.src = "http://placekitten.com/300/400";
var image3 = new Image();
image3.src = "http://placekitten.com/800/600";

images = new Array(image0, image1, image2, image3);

var counter = 0; var ctx;
function draw(){
    myCanvas = document.getElementById("myCanvas");
    ctx = myCanvas.getContext("2d");         
               
}
function draw_next_image(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.drawImage(images[counter], 0, 0);
    counter++;
   if (counter==images.length) {counter=0;}
    ;
     
}
clearInterval(interval);
interval = setInterval(draw_next_image, (6-speedMod)*1000);
window.onload = draw;
<h1> Slider </h1>
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #d3d3d3;">
</canvas>
   
<div class="slideshow-container">
<div style="text-align:left">  
    <input id="speed" name="speed" type="range" min="1" max="5" value="3">
    <p style="color: black">Value: <span id="speedValue"></span></p>  </div>

Incidentally, there is a pause at the start before an image is seen as the canvas is drawn before the image is loaded (the window.onload is not doing anything in this situation).

Upvotes: 1

Related Questions