TIMER and CLS (animation problem)

[Gordon]

Why does removing the REM stops the timer?

'raket en marslander
'call setCSS
'x= 320:y = 200

link #timer, "",  [timer]
Call TimeoutLink 1000, "#timer"
wait


[timer]

'cls    '<<<<<<<<< un-REM will stop the TIMER execution?

x = int(rnd(0)*500)+40
y = int(rnd(0)*400)+40

loadgraphic #fwin,"public\raket\marsla.png"
render #fwin
gosub [gifplaatjes]
'gosub [imgbuttons]
wait

[richting]
if EventKey$ = "#b3" and y>20 then y = y - 20
if EventKey$ = "#b2" and x<790 then x = x + 20
if EventKey$ = "#b1" and x>20 then x = x - 20

cls:render #fwin

gosub [gifplaatjes]
gosub [imgbuttons]
wait
'------------------------------------------

[gifplaatjes]
tp$ = " top:"+str$(y)+"px;"
lp$ = " left:"+str$(x)+"px;"
html "<img src='/raket/lande9.gif' style=' width:80px; height:80px; position:absolute;"+lp$+tp$+ "'>"
RETURN

[imgbuttons]
div nav1
 imagebutton #b1, "\raket\links.jpg", [richting]
end div
div nav2
 imagebutton #b2, "\raket\rechts.jpg", [richting]
end div
div nav3
 imagebutton #b3, "\raket\omhoog.jpg", [richting]
end div
RETURN

Sub TimeoutLink msec, linkId$
   html "
   <script type=""text/javascript"">
   <!--
   var a = document.getElementById('"+linkId$+"');
   if (a) window.setTimeout('window.location = a.href', "+Str$(msec)+");
   //-->
   </script>"
End Sub


[Gordon]

Solved.
I don't use CLS and so no render too.
I forced my background image position absolute near 0,0
using a call (or gosub) ... the TIMER does this.

[meerkat]

Aug 8, 2018 8:08:51 GMT -5 Gordon said:

Why does removing the REM stops the timer?

Because cls clears the html page.
And the html page is where javascript is stored.

If you need to do a cls, do it before you execute the javascript and it won't be lost...


Hope this helps.

[Gordon]

Aug 14, 2018 12:58:21 GMT -5 meerkat said:

Aug 8, 2018 8:08:51 GMT -5 Gordon said:

Why does removing the REM stops the timer?

Because cls clears the html page.
And the html page is where javascript is stored.

If you need to do a cls, do it before you execute the javascript and it won't be lost...


Hope this helps.

Hmmm .... thanks anyway.
I tried your advice ... I had no succes.
But I could be me.

Gordon.
p.s. I have a playable lander version for RB.
16 lem gif pictures ... 1 Moonland with 4 landing platforms.
6 gif buttons for steering and firing the thrust engines.

I'll post it here.... still busy with dynamical fuel usage 

[meerkat]

Hmmmmm!
Not sure what is going on?
I moved the cls before the link #timer so that the <javascript code isn't cleared from the web page and it seems to work.




cls    '<<<<<<<<< un-REM will stop the TIMER execution?
link #timer, "",  [timer]
Call TimeoutLink 1000, "#timer"
wait

[timer]
.......


[Gordon]

Hello Meerkat,

The cls is needed every time to refresh my background (to make animation possible).
Rendering a loadgraphic will not start on position 0,0 without CLS
So cls is always needed after the link #timer. I even place the javascript in top.

I abandoned the cls render combination and are working with html to position my
background picture at 0,0.

I hope Carl is reading this too ...

Gordon

[meerkat]

Have you tried anything similar to this?

dim array$(6)
html "<div style='position: relative; left: 50px; top: 2px; height:0px; width:0px;'>"
textbox #textbox1, ""
html "</div>"
html "<div style='position: relative; left: 250px; top: 2px; height:0px; width:0px;' id=h131108>"
button #button2,"Button Caption",[button2Click]
html "</div>"
html "<div style='position: relative; left: 50px; top: 52px; height:0px; width:0px;' id=h131108>"
listbox #listbox3, array$(),6
html "</div>"


[Gordon]

Nope.

I use div to locate an gif imagebutton with things like

Sub setCSS
cssid #mainBG,"{position:absolute; left:50px ; top:180px;}"
cssid #nav1, "{position:absolute; left:620px; top:520px;}"
cssid #nav2, "{position:absolute; left:720px; top:520px;}"
cssid #U10, "{position:absolute; left:670px; top:472px;}"
cssid #U8, "{position:absolute; left:685px; top:427px;}"
cssid #U6, "{position:absolute; left:688px; top:392px;}"
cssid #U4, "{position:absolute; left:690px; top:362px;}"
cssid #U2, "{position:absolute; left:692px; top:337px;}"
end sub

and then I use div end div commands like:

[imgbut]
div nav1
imagebutton #b1, "\raket\pijlL.gif", [richting]
end div
div nav2
imagebutton #b2, "\raket\pijlR.gif", [richting]
end div
div U10
imagebutton #U10, "\raket\U10.gif", [richting]
end div
div U8
imagebutton #U8, "\raket\U8.gif", [richting]
end div
div U6
imagebutton #U6, "\raket\U6.gif", [richting]
end div
div U4
imagebutton #U4, "\raket\U4.gif", [richting]
end div
div U2
imagebutton #U2, "\raket\U2.gif", [richting]
end div
RETURN

B.t.w. Never position your mainbackground less then 40 px left.
Because you won't reach your RB menu if you do.

[Gordon]

This item is solved.
I can and I use the RENDER way, as that is far easier then HTLM for
positioning texts and pictures.
CLS even works in my advance. I could not rewrite the stopTimer javascript
(due to me my lack of JS knowledge) so now I'm using CLS to stop the timer.

Just in front of the next wait command, I issue a call to my TIMER routine... and
no problems anymore. I still need html to position buttons (imagebuttons)
and gif pictures.

Gordon

[meerkat]

Have you tried setInterval('clock()',ms);

I have a avionics system and show a clock at the upper left of the instrument panel.
There are lots of other dials on the panel, along with the earth as moving as the plane does.
It also shows level, height, orientation, fuel, air speed, ground speed, and others.
Since it's written in RB, you can actually watch the panel from anywhere with internet connections.

Here is the clock part of the panel.
html "
<canvas id='canvas' width='150' height='150' style='border: 1px #000 solid;'></canvas>

<script type='text/javascript'><!--
function init(){
 var canvas = document.getElementById('canvas');
 if(canvas.getContext) {
   clock();15305493335
   setInterval('clock()',1000);

   //clock(canvas);
   //setTimeout('clock('+canvas+')',1000);
 }
 else {
   alert('This browser doesn\'t support the canvas element :(');
 }
}
function clock(/*canvas*/){
 var now = new Date();
 var ctx = document.getElementById('canvas').getContext('2d');
 //var ctx = canvas.getContext('2d');
 ctx.save();
 ctx.clearRect(0,0,150,150);
 ctx.translate(75,75);
 ctx.scale(0.4,0.4);
 ctx.rotate(-Math.PI/2);
 ctx.strokeStyle = 'black';
 ctx.fillStyle = 'white';
 ctx.lineWidth = 8;
 ctx.lineCap = 'round';

 // Hour marks
 ctx.save();
 ctx.beginPath();
 for (var i=0;i<12;i++){
   ctx.rotate(Math.PI/6);
   ctx.moveTo(100,0);
   ctx.lineTo(120,0);
 }
 ctx.stroke();
 ctx.restore();

 // Minute marks
 ctx.save();
 ctx.lineWidth = 5;
 ctx.beginPath();
 for (i=0;i<60;i++){
   if (i%5!=0) { // 5 minutes
     ctx.moveTo(117,0);
     ctx.lineTo(120,0);
   }
   ctx.rotate(Math.PI/30);
 }
 ctx.stroke();
 ctx.restore();
 
 var sec = now.getSeconds();
 var min = now.getMinutes();
 var hr  = now.getHours();
 hr = hr>=12 ? hr-12 : hr;

 ctx.fillStyle = 'black';

 // write Hours
 ctx.save();
 ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
 ctx.lineWidth = 14;
 ctx.beginPath();
 ctx.moveTo(-20,0);
 ctx.lineTo(80,0);
 ctx.stroke();
 ctx.restore();

 // write Minutes
 ctx.save();
 ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
 ctx.lineWidth = 10;
 ctx.beginPath();
 ctx.moveTo(-28,0);
 ctx.lineTo(112,0);
 ctx.stroke();
 ctx.restore();
 
 // Write seconds
 ctx.save();
 ctx.rotate(sec * Math.PI/30);
 ctx.strokeStyle = '#D40000';
 ctx.fillStyle = '#D40000';
 ctx.lineWidth = 6;
 ctx.beginPath();
 ctx.moveTo(-30,0);
 ctx.lineTo(83,0);
 ctx.stroke();
 ctx.beginPath();
 ctx.arc(0,0,10,0,Math.PI*2,true);
 ctx.fill();
 ctx.beginPath();
 ctx.arc(95,0,10,0,Math.PI*2,true);
 ctx.stroke();
 ctx.fillStyle = '#555';
 ctx.arc(0,0,3,0,Math.PI*2,true);
 ctx.fill();
 ctx.restore();

 ctx.beginPath();
 ctx.lineWidth = 14;
 ctx.strokeStyle = '#325FA2';
 ctx.arc(0,0,142,0,Math.PI*2,true);
 ctx.stroke();

 ctx.restore();
}
init();
//--></script>
"
wait

Hope this helps.

[jerry]

Meerkat! That wonderful!