Author Topic: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard  (Read 1913 times)

0 Members and 1 Guest are viewing this topic.

Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
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', 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.  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 (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.
Regards, Jerry Wilkins
gwwilk@inebraska.com

Offline mcrossley

  • Senior Contributor
  • ****
  • Posts: 281
    • Wilmslow Astro
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #1 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.
Mark

Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #2 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.
Regards, Jerry Wilkins
gwwilk@inebraska.com

Offline jay_hoehn

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 652
    • Jay's Woodcrafts
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #3 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
Davis Vantage Pro2 Plus
VVP
Weather Display


Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #4 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.
« Last Edit: October 01, 2015, 12:36:32 PM by gwwilk »
Regards, Jerry Wilkins
gwwilk@inebraska.com

Offline jay_hoehn

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 652
    • Jay's Woodcrafts
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #5 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.
« Last Edit: October 01, 2015, 12:38:58 PM by jay_hoehn »
Davis Vantage Pro2 Plus
VVP
Weather Display


Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #6 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;
« Last Edit: October 01, 2015, 12:48:30 PM by gwwilk »
Regards, Jerry Wilkins
gwwilk@inebraska.com

Offline jay_hoehn

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 652
    • Jay's Woodcrafts
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #7 on: October 01, 2015, 12:48:14 PM »
Was I supposed to remove some javascript  I couldn't find the old version.

Jay
Davis Vantage Pro2 Plus
VVP
Weather Display


Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #8 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.
Regards, Jerry Wilkins
gwwilk@inebraska.com

Offline jay_hoehn

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 652
    • Jay's Woodcrafts
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #9 on: October 01, 2015, 12:51:10 PM »
Thanks for the help.  Looks great.

Jay
Davis Vantage Pro2 Plus
VVP
Weather Display


Online 92merc

  • BismarckWeather.net
  • Forecaster
  • *****
  • Posts: 547
  • BismarckWeather.net
    • BismarckWeather.net
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #10 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?
http://www.BismarckWeather.net
Davis VP2, Cumulus, Blitzortung, Bloomsky, Saratoga Scripts

Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #11 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">'.
Regards, Jerry Wilkins
gwwilk@inebraska.com

Online 92merc

  • BismarckWeather.net
  • Forecaster
  • *****
  • Posts: 547
  • BismarckWeather.net
    • BismarckWeather.net
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #12 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?
http://www.BismarckWeather.net
Davis VP2, Cumulus, Blitzortung, Bloomsky, Saratoga Scripts

Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #13 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 illustrates how to create and display the pie chart in a table.  Here is the script.  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' currently on my site doesn't look for a 'Settings.php' but requires your long. and lat. to be entered.
« Last Edit: October 02, 2015, 02:13:14 PM by gwwilk »
Regards, Jerry Wilkins
gwwilk@inebraska.com

Online 92merc

  • BismarckWeather.net
  • Forecaster
  • *****
  • Posts: 547
  • BismarckWeather.net
    • BismarckWeather.net
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #14 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?
http://www.BismarckWeather.net
Davis VP2, Cumulus, Blitzortung, Bloomsky, Saratoga Scripts

Online 92merc

  • BismarckWeather.net
  • Forecaster
  • *****
  • Posts: 547
  • BismarckWeather.net
    • BismarckWeather.net
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #15 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)"
http://www.BismarckWeather.net
Davis VP2, Cumulus, Blitzortung, Bloomsky, Saratoga Scripts

Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #16 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' and look at the code under 'Sunlight Hours'.  You can find any functions you need near the end of my 'common.php'.
Regards, Jerry Wilkins
gwwilk@inebraska.com

Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #17 on: October 02, 2015, 04:23:17 PM »
Heavenpie-test 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'.
« Last Edit: October 02, 2015, 07:06:44 PM by gwwilk »
Regards, Jerry Wilkins
gwwilk@inebraska.com

Offline btrip

  • Member
  • *
  • Posts: 1
    • South West Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #18 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

Thanks for the script
BTrip
B.Trip
DavisVP2/ Envoy Wireless, 2011 Mac Mini Server
El-Capitan 10.11.6 2.3ghz Quad-Core Intel Core i7 16GB Ram
Arizona

Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #19 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

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.
Regards, Jerry Wilkins
gwwilk@inebraska.com

Offline gwwilk

  • Southeast Lincoln Weather
  • Forecaster
  • *****
  • Posts: 1761
    • SouthEast Lincoln, NE Weather
Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
« Reply #20 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':
  • Make sure jQuery is loaded somewhere in your <head> before </head>.  Mine occurs in my 'menubar.php':
Code: [Select]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  • Next I added the necessary <style> to my 'index.php' just before '</head>':
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>
  • Then I added this at the end of my 'ajax-dashboard6.php':
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>
  • Then I added this switch to 'AltAjaxDashboardConfig6.php' just below '$useSunlightPie':
Code: [Select]
$showSLPLegend = true; // Show the Sunlight Pie Legend
  • Finally I also added this code to my 'ajax-dashboard6.php' (in context):
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 by mousing over the small Sunlight Pie Legend.
    Regards, Jerry Wilkins
    gwwilk@inebraska.com

    Offline Breezy

    • Indian Trail Weather
    • Senior Contributor
    • ****
    • Posts: 243
      • Indian Trail Weather
    Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
    « Reply #21 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

    Offline gwwilk

    • Southeast Lincoln Weather
    • Forecaster
    • *****
    • Posts: 1761
      • SouthEast Lincoln, NE Weather
    Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
    « Reply #22 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.
    Regards, Jerry Wilkins
    gwwilk@inebraska.com

    Offline spweather

    • Senior Member
    • **
    • Posts: 53
      • Sand Point Weather
    Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
    « Reply #23 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
    Davis Wireless Vantage Pro2 Plus w/24hr FARS, Boltek/NexStorm/StormVue NGX/MicroLDN TOA, WL, WD


    Offline Breezy

    • Indian Trail Weather
    • Senior Contributor
    • ****
    • Posts: 243
      • Indian Trail Weather
    Re: A Different Sunlight Pie Chart in My Saratoga Template and Dashboard
    « Reply #24 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