...

View Full Version : Moon Phases



SingBlueSilver
08-28-2010, 03:20 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:
<div id="moonContainer">
<img id="moonIcon" src=""/>
</div>

In the css file I have:
/*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:

/**********************
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!

SingBlueSilver
08-29-2010, 04:18 AM
Here is the rest of the .js file if needed for reference (without the moon stuff added in):


/****************************************************************
Author: Claude626 (MacRumors)
This file was re-written, optimized and consolidated for better compatibility on iPhone use...

This script was written specifically to retrieve weather data from an XML feed with the following structure:

<adc_Database>
<CurrentConditions>
<City>Garden Grove</City>
<State>CA</State>
<Temperature>66</Temperature>
<WeatherText>CLEAR</WeatherText>
<WeatherIcon>33</WeatherIcon>
</CurrentConditions>
</adc_Database>

The accuweather feed satisfies the above structure requirement.

Also note that the weather icon names may differ from different sources.
I may update this script in the future to make it more robust...
*****************************************************************/






/******************************
GLOBAL CONFIGURATIONS
*******************************/

// Set your weather source
var url = 'http://wu.apple.com/adcbin/apple/Apple_Weather_Data.asp?zipcode=';
var zipcode = "55408";

// Set to 'false' if you'd prefer Farenheit
var isCelsius = false; //true|false

// Stylesheet name under the css folder
var stylesheet = 'claude626'; //See above.

// iconSet is the folder name under images.
var iconSet = 'klear'; //See above.
var iconExt = '.png'; //See above.

var updateInterval = 35; //Minutes
/******************************************************/



/**********************
STYLESHEET
***********************/
var headID = document.getElementsByTagName("head")[0];
var styleNode = document.createElement('link');
styleNode.type = 'text/css';
styleNode.rel = 'stylesheet';
styleNode.href = 'css/'+stylesheet+'.css';
headID.appendChild(styleNode);


/**********************
TIME + DATE
***********************/
armonth = new Array("January", "February", "March", "Aprril", "May", "June", "July", "August", "September", "October", "November", "December");
arday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

todaydate=new Date();

thisday = todaydate.getDay();
thismonth = todaydate.getMonth();
thisdate = todaydate.getDate();
thisyear = todaydate.getFullYear();

function dotime(){
theTime=setTimeout('dotime()',1000);
d = new Date();
hr = d.getHours();
mn = d.getMinutes();
se = d.getSeconds();

if(hr<12){
am_pm='AM';
if(hr==0){hr=12;}
}
else {
am_pm='PM';
if(hr>21){hr=hr-12;}
else if(hr>12){hr=(hr-12);}
}

if(mn<10){mn='0'+mn;}
if(se<10){se='0'+se;}

document.getElementById('minutebox').innerHTML = mn;
document.getElementById('ampmbox').innerHTML = am_pm;
document.getElementById('secondsbox').innerHTML = se;
document.getElementById('hourbox').innerHTML = hr;
}


/*****************
WEATHER
******************/
var MiniIcons = //Fix Up for weatherParser.js but also enables standardisation of sorts
[
"sunny", // 1 Sunny
"cloudy1", // 2 Mostly Sunny
"cloudy2", // 3 Partly Sunny
"cloudy3", // 4 Intermittent Clouds
"cloudy4", // 5 Hazy Sunshione
"cloudy5", // 6 Mostly Cloudy
"cloudy5", // 7 Cloudy (am/pm)
"overcast", // 8 Dreary (am/pm)
"dunno", // 9 retired
"dunno", // 10 retired
"fog", // 11 fog (am/pm)
"shower1", // 12 showers (am/pm)
"shower3", // 13 Mostly Cloudy with Showers
"shower2", // 14 Partly Sunny with Showers
"tstorm3", // 15 Thunderstorms (am/pm)
"tstorm2", // 16 Mostly Cloudy with Thunder Showers
"tstorm1", // 17 Partly Sunnty with Thunder Showers
"light_rain", // 18 Rain (am/pm)
"cloudy5", // 19 Flurries (am/pm)
"cloudy4", // 20 Mostly Cloudy with Flurries
"cloudy2", // 21 Partly Sunny with Flurries
"snow5", // 22 Snow (am/pm)
"snow3", // 23 Mostly Cloudy with Snow
"hail", // 24 Ice (am/pm)
"sleet", // 25 Sleet (am/pm)
"hail", // 26 Freezing Rain (am/pm)
"dunno", // 27 retired
"dunno", // 28 retired
"sleet", // 29 Rain and Snow Mixed (am/pm)
"sunny", // 30 Hot (am/pm)
"sunny_night", // 31 Cold (am/pm)
"mist", // 32 Windy (am/pm)
// Night only Icons;
"sunny_night", // 33 Clear
"cloudy1_night", // 34 Mostly Clear
"cloudy2_night", // 35 Partly Cloudy
"cloudy3_night", // 36 Intermittent Clouds
"cloudy4_night", // 37 Hazy
"cloudy5", // 38 Mostly Cloudy
"shower2_night", // 39 Partly Cloudy with Showers
"shower3_night", // 40 Mostly Cloudy with Showers
"tstorm1_night", // 41 Partly Cloudy with Thunder Showers
"tstorm2_night", // 42 Mostly Cloudy with Thunder Showers
"cloudy4_night", // 43 Mostly Cloudy with Flurries
"cloudy4_night" // 44 Mostly Cloudy with Flurries
];

function init(){
document.getElementById("weatherIcon").src="weather/Icon_Sets/"+iconSet+"/"+"dunno"+iconExt;
fetchWeatherData(zipcode);
}

function fetchWeatherData (zip)
{
var xml_request = new XMLHttpRequest();
xml_request.onload = function(e) {xml_loaded(xml_request);}
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;
}

function xml_loaded (request){
if (request.responseXML){
var adc_Database = findChild (request.responseXML, "adc_Database");
var CurrentConditions = findChild (adc_Database, "CurrentConditions");

deg = "&deg;F";
temp = parseInt(findChild(CurrentConditions, "Temperature").firstChild.data);
if(isCelsius == true){
temp = convertTemp(temp);
deg = "&deg;C";
}

document.getElementById("location").innerHTML = trimWhiteSpace(findChild(CurrentConditions, "City").firstChild.data.toString()).toLowerCase();
document.getElementById("temp").innerHTML = temp+deg;
document.getElementById("desc").innerHTML = findChild(CurrentConditions, "WeatherText").firstChild.data.toLowerCase();
document.getElementById("weatherIcon").src="images/"+iconSet+"/"+MiniIcons[parseInt(findChild(CurrentConditions, "WeatherIcon").firstChild.data, 10)-1]+iconExt;
}
else{
document.getElementById("city").innerHTML = "Error...";
}
setTimeout('fetchWeatherData(zipcode)', 1000*60*updateInterval);
}

function findChild (element, nodeName){
var child;
for (child = element.firstChild; child != null; child = child.nextSibling){
if (child.nodeName == nodeName)
return child;
}
return null;
}

function convertTemp(num){
return Math.round ((num - 32) * 5 / 9);
}

function trimWhiteSpace (string){
return string.replace(/^\s*/, '').replace(/\s*$/, '');
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum