Solved

I Need assistance converting short PHP script to ActionScript

Posted on 2009-05-13
16
356 Views
Last Modified: 2013-11-11
Hello,

I am building a weather page for a beach town that I work for. I found a simple PHP/VML script of a Tide Clock online that works great in IE but not any other browser, because it uses VML which is only supported by IE.

I would like to convert it to Flash/ActionScript. Could you please take a look at the PHP/VML example code below and help me create an ActionScript from it. I have experience with Flash, but I am not very good at writing ActionScript from scratch.

Thanks to anyone that can help.
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
<!--
v\:* {behavior:url(#default#VML);}
-->
</style>
 
</head>
<body>
 
<table>
<tr>
<th>
 
 
<!-- start of tide clock code -------------------------------------------------------------------------->
<?
putenv("TZ=US/Eastern");                                    // time zone of the place you want to predict tides for
$last_synchronised_with_the_high_tide = '11 May 2009 9:32pm'; // tide from which all calcs are made - reset occasionally
$icon_diameter=100;                                             // clock diameter in pixels
$stroke_thickness=3;                                           // the thickness of the lines used to draw the clock
 
// nothing below here should need changing
$now=time();
if (($timestamp = strtotime($last_synchronised_with_the_high_tide)) === -1)
	{echo "the string ($last_synchronised_with_the_high_tide) does not return a valid date and time <br>";}
$tide_cycle_in_seconds=44700;
$seconds_since_last_synchronised=(time()-$timestamp);
if ($seconds_since_last_synchronised > $tide_cycle_in_seconds)
	{$seconds_since_last_high_tide= $seconds_since_last_synchronised % $tide_cycle_in_seconds;}
else	{$seconds_since_last_high_tide=$seconds_since_last_synchronised;}
$required_rotation_from_12oclock_position=($seconds_since_last_high_tide/$tide_cycle_in_seconds)*360;
$vml_degrees=$required_rotation_from_12oclock_position-90;
if ($vml_degrees<0) {$vml_degrees=$vml_degrees+360;}
$rotation_modified_for_vml=deg2rad($vml_degrees);
// calculate co-ordinates ------------------------------
$hypotenuse=($icon_diameter/3); // clock hand length
$x=(cos($rotation_modified_for_vml))*$hypotenuse;
$y=(sin($rotation_modified_for_vml))*$hypotenuse;
print "
<DIV style=position:relative;top:0px;left:0px>
<v:arc title='Tide Clock' href='http://www.WalneyIsle.co.uk/tideclock-faq.php' strokeweight='" . $stroke_thickness . "pt' startangle='0' endangle='360' strokecolor = '#ff0000' style='position:relative;top:0;left:0;width:" . ($icon_diameter-$stroke_thickness) . ";height:" . ($icon_diameter-$stroke_thickness) . "' ></v:arc >
<v:line style='position:absolute;top:" . (($icon_diameter+$stroke_thickness)/2) . ";left:" . (($icon_diameter+$stroke_thickness)/2) . "' strokecolor='blue' strokeweight='" . $stroke_thickness . "pt'  from='0pt,0pt' to='" . $x . "pt," . $y . "pt'>
<v:stroke endarrow=classic/></v:stroke/>
</v:line>
</div>";
?>
<!-- end of tide clock code ---------------------------------------------------------------------------->
 
 
</th>
</tr>
</table>
 
</body>
</html>

Open in new window

0
Comment
Question by:multiplex79
  • 10
  • 6
16 Comments
 
LVL 22

Expert Comment

by:rascalpants
ID: 24380282

I had to google what a Tide Clock is...

http://www.cabelas.com/prod-1/0048901618695a.shtml

:)

but it looks like this is just your typical clock, and every 12 hours you have high tide.... right?

well then you should be able to adapt this normal clock example then.


one made with AS 2.0:


http://www.kirupa.com/developer/actionscript/clock.htm


for AS 3.0:


http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f0e.html



rp / ZA


0
 
LVL 1

Author Comment

by:multiplex79
ID: 24384150
Thanks for the reply. It is actually not like a regular clock.

A Tide Clock is based on the moon. It only has one hand on it and one revolution of the clock equals 12 hours and 25 minutes or 44700 seconds. This is different than a time clock with three hands.

Also, with a tide clock you have to give it a date and time to start from, which is the last high tide during a full moon, which would be a static date and time entered as a variable.

So, basically the clock works like this:

Set the time of the last high tide during full moon in a config variable.
When the clock loads get the current date and time from the server
Compare current date and time with the stored date and date and time of the last full moon high tide
Do some math with difference between dates, 44700 seconds and 360 degrees to come up with the clock arm pointing in the right direction.

It's the math part that I am not understanding. I was hoping someone could look at the example php/vml code and help me understand the math. Or, just convert the script to AS for me :)

Thanks.
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24386521
okay... below is the code... but you need to varify with a real Tidal Clock to make sure it is working  :)


then your Flash application needs to have a circle with a pointer...  The pointer click should have the movieclip flipped up in a negative Y location... the registration point of the pointer needs to be set to the bottom center.

this is so that when it rotates, it goes around the bottom of the clip.


let me know if you need further explanation...


rp / ZA

 
var theYear:int = theYear == undefined ? 2009 : theYear;
var theMonth:int = theMonth == undefined ? 4 : theMonth; // months use zero index
var theDay:int = theDay == undefined ? 11 : theDay;
var theHour:int = theHour == undefined ? 21 : theHour;
var theMinutes:int = theMinutes == undefined ? 32 : theMinutes;
 
 
var tidalSeconds:int = 44700;
var lastSetDate:Date = new Date( theYear, theMonth, theDay, theHour, theMinutes);
var currentDate:Date = new Date();
 
var cTime:Number = Number( currentDate.getTime() );
var lTime:Number = Number( lastSetDate.getTime() );
 
trace( cTime + " - " + lTime );
 
var diffSeconds:Number = ( cTime - lTime ) / 1000;
var secSinceTide:int;
trace( diffSeconds );
 
if( diffSeconds > tidalSeconds ) secSinceTide = diffSeconds % tidalSeconds
else secSinceTide = diffSeconds;
 
 
 
var rot:Number = (secSinceTide / tidalSeconds) * 360;
trace( rot );
tidalClock_mc.dial_mc.rotation = rot;

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:multiplex79
ID: 24387111
Thank you very. I am excited to give this a try. What should the pointer movieclip be called?

I am not sure what you mean by the movieclip being flipped up in a negative Y location.

Bryan
0
 
LVL 1

Author Comment

by:multiplex79
ID: 24387157
Nevermind. I see it should be dial_mc and it should be contained within a tidalClock_mc movieclip.
0
 
LVL 1

Author Comment

by:multiplex79
ID: 24387166
But I'm still not sure what you mean by "flipped up in a negative Y location."

Thanks.
0
 
LVL 1

Author Comment

by:multiplex79
ID: 24387742
I am getting the following compiler errors for lines 1, 2, 3, 4, 5, 8, 18

The class or interface 'int' could not be loaded.
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24387805
okay... I have attached a screen shot of what I mean...  there is a normal Cartesian grid that I drew over top of the screen shot.

the 0,0 position is where you put the center of the pointer graphic in the dial_mc movieclip.  and make sure that it is point in the negative Y position...  so if you click on the graphic and you look at the x,y properties in the properties panel, it would should be sitting in the -X, -Y area of the grid...  meaning both the values should be negative.

The reason why you want to do this, is so the the registration point (center of the movieclip) is where you want the dial to rotate around.


rp / ZA

tidal-screen.jpg
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24387816
the code in written for AS 3.0  if you need AS 2.0, you will need to change the "int"  to "Number"


rp / ZA
0
 
LVL 1

Author Comment

by:multiplex79
ID: 24388137
That was excellent help. I think I have it working now. The only not we didn't account for was server offset time. The server is 2 hours different than my local time which appears to be throwing the dial off by 2 hours.

Is there an easy way to resolve that? I don't want to take up too much more of your time.

Thanks,

Bryan
0
 
LVL 22

Accepted Solution

by:
rascalpants earned 500 total points
ID: 24388372

did you decide to go with AS 3.0 or 2.0?  I would highly recommend going with 3.0

here is some code below, that is cleaned up, that you can use to pass in the 5 top values from the server, using FlashVars or via an attached querystring appended to the end of the file name.  

eg.  fileName.swf?theYear=2009&theMonth=4&theDay=11&theHour=21&theMinutes&curYear=2009&tcurMonth=4&curDay=11&curHour=21&curMinutes&


the top lines of code check to see if you passed in a value, and if not, they use a default value.


hope this helps...


rp / ZA


// for AS 3.0
 
var loaderObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
 
var curYear:int = loaderObj.curYear ? 2009 : int( loaderObj.curYear );
var curMonth:int = loaderObj.curMonth ? 4 : int( loaderObj.curMonth ); // months use zero index
var curDay:int = loaderObj.curDay ? 11 : int( loaderObj.curDay );
var curHour:int = loaderObj.curHour ? 21 : int( loaderObj.curHour ); // uses 24 hours instead of 2, 12s 
var curMinutes:int = loaderObj.curMinutes ? 32 : int( loaderObj.curMinutes );
 
var theYear:int = loaderObj.theYear ? 2009 : int( loaderObj.theYear );
var theMonth:int = loaderObj.theMonth ? 4 : int( loaderObj.theMonth ); // months use zero index
var theDay:int = loaderObj.theDay ? 14 : int( loaderObj.theDay );
var theHour:int = loaderObj.theHour ? 14 : int( loaderObj.theHour ); // uses 24 hours instead of 2, 12s 
var theMinutes:int = loaderObj.theMinutes ? 30 : int( loaderObj.theMinutes );
 
 
var tidalSeconds:int = 44700;
var lastSetDate:Date = new Date( theYear, theMonth, theDay, theHour, theMinutes );
var currentDate:Date = new Date( curYear, curMonth, curDay, curHour, curMinutes );
 
var cTime:Number = Number( currentDate.getTime() );
var lTime:Number = Number( lastSetDate.getTime() );
 
var diffSeconds:Number = ( cTime - lTime ) / 1000;
var secSinceTide:int;
 
if( diffSeconds > tidalSeconds ) secSinceTide = diffSeconds % tidalSeconds
else secSinceTide = diffSeconds;
 
var rot:Number = (secSinceTide / tidalSeconds) * 360;
tidalClock_mc.dial_mc.rotation = rot;

Open in new window

0
 
LVL 1

Author Comment

by:multiplex79
ID: 24388463
I got it working with AS 3.0.

Thank you for the new code. Is there a way to adjust for server offset? It doesn't look like it in the new script?

Thanks Again.
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24388546

you do that outside of flash...  because you need to use server-side code to get that information... client-side code will only get the information from the users machine...  so my machine settings will most definitely be different than yours  ;)


rp / ZA
0
 
LVL 1

Author Comment

by:multiplex79
ID: 24388642
Oh, ok...if it is getting my local time then it should work perfectly.
0
 
LVL 1

Author Comment

by:multiplex79
ID: 24388723
Excellent help rascal pants! It appears to be working great! Thanks for your time and patience.
0
 
LVL 1

Author Closing Comment

by:multiplex79
ID: 31580939
You rock rascalpants.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question