Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Moon Phases

  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moon Phases

    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!

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the rest of the .js file if needed for reference (without the moon stuff added in):

    Code:
    /****************************************************************
    	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*$/, '');
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •