Feels Like: Difference between revisions

=Introduction=

Ever thought that you want to display a 'Feels Like' temperature?

 

 

If you can answer yes to all these questions, the following JavaScript code may be useful to you. Depending on the element id that it finds on your HTML page, it either inserts an appropriate 'Feels Like temperature' as a figure, or it draws up a temperature bar graph in the standard Cumulus style, but shows the current value for a parameter selected depending on the current conditions (although it also draws any maximum and/or minimum values of that parameter that are available).

 

You need to include something like the script that appears at the bottom of the standard gaugesT.htm in respect of defining temperature, humidity and wind speed:

<pre><script>/* -------------------------------- Convert Cumulus tags into Javascript variables for selecting 'Feels Like' parameter------------------------------------- */

var tempscale= "<#tempunitnodeg>"; // This is temperature unit, it contains F or C (without the HTML code for degree because JavaScript cannot understand it)

var ExtraSensor2Name = ""; /* Extra temperature/humidity sensor two name prefix */

var tempex2 = new Array("","","","");/* EXTRA TEMPERATURE TWO parameters (required even if not used) */

var tempdp = new Array("<#dew>","<#dewpointTL>","<#dewpointTH>","","");/* DEW POINT (current, today low, today high) */

var tempapp = new Array("<#apptemp>","<#apptempTL>","<#apptempTH>","","");/* APPARENT TEMPERATURE (current, today low, today high)*/

var tempis = new Array("not used","","","");/* INDOOR TEMPERATURE (not used by feels like routine) */

var humos = new Array("<#hum>","<#humTL>","<#ThumTL>","<#humTH>", "<#ThumTH>");/* OUTSIDE HUMIDITY latest, minimum, time of minimum, maximum, time of maximum*/

var winddata = new Array("<#wgust>","<#bearing>","<#wspeed>","<#avgbearing>","<#wgustTM>", "<#windunit>", "<#bearingTM>&#176; at <#TwgustTM>");/* WIND SPEEDS (latest gust, its bearing, average wind speed, average bearing, maximum gust today, unit for wind speeds, bearing of maximum gust today with symbol for degrees, time of maximum gust) */

</script></pre>

<pre><script src="temperature.js"></script>

</body></pre>

[[File:Feels_like_numerical.png|200px|thumb|left|set of values]]

The element id shown below would result in the numerical value being inserted as per screen image on left. Moving your mouse over the figure would display the information about the parameter being shown. This could be suitable for your 'now' page (the standard Cumulus indexT.htm displays wind chill, heat index and apparent temperature, but maybe you want to alter that? (Note this element id is not relevant to the gauges page, unless you want to display numerical values without a graphic).

[[File:Feels_like_graphic.png|50px|thumb|left|bar chart]]

Then you need to note the differences between the temperature and wind histogram data transfer shown above and that appearing at the foot of the standard Cumulus page. If you are able to cope with the necessary coding changes, you could replace the following code with the code that follows it (but there may be sizing issues to sort out).

<pre><td width="33%" align="center" bgcolor="#EFEFEF"><div id="insidetemp">small</div></td></pre>

<pre><td class="plots"><div id="feels_like"></div></td></pre>

<pre><nowiki>/* ----------------------Apparent Temperature, Wind Chill or Heat Index-------------------*/

// --- variables required ---

var gauges_images=”dbimages”; // directory where temperature scale image is stored

var divid = new Array("outsidetemp","apptemp","dewpoint","heatindex","windchill","windchill/heatindex");var ddata = new Array(tempos, tempapp, tempdp, temphi, tempwc);var dColour = new Array("#c60","#f90","sienna","purple","cyan");var esn1 = "Extra Temperature 1";var esn2 = "Extra Temperature 2";if(ExtraSensor1Name) esn1 = ExtraSensor1Name + " Temperature";if(ExtraSensor2Name) esn2 = ExtraSensor2Name + " Temperature";var divti = new Array("Outside Temperature","Apparent Temperature",esn1,esn2,"Dew Point","Heat Index","Wind Chill");

var dtext =new Array("This routine automatically decides which parameter best represents the 'Feels Like' temperature by checking the maximum wind gust speed and the minimum and maximum temperature for this meteorological day.: These are used to pick between 'Wind Chill' (low minimum temperature, high wind gust), 'Heat Index' (high maximum temperature, ) and 'Apparent Temperature' (all other cases).",

 

"The (USA) Heat Index only applies if the actual temperature is at or above 27 °C (80 °F) and relative humidity peaks above 40% .: The index modifies air temperature using relative humidity in an attempt to determine the human-perceived equivalent temperature (how hot it feels).",

 

var m, n, mo=[], tu = "°" + tempscale;

/*-- some javascript code that inserts 'Apparent Temperature' normally; but replaces that with 'Wind Chill' if minimum temperature is below 12 degrees Celsius, or replaces it with 'Heat Index' if maximum temperature is above 24 degrees Celsius */

/* are units Celsius or Fahrenheit? */

if(tempscale=="C"){ // Celsius

n= 10.5; // wind chill

m = 27; // heat index

}else{ // Fahrenheit

}

var gust;

switch(winddata[5]){

case "mph" : gust=3.0; break;

case "km/h" : gust=4.8; break;

case "m/s" : gust= 1.34; break;

case "kts" : gust=2.6 ; break;

default : gust=0.0;

}

var motext = dtext[1];var modata = ddata[1];var selectid = divid[1];var selectColour = dColour[1];var tit=divti[1];// apparent is default plot

if((tempos[2] > m) && (humos[3] > 40)) { // check maximum

motext = dtext[2];modata = ddata[3];selectid = divid[3];selectColour = dColour[3];tit=divti[5]; //heat index plot

} else if ((tempos[1] <n) && (gust < winddata[4])) { // check minimum temp and maximum wind gust

motext = dtext[3];modata = ddata[4];selectid = divid[4];selectColour = dColour[4];tit=divti[6]; // wind chill plot

}// end of if else group checking minimum and maximum temperatures

mo[0]=dtext[0];eidh.title ="header=["+'<img class="vam" src="'+gauges_images+'/information.png" alt=" graphic with little i representing information">'+"Feels Like ("+tu+")] body=["+getmo(mo)+"]";eidh.innerHTML += tit;// variable title written, check if summary page, if so appropriate figure is required and heading box requires a title

if(document.getElementById("variable_figure")){eidw=document.getElementById("variable_figure");n=modata[1];if(!isNaN(n)){ // check if minimum measurement is available

n =", "+"Min="+modata[1] + " °" + tempscale;} else {n="";}m=modata[2];if(!isNaN(m)){ // check if maximum measurement is available

m =", "+"Max="+modata[2] + " °" + tempscale;} else {m="";}eidw.innerHTML=("Latest="+modata[0] + " °" + tempscale+n+m);mo[0]=motext;eidw.title="header=["+'<img class="vam" src="'+gauges_images+'/information.png" alt=" graphic with little i representing information">'+tit+" ("+tu+")] body=["+getmo(mo)+"]";} // end of summary page coding

// rest of function only followed if bar chart to be drawn

if(document.getElementById("windchill/heatindex")){eidw=document.getElementById("windchill/heatindex");var size=eidw.innerHTMLdotemps(tit,selectid,eidw,size,modata, motext, selectColour);}} // end of function

//------------------------------------------------------------------------------

//variables for mouseover popup

var mod =0;//mouseover popup delay (msecs))

var fst = "position:relative; cursor:pointer; ";

var tds = "font-family: Verdana,Arial,Helvetica; font-size: 9px; color: #000055; "

//------------------------------------------------------------------------------

/* COMMON SUBROUTINE used by ALL CALLS FOR MOUSE OVER TEXT to create body table when using BOXOVER script */

function getmo(mot){

// Based on script included with Cumulus, but modified to use classes to refer to external Cascading Style Sheet instead of style attributes embedded in script – see comments that follow

var st = " ";

st += "<tr><td class='labels'>"; // for example labels could be bold and have a background colour

st += mot[j].substring(0,mot[j].indexOf(":")+1); // Extract string up to colon into first cell of row

st += "</td><td class='site-data'>";// numbers are centered or whatever suits you

st += mot[j].substring(mot[j].indexOf(":")+1); // Extract string after colon into second cell of row

st += "</td></tr>";

}

st += "</table>";

return st;

}

/* ------------------------ ALL TEMPERATURE BASED BAR CHARTS ------------------ */

function dotemps(tit,id,eid,size,data, text, nowColour){

var tgd,factor, bottom, scale, maxm, t, h, l, r, tu, val, fst= "position:relative; cursor:pointer; ";

if(size=="small"){

tgd="<div id='"+id+"' style='"+fst+"width:90px;'><img

src='”+gauges_images+”/thermos.gif''></div>”;

factor=2;

bottom=195;

}else{

tgd="<div id='"+id+"' style='"+fst+"width:90px;'><img src='”+gauges_images+”/thermol.gif'></div>";

factor=1;

bottom=375;

}

eid.parentNode.innerHTML=tgd;

eid=document.getElementById(id);

tu = "°" + tempscale;

if(tempscale=="C"){ // Celsius

scale=3.6/factor;

maxm=60;

}else{ // Fahrenheit

scale=2/factor;

maxm=140;

}

var valnow= parseFloat(data[0]);

t=parseInt(((maxm - valnow) * scale)+16);

h=(bottom-t)+1;// calculate length of column (origin is top left, so draw downwards)

l=25; // left hand end of horizontal lines for maximum

r=66; // right hand end of horizontal lines for minimum

// Other end of horizontal lines for maximum and minimum set at 45 - Modified so lines do not overlap and always show

var jg=new jsGraphics(id);

jg.setColor(nowColour || "#cc9"); // column fill colour taken from either calling code or default here

var mo = new Array()

var c = 0;

mo[c]=text; // descriptive text re observation or calculation

c++; // increment array index

if(!isNaN(t)){ // check if measurement is numerical

jg.fillEllipse(36,(bottom-16),20,20); // bulb of thermonmeter added by SFWS

jg.fillRect(41,t,9,h); // left and width of column plot are constants

mo[c]="<span class='sienna'>Current:</span>"+valnow+" "+tu; // semi-colon separates cells of table

} else mo[c]="Current temperature: Not Available"; // colon separates cells of table

c++;

jg.setColor("navy");

jg.setStroke(2);

val= parseFloat(data[1]);

t=parseInt(((maxm - val)*scale)+16);

if(!isNaN(t))jg.drawLine(45,t,r,t);

mo[c]="<span class='navy'>Minimum This Meteorological Day:</span>"+val+" "+tu;

c++;

}

jg.setColor("red");

jg.setStroke(2);

val=parseFloat(data[2]);

t=parseInt(((maxm - val)*scale)+16);

if(!isNaN(t))jg.drawLine(l,t,45,t);

mo[c]="<span class='red'>Maximum This Meteorological Day:</span>"+val+" "+tu;

c++;

if(tempscale=="C"){

val=Math.round((parseFloat(data[2])*1.8)+32)

mo[c]="<span class='red'>Maximum after conversion:</span>"+val+" "+"°" +"Farenheit";

c++;

}

}

mo[c]="Trend:"+data[3];// data[3] uses text that can be set in 'samplestrings.ini'

}

jg.paint();

eid.title="header=["+'<img class="vam" src="'+gauges_images+'/information.png" alt=" graphic with little i representing information">'+tit+" ("+tu+")] body=["+getmo(mo)+"]";

}

/* -------------------------------------------------------------------------------------------

Note that the code works for all temperature and wind speed units permitted by Cumulus, 'variable_figure' is id for HTML where numbers to be written (perhaps on indexT.htm template page) and "feels_like" is id for HTML element where graphic to be drawn (normally on gaugesT.htm template page)

------------------------------------------------------ */

if(document.getElementById("variable_figure")){

eidh=document.getElementById("variable_figure");

// call subroutine that determines which figures are to be displayed

dovariablebarchart(eidh)

}

if(document.getElementById("feels_like")){

eidh=document.getElementById("feels_like");

// call subroutine that determines which bar chart is to be plotted

dovariablebarchart(eidh)

}</nowiki>

</pre>

[[User:Sfws|Sfws]] 18:53, 27 December 2012 (UTC)

[[Category:WebTools]]