WXforum.net

Web Weather => Weather Website PHP/AJAX scripting => Topic started by: gwwilk on September 30, 2015, 12:55:57 AM

Title: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on September 30, 2015, 12:55:57 AM
The sunlight pie chart I was using relies on deprecated Google API's, so I was looking for an alternative display.  Over in the Cumulus forum Mark Crossley and others have created a nice 24 hr. clock-like display that serves admirably.  The script to create the pie chart is called 'heavens.php (http://gwwilkins.org/heavens.php?sce=view)', a copy of which you can download and save.  I've modified it to save and cache a PNG graphic rather than displaying the pie chart 'in place'.  This pie chart can then be displayed in the menubar and/or the dashboard (http://gwwilkins.org).  I've copied a legend from a graphic on the Cumulus board and use a mouseover link to display it in my menubar, but I don't have room for it in my dashboard.  The defaults in 'heavens.php' should work for most purposes.  The cache timeout is set at 2 minutes because small changes in the location of the red 'hour-hand' are perceptible.

The code to display the pie chart itself is fairly straightforward, but displaying the difference in daylight from yesterday to today is a little less so.  This code snippet displays both the pie chart image with the legend and the day difference:
Code: [Select]
<p class="sideBarTitle"><?php langtrans('Sunlight Hours'); ?></p>
    <div class="sideBarText" style="font-weight:lighter; font-size: 6.5pt; text-align: center; margin-bottom:4px; line-height:135%">
          <?php
include("heavens.php"); 
$hrsOfSunLight = array(); // [0] = yesterday, [1] = today, [2] = tomorrow
$changeinday2 get_changeinday();
#     echo '$changeinday2 = '.$changeinday2.'<br/>'; // Debug Code
           //Make piechart
$timebits explode(":"$hrsOfSunLight[1]); // Today
$testresult $timebits[0] + $timebits[1]/60;
            
$test1jus=round(($testresult/24)*100,1);
            
$testmorker=100-$test1jus;
        
?>

            <span class="thisPage" style="position: relative; font-weight:lighter">
          <?php
           $time_arr 
explode(':'$changeinday2);
   $time_arr[0]>0?$cidsign '+'$cidsign ='-';
   if ($time_arr[1]< 5) {
if ($displayYesterday) {
$time_arr2 explode(':'$hrsOfSunLight[0]); // Yesterday
echo (int)$time_arr2[0] . " hrs " . (int)$time_arr2[1] . " min " . (int)$time_arr2[2]." sec";
echo '<br/>Sunlight Yesterday<br/>';
}
            
$time_arr explode(':'$hrsOfSunLight[1]); // Today
            
echo (int)$time_arr[0] . " hrs " . (int)$time_arr[1] . " min " . (int)$time_arr[2]." sec";
            echo 
'<br/>of Sunlight Today';
        
?>

<?php echo '<br/>Which is ';
            
$time_arr explode(':'$changeinday2);
echo (((int)$time_arr[1]>0)?('<br/>'.(int)$time_arr[1] . ' min '):' ') . $time_arr[2];
echo (substr($time_arr[0],0,1) != "-")?' sec Longer':' sec Shorter'// '-' when getting shorter
            
echo ('<br/>Than Yesterday');
if ($displayTomorrow) {
$time_arr3 explode(':'$hrsOfSunLight[2]); // Tomorrow
echo (int)$time_arr3[0] . " hrs " . (int)$time_arr3[1] . " min " . (int)$time_arr3[2]." sec";
echo '<br/>Sunlight Tomorrow<br/>';
?>

            </span>
            <span class="thisPage" style="font-size:7px"><br/>(Noon)</span>
            <a style="width:109px" href="<?php echo $sunLightPieLink?>" target="_blank" title="Astronomy Page in New Tab"><img style="width:109px; margin-left:auto; margin-right:auto" src="<?php echo getUniqueImageURL('./cache/heavenpie.png')?>" alt="graph"/></a>
            <span class="thisPage" style="font-size:7px">(Midnight)<br/>
            </span>
            <span class="thisPage" style=" position:relative; font-weight:lighter">
            <a style="cursor:pointer; text-align:center; width:109px" onmouseover="show_legend('legend')" onmouseout="show_legend()">Legend</a><img id="legend" style="display:none" src="./ajax-images/heavensLegend.png" alt="Legend"/>
          </span>
        <?php } else { echo 'Unavailable<br/>&nbsp;'?></span><?php 
?>

      </div> 
Note that two dependent functions are used in this snippet, 'get_changeinday()' and 'getUniqueImageURL()'.  I have added both of these functions to my 'common.php'.  Here is the code:
Code: [Select]
// -----------------------------------------------------------------------------
// CHANGE IN DAYLENGTH FUNCTION:  computes length of yesterday, today,  & tomorrow
//   and then the change in day length from yesterday to today
// Written by SE Lincoln Weather                                                           .
// -----------------------------------------------------------------------------
// Alternate $changeinday routine that finds $changeinday2
function get_changeinday() {
global $hrsOfSunLight;
global $SITE;
global $displayTomorrow;

$t = time()-86400; // Yesterday

for ($i=0; $i<(2+($displayTomorrow?1:0)); $i++) { // Only loop twice if no $displayTomorrow
$sun = date_sun_info($t, $SITE['latitude' ], $SITE["longitude"]);
$srise  = $sun["sunrise"];
$sset  = $sun["sunset"];
$sunhrs[$i] = $sset - $srise;   // $sunhrs is time between sunrise and sunset
$sh[$i] = floor($sunhrs[$i]/3600); // Sun Hours
$sm[$i] = floor((($sunhrs[$i]/3600)-$sh[$i])*60); // Sun Minutes
$ss[$i] = round(((((($sunhrs[$i]/3600)-$sh[$i])*60)-$sm[$i])*60),0); // Sun Seconds
$hrsOfSunLight[$i] = $sh[$i].':'.$sm[$i].':'.$ss[$i]; // Assemble strings in array
$t+=86400; // Next Day
}

$cindsign = (($sunhrs[1]-$sunhrs[0])>0)?'+':'-'; // Change IN Day sign

$shdiff = ($cindsign=='-'?($sh[0] - $sh[1]):($sh[1] - $sh[0])); // Difference in hours
$smdiff = ($cindsign=='-'?($sm[0] - $sm[1]):($sm[1] - $sm[0])); // Difference in minutes
$ssdiff = ($cindsign=='-'?($ss[0] - $ss[1]):($ss[1] - $ss[0])); // Difference in seconds
if ($ssdiff<0) { // negative number of seconds?
$smdiff -= 1; // borrow
$ssdiff += 60; // and carry
}
if ($smdiff<0) { // negative number of minutes?
$shdiff -=1; // borrow
$smdiff += 60; // and carry
}
$changeinday2 = $cindsign.$shdiff.':'.$smdiff.':'.$ssdiff; // Assemble cind string
return $changeinday2;
}
// end of changeinday()
and
Code: [Select]
if (!function_exists('getUniqueImageURL')) {
function getUniqueImageURL($image_url){
$timestamp = time();
if(strpos($image_url, '?')){
$image_url = str_replace('?', "?$timestamp&", $image_url);
}
else{
$image_url .= "?$timestamp";
}
return $image_url;
}
}
This latter function prevents browser image caching of the 'heavenpie.png' image.  I use it liberally on my website so I need to check to see if it has already been declared whenever I want to use it.  Declaring it twice WILL produce a fatal error.

The Legend is available here (http://gwwilkins.org/images/heavensLegend.png) (right click and 'Save as...').

I have anchored a link to my astronomy page, '$sunLightPieLink', on the sunlight pie chart.  The variable is in my 'Settings.php' as:
Code: [Select]
$sunLightPieLink = 'wxastronomy_new.php'; // Link to Astronomy Page
Be sure to check this link and point it at your astronomy page.  You can hardcode this link by replacing '$sunLightPieLink' with the relative URL of your astronomy page, but I would recommend using a 'Settings.php' entry for ease of maintenance.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: mcrossley on September 30, 2015, 08:53:59 AM
Did you see the variant I use that also shows sunshine for the day so far? It is on my home page.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on September 30, 2015, 09:18:57 AM
I did see that variant in the thread on Cumulus, but I wasn't aware it lived on your home page, Mark.  The shading had me confused until just now when you elucidated it. :-) There were also other variants of interest such as those with actual numbers on the clock face, but when I tried to implement those using my rudimentary coding skills I wandered down a garden path leading only to frustration.  In the end I settled for the external (Noon) and (Midnight) markers.  There's a lot of code in 'heavens.php' that doesn't get used, but I left it there in case someone wants to repurpose it.

I particularly like the twilight shadings.  Creating a Legend 'on-the-fly' is interesting, but including the time doesn't seem essential.  That's why I copied the Legend graphic from the Cumulus forum, whited out the time, and saved it as a fixed graphic that displays transiently on mousing over the link.  The font quality of my resulting Legend leaves a lot to be desired, but it's not apparent at normal screen resolutions.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: jay_hoehn on October 01, 2015, 11:51:13 AM
Jerry,

I have your sunlight pie graphic installed, but can't get the legend to show.  Not sure where I have gone wrong.  Graphic is where it belongs.

http://jayswoodfurniture.com/wx/

Thanks,

Jay
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 01, 2015, 12:16:00 PM
Not your fault, Jay. It's a stupid name-space conflict I created by using "id='legend"'! :oops: In menubar.php try replacing 'legend' with 'spLegend' (this is the simpler method, but verify each change) or use this updated code segment:
Code: [Select]
<p class="sideBarTitle"><?php langtrans('Sunlight Hours'); ?></p>
    <div class="sideBarText" style="font-weight:lighter; font-size: 6.5pt; text-align: center; margin-bottom:4px; line-height:135%">
          <?php
include("heavens.php"); 
$hrsOfSunLight = array(); // [0] = yesterday, [1] = today, [2] = tomorrow
$changeinday2 get_changeinday();
#     echo '$changeinday2 = '.$changeinday2.'<br/>'; // Debug Code
           //Make piechart
$timebits explode(":"$hrsOfSunLight[1]); // Today
$testresult $timebits[0] + $timebits[1]/60;
            
$test1jus=round(($testresult/24)*100,1);
            
$testmorker=100-$test1jus;
        
?>

            <span class="thisPage" style="position: relative; font-weight:lighter">
          <?php
           $time_arr 
explode(':'$changeinday2);
   $time_arr[0]>0?$cidsign '+'$cidsign ='-';
   if ($time_arr[1]< 5) {
if ($displayYesterday) {
$time_arr2 explode(':'$hrsOfSunLight[0]); // Yesterday
echo (int)$time_arr2[0] . " hrs " . (int)$time_arr2[1] . " min " . (int)$time_arr2[2]." sec";
echo '<br/>Sunlight Yesterday<br/>';
}
            
$time_arr explode(':'$hrsOfSunLight[1]); // Today
            
echo (int)$time_arr[0] . " hrs " . (int)$time_arr[1] . " min " . (int)$time_arr[2]." sec";
            echo 
'<br/>of Sunlight Today';
        
?>

<?php echo '<br/>Which is ';
            
$time_arr explode(':'$changeinday2);
echo (((int)$time_arr[1]>0)?('<br/>'.(int)$time_arr[1] . ' min '):' ') . $time_arr[2];
echo (substr($time_arr[0],0,1) != "-")?' sec Longer':' sec Shorter'// '-' when getting shorter
            
echo ('<br/>Than Yesterday');
if ($displayTomorrow) {
$time_arr3 explode(':'$hrsOfSunLight[2]); // Tomorrow
echo (int)$time_arr3[0] . " hrs " . (int)$time_arr3[1] . " min " . (int)$time_arr3[2]." sec";
echo '<br/>Sunlight Tomorrow<br/>';
?>

            </span>
            <span class="thisPage" style="font-size:7px"><br/>(Noon)</span>
            <a style="width:109px" href="<?php echo $sunLightPieLink?>" target="_blank" title="Astronomy Page in New Tab"><img style="width:109px; margin-left:auto; margin-right:auto" src="<?php echo getUniqueImageURL('./cache/heavenpie.png')?>" alt="graph"/></a>
            <span class="thisPage" style="font-size:7px">(Midnight)<br/>
            </span>
            <span class="thisPage" style=" position:relative; font-weight:lighter">
            <a style="cursor:pointer; text-align:center; width:109px" onmouseover="showspLegend('spLegend')" onmouseout="showspLegend()">Legend</a><img id="spLegend" style="display:none" src="./images/heavensLegend.png" alt="Legend"/>
          </span>
        <?php 
?>

      </div> 
with this modified javascript function:
Code: [Select]
<script language="Javascript" type="text/javascript">
function showspLegend(nam)
   {
   document.getElementById("spLegend").style.display= "none";
   document.getElementById(nam).style.display = "block";
   }
</script>

Sorry about that...

Edit 2015 Oct 1:  I just realized that there's some useless leftover dangling code that the W3C Validator didn't pick up on.  Instead of
Code: [Select]
          </span>
        <?php } else { echo 'Unavailable<br/>&nbsp;'?></span><?php 
?>

      </div> 
it should read
Code: [Select]
          </span>
        <?php 
?>

      </div> 
The code above has been corrected.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: jay_hoehn on October 01, 2015, 12:34:30 PM
Jerry,

Still no joy.  I copied your code and uploaded.  I had to change the src="./ajax-images/heavensLegend.png" to match where the image is but still not working.

Jay

Hold on.  I did't read farther down in the post.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 01, 2015, 12:39:24 PM
I think your javascript is still unchanged, Jay.  That's the second snippet I included above.

You've got it now! =D&gt; \:D/ =D&gt;
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: jay_hoehn on October 01, 2015, 12:48:14 PM
Was I supposed to remove some javascript  I couldn't find the old version.

Jay
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 01, 2015, 12:49:58 PM
Was I supposed to remove some javascript  I couldn't find the old version.

Jay
Well, that's one reason the Legend wouldn't display... :shock:

Looking good now that you've added the necessary javascript.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: jay_hoehn on October 01, 2015, 12:51:10 PM
Thanks for the help.  Looks great.

Jay
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: 92merc on October 02, 2015, 10:12:01 AM
I'm not using the menu like everyone else, but I'd like to add the chart to my pages.  Is there a standalone PHP file I can add to my site and include at the appropriate point?
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 02, 2015, 11:56:43 AM
I'm not using the menu like everyone else, but I'd like to add the chart to my pages.  Is there a standalone PHP file I can add to my site and include at the appropriate point?
Since 'heavens.php' is set up to save the pie chart in the cache directory and with the name of your choice (currently '$pc_cacheFile = './cache/heavenpie.png';'), you can easily create the pie chart.  It must be saved as a PNG graphic, however.  Then all you need to do is add the code to display it somewhere on your page(s).  I would consider adding at least a '(Noon)' at the top of the pie chart and a '(Midnight)' at the bottom as well as adding a Legend.  There is also a size option available in 'heavens.php'.  You could create it fairly large and then display it smaller with '<img src="xxx" width="xx" height="xx">'.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: 92merc on October 02, 2015, 12:05:28 PM
But then how do I get all the text added around the chart like you have?  Plus, what is going to trigger the heavens.php file to update the pie chart?
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 02, 2015, 02:06:37 PM
But then how do I get all the text added around the chart like you have?  Plus, what is going to trigger the heavens.php file to update the pie chart?
This script (http://gwwilkins.org/heavenpie-test.php) illustrates how to create and display the pie chart in a table.  Here is the script (http://gwwilkins.org/heavenpie-test.php?sce=view).  Right-click on the source, click 'Save as...', and save without the '.txt'.

You will need to set up the defaults in 'heavens.php', and you may get a few 'headers-already-sent' errors if you're using a 'Settings.php' file.  The pie chart is updated whenever the calling script is loaded unless the image in cache hasn't expired.  The 'heavens.php (http://gwwilkins.org/heavens.php?sce=view)' currently on my site doesn't look for a 'Settings.php' but requires your long. and lat. to be entered.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: 92merc on October 02, 2015, 02:15:41 PM
I'm close now.  http://www.bismarckweather.net/light.php

How do I add the legend to that page?
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: 92merc on October 02, 2015, 02:16:38 PM
And the other text like you have.

"Sunlight:
11 hrs 41 min
45 sec
of Sunlight Today (Noon)"
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 02, 2015, 04:14:33 PM
And the other text like you have.

"Sunlight:
11 hrs 41 min
45 sec
of Sunlight Today (Noon)"
That's more complicated.  Download my 'menubar.php (http://gwwilkins.org/menubar.php?sce=view)' and look at the code under 'Sunlight Hours'.
Here is the relevant code from my menubar:
Code: [Select]
<p class="sideBarTitle"><?php langtrans('Local Sunlight Hours'); ?></p>
    <div class="sideBarText" style="font-weight:lighter; font-size: 6.5pt; text-align: center; margin-bottom:4px; line-height:135%">
          <?php
# include("heavens.php"); 
$hrsOfSunLight = array(); // [0] = yesterday, [1] = today, [2] = tomorrow
$theChanges get_changeinday();
$changeinday2 $theChanges[0];
$hrsOfSunLight $theChanges[1];
# $changeinday2 = get_changeinday();
#     echo '$changeinday2 = '.$changeinday2.'<br/>'; // Debug Code
           //Make piechart
$timebits explode(":"$hrsOfSunLight[1]); // Today
$testresult $timebits[0] + $timebits[1]/60;
            
$test1jus=round(($testresult/24)*100,1);
            
$testmorker=100-$test1jus;
        
?>

            <span class="thisPage" style="position: relative; font-weight:lighter">
          <?php
           $time_arr 
explode(':'$changeinday2);
   $time_arr[0]>0?$cidsign '+'$cidsign ='-';
   if ($time_arr[1]< 5) {
if ($displayYesterday) {
$time_arr2 explode(':'$hrsOfSunLight[0]); // Yesterday
echo (int)$time_arr2[0] . " hrs " . (int)$time_arr2[1] . " min " . (int)$time_arr2[2]." sec";
echo '<br/>Sunlight Yesterday<br/>';
}
            
$time_arr explode(':'$hrsOfSunLight[1]); // Today
            
echo (int)$time_arr[0] . " hrs " . (int)$time_arr[1] . " min " . (int)$time_arr[2]." sec";
            echo 
'<br/>of Sunlight Today';
        
?>

<?php echo '<br/>Which is ';
            
$time_arr explode(':'$changeinday2);
echo (((int)$time_arr[1]>0)?('<br/>'.(int)$time_arr[1] . ' min '):' ') . $time_arr[2];
echo (substr($time_arr[0],0,1) != "-")?' sec Longer':' sec Shorter'// '-' when getting shorter
            
echo ('<br/>Than Yesterday');
if ($displayTomorrow) {
$time_arr3 explode(':'$hrsOfSunLight[2]); // Tomorrow
echo (int)$time_arr3[0] . " hrs " . (int)$time_arr3[1] . " min " . (int)$time_arr3[2]." sec";
echo '<br/>Sunlight Tomorrow<br/>';
?>

            </span>
            <div id="PieChart">
            <?php 
              
include ("heavens.php");
            
?>

            <table style="width:105px">
              <tr style="text-align:center; font-size:7px">
                <td style="vertical-align:bottom">
                  <span class="thisPage">(Noon)</span>
                </td>
              </tr>
              <tr>
                <td style="text-align:left; vertical-align:middle">
                  <a href="<?php echo $sunLightPieLink?>" target="_blank" title="Astronomy Page in New Tab"><img src="<?php echo getUniqueImageURL('./cache/heavenpie.png')?>" height="100" width="100" id="sunPie" alt="Day-Night Graphic"/></a>
                </td>
              </tr>
              <tr style="text-align:center; font-size:7px">
                <td style="vertical-align:top">
                  <span class="thisPage">(Midnight)</span>
                </td>
              </tr>
            </table>
            </div>
            <span class="ajax" id="pieChartreLoader">
            <script type="text/javascript"><!--
            //<![CDATA[
var jq = jQuery.noConflict();
              function reloadPieChart() {
// if (ajaxUpdates < update.maxupdates) { // Stop and start updating with ajaxUpdates
                jq("#PieChart").load("menubar.php" + " #PieChart");
//} // Omitted 4/25/16 to allow continuous processing
                setTimeout('reloadPieChart()',120000);
              }
              setTimeout('reloadPieChart()',120000);
              //]]>
              -->
            </script>
            </span>
            <span class="thisPage" style=" position:relative; font-weight:lighter">
            <a style="cursor:pointer; text-align:center; width:109px" onmouseover="showspLegend('block')" onmouseout="showspLegend('none')">Legend</a><img id="spLegend" style="display:none" src="./images/heavensLegend.png" alt="Legend"/>
          </span>
        <?php 
?>

      </div> 

  You can find any functions you need near the end of my 'common.php (http://gwwilkins.org/common.php?sce=view)'.
Here is the get_changeinday() function I placed at the bottom of my Saratoga Template's 'common.php':
Code: [Select]
// The following functions were added by SE Lincoln Weather as part of ajax-dashboard69x
//
// -----------------------------------------------------------------------------
// CHANGE IN DAYLENGTH FUNCTION:  computes length of yesterday, today,  & tomorrow
//   and then the change in day length from yesterday to today
// Written by SE Lincoln Weather                                                           .
// -----------------------------------------------------------------------------
// Alternate $changeinday routine that finds $changeinday2
if (!function_exists('get_changeinday')) { // Avoid fatally re-declaring this!!!
function get_changeinday() {
$hrsOfSunLight = array();
global $SITE;
global $displayTomorrow;

$t = time()-86400; // Yesterday

for ($i=0; $i<(2+($displayTomorrow?1:0)); $i++) { // Only loop twice if no $displayTomorrow
$sun = date_sun_info($t, $SITE['latitude' ], $SITE["longitude"]);
$srise  = $sun["sunrise"];
$sset  = $sun["sunset"];
$sunhrs[$i] = $sset - $srise;   // $sunhrs is time between sunrise and sunset
$sh[$i] = floor($sunhrs[$i]/3600); // Sun Hours
$sm[$i] = floor((($sunhrs[$i]/3600)-$sh[$i])*60); // Sun Minutes
$ss[$i] = round(((((($sunhrs[$i]/3600)-$sh[$i])*60)-$sm[$i])*60),0); // Sun Seconds
$hrsOfSunLight[$i] = $sh[$i].':'.$sm[$i].':'.$ss[$i]; // Assemble strings in array
$t+=86400; // Next Day
}

$cindsign = (($sunhrs[1]-$sunhrs[0])>0)?'+':'-'; // Change IN Day sign

$shdiff = ($cindsign=='-'?($sh[0] - $sh[1]):($sh[1] - $sh[0])); // Difference in hours
$smdiff = ($cindsign=='-'?($sm[0] - $sm[1]):($sm[1] - $sm[0])); // Difference in minutes
$ssdiff = ($cindsign=='-'?($ss[0] - $ss[1]):($ss[1] - $ss[0])); // Difference in seconds
if ($ssdiff<0) { // negative number of seconds?
$smdiff -= 1; // borrow
$ssdiff += 60; // and carry
}
if ($smdiff<0) { // negative number of minutes?
$shdiff -=1; // borrow
$smdiff += 60; // and carry
}
$changeinday2 = $cindsign.$shdiff.':'.$smdiff.':'.$ssdiff; // Assemble cind string
$result = array($changeinday2,$hrsOfSunLight);
return $result;
}
}
// end of changeinday()

Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 02, 2015, 04:23:17 PM
Heavenpie-test (http://gwwilkins.org/heavenpie-test.php) now includes a jQuery function to refresh the pie chart at the desired intervals.  It's currently set up to use 15 second intervals for demo purposes.  The two occurrences of '15000' should be changed to however many milliseconds you want between refreshes, e.g. '120000' for two minutes, etc.  To use this place the pie chart in its own <div id="PieChart">...</div> and it should reload as desired.  This version supplants the previous one.

Be aware that because the image is cached, setting a refresh interval less than the cache interval will just reload a stale image until the cached image expires.

I've now included an example of how to use the auto-refreshing version in my 'menubar.php (http://gwwilkins.org/menubar.php?sce=view)'.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: btrip on October 13, 2015, 06:41:01 PM
Hi I have added the Heaven Pie chart to my dashboard http://southwestweather.com/wx/wxindex.php (http://southwestweather.com/wx/wxindex.php)

Thanks for the script
BTrip
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 13, 2015, 07:23:31 PM
Hi I have added the Heaven Pie chart to my dashboard http://southwestweather.com/wx/wxindex.php (http://southwestweather.com/wx/wxindex.php)

Thanks for the script
BTrip
Good work!  Looks good.  Fortunately you have room for the Legend without which the 'heavenpie.png' could be hard to interpret.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on October 14, 2015, 01:11:37 PM
I've found a way to include the 'heavenpie.png' Legend, 'heavensLegend.png', in my dashboard while still maintaining the table width.  It's a bit of a stretch, but it uses CSS to magnify the Legend with 'mouseover':
Code: [Select]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Code: [Select]
<style type="text/css">
.img-zoom {
position:relative;
z-index: 1;
cursor:auto;
}
 
.transition {
position:relative;
z-index: 999;
  transform: scale(2);
cursor:crosshair;
}
</style>
Code: [Select]
<script type="text/javascript">
var j = jQuery.noConflict();
  j(document).ready(function(){
    j('.img-zoom').hover(function() {
        j(this).addClass('transition');
 
    }, function() {
        j(this).removeClass('transition');
    });
  });
</script>
Code: [Select]
$showSLPLegend = true; // Show the Sunlight Pie Legend
Code: [Select]
            <span class="thisPage" style="font-size:7px; line-height:130%">(Noon)</span>
            <a href="<?php echo $sunLightPieLink?>" target="_blank" title="Astronomy Page in New Tab"><img style="width:80px; margin-left:auto; margin-right:auto" src="<?php echo getUniqueImageURL('./cache/heavenpie.png')?>" alt="graph" width="80px" height="80px" id="HeavenPie"/></a>
            <span class="thisPage" style="font-size:7px; line-height:130%">(Midnight)<br/></span>
            <?php if ($showSLPLegend) { ?>
<img class="img-zoom" src="./images/heavensLegend.png" alt="Legend" width="80px" height="52px"/><br/>
              <?php ?>
You can see the result on my home page (http://gwwilkins.org) by mousing over the small Sunlight Pie Legend.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: Breezy on September 23, 2017, 08:51:06 AM
Hello Jerry,

Great script!  =D&gt; I would like to setup your "sunlight pie chart" in my dashboard (Alt. 6.92) but I'm having a bit of difficulty following all of the instructions in this topic. At your convenience, would you please "list" the required scripting steps necessary to install? Most appreciated  :!:

Best regards,

Jeff
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on September 23, 2017, 09:01:55 AM
Hello Jerry,

Great script!  =D&gt; I would like to setup your "sunlight pie chart" in my dashboard (Alt. 6.92) but I'm having a bit of difficulty following all of the instructions in this topic. At your convenience, would you please "list" the required scripting steps necessary to install? Most appreciated  :!:

Best regards,

Jeff
See PM, Jeff.
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: spweather on September 23, 2017, 11:36:35 AM
I would be interested in this also.

Jerry, could you please provide me the steps also.

Thanks,
Dennis
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: Breezy on September 23, 2017, 12:22:08 PM
Dennis,

I'm trying to install the script following the notes in Jerry's thread as included here. I'll post to this thread as I make progress. Testing will be conducted at
http://indiantrailweather.com/indextest.php

Jeff
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: Breezy on September 23, 2017, 02:24:47 PM
Quote
Dennis,

I'm trying to install the script following the notes in Jerry's thread as included here. I'll post to this thread as I make progress. Testing will be conducted at
http://indiantrailweather.com/indextest.php

Jeff

Update: As soon as I edited "common.php" my page went blank. Too much for me. I'll be sticking with my current version.

Jeff
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on September 23, 2017, 02:38:24 PM
Update: As soon as I edited "common.php" my page went blank. Too much for me. I'll be sticking with my current version.

Jeff
Unless you are using the sunlight pie chart in your menubar, and I see you're not, you DON'T need to modify 'common.php'.  Just add the two functions to the 'function' section of your 'ajax-dashboard6.php' instead.  They will be read in as needed by your dashboard.

Here are the relevant functions in my 'ajax-dashboard6.php':
Code: [Select]
// -----------------------------------------------------------------------------
// The following functions were added by SE Lincoln Weather as part of ajax-dashboard69x
// -----------------------------------------------------------------------------
// Keep images fresh
// Adds timestamp to image making it unique
// -----------------------------------------------------------------------------
if (!function_exists('getUniqueImageURL')) {
function getUniqueImageURL($image_url){
$timestamp = time();
if(strpos($image_url, '?')){
$image_url = str_replace('?', "?$timestamp&", $image_url);
}
else{
$image_url .= "?$timestamp";
}
return $image_url;
}
}
// end of getUniqueImageURL
//
// -----------------------------------------------------------------------------
// CHANGE IN DAYLENGTH FUNCTION:  computes length of yesterday, today,  & tomorrow
//   and then the change in day length from yesterday to today
// Written by SE Lincoln Weather                                                           .
// -----------------------------------------------------------------------------
// Alternate $changeinday routine that finds $changeinday2
if (!function_exists('get_changeinday')) { // Avoid fatally re-declaring this!!!
function get_changeinday() {
$hrsOfSunLight = array();
global $SITE;

$t = time()-86400; // Yesterday

for ($i=0; $i<(2+($displayTomorrow?1:0)); $i++) { // Only loop twice if no $displayTomorrow
$sun = date_sun_info($t, $SITE['latitude' ], $SITE["longitude"]);
$srise  = $sun["sunrise"];
$sset  = $sun["sunset"];
$sunhrs[$i] = $sset - $srise;   // $sunhrs is time between sunrise and sunset
$sh[$i] = floor($sunhrs[$i]/3600); // Sun Hours
$sm[$i] = floor((($sunhrs[$i]/3600)-$sh[$i])*60); // Sun Minutes
$ss[$i] = round(((((($sunhrs[$i]/3600)-$sh[$i])*60)-$sm[$i])*60),0); // Sun Seconds
$hrsOfSunLight[$i] = $sh[$i].':'.$sm[$i].':'.$ss[$i]; // Assemble strings in array
$t+=86400; // Next Day
}

$cindsign = (($sunhrs[1]-$sunhrs[0])>0)?'+':'-'; // Change IN Day sign

$shdiff = ($cindsign=='-'?($sh[0] - $sh[1]):($sh[1] - $sh[0])); // Difference in hours
$smdiff = ($cindsign=='-'?($sm[0] - $sm[1]):($sm[1] - $sm[0])); // Difference in minutes
$ssdiff = ($cindsign=='-'?($ss[0] - $ss[1]):($ss[1] - $ss[0])); // Difference in seconds
if ($ssdiff<0) { // negative number of seconds?
$smdiff -= 1; // borrow
$ssdiff += 60; // and carry
}
if ($smdiff<0) { // negative number of minutes?
$shdiff -=1; // borrow
$smdiff += 60; // and carry
}
$changeinday2 = $cindsign.$shdiff.':'.$smdiff.':'.$ssdiff; // Assemble cind string
$result = array($changeinday2,$hrsOfSunLight);
return $result;
}
}
// end of changeinday()

Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: Breezy on September 24, 2017, 09:53:01 AM
I've added the functions in the dashboard and now need to get the php scripting correct in the dashboard.  ](*,) http://indiantrailweather.com/indextest.php It would probably behoove me to take a PHP scripting course 101 ...  :idea:
Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: saratogaWX on April 03, 2019, 04:13:04 PM
Thanks for the info!  I've repackaged the ajax-dashboard6.php with the heavens.pie mods
along with the needed images and support scripts into one distribution to make it easier for initial installs to use.  The dashboard was updated to allow both DarkSky and the new WU/TWC forecasts.  I took the opportunity to replace the Google charts sunpie with Gerry's version of beteljuice's sunpie (made by heavens.php and cached in ./cache/heavenpie.png).  Also rooted around and collected the old included scripts needed, updated all for PHP7+ where needed.

Should make new installs a bit easier for folks.  Download the 6.95b package from legacy scripts (https://saratoga-weather.org/scripts-legacy.php#scott) page.

Best regards,
Ken

Title: Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
Post by: gwwilk on April 03, 2019, 04:56:28 PM
A stellar job, as usual, Ken!  Kudos for assembling this package which should make it much easier for people to install Scott's Alternate Dashboard 695 with all the added bells and whistles including the 'raintodate' script and of course the Cumulus-derived sunlight pie chart. \:D/ =D&gt; \:D/