Author Topic: AQI in Gizmo  (Read 545 times)

0 Members and 1 Guest are viewing this topic.

Offline vinesweather

  • Senior Contributor
  • ****
  • Posts: 293
    • The Vines Weather
AQI in Gizmo
« on: April 27, 2020, 07:39:31 AM »
Hi
Does anyone know how to add AQI into the Gizmo?
Thanks
Chris

Offline vinesweather

  • Senior Contributor
  • ****
  • Posts: 293
    • The Vines Weather
Re: AQI in Gizmo
« Reply #1 on: May 16, 2020, 01:16:40 AM »
Anyone able to help? I keep stuffing it up lol.

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
Re: AQI in Gizmo plus Soil
« Reply #2 on: May 16, 2020, 03:36:53 AM »
Hi There,

I managed to add Soil and AQI to my Gizmo for the Saratoga script.

My soil variable is called "$cSoil" and the AQI pm2.5 is called "$AQI_P2_idx", yours might be different, but add them in the script.

The two files to edit are ajax-gizmo.php and ajaxgizmo.js (note that if you change and upload the ajaxgizmo.js, you should go to your browser and clear "cached files and images" or you might not see the changes.

First in the file "ajax-gizmo.php" add function gizmo_get_AQIrange() just before function gizmo_get_UVrange( ) to display AQI quality box after your AQI value.

see ajax-gizmo-1.txt

Code: [Select]
function gizmo_get_AQIrange ( $inAQ ) {
// figure out a text value and color for UV exposure text
//  1 to 50  Good
//  51 to 100 Moderate
//  101 to 150 Poor
//  151 to 200  Unhealthy
//  201 to 300  V.Unhealthy
//  300+ Hazardous

   $aq = $inAQ;

   switch (TRUE) {
     case ($aq == 0):
       $aq = langtransstr('Good');
     break;
     case (($aq > 0) and ($aq < 51)):
       $aq = '<span style="border: solid 1px; color: black; background-color: #A4CE6a;">&nbsp;' . langtransstr('Good') . '&nbsp;</span>';
     break;
     case (($aq >= 51) and ($aq < 101)):
       $aq = '<span style="border: solid 1px; color: black; background-color: #FBEE09;">&nbsp;' . langtransstr('Moderate') . '&nbsp;</span>';
     break;
     case (($aq >=101 ) and ($aq < 151)):
       $aq = '<span style="border: solid 1px; color: black; background-color: #FD9125;">&nbsp;' . langtransstr('Poor') . '&nbsp;</span>';
     break;
     case (($aq >=151 ) and ($aq < 201)):
       $aq = '<span style="border: solid 1px; color: #FFFFFF; background-color: #F63F37;">&nbsp;' . langtransstr('Very&nbsp;Unhealthy') . '&nbsp;</span>';
     break;
     case (($aq >= 300) ):
       $aq = '<span style="border: solid 1px; color: #FFFF00; background-color: #807780;">&nbsp;' . langtransstr('Hazardous') . '&nbsp;</span>';
     break;
   } // end switch
   return $aq;
} // end get_AQIrange

Next add the ajaxcontent layers to the ajax-gizmo.php. Mine are ajaxcontent9 for the soil and ajaxcontent10 for the AQI

see ajax-gizmo-2.txt

Code: [Select]
<span class="ajaxcontent8" style="display: none"><?php langtrans('UV Index'); ?>:
           <span class="ajax" id="gizmouv"><?php echo $VPuv?></span>&nbsp;
   <span style="color: #ffffff">
         <span class="ajax" id="gizmouvword"><?php echo gizmo_get_UVrange($VPuv); ?></span>
   </span>
</span>


<span class="ajaxcontent9" style="display: none"><?php langtrans('Soil Temp'); ?>:
    <span class="ajax" id="gizmotemp"><?php 
 echo gizmo_strip_units($cSoil).$uomTemp?>
</span>


</span>
<span class="ajaxcontent10" style="display: none"><?php langtrans('Air Quality'); ?>:
    <?php echo $airstr?>
   <span style="color: #ffffff">
         <span class="ajax" id="gizmouvword"><?php echo gizmo_get_AQIrange($AQI_P2_idx); ?></span>
   </span>
</span>


  </div>
  <!-- ##### end of AJAX gizmo  ##### -->

Finally increase the "ajaxtotalcontent" value in ajzxgizmo.js file, I had to add 2 to make it 10.

see ajaxgizmo.txt

Code: [Select]
function ajax_get_total() {
ajaxtotalcontent = 10; // content0 .. content9 plus the UV if you have it
if (showUV) { ajaxtotalcontent++ ; } // UV display is in last content area
}

https://www.wraxallweather.co.uk/wxindex.php

I hope this helps, it worked for me.
 
Dave

ps made it more readable.
« Last Edit: May 17, 2020, 03:03:32 AM by WraxallDave »

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
Re: AQI in Gizmo
« Reply #3 on: May 16, 2020, 11:47:11 PM »

Updated AQI Gizmo post to make the code more visible.

Offline vinesweather

  • Senior Contributor
  • ****
  • Posts: 293
    • The Vines Weather
Re: AQI in Gizmo
« Reply #4 on: May 20, 2020, 02:47:34 AM »
Cheers mate. Working on it now.
Much appreciated

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
Re: AQI in Gizmo
« Reply #5 on: May 20, 2020, 03:32:53 AM »
Hi There,

Just noticed that the $airstr declaration was not shown in the code example in ajax-gizmo.php. (2)

Code: [Select]
$airstr = ' '.$AQI_P2_raw.'ug/m3';
Or any format you would like the string to be displayed.

Cheers, Dave