Moon Phases

**SingBlueSilver** · 08-29-2010, 03:15 AM

Hello all, I'm trying to set up a lockscreen on my iPhone. For the most part it's set up. I'm trying to get it so that it will show the phases of the moon during the night time. I have very little experience in coding at all so any help is greatly appreciated.

Anyway, i found a script for the phases of the moon (24fun.com) and have incorporated into the javascript file for the theme I am using. The whole file consists of an HTML file, a javascript file, a css file and several image files. I can get a blank square to show up where I want the moon images to be, which leads me to believe that I've set up the image location in the script wrong or something. I'm sure it's something simple.

This is the structure:

Main Folder:
->css/css file
->js/javascript file
->images
-->images/moonitems/moon images.png
-->images/klear/weather images.png

and a couple of other folders for iphone settings.

Can anyone take a look and tell me where I'm going wrong?

in the html file I have:

Code:

<div id="moonContainer">
	<img id="moonIcon" src=""/>
</div>

In the css file I have:

Code:

/*moon*/
#moonContainer{
	float:left;
	opacity: 1;
	margin: 35px 0 0 31px;
	background-color: INVISIBLE;
	color: white;

}

#moonIcon{
	position:absolute;
	height: 96px;
	width: 96px;
	border: none;
	top:20px;
	left:0px;
	opacity:0.5;
	z-index:0;
	-webkit-transform: rotate(-40deg);

}

and the javscript file I have:

Code:

/**********************
	Moon
***********************/

var pastdate
var pastyear=2002
var pastmonth=5
var pastday=11
var nowdate
var c
var pausenormal=50
var pausenowmoon=3000
var moonday
var i_mooncycle=1
var mooncycle=29.530589

var picture = new Array("images/moonitems/n1.png","images/moonitems/n2.png","images/moonitems/n3.png","images/moonitems/n4.png","images/moonitems/n5.png","images/moonitems/n6.png","images/moonitems/n7.png","images/moonitems/n8.png","images/moonitems/n9.png","images/moonitems/n10.png","images/moonitems/n11.png","images/moonitems/n12.png","images/moonitems/n13.png","images/moonitems/n14.png","images/moonitems/n15.png","images/moonitems/n16.png","images/moonitems/n17.png","images/moonitems/n18.png","images/moonitems/n19.png","images/moonitems/n20.png","images/moonitems/n21.png","images/moonitems/n22.png","images/moonitems/n23.png","images/moonitems/n24.png","images/moonitems/n25.png","images/moonitems/n26.png","images/moonitems/n27.png","images/moonitems/n28.png","images/moonitems/n29.png")

var imgpreload=new Array()
for (i=0;i<=picture.length;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=picture[i]
}

pastdate=new Date(pastyear,pastmonth,pastday,0,0,0)
nowdate=new Date()
resultdays=(Date.parse(nowdate)-Date.parse(pastdate))/1000/60/60/24
moonday=resultdays/mooncycle
moonday=(resultdays/mooncycle)-(Math.floor(resultdays/mooncycle))
moonday=Math.round(mooncycle*moonday)
c="<img src='images/moonitems/n"+moonday+".png' name='moonimg'>"

window.onload=animatemoon

function animatemoon() {
	if (i_mooncycle==moonday) {
		var pause=pausenowmoon
	}
	else {
		var pause=pausenormal
	}
	var mimg="images/moonitems/n"+i_mooncycle+".png"
	document.moonimg.src=mimg
	i_mooncycle++
	if (i_mooncycle>29) {i_mooncycle=1}
	var timer=setTimeout("animatemoon()",pause)
}

I've only shown the moon stuff that I want to get working.

Thanks!

**jscheuer1** · 08-29-2010, 08:22 AM

Add the highlighted:

Code:

<div id="moonContainer">
	<img name="moonimg" id="moonIcon" src=""/>
</div>

Just that much gets the script working. There could be other problems, like the image paths. If those are correct, it should work and display them.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**SingBlueSilver** · 08-29-2010, 12:58 PM

Thanks a lot for your help. I tried that, but it didn't seem to work. Something else must be missing.

Here is the whole fileset:

http://www.yourfilehost.com/media.ph...ted_fits_2.zip

Thank you!

**jscheuer1** · 08-29-2010, 02:53 PM

Yes the paths are wrong (though they are correct in your post) and there are two other problems.

The onload event of the body of the page overrides the onload event of the moon code.
Image n15.png looks like a pizza with a slice missing. It may have been damaged in transit though. This only causes an unsightly blip in the animation, unless n15.png is the phase of the day, in which case it will look pretty funny.

OK, that was a pretty big zip file. I'm working from the folder (not in __MACOSX - I'm on a PC):

LockMS_Claude_slanted_fits

In the file named:

LockBackground.html

change:

Code:

<body onLoad="init()">

to:

Code:

<body onLoad="init();animatemoon();">

In the file:

LockMS_Claude_slanted_fits/js/claudeScript.js

change all instances of:

Code:

../images/moonitems/

to:

Code:

images/moonitems/

That's it, oh and fix n15.png if it's messed up in your copy.

I'm attaching a working demo without images:

Attachment 3503

Unzip it to an empty folder. Place the n1 through n29 images in its:

images/moonitems/

folder.

Note: There may still be problems in IE though, at least locally, perhaps even live. This relates to other code in the claudeScript.js file, not to the moon code. You may fix this in claudeScript.js by using (add the highlighted):

Code:

function fetchWeatherData (zip)
{
	var xml_request = new XMLHttpRequest();
	xml_request.onload = function(e) {xml_loaded(xml_request);}
	if(xml_request.overrideMimeType)
	xml_request.overrideMimeType("text/xml");
	xml_request.open("GET", url+zip);
	xml_request.setRequestHeader("Cache-Control", "no-cache");
	xml_request.setRequestHeader("wx", "385");
	xml_request.send(null);
	
	return xml_request;
}

**SingBlueSilver** · 08-29-2010, 04:34 PM

Thanks! It shows up for now at least. I don't know why the paths were different. I had tried that the other day and it didn't work. I thought I deleted that though. I had the id wrong in the html file too, it was supposed to be "moonicon"

It seems to be continuously animating though. It stops on the right phase though so that's good. I want it to find out the current phase and stop there. That may be a setting in the script where it's checking too often. I'll take a look.

The images are just temporary, they are kind of low res. n15 was supposed to be a wolf howling in front of a full moon, but I guess it didn't turn out so well.

Also, is there a way to make it so it only shows at certain times of the day? That's ultimately what I wanted I have weather icon that shows up (it was invisible when I sent it) and during the day there would be a sun and the moon would be unnecessary. I know that sunset/sunrise times would be pretty hard to do (although I did find a script to figure it out, it's pretty long) but i was thinking from like 9pm to 7 am or so. Is this possible?

Thanks again for your help!

**jscheuer1** · 08-29-2010, 06:31 PM

Well, PHP has functions that determine sunrise and sunset, they're a little complicated, but guaranteed to be easier than anything in javascript.

The moon script is set to animate continuously, resting longer on the current phase. You could make it stop at the current phase, but when the moon is new or just a little bit past new, there will not be much animation:

Code:

function animatemoon(die) {
	if (i_mooncycle==moonday) {
		var pause=pausenowmoon
	}
	else {
		var pause=pausenormal
	}
	var mimg="images/moonitems/n"+i_mooncycle+".png"
	document.moonimg.src=mimg
	i_mooncycle++
	if (i_mooncycle>29) {i_mooncycle=1}
	if(die===true){return;}
	if (i_mooncycle==moonday){animatemoon(true);return;}
	var timer=setTimeout("animatemoon()",pause)
}

**SingBlueSilver** · 08-29-2010, 06:52 PM

Thanks again. I don't really care about the animation, it was just in the script I found.

I wouldn't have the slightest clue on how to incorporate a php file into the system.

It's not really that big of a deal, just a nicety. Would it be simple to add in certain hours of the day that it shows up like I mentioned before?

**jscheuer1** · 08-29-2010, 06:54 PM

I just realized we could get a nice length animation for any moon phase with (in addition to the changes from my last post):

Code:

moonday=resultdays/mooncycle
moonday=(resultdays/mooncycle)-(Math.floor(resultdays/mooncycle))
moonday=Math.round(mooncycle*moonday)
c="<img src='images/moonitems/n"+moonday+".png' name='moonimg'>"

i_mooncycle = moonday - 15;
if (i_mooncycle < 0) {i_mooncycle += 29;}

window.onload=animatemoon

function animatemoon(die) {
	if (i_mooncycle= . . .

**jscheuer1** · 08-29-2010, 07:01 PM

Originally Posted by SingBlueSilver

Thanks again. I don't really care about the animation, it was just in the script I found.

I wouldn't have the slightest clue on how to incorporate a php file into the system.

It's not really that big of a deal, just a nicety. Would it be simple to add in certain hours of the day that it shows up like I mentioned before?

Code:

function animatemoon(die) {
	var h = nowdate.getHours();
	if(h > 7 && h < 21){
		document.moonimg.style.display = 'none';
		return;
	}
	if (i_mooncycle==moonday) {
		var pause=pausenowmoon
	}
	else {
		var pause=pausenormal
	}
	var mimg="images/moonitems/n"+i_mooncycle+".png"
	document.moonimg.src=mimg
	i_mooncycle++
	if (i_mooncycle>29) {i_mooncycle=1}
	if(die===true){return;}
	if (i_mooncycle==moonday){animatemoon(true);return;}
	var timer=setTimeout("animatemoon()",pause)
}

On the sunrise/sunset thing, do you have PHP? It might be fun to work out. But it does depend upon longitude and latitude, as well as elevation, so you would have to take an average, unless you knew the locale.