Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

AjaxCumulus.js and image IsSunny

Other discussion about creating web sites for Cumulus that doesn't have a specific subforum

Moderator: daj

Post Reply
User avatar
Dador
Posts: 187
Joined: Thu 24 Nov 2011 2:22 pm
Weather Station: Davis VP2 Plus & Ecowitt
Operating System: Windows 10
Location: Rybnik, Poland
Contact:

AjaxCumulus.js and image IsSunny

Post by Dador »

Hi, I have a small problem.

I use the AjaxCumulus script on my website. I would like the script to replace the image when the sun shines when the <#IsSunny> function returns 0 and 1.

My AjaxCumulus_pl.js

Code: Select all

<!--
// Special thanks to: Kevin Reed http://www.tnetweather.com
// Special thanks to: Pinto http://www.joske-online.be
// Pinto wrote the basic AJAX code for this page!
//
// 25 oktober 2008 first try to write this script for Cumulus (http://sandaysoft.com)
//
// by Pinto
//
//Polish version and snow+comment section by Fila (fila.net.pl)
/////////////////////IMPORTAND NOTICE////////////////////////////////////////////////////////////////
//heat index is still pointing to outside temperature until steve releases a new version of cumulus
/////////////////////////////////////////////////////////////////////////////////////////////////////
//
// --- added flash-change on data update functions from Ken at http://www.saratoga-weather.org
// -- begin settings
//
//
var flashcolor = '#FF0000'; // color to flash for changed observations
var flashtime = '1000'; // miliseconds to keep flash color on (2000 = 2 seconds);
// -- end of settings 
var ie4=document.all;

function getElementsByName_iefix(tag, name) {

  var elem = document.getElementsByTagName(tag);
  var arr = new Array();
  for(i = 0,iarr = 0; i < elem.length; i++) {
    att = elem[i].getAttribute("name");
    if(att == name) {
      arr[iarr] = elem[i];
      iarr++;
    }
  }
return arr;
}

function reset_ajax_color( ) {
// reset all the <span name="ajax"...> styles to have no color override
  if (ie4) {
    elements = getElementsByName_iefix("span","ajax");
  } else {
    elements = document.getElementsByName("ajax");
  }
  numelements = elements.length;
  for (var index=0;index!=numelements;index++) {
    element = elements[index];
    element.style.color='';
  }
}


function set_ajax_obs( name, value ) {
// store away the current value in both the doc and the span as lastobs="value"
// change color if value != lastobs
  element = document.getElementById(name);
  lastobs = element.getAttribute("lastobs");
  element.setAttribute("lastobs",value);
  if (value != lastobs) {
    element.style.color=flashcolor;
  }
  element.innerHTML = value;
}

function set_ajax_obs1( name, value ) {
  element = document.getElementById(name);
  element.innerHTML = value;
}
// --- end of flash-change functions
//
// --- begin of functions to convert values
//
var langBaroTrend = new Array (
 "Stabilne", "Powoli rośnie", "Rośnie", "Szybko rośnie", "Gwałtownie rośnie", "Powoli spada", "Spada", "Szybko spada", "Gwałtownie spada");

function ajax_get_barotrend(btrnd) {
// routine from Anole's wxsticker PHP (adapted to JS by Ken True)
// input: trend in hPa or millibars
//   Barometric Trend(3 hour)

// Change Rates
// Veryrapidly: =.18 inHg; 4.5 mm Hg; 6 hPa; 6 mb
// Quickly: =.11 inHg; 2.7 mm Hg; 3.6 hPa; 3.6 mb
// Rapidly: =.04 inHg; 1.13 mm Hg; 1.5 hPa; 1.5 mb
// Slowly: =.01 inHg; 0.23 mm Hg; 0.3 hPa; 0.3 mb

// 9 conditions
// Rising Veryrapidly
// Rising Quickly
// Rising Rapidly
// Rising Slowly
// Steady
// Falling Slowly
// Falling Rapidly
// falling Quickly
// Falling Veryrapidly

// Page 52 of the PDF Manual
// http://www.davisnet.com/product_documents/weather/manuals/07395.234-VP2_Manual.pdf
// figure out a text value for barometric pressure trend(1 hour)
   if ((btrnd >= -0.10) && (btrnd <= 0.10)) { return(langBaroTrend[0]); }
   if ((btrnd > 0.10) && (btrnd <= 0.50)) { return(langBaroTrend[1]); }
   if ((btrnd > 0.50) && (btrnd <= 1.20)) { return(langBaroTrend[2]); }
   if ((btrnd > 1.20) && (btrnd <= 2.00)) { return(langBaroTrend[3]); }
   if (btrnd > 2.00) { return(langBaroTrend[4]); }
   if ((btrnd < -0.10) && (btrnd >= -0.50)) { return(langBaroTrend[5]); }
   if ((btrnd < -0.50) && (btrnd >= -1.20)) { return(langBaroTrend[6]); }
   if ((btrnd < -1.20) && (btrnd >= -2.00)) { return(langBaroTrend[7]); }
   if (btrnd < -2.00) { return(langBaroTrend[8]); }
  return(btrnd);
}

function windrunUnit(windUnit) {
   if (windUnit == "m/s") { return " km"; }
   if (windUnit == "km/h") { return " km"; }
   if (windUnit == "mph") { return " miles"; }
   if (windUnit == "kts") { return " nm"; }
  return(windUnit);
}

var langBeaufort = new Array ( /* Beaufort 0 to 12 in array */
 "    Cisza", "Powiew", "Słaby wiatr", "    Łagodny wiatr", "Umiarkowany wiatr", "Dość silny wiatr",
 "Silny wiatr", "Bardzo silny wiatr", "Sztorm", "Silny sztorm", "    Bardzo silny sztorm",
 "Gwałtowny sztorm", "Huragan"
);
//
// --- end of functions to convert values
//
function ajaxLoader(url) {
  if (document.getElementById) {
    var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  }
  if (x) {
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.status == 200) {

         //updating text instead of " <#interval> minutes"        
        //set_ajax_obs("ajaxintervaltext", "5 seconds");

         //Time
        set_ajax_obs("ajaxtime", " " + x.responseText.split(' ')[1] + " " + x.responseText.split(' ')[0]);

        //Temp
        temp = (x.responseText.split(' ')[2]+ " °" + x.responseText.split(' ')[14]);
        set_ajax_obs("ajaxtemp", temp);

        //Temp2
        temp = (x.responseText.split(' ')[2]+ " °" + x.responseText.split(' ')[14]);
        set_ajax_obs("ajaxtemp2", temp);
  
        //Humidity ...
        set_ajax_obs("ajaxhum", x.responseText.split(' ')[3] + "%");

        //Humidity2 ...
        set_ajax_obs("ajaxhum2", x.responseText.split(' ')[3] + "%");
       
        temptrend = (x.responseText.split(' ')[25]+ " °" + x.responseText.split(' ')[14] + "/h");
        set_ajax_obs("ajaxtemptrend", temptrend);

        //Windchill
        set_ajax_obs("ajaxchill", x.responseText.split(' ')[24] + " °" + x.responseText.split(' ')[14]);

        //heat index        
        set_ajax_obs("ajaxheatindex", x.responseText.split(' ')[42] + " °" + x.responseText.split(' ')[14]);

        //Dewpt        
        set_ajax_obs("ajaxdewpt", x.responseText.split(' ')[4] + " °" + x.responseText.split(' ')[14]);

        //App temp        
        set_ajax_obs("ajaxapptemp", x.responseText.split(' ')[54] + " °" + x.responseText.split(' ')[14]);

        //Solar Radiation        
        set_ajax_obs("ajaxSolarRad", x.responseText.split(' ')[45] + " " + "W/m2");

        //Solar Radiation2        
        set_ajax_obs("ajaxSolarRad2", x.responseText.split(' ')[45] + " " + "W/m2");

        //Current Solar Max        
        set_ajax_obs("ajaxCurrentSolarMax", x.responseText.split(' ')[56] + " " + "W/m2");

        //ET        
        set_ajax_obs("ajaxET", x.responseText.split(' ')[44] +  " " + x.responseText.split(' ')[16]);

        //Sunshine Hours        
        set_ajax_obs("ajaxSunshineHours", x.responseText.split(' ')[55] + " " + "godz.");
                    
         //dayrain        
        set_ajax_obs("ajaxrfall", x.responseText.split(' ')[9] +  " " + x.responseText.split(' ')[16]);

         //rainrate        
        set_ajax_obs("ajaxrrate", x.responseText.split(' ')[8] +  " " + x.responseText.split(' ')[16] + "/h");

         //rain hour        
        set_ajax_obs("ajaxrhour", x.responseText.split(' ')[47] +  " " + x.responseText.split(' ')[16]);

         //rain month        
        set_ajax_obs("ajaxrmonth", x.responseText.split(' ')[19] +  " " + x.responseText.split(' ')[16]);

         //rain year        
        set_ajax_obs("ajaxryear", x.responseText.split(' ')[20] +  " " + x.responseText.split(' ')[16]);

         //wind latest        
        set_ajax_obs("ajaxwlatest", x.responseText.split(' ')[6] +  " " + x.responseText.split(' ')[13]);

         //wind latest2        
        set_ajax_obs("ajaxwlatest2", x.responseText.split(' ')[6] +  " " + x.responseText.split(' ')[13]);

         //wind speed        
        set_ajax_obs("ajaxwspeed", x.responseText.split(' ')[5] +  " " + x.responseText.split(' ')[13]);

         //windrun        
        set_ajax_obs("ajaxwingust", x.responseText.split(' ')[40] +  " "  + x.responseText.split(' ')[13]);

         //wind bearing        
        set_ajax_obs("ajaxbearing", x.responseText.split(' ')[7] +  "° " + x.responseText.split(' ')[11]);

         //wind bearing2        
        set_ajax_obs("ajaxbearing2", x.responseText.split(' ')[7] +  "° " + x.responseText.split(' ')[11]);

         //wind avgbearing        
        set_ajax_obs("ajaxavgbearing", x.responseText.split(' ')[46] +  "° " + x.responseText.split(' ')[51]);

         //Beaufort        
        set_ajax_obs("ajaxbeaufort", "Skala Beauforta &deg" + x.responseText.split(' ')[12]);

         //Beaufort word
        set_ajax_obs("ajaxbeaudesc", langBeaufort[x.responseText.split(' ')[12]]);

         //Barometer
        set_ajax_obs("ajaxpress", x.responseText.split(' ')[10] + " " + x.responseText.split(' ')[15]);

        //Barometer trend value and units        
        set_ajax_obs("ajaxpresstrendval", x.responseText.split(' ')[18] + " " + x.responseText.split(' ')[15] + "/h" +" ");

         //Barometer trend word

        if (x.responseText.split(' ')[15] == "in") {
        return set_ajax_obs("ajaxpresstrend",  ajax_get_barotrend(x.responseText.split(' ')[18] * 33.86388158));
        }
        else {
        return set_ajax_obs("ajaxpresstrend",  ajax_get_barotrend(x.responseText.split(' ')[18]));

         //Time
        set_ajax_obs("ajaxtime", " " + x.responseText.split(' ')[1] + " " + x.responseText.split(' ')[0]);
        }

   }
    }
    x.open("GET", url, true);
    x.send(null);

    setTimeout("reset_ajax_color()",1000); // change text back to default color after 1 secs
    setTimeout("ajaxLoader('realtime.txt?'+new Date())", 10000); // get new data after 10 secs
                             
  }
}
//snow and comment
function ajaxLoaderXml(urlp) {
  if (document.getElementById) {
    var y = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  }
  if (y) {
  y.onreadystatechange = function() {    
      if (y.readyState == 4 ) {


        //Comment
        if(y.responseText.split(';')[0] == false) {
            comm = "brak";
        } else {
            comm = y.responseText.split(';')[0];
        }
        set_ajax_obs1("ajaxcomment", comm);

         //SnowLying
        /*set_ajax_obs("ajaxtime", " " + x.responseText.split(';')[1] + " " + x.responseText.split(' ')[0]);*/

        //SnowFalling
        if(y.responseText.split(';')[0] == false) {
            snowfalling = "b.d.";
        } else {
            snowfalling = y.responseText.split(';')[2];
        }
        set_ajax_obs1("ajaxsnowfalling", snowfalling);

        //SnowDepth
        if(y.responseText.split(';')[0] == false) {
            snowdepth = "b.d.";
        } else {
            snowdepth = y.responseText.split(';')[3];
        }
        set_ajax_obs1("ajaxsnowdepth", snowdepth);

        //Snow Time  
        if(y.responseText.split(';')[0] == false) {
            t = new Date();
            snowt = (t.getDate()<10?"0":"")+t.getDate()+"-"+((t.getMonth()+1)<10?"0":"")+(t.getMonth()+1)+"-"+t.getFullYear();
        } else {
            snowt = y.responseText.split(';')[4];
            if(y.responseText.split(';')[5]!='-') {snowt += " - Obserwacje: "+y.responseText.split(';')[5];} 
        }    
        set_ajax_obs1("snowtime", snowt);
        
        //Comment Time
        if(y.responseText.split(';')[0] == false) {
            t = new Date();
            commentt = (t.getDate()<10?"0":"")+t.getDate()+"-"+((t.getMonth()+1)<10?"0":"")+(t.getMonth()+1)+"-"+t.getFullYear() ;
        } else {
            commentt = y.responseText.split(';')[4];
            if(y.responseText.split(';')[5]!='-') {commentt += " - Dodał: "+y.responseText.split(';')[5];}
        }          
        set_ajax_obs1("commenttime", commentt);
        
        //Comment Time
        if(y.responseText.split(';')[0] == false) {
            snowkind = "";
        } else {
            if(y.responseText.split(';')[6] != '') {
                snowkind = "(rodzaj: "+y.responseText.split(';')[6]+")";
            } else {
                snowkind = "";
            }
        }
        set_ajax_obs1("ajaxsnowk", snowkind);
        }
        }
 

    y.open("GET", urlp, true);
    y.send(null);

    setTimeout("ajaxLoaderXml('xml.php')", 900000); // get new data after 15 min.
                             
  } 
}

// -->
My site IndexT.htm

Code: Select all

				<tr class="td_data">
					<td>Ewapotranspiracja <img src="images/help.png" style="vertical-align: baseline; cursor: help" title="Wartość dobowego parowania zarówno z roślin jak i z gleby." height="11" width="11"></td>
					<td><span name="ajax" id="ajaxET"><#ET></span></td>				
					<td>Słonecznie? <img src="images/help.png" style="vertical-align: baseline; cursor: help" title="Wskaźnik pokazuje, czy świeci Słońce" height="11" width="11"></td>
					<td><img src="images/led_jaune<#IsSunny>.png"</td>
				</tr>
Now that the sun is shining, I have a picture / images /led_jaune1.png (yellow light) when I do not have a picture / images / led_jaune0 .png.

What to change in AjaxCumulus_pl.js so that it will automatically change pictures?
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: AjaxCumulus.js and image IsSunny

Post by BCJKiwi »

Have added/amended this to my C:\CumulusMX\UIwebfiles\ajaxCUmx.js file;

// Is Sunny // Added for extended use of ajax functions in other scripts - BCJKiwi
var msgalt = " YES!";
var msgtitle = " ";
var image14 = "<img src=\"" + imagedir + "brightsun.png\" alt=\"" + msgalt +
"\" title=\""+ msgtitle + "\" width=\"14\" height=\"14\" />";
var image24 = "<img src=\"" + imagedir + "brightsun.png\" alt=\"" + msgalt +
"\" title=\""+ msgtitle + "\" width=\"24\" height=\"24\" />";
if(realtime[57] == 1) {
var issunny = image14;
var issunny1 = image14;
var issunny24 = image24;
} else if (realtime[57] == 0) {
var issunny = " O";
var issunny1 = "";
var issunny24 = " -";
}
set_ajax_obs("ajaxissunny",issunny);
set_ajax_obs("ajaxissunny1",issunny1);
set_ajax_obs("ajaxissunny24",issunny24);
set_ajax_obs("ajaxissunny01",realtime[57]);


And have the same addition (and many others) in the Saratoga Scripts' ajaxCUwx.js file
User avatar
Dador
Posts: 187
Joined: Thu 24 Nov 2011 2:22 pm
Weather Station: Davis VP2 Plus & Ecowitt
Operating System: Windows 10
Location: Rybnik, Poland
Contact:

Re: AjaxCumulus.js and image IsSunny

Post by Dador »

After quite a while, I went back to solving the problem. It took me a while to find a solution by trial and error. Thanks to BCJKiwi for the hint.

Below is the code that works.

//Sunny led
var image0 = "<img src=images/led_jaune0.png />";
var image1 = "<img src=images/led_jaune1.png />";
if(x.responseText.split(' ')[57] == 1) {
var sunny = image1;
} else if (x.responseText.split(' ')[57] == 0) {
var sunny = image0;}
set_ajax_obs1("ajaxSunny",sunny);

Anyone can similarly try to change the code at home.
Post Reply