Sunrise/Sunset script

I have it on my site now with code tweaks to fit my site colours/ layout, including rotating the chart to show daylight hours starting at the top (zero degrees) and adding the actual hours to the chart as well as percentages. I didn’t get the chart to show until I put the Google API chart code all on one line without spaces.

Hi Martyn,

Thanks for the info. I got it working after several attempts, I just need to adjust things now.

Thanks again,

John

You are so right, Jim! I think I’ve got it the way I want it now. My code allows for style switching, but it’s a bit messy:

<p class="sideBarTitle"><?php langtrans('Daylight Hours'); ?></p>
    <div class="sideBarText" style="font-weight:lighter; font-size: 6.5pt; text-align: center; margin-bottom:-4px">
          <?php
            //Make piechart
            $testtime = substr($hoursofpossibledaylight,0,2);
            $testminute = substr($hoursofpossibledaylight,-2,2);
            $testminute=$testminute/60;
            $testresult=$testtime+$testminute;
            $testljus=round(($testresult/24)*100,1);
            $testmorker=100-$testljus;
        ?>
            <span class="thisPage" style="position: relative; font-weight:lighter">
          <?php
            $time_arr = explode(':', $hoursofpossibledaylight, 2);
            echo (int)$time_arr[0] . " hrs " . (int)$time_arr[1] . " min";
            echo '
of Daylight Today
';
        ?>
            </span>
            <img style="margin-top:4px" src="http://chart.apis.google.com/chart?chs=100x60&amp;chma=0,0,0,0&amp;chd=t:<?php echo $testljus;?>,<?php echo $testmorker;?>&amp;cht=p3&amp;chp=1.6&amp;chf=bg,s,CCCCCC&amp;chco=FFD700,000000" alt="graph"/>
            

            <span style="position:relative; float:left; margin-top:-36px; margin-left:20px; font-weight:lighter; color:#000000">        <!-- was -5 -->
                <?php echo $testljus . "%"; ?>
            </span>
            <span style=" position:relative; float:right; margin-top:-36px; margin-right:20px; font-weight:lighter; color:#FFFFFF">      <!-- was 5 -->
                <?php echo $testmorker . "%"; ?>
            </span>
            <span class="thisPage" style=" position:relative; font-weight:lighter; top:-8px">
        <?php
            echo '
Which is 
';
            $time_arr = explode(':', $changeinday);
            if (substr($time_arr[0],0,1) != "-") {         // -0 when getting shorter
                echo (int)$time_arr[1] . " min Longer";
            } else {
                echo (int)$time_arr[1] . " min Shorter";
            }
            echo ('
Than Yesterday');
        ?>
            </span>
      </div>  

Neat, I’ve gone for a dead simple implementation on my index page as the hours info is already there.

I have also added in ‘dusk’ as pink sectors either side of daylight, and I rotate the chart to keep the day sector centred on 9 O’Clock.

All done client side in JavaScript on my page though.

http://weather.wilmslowastro.com/index.htm

Edit: the relevant bit of script is below (should be easy to convert to PHP) , I have two values available, “daylength” = sunrise-sunset time (hh:mm), and “daylightlength” = start of morning dusk to end of evening dusk (hh:mm). If both those values are not available in WD, then the calculation to centre the day sector may be useful?


		dayPct = (+cumulus.daylength.split(':')[0] + cumulus.daylength.split(':')[1] / 60) / 24 * 100;
		duskPct = (+cumulus.daylightlength.split(':')[0] + cumulus.daylightlength.split(':')[1] / 60) / 24 * 100;
		duskPct -= dayPct;
		nightPct = 100 - dayPct - duskPct;
		duskPct /= 2;
		cumulus.daylightChart = '<img src="http://chart.apis.google.com/chart?' +
				'chs=75x75' +
				'&amp;chtt=day/night' +
				'&amp;chts=000000,12' +
				'&amp;chma=0,0,0,0' +
				'&amp;chd=t:' + duskPct + ',' + dayPct + ',' + duskPct + ',' + nightPct +
				'&amp;cht=p3' +
				'&amp;chp=' + (Math.PI - (dayPct + duskPct * 2) / 100 * Math.PI) +
				'&amp;chf=bg,s,FFFFFF00' +
				'&amp;chco=F046A1,FFD700,F046A1,303060' +
				'" alt="day/night ratio"/>';

Thanks Jim

Got it running on my sidebar http://www.sunprairieweather.com/

Andy

I should have warned you that my version of the script is set up for use in the menubar only. The float:right style of the white text has put it at the far right of your page where white on white is obviously invisible. Do you not plan to use it in the menubar? Put it in your menubar as posted, and it should be just fine.

Okay, thanks, I got both percentage numbers showing in the pie showing on the test page. Didn’t want to do move it beyond the test page until I figured out how to get the minutes more sunshine showing other than 0.

I often see “0 min Longer”, just give it a day or two and see what happens with that tag.

  • Jim

If you lived in higher latitudes you would see larger day-to-day differences :slight_smile: I show 2 min. longer daylight today.

I don’t think that’s the issue, tiggrweather is farther south than Stillwater OK and the tag is showing 1 minute, so I suspect there may be a problem with the Stillwater $changeinday tag. IIRC the WD change in day is driven by the solar max calculation, and not the rise/set times, so if solar isn’t set up (I see Stillwater has zero for the solar readings) it may not work.

OK. Thanks, Niko. #-o

While there’s a lot to look over, I’ve tried looking for likely looking settings for that in some of the saratoga files, but couldn’t find anything.

From Brian in another thread:

If the control panel means setting.php, it looks ok to me:

Station location: latitude, longitude, cityname

$SITE[‘latitude’] = ‘36.125153’; //North=positive, South=negative decimal degrees
$SITE[‘longitude’] = ‘-97.047323’; //East=positive, West=negative decimal degrees
$SITE[‘cityname’] = ‘Stillwater’;
$SITE[‘tz’] = ‘America/Chicago’; //NOTE: this MUST be set correctly

If helpful, this is how the code looks like on the page:

       <td class="data1" style="text-align: center;"><?php langtrans('Daylight'); ?>:

			  <?php echo "<img src=\"${imagesDir}sun.jpg\" width=\"50\" height=\"48\" alt=\"Possible hours of Daylight\" />" ?>

			  <?php echo $hoursofpossibledaylight; ?>


			  <?php
			  if (substr_count($changeinday, '-') == 0)
			     echo ("+" . "$changeinday");
                              else
                                 echo "$changeinday";
			  ?>
<?php langtrans('Minutes'); ?>
		   </td>

It refers to Control Panel in the WD program.

Okay, I went to the appropriate place in the control panel, messed around some there and apparently have it working now. Thanks.

Jerry,

‘Borrowed’ your code. Made everything a bit larger, then had to fix the alignment, but looks good (I think).

Thank you!

You’re welcome, John. I’m glad you were able to get it working for you. :slight_smile:

Your screenshot is the sun/moon coordinates screen, not the solar sensor setup screen, please post the one from Control Panel, Solar Sensor, it will look something like this (image from the FAQ):

Okay, here it is. It’s switched off, because I don’t have a solar sensor.