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.
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 43
  1. #16
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Airblader View Post
    The margin-left shouldn't go on the sky but on the sun (that will "center" the sun better) and it has to be negative half the width. The hidden attribute is the choice I was looking for.
    The sunwrap has the centering of the sun movement.

    Quote Originally Posted by Airblader View Post
    Simply add "overflow: hidden;" to the sky style.
    I have tried this. It has no effect.

  2. #17
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Well, first of all the settings for radius are messed up (it should be more like half of the container width).

    Do you want the wrapper to have a fixed width and just be centered or do you want to use the entire document width (= flexible width)?

  3. #18
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    I did wonder why it was outside of the div, I thought that might have been the case, however I had to pop the shops before they close.

    I would like it to be around 80-90% of the width, I'm not 100% sure about the height at this moment of time but I would not want it to be full screen. I did try changing the variable to a percentage, however it pulled up an error for me:

    Code:
    		x : 100%,

  4. #19
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    That's because at that point x just carries a value, not a unit. The unit ('px') is added later on. I don't have too much time either right now, so here is a working example:

    http://jsfiddle.net/bPxgf/4/

    As you can see, the sun disappears outside the box (overflow property) and the units have changed to percent. I also introduced an "origin" that can be used separately from the radius, which allows to have the sun go "outside" the box a little bit.

    There still is a lot that could (and should) be improved, but it sure does work for now.

  5. Users who have thanked Airblader for this post:

    MrTIMarshall (03-17-2013)

  6. #20
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Thank you for this. The only problem I see is that I would like the Sun to come from the bottom and not from the left/right.

    I am not sure how to improve this, or what you have in mind. The only improvement is to implement the percentage from my PHP and also add the moon, however I am not yet sure how to do this as I would like the website to show a solar eclipse and I am not sure if simply implementing the sunrise and moonrise for the paths if that will make them cross up on a solar eclipse or I am missing something.

  7. #21
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    I've figured out how to change where the sun rises and sets

  8. #22
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Change radius.x to something below 50, for example 40 – then the sun will come up more from the bottom.

    As for the solar eclipse: We are not displaying any real astronomical information. We calculate the position based on the percentage of how much of the day passed. If you want a simulation that is physically correct and shows events like the solar eclipse, you will need a much more detailed model.

  9. #23
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    I am struggling to remove the animation from the new version to use PHP (which I have) to set the percentage.

    How do I remove the test animation?

  10. #24
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Just kick the entire setInterval call and remove the animateSun function surrounding the actual code.

  11. #25
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Airblader View Post
    Just kick the entire setInterval call and remove the animateSun function surrounding the actual code.
    If I remove this;
    Code:
    function animateSun() {
        var position = {
            x: origin.x + radius.x * Math.cos(timePassed * Math.PI),
            y: origin.y - radius.y * Math.sin(timePassed * Math.PI)
        };
    
        domSun.style.left = position.x + '%';
        domSun.style.top = position.y + '%';
    }
    
    setInterval(function () {
        timePassed += 0.005;
        animateSun();
    
        if (timePassed >= 1) {
            timePassed = 0;
        }
    }, 10);
    I breaks for me.

  12. #26
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    You're obviously not understanding the code at all. Please read it carefully and understand what it does, I don't like to writing code for other people to just copy – the only people I don't expect to understand the code I write are the ones that pay me to write it.

    Once you understand what the code actually does – by which I don't even mean you need to understand the math involved, although that surely would be a plus –, I'm sure you'll know how to get rid of the animation.

  13. #27
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    I understand how it is positioning, however I do not understand how it is looping through as I have been at this for a good hour or so trying all sorts to see what happens and looking at the original code you posted.

    Things are just a little harder for myself as I cannot use my computer without at least a x500 magnification on due to my visual-impairment.

    The Radius:
    Code:
        radius = {
            x: 40,
            y: 95
        };
    An oval shape with, when you're looking at it, if you could, the width would be 190 and the height would be 40. This is used as only a semi-circle is needed.

    The Origin:
    Code:
        origin = {
            x: 50,
            y: 110
        },
    This is where the Sun starts it's rotation.

    Sun Path
    Code:
        var position = {
            x: origin.x + radius.x * Math.cos(timePassed * Math.PI),
            y: origin.y - radius.y * Math.sin(timePassed * Math.PI)
        };
    
        domSun.style.left = position.x + '%';
        domSun.style.top = position.y + '%';
    Calculate the Sun to go round in the ocal shape using mathematics I don't quite understand.

    ....Ironically, typing the above reply made me think a little more and I believe I have it working now!

  14. #28
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by MrTIMarshall View Post
    ....Ironically, typing the above reply made me think a little more and I believe I have it working now!

    Sometimes it's writing down what you know that does the trick. Or just verbalizing it to someone else rather than just having it on your mind.

    The mathematics is really not more than using the definition of sine and cosine. Using a different radius for x- and y-axis deforms the circle into a little oval, which I thought just looked a bit nicer than an actual semi-circle. But I'm not gonna go into explaining how the math actually works here.

  15. #29
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    	body, html {
    		margin:0;
    		border:0;
    	}
    	#sky {
    		width: 100%;
    		height: 250px;
    		margin: 0;
    		padding: 0;
    		background: #555599;
    	}
    	#sky .sunwrap {
    		position: relative;
    		width: 80%;
    		height: 250px;
    		margin: 0 auto;
    		overflow: hidden;
    	}
    	#sun {
    		position: relative;
    		width: 50px;
    		height: 50px;
    		margin-left: -25px;
    		
    		border-radius:50%;
    		background: #fefcea;
    		background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%);
    		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefcea), color-stop(100%, #f1da36));
    		background: -webkit-linear-gradient(top, #fefcea 0%, #f1da36 100%);
    		background: -o-linear-gradient(top, #fefcea 0%, #f1da36 100%);
    		background: -ms-linear-gradient(top, #fefcea 0%, #f1da36 100%);
    		background: linear-gradient(to bottom, #fefcea 0%, #f1da36 100%);
    		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcea', endColorstr='#f1da36', GradientType=0);
    		-webkit-box-shadow: 0px 0px 28px 0px #ffffff;
    		box-shadow: 0px 0px 28px 0px #ffffff;
    	}
    </style>
    </head>
    <body>
    <?php
    	$lat = 53.3761;
    	$long= -2.1897;
    	
    	$hour = isset($_GET['hour']) ? $_GET['hour'] : 0;
    	$timenow = time();
    	
    	$today = mktime(0,0,0);
    	$todayInfo = date_sun_info($today, $lat, $long);
    	$nighttime = false;
    	
    	switch(true) {
    	case $timenow < $todayInfo['sunrise']: // is it pre-sunrise
    			 // get last night's sunset
    			 $nighttime = true;
    			 $yesterdayInfo = date_sun_info(strtotime('-1 days', $today), $lat, $long);
    			 $percent = round(($timenow - $yesterdayInfo['sunset'] )*100/($todayInfo['sunrise'] - $yesterdayInfo['sunset']));
    			 break;
    			
    	case $timenow > $todayInfo['sunset']:
    			 // get tomorrow's sunrise
    			 $nighttime = true;
    			 $tomorrowInfo = date_sun_info(strtotime('+1 days', $today), $lat, $long);
    			 $percent = round(($timenow - $todayInfo['sunset'] )*100/($tomorrowInfo['sunrise'] - $todayInfo['sunset']));
    			 break;
    			
    	default:
    			 $percent = round(($timenow - $todayInfo['sunrise'])*100/($todayInfo['sunset'] - $todayInfo['sunrise']));
    			 break;
    	}
    	if ($nighttime) {
    	$bg = '#000';
    	$fg = '#FFF';
    	} else {
    	$bg = '#FFF';
    	$fg = '#000';
    	}
    	
    
    	if ($nighttime) {
    			$bgcols = array (
    					20  => '#CCC',
    					40  => '#888',
    					50  => '#2F2F4F', // Mightnight Blue
    					60  => '#333',
    					80  => '#000',
    					100 => '#AECAD4', // Dawn Sky Blue
    			);
    			foreach ($bgcols as $pc => $color) {
    					if ($percent <= $pc) {
    							$bg = $color;
    							break;
    					}
    			}
    			$fg = '#FFF';
    	} else {
    			$bgcols = array (
    					20  => '#000',
    					40  => '#000',
    					60  => '#000',
    					80  => '#000',
    					98  => '#000',
    					100 => '#26538D', // Dusk Sky Blue
    			);
    			foreach ($bgcols as $pc => $color) {
    					if ($percent <= $pc) {
    							$bg = $color;
    							break;
    					}
    			}
    			$fg = '#FFF';
    	}
    ?>
    <div id="sky">
        <div class="sunwrap">
            <div id="sun"></div>
        </div>
    </div>
    <script type="text/javascript">
    var domSun = document.getElementById('sun'),
        timePassed = 0.<?php echo "$percent"; ?>,
        origin = {
            x: 50,
            y: 110
        },
        radius = {
            x: 40,
            y: 95
        };
    
        var position = {
            x: origin.x + radius.x * Math.cos(timePassed * Math.PI),
            y: origin.y - radius.y * Math.sin(timePassed * Math.PI)
        };
    
        domSun.style.left = position.x + '%';
        domSun.style.top = position.y + '%';
    
    </script>
    <br />
    <h1>Currently at: 0.<?php echo "$percent%"; ?>,</h1>
    </body>
    </html>
    I'll have to wait an hour or so to see if this is truly working, I'm not sure if it is dynamic or not, however it is a start!

    Why I say wait only a couple of hours, is that $percent currently says the percentage through the day or night so the sun should start to rise once again soon!

    Once again, thank you for your help.

    Best Regards,
    Tim

  16. #30
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Once again I'm picking up more than I first thought!

    I know my percentage works, and I know the Sun works, so I simply tested by setting the $percent variable at the end to 50 and what do you know... The sun is at 12!


 
Page 2 of 3 FirstFirst 123 LastLast

Posting Permissions

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