Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35820 > unrolled thread

Scrollbar positioning

Back to article view | Back to comp.lang.javascript

Contents

  Scrollbar positioning Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-15 16:45 -0800
    Re: Scrollbar positioning Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-15 22:27 -0800
    Re: Scrollbar positioning Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-15 22:30 -0800
    Re: Scrollbar positioning Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-16 01:18 -0800

#35820 — Scrollbar positioning

I will try to render notes played in realtime using a moving scroll on canvas.
The parameters of canvas is the "shown bars", and that is basicly the width of canvas divided by the bars you like it to show. There is of course measures of the metronome that decide how fast "many pixels" the bar move.
Keylength is just another graphical element before scrollbar start render.

So i have a metronome coupled with the clock, and now i have to reder using a setting in FPS, from that i calculate pause between drawings the pause correspond to the note moved some pixels. So the idea is that scrollbar and the metronome clock should sync ***over time***.

So the bars will be the relative measure for where the notes have moved since last draw update. Well that is my theory.
Below the rendertime is time for the scroll to move thru full canvas.
BAR_REND_MULT how many times the scroll moved over canvas. Rstarttime is the realtime clock. 

***For some reason it just draw the first cycle?// 

I was thinking when the multiple goes up Rstarttime again will be less then 1?

This is the pseudo code.
if realtimeclock/time to render 1 canvas*canvas rendered>1 then reset the renderposition "totalmove" and add 1 to render multiple else keep movin scrollbar. 

function drawscrollbar(){
 ctm.strokeStyle = "red";
 ctm.lineWidth=1;
 ctm.beginPath();
 ctm.moveTo(totalmove,0);
 ctm.lineTo(totalmove,Mheight);
 ctm.stroke();
 drawnlines++;
 if (totalmove!=keylength){
 ctm.strokeStyle = "black";
 ctm.lineWidth=2;
 ctm.beginPath();
 ctm.moveTo(totalmove-(pixelmove),0);
 ctm.lineTo(totalmove-(pixelmove),Mheight);
 ctm.stroke();
 }
 if (Rstarttime/RENDERtime*BAR_REND_MULT>1) { ctm.fillStyle = "black";totalmove=keylength;
  BAR_REND_MULT++;} else {totalmove=pixelmove+totalmove;} 
}

[toc] | [next] | [standalone]

#35821

Den fredag 16 november 2018 kl. 01:45:48 UTC+1 skrev Jonas Thörnvall:
> I will try to render notes played in realtime using a moving scroll on canvas.
> The parameters of canvas is the "shown bars", and that is basicly the width of canvas divided by the bars you like it to show. There is of course measures of the metronome that decide how fast "many pixels" the bar move.
> Keylength is just another graphical element before scrollbar start render.
> 
> So i have a metronome coupled with the clock, and now i have to reder using a setting in FPS, from that i calculate pause between drawings the pause correspond to the note moved some pixels. So the idea is that scrollbar and the metronome clock should sync ***over time***.
> 
> So the bars will be the relative measure for where the notes have moved since last draw update. Well that is my theory.
> Below the rendertime is time for the scroll to move thru full canvas.
> BAR_REND_MULT how many times the scroll moved over canvas. Rstarttime is the realtime clock. 
> 
> ***For some reason it just draw the first cycle?// 
> 
> I was thinking when the multiple goes up Rstarttime again will be less then 1?
> 
> This is the pseudo code.
> if realtimeclock/time to render 1 canvas*canvas rendered>1 then reset the renderposition "totalmove" and add 1 to render multiple else keep movin scrollbar. 
> 
> function drawscrollbar(){
>  ctm.strokeStyle = "red";
>  ctm.lineWidth=1;
>  ctm.beginPath();
>  ctm.moveTo(totalmove,0);
>  ctm.lineTo(totalmove,Mheight);
>  ctm.stroke();
>  drawnlines++;
>  if (totalmove!=keylength){
>  ctm.strokeStyle = "black";
>  ctm.lineWidth=2;
>  ctm.beginPath();
>  ctm.moveTo(totalmove-(pixelmove),0);
>  ctm.lineTo(totalmove-(pixelmove),Mheight);
>  ctm.stroke();
>  }
>  if (Rstarttime/RENDERtime*BAR_REND_MULT>1) { ctm.fillStyle = "black";totalmove=keylength;
>   BAR_REND_MULT++;} else {totalmove=pixelmove+totalmove;} 
> }

Well i have to console.log the expression and figure out what goes wrong.

[toc] | [prev] | [next] | [standalone]

#35822

Den fredag 16 november 2018 kl. 01:45:48 UTC+1 skrev Jonas Thörnvall:
> I will try to render notes played in realtime using a moving scroll on canvas.
> The parameters of canvas is the "shown bars", and that is basicly the width of canvas divided by the bars you like it to show. There is of course measures of the metronome that decide how fast "many pixels" the bar move.
> Keylength is just another graphical element before scrollbar start render.
> 
> So i have a metronome coupled with the clock, and now i have to reder using a setting in FPS, from that i calculate pause between drawings the pause correspond to the note moved some pixels. So the idea is that scrollbar and the metronome clock should sync ***over time***.
> 
> So the bars will be the relative measure for where the notes have moved since last draw update. Well that is my theory.
> Below the rendertime is time for the scroll to move thru full canvas.
> BAR_REND_MULT how many times the scroll moved over canvas. Rstarttime is the realtime clock. 
> 
> ***For some reason it just draw the first cycle?// 
> 
> I was thinking when the multiple goes up Rstarttime again will be less then 1?
> 
> This is the pseudo code.
> if realtimeclock/time to render 1 canvas*canvas rendered>1 then reset the renderposition "totalmove" and add 1 to render multiple else keep movin scrollbar. 
> 
> function drawscrollbar(){
>  ctm.strokeStyle = "red";
>  ctm.lineWidth=1;
>  ctm.beginPath();
>  ctm.moveTo(totalmove,0);
>  ctm.lineTo(totalmove,Mheight);
>  ctm.stroke();
>  drawnlines++;
>  if (totalmove!=keylength){
>  ctm.strokeStyle = "black";
>  ctm.lineWidth=2;
>  ctm.beginPath();
>  ctm.moveTo(totalmove-(pixelmove),0);
>  ctm.lineTo(totalmove-(pixelmove),Mheight);
>  ctm.stroke();
>  }
>  if (Rstarttime/RENDERtime*BAR_REND_MULT>1) { ctm.fillStyle = "black";totalmove=keylength;
>   BAR_REND_MULT++;} else {totalmove=pixelmove+totalmove;} 
> }

By the way do anyone know how the metronome usually rendered, right now i run it  in a separate thread with setInterval

But i start to think i probably should prerender it on a track to save cpu.

[toc] | [prev] | [next] | [standalone]

#35823

Den fredag 16 november 2018 kl. 01:45:48 UTC+1 skrev Jonas Thörnvall:
> I will try to render notes played in realtime using a moving scroll on canvas.
> The parameters of canvas is the "shown bars", and that is basicly the width of canvas divided by the bars you like it to show. There is of course measures of the metronome that decide how fast "many pixels" the bar move.
> Keylength is just another graphical element before scrollbar start render.
> 
> So i have a metronome coupled with the clock, and now i have to reder using a setting in FPS, from that i calculate pause between drawings the pause correspond to the note moved some pixels. So the idea is that scrollbar and the metronome clock should sync ***over time***.
> 
> So the bars will be the relative measure for where the notes have moved since last draw update. Well that is my theory.
> Below the rendertime is time for the scroll to move thru full canvas.
> BAR_REND_MULT how many times the scroll moved over canvas. Rstarttime is the realtime clock. 
> 
> ***For some reason it just draw the first cycle?// 
> 
> I was thinking when the multiple goes up Rstarttime again will be less then 1?
> 
> This is the pseudo code.
> if realtimeclock/time to render 1 canvas*canvas rendered>1 then reset the renderposition "totalmove" and add 1 to render multiple else keep movin scrollbar. 
> 
> function drawscrollbar(){
>  ctm.strokeStyle = "red";
>  ctm.lineWidth=1;
>  ctm.beginPath();
>  ctm.moveTo(totalmove,0);
>  ctm.lineTo(totalmove,Mheight);
>  ctm.stroke();
>  drawnlines++;
>  if (totalmove!=keylength){
>  ctm.strokeStyle = "black";
>  ctm.lineWidth=2;
>  ctm.beginPath();
>  ctm.moveTo(totalmove-(pixelmove),0);
>  ctm.lineTo(totalmove-(pixelmove),Mheight);
>  ctm.stroke();
>  }
>  if (Rstarttime/RENDERtime*BAR_REND_MULT>1) { ctm.fillStyle = "black";totalmove=keylength;
>   BAR_REND_MULT++;} else {totalmove=pixelmove+totalmove;} 
> }

Solved but it never drift apart, but it isn't perfect.

function drawscrollbar(){
 
 ctm.strokeStyle = "red";
 ctm.lineWidth=1;
 ctm.beginPath();
 ctm.moveTo(totalmove,0);
 ctm.lineTo(totalmove,Mheight);
 ctm.stroke();
 drawnlines++;
 if (totalmove!=keylength){
 ctm.strokeStyle = "black";
 ctm.lineWidth=2;
 ctm.beginPath();
 ctm.moveTo(totalmove-(pixelmove),0);
 ctm.lineTo(totalmove-(pixelmove),Mheight);
 ctm.stroke();
 tottime=currentTime+(drawpause*drawnlines);
 }
 if (currentTime>RENDERtime*BAR_REND_MULT) { drawnlines=0;totalmove=keylength;
  BAR_REND_MULT++;} else {console.log(currentTime); totalmove=pixelmove+totalmove;
  ctT.fillStyle = "white";ctT.fillRect(7,134,170,16);
  ctT.fillStyle = "BLACK";ctT.fillText("Time ms "+ tottime , 15, Theight-10);
  } 
}

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web