a) a replacement mouse over display for Cloud Base
b) a replacement gauge and mouse over display for UV Index
c) an additional gauge (replaces solar radiation) and mouse over for Ozone Column
(changes for labels beneath gauges are as listed in a post above and not included here)
Files changed are gauges.js, gauges-ss.css, language.min.js, html gauge display (my saratoga style format) and get-UV-forecast-inc.php.
All changes are based on the display of small gauges so you will have to adjust if you are using any other size.
If you are using my image alternatives to graphs (cloudbase is generated), I have added them at the end.
These changes are intended for the php version. I don't fully understand the html version (not having looked at it) but the only change may be ensuring delivery of
the uv and ozone variables to the js code.
I use tip_9 for the ozone gauge (i.e. if you have solar too then you will have to generate an additional gauge)
I haven't shown line numbers as they could well be different in your versions. Code is grouped between =====. The places to alter the code should be obvious (I just did a search and replace of solar with ozone originally).
gauges.js changes
Code: Select all
showUvGauge : true, //Display the UV Index gauge
showOzoneGauge : true, //Display the Ozone gauge *
============
uvScaleDefMax : 12, //Northern Europe may be lower - max. value recorded in the UK is 8, so use a scale of 10 for UK
ozoneGaugeScaleMin : 180, //Min value to be shown on the ozone column
ozoneGaugeScaleMax : 400, //Max value to be shown on the ozone column
============
gaugeUV, gaugeOzone, gaugeCloud, gaugeRose,
============
(config.showUvGauge ? 'ajax-images/uv_image.jpg' : null), // UV information | =null if no UV sensor
(config.showOzoneGauge ? 'ajax-images/ozonedu.png' : null), // Ozone information | Ozone =null if no Ozone sensor
(config.showRoseGauge ? 'windd.png' : null), // Wind direction if Rose is enabled | =null if Rose is disabled
(config.showCloudGauge ? 'cloudbaseCU.php' : null) // Pressure for cloud height | =null if Cloud Height is disabled
===============
// remove the Ozone gauge?
if (!config.showOzoneGauge) {
$('#canvas_ozone').parent().remove();
} else {
gaugeOzone = singleOzone.getInstance();
}
// Singleton for the Ozone Gauge
//
singleOzone = (function () {
var instance; // Stores a reference to the Singleton
var ssGauge; // Stores a reference to the SS Gauge
var cache = {}; // Stores various config values and parameters
function init() {
var params = $.extend(true, {}, commonParams);
// define Ozone start values
cache.value = 0.0001;
cache.sections = [
steelseries.Section(180, 200, 'rgba(94, 30, 214, 1)'),
steelseries.Section(200, 225, 'rgba(15, 35, 255, 1)'),
steelseries.Section(225, 250, 'rgba(0, 120, 235, 1)'),
steelseries.Section(250, 275, 'rgba(0, 191, 194, 1)'),
steelseries.Section(275, 300, 'rgba(0, 255, 255, 1)'),
steelseries.Section(300, 325, 'rgba(114, 255, 53, 1)'),
steelseries.Section(325, 350, 'rgba(0, 255, 0, 1)'),
steelseries.Section(350, 375, 'rgba(195, 234, 12, 1)'),
steelseries.Section(375, 400, 'rgba(255, 255, 0, 1)')
];
// create Ozone gauge
if ($('#canvas_ozone').length) {
params.size = Math.ceil($('#canvas_ozone').width() * config.gaugeScaling);
params.section = cache.sections;
params.minValue = gaugeGlobals.ozoneGaugeScaleMin;
params.maxValue = gaugeGlobals.ozoneGaugeScaleMax;
params.titleString = strings.ozone_title;
params.unitString = 'Dobson Units (DU)';
params.niceScale = false;
params.thresholdVisible = false;
params.lcdDecimals = 1;
ssGauge = new steelseries.Radial('canvas_ozone', params);
ssGauge.setValue(cache.value);
// over-ride CSS applied size?
if (config.gaugeScaling !== 1) {
$('#canvas_ozone').css({'width': params.size + 'px', 'height': params.size + 'px'});
}
// add a shadow to the gauge
if (config.showGaugeShadow) {
$('#canvas_ozone').css(gaugeShadow(params.size));
}
// subcribe to data updates
$.subscribe('gauges.dataUpdated', update);
$.subscribe('gauges.graphUpdate', updateGraph);
} else {
// cannot draw gauge, return null
return null;
}
function update() {
var tip, percent;
cache.value = data.OzoneRad;
cache.currMaxValue = data.CurrentOzoneMax;
// Set the values
ssGauge.setMaxMeasuredValue(cache.currMaxValue);
ssGauge.setValueAnimated(cache.value);
if (ddimgtooltip.showTips) {
// update tooltip
tip = '<b>' + strings.ozone_title + ': ' + cache.value + ' DU</b><br>' + strings.ozone_maxToday + ': ' + cache.currMaxValue + ' DU';
$('#imgtip9_txt').html(tip);
}
} // End of update()
function updateGraph(evnt, cacheDefeat) {
if (config.tipImgs[9] !== null) {
$('#imgtip9_img').attr('src', config.imgPathURL + config.tipImgs[9] + cacheDefeat);
}
}
return {
update: update,
gauge: ssGauge
};
} // End of init()
return {
// Get the Singleton instance if one exists
// or create one if it doesn't
getInstance: function () {
if (!instance) {
instance = init();
}
return instance;
}
};
})(),
===============
data.tempunit = '°' + data.tempunit;
}
data.UVTH = data.UV = uvtoday;
data.CurrentOzoneMax = data.OzoneRad = dutoday;
// Check for station off-line
===============
if (gaugeUV) {
gaugeUV.gauge.setTitleString(strings.uv_title);
if (data.ver) { gaugeUV.update(); }
}
if (gaugeOzone) {
gaugeOzone.gauge.setTitleString(strings.ozone_title);
if (data.ver) { gaugeOzone.update(); }
}
==============
createtip : function ($, tipid, tipinfo) {
if ($('#' + tipid).length === 0) { //if this tooltip doesn't exist yet
var sfx = '';
if (tipid === 'imgtip11') { sfx = 'x';}
if (tipid === 'imgtip8') { sfx = 'y';}
if (tipid === 'imgtip9') { sfx = 'z';}
return $('<div id="' + tipid + '" class="ddimgtooltip" />')
.html(
((tipinfo[1]) ? '<div class="tipinfo" id="' + tipid + '_txt">' + tipinfo[1] + '</div>' : '') +
(tipinfo[0] !== null ? '<div style="text-align:center"><img class="tipimg' + sfx + '" id="' + tipid + '_img" src="' + tipinfo[0] + '" /></div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body);
}
return null;
},
===============
Code: Select all
.tipimgx{
width: 130px;
height: 260px;
}
.tipimgy{
width: 220px;
height: 184px;
}
.tipimgz{
width: 220px;
height: 197px;
}
================Code: Select all
//
uv_title : "UV Index",
uv_levels : ["None",
"No danger",
"Moderate risk",
"High risk",
"Very high risk",
"Extreme risk"],
uv_headlines : ["No measurable UV Index",
"No danger to the average person",
"Moderate risk of harm from unprotected sun exposure",
"High risk of harm from unprotected sun exposure",
"Very high risk of harm from unprotected sun exposure",
"Extreme risk of harm from unprotected sun exposure"],
uv_details : ["It is still night time or it is a very cloudy day.",
"Wear sunglasses on bright days; use sunscreen if<br>" +
"there is snow on the ground, which reflects UV<br>" +
"radiation, or if you have particularly fair skin.",
"Wear sunglasses and use SPF 30+ sunscreen, cover<br>" +
"the body with clothing and a hat, and seek shade<br>" +
"around midday when the sun is most intense.",
"Wear sunglasses and use SPF 30+ sunscreen, cover<br>" +
"the body with sun protective clothing and a <br>" +
"wide-brim hat, and reduce time in the sun from<br>" +
"two hours before to three hours after solar noon<br>" +
"(roughly 11:00 AM to 4:00 PM during summer in<br>" +
"zones that observe daylight saving time).",
"Wear SPF 30+ sunscreen, a shirt, sunglasses, and<br>" +
"a hat. Do not stay out in the sun for too long.",
"Take all precautions, including: wear sunglasses<br>" +
"and use SPF 30+ sunscreen, cover the body with a<br>" +
"long-sleeve shirt and trousers, wear a broad hat<br>" +
"and avoid the sun from two hours before to three<br>" +
"hours after solar noon (roughly 11:00 AM to 4:00<br>" +
"PM during summer in zones that observe DST)."],
//
ozone_title : "Ozone column",
ozone_currentMax : "Current theoretical maximum reading",
ozone_ofMax : "of maximum",
ozone_maxToday : "Today's maximum reading",
//
cloudbase_title : "Cloud Base",
cloudbase_popup_title : "Theoretical cloud base",
cloudbase_popup_text : "The calculation is a simple one;<br>" +
"500 meters for every 4 degrees Centigrade difference<br>" +
"between the temperature and the dew point. Note that this<br>" +
"simply gives the theoretical height at which Cumulus<br>" +
"clouds would begin to form, the air being saturated.",
feet: "feet",
metres: "metres",
//
===================Note: as I couldn't figure out how to stop the values displaying at the top of my Ajax
dashboard, which uses the same script, I had to make a copy of get-UV-forecast-inc.php
Code: Select all
<body>
<?php
…
…
$UVscript = 'get-UV-forecast-incx.php'; // worldwide forecast script for UV Index
include_once($UVscript);
?>
<script type="text/javascript">
var uvtoday = <?php echo json_encode($UVtoday) ?>;
var dutoday = <?php echo json_encode($DUtoday) ?>;
</script>
<div id="main-copy">
==============================
<div id="tip_9" class="gauge">
<canvas id="canvas_ozone" class="gaugeSizeSml"></canvas>
<div class="gauge-label">Ozone Column</div>
</div>
===============================Code: Select all
print "<!-- UVfcstUVI entries now use decimal comma format -->\n";
}
$UVtoday = $UVfcstUVI[0];
$DUtoday = $UVfcstDUN[0];
echo json_encode($UVtoday);
echo json_encode($DUtoday);
return; // printing is left to the including page
// ----------------------------functions -----------------------------------
You can see my version at http://jerbils.info/saratoga/wxgauges.php
