How to delay (postpone ?) the start of a script (sorry for my English)

**pierruel** · 01-21-2016, 07:19 AM

Good morning Vic,
I'm impressed by the manner you produce js code: as simply as you breathe I think.
About your last version I must say that I can't use it because when I play, all my fingers are very busy closing or opening holes on my flute and I'm not able to press any button.
The idea that I need to keep control upon the app is totally correct and I thought about it. I think the solution is
1) to have a fully automatic run of the program
2) to adjust the timings (my job) in order to have the system running rather a bit faster than necessary (the best would be of course to have it running exactly at the right speed,but it will not be possible because there is more to play on certain staves than on others)
3) to add a footpedal control as a simple toggle: one press = pause both sliders; one second press = resume running.
Both sliders must be pausing together because if one pauses only one of them, the other will continue too far ahead and there will be a gap between the end of the fragment I was playing and the next one.
Would you be so kind as to modify once more your code in this direction ?
Thing you in advance
Pierre

**pierruel** · 01-21-2016, 06:06 PM

Good evening Vic,
I have an additional question. Perhaps I should have opened a new thread with it, just tell me. My question is: is it possible to change dynamically the contents of a <div>. The relation with the app you're re-making for me is as follows: This app will not be used just for one musical piece. To that aim I see two ways:
1) I duplicate the app for each new piece of music, the fragments of it I paste manually into the div's (the app weight is only about 4 Ko, it's not a problem to duplicate it a plenty of times)
2) I have a coded mean to replace dynamically the fragments of piece A by the fragments of piece B in the corresponding div's.
Thank you in advance but please don't modify immediately your code, I must check how it works as it is.
Best regards
Pierre

**vwphillips** · 01-22-2016, 02:53 PM

sorry bot to get back to you
I have not been well
it may be a day or two until I get back

but I have added a toggle function and the ability to change the images

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <base href="http://www.vicsjavascripts.org/StdImages/"  />
  <style type="text/css">
  /*<![CDATA[*/

  #slider {
    position:relative;left:50px;top:0px;width:700px;height:200px;border:solid red 1px;
  }

  #slider2 {
    position:relative;left:50px;top:0px;width:700px;height:200px;border:solid red 1px;
  }

  .page {
    position:absolute;left:0px;top:0px;width:700px;height:200px;border:solid red 1px;
  }

  /*]]>*/
  </style>
</head>

<body>

<input type="button" name="" value="Next" onclick="zxcImageSlider.Next('slider',1);" />
<input type="button" name="" value="Back" onclick="zxcImageSlider.Next('slider',-1);" />
<input type="button" name="" value="Auto" onclick="zxcImageSlider.Auto('slider');" />
<input type="button" name="" value="Pause" onclick="zxcImageSlider.Pause('slider');" />
<input type="button" name="" value="GoTo 0" onclick="zxcImageSlider.GoTo('slider',0);" />
<input type="button" name="" value="GoTo 2" onclick="zxcImageSlider.GoTo('slider',1);" />
<input type="button" name="" value="GoTo 4" onclick="zxcImageSlider.GoTo('slider',2);" />
<input type="button" name="" value="Toggle Auto" onclick="zxcImageSlider.Toggle('slider');" />
<div id="slider" class="slider" >
 <img  class="page" src="0.gif" />
 <img class="page" src="2.gif" />
 <img class="page" src="4.gif" />
</div>
<input type="button" name="" value="ChangeImages" onclick="zxcImageSlider.Init({ParentID:'slider',ImageArray:['6.gif','7.gif','8.gif']});" />
<br />
<input type="button" name="" value="Toggle Auto(Both)" onclick="zxcImageSlider.Toggle('slider');zxcImageSlider.Toggle('slider2');" />
<br />
<br />
<input type="button" name="" value="Next" onclick="zxcImageSlider.Next('slider2',1);" />
<input type="button" name="" value="Back" onclick="zxcImageSlider.Next('slider2',-1);" />
<input type="button" name="" value="Auto" onclick="zxcImageSlider.Auto('slider2');" />
<input type="button" name="" value="Pause" onclick="zxcImageSlider.Pause('slider2');" />
<input type="button" name="" value="GoTo 1" onclick="zxcImageSlider.GoTo('slider2',0);" />
<input type="button" name="" value="GoTo 3" onclick="zxcImageSlider.GoTo('slider2',1);" />
<input type="button" name="" value="GoTo 5" onclick="zxcImageSlider.GoTo('slider2',2);" />
<input type="button" name="" value="Toggle Auto" onclick="zxcImageSlider.Toggle('slider2');" />
<div id="slider2" class="slider" >
 <img  class="page" src="1.gif" />
 <img class="page" src="3.gif" />
 <img class="page" src="5.gif" />
</div>



<script type="text/javascript">
/*<![CDATA[*/

var zxcImageSlider={

 Toggle:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   o.auto?this.Pause(id):this.Auto(id);
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.n+ud);
  }
 },

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o){
   this.Pause(o.id);
   if (o.a[n]&&o.n!=n){
    o.ud=n<o.n?-1:1;
    this.rotate(o,n);
   }
  }
 },

Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id],ms;
  if (o){
   o.to=setTimeout(function(){ oop.rotate(o,o.n+o.ud,true);  },typeof(ms)=='number'&&ms>=0?ms:200);
  }
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   o.auto=false;
   clearTimeout(o.to);
  }
 },

 Init:function(o){
  var id=o.ParentID,p=document.getElementById(id),a=o.ImageArray,ms=o.Animate,hld=o.AutoHold,s=o.AuoStart,i,z0=0;
  if (p&&a instanceof Array){
   p.innerHTML='';
   for (;z0<a.length;z0++){
    i=document.createElement('IMG');
    i.src=a[z0];
    p.appendChild(i);
   }
  }
  var imgs=p?p.getElementsByTagName('IMG'):[];
  if (imgs[2]){
   var i=this['zxc'+id],w=p.offsetWidth,h=p.offsetHeight,z1=0;
   p.style.overflow='hidden';
   o.a=[];
   for (var z1=0;z1<imgs.length;z1++){
    imgs[z1].style.position='absolute';
    imgs[z1].style.zIndex='0';
    imgs[z1].style.visibility='visible';
    imgs[z1].style.left=(z1!=0?w:0)+'px';
    imgs[z1].style.top='0px';
    imgs[z1].style.width=w+'px';
    imgs[z1].style.height=h+'px';
    o.a[z1]=[imgs[z1],'left'];
   }
   o.id=id;
   o.sz=w;
   o.n=0;
   o.l=z1-1;
   o.ud=o.ud?o.ud:1;
   o.ms=typeof(ms)=='number'&&ms>0?ms:i.ms?i.ms:1000;
   o.h=typeof(h)=='number'&&hld>0?hld:i.h?i.h:o.ms*4;
   o.oc=o.OnComplete;
   this['zxc'+id]=o;
   this.Pause(id);
   typeof(s)=='number'&&s>=0?this.Auto(id,s):null;
  }
 },

 rotate:function(o,n,a){
  this.Pause(o.id);
  o.auto=a===true;
  n=n<0?o.l:n>o.l?0:n;
  o.a[n][0].style.left=o.sz*o.ud+'px';
  this.animate(o,o.a[o.n],0,-o.sz*o.ud,new Date(),o.ms);
  this.animate(o,o.a[n],o.sz*o.ud,0,new Date(),o.ms,true);
  o.n=n;
 },

 animate:function(o,a,f,t,srt,mS,x){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
  }
  else {
   a[0].style[a[1]]=t+'px';
   x&&o.auto?oop.Auto(o.id,o.h):null;
   typeof(o.oc)=='function'?o.oc():null;
  }
 }

}

zxcImageSlider.Init({
 ParentID:'slider', // the unique ID of the parent DIV. (string)
 Animate:1000,      //(optional) the slide duration in mill-sec.          (number, default)
 AutoHold:2*1000,     //(optional) the auto rotate delay in mill-sec.       (number, animate*4)
// AuoStart:2000,      //(optional) the auto rotate start delay in mill-sec. (number, no auto start)
 OnComplete:function(){
//   setTimeout(function(){ zxcImageSlider.Next('slider2',1); },10*100);
 }
});

zxcImageSlider.Init({
 ParentID:'slider2',
 Animate:1000,
 AutoHold:15*1000,
// AuoStart:2000,
 OnComplete:function(){
//  setTimeout(function(){ zxcImageSlider.Next('slider',1); },10*100);
 }
});

//zxcImageSlider.Next('slider',1);
/*]]>*/
</script>

</body>

</html>

**pierruel** · 01-22-2016, 05:30 PM

Don't worry Vic,
I hope only you'll get better soon.
I'm not in a hurry and, in addition, I'll be away for the week end without an access to my own computer.
Have a good week end and a better condition.
PIerre

**pierruel** · 01-25-2016, 04:10 PM

Click image for larger version.

Name: chart1..jpg
Views: 45
Size: 15.2 KB
ID: 5812

Good afternoon Vic,
I hope you've got in better health condition.
There is no hurry but I must inform you of my last thoughts regarding my double slideshow.
I see now that I pulled you on a wrong way.
The app I worked since last December and yourself since half a month musn't be automatic. The reason is that music lines (staves) are too different. In the piece I'm triying to use, the longest line displays 9 bars, the shorter one only 2. So the longest one will need 4.5 times more time to be played than the shortest one ! I should have thought of it sooner, I'm really sorry.
Your last posted code is all right as far as changing the pictures is concerned, they "push" each other out of the screen instead of overlapping it.
But as I wrote last week there may not have buttons on the screen because when I'm playing I have no free hand to press a button, except when I stop playing (of course). The only usable button corresponds to the case that we (my piano partner and I) stopped playing and we decide to re-play from a certain place. In that case I need only one "back" button which brings me back one picture before at a time.
On the other hand as the scroller isn't automatic and the lines are very different in lenght (= duration) I need to make the music progress (by pressing a pedal) one picture at a time but alternatively in "slider" and in "slider2".
I attach a small chart to make (I hope) things more clear).
As far as playing another musical piece (i.e. changing the images) is concerned, I don't understand how you manage it to work.
Let's say I own only two pieces of sheetmusic, the Prokofiev "Flute Sonata opus 94" and Mozart's "Andante for the flute". The first piece is contained in 16 pictures, the second in 8 pictures. On my computer I will put the 16 Prokofiev picture in one file named for instance "Img_Prokof" and the Mozart pictures in a "Img_Moz_Andante" file.
As I wrote last week, it is very simple to duplicate the HTML file and to replace one musical piece by the other. I can do it by myself very easily and I would like to do so with my (probably) 80 or 100 pieces of flute music. I think that a javascript extension would be far too much complicated for such a simple problem. And I would be probably unable to modify correctly the javascript code, as you know.
Keep recovering and don't worry about that, I can wait.
Best regards
Pierre

Thread: How to delay (postpone ?) the start of a script (sorry for my English)

Thread Tools

Search Thread

Similar Threads

How to delay the start of the slideshow

Delay start of C Motion Gallery script?

have code - trying to avoid 30 sec delay from start

Script: Ultimate Fade-in slideshow (v1.5) - how to delay start?

Slideshow start delay

Bookmarks

Bookmarks

Posting Permissions