Add today and yesterday pages
This commit is contained in:
parent
b856cb894f
commit
98bad33895
17 changed files with 6713 additions and 7084 deletions
41
css/wah.css
41
css/wah.css
|
|
@ -94,6 +94,20 @@ div.page-container > div:last-child {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div#header {
|
||||
display: grid;
|
||||
grid-template-columns: 66px 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 0px;
|
||||
}
|
||||
|
||||
div#header img {
|
||||
filter: drop-shadow(2px 2px hsl(0, 0%, 66%));
|
||||
margin-right: 10px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
div#header h1 {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
|
|
@ -118,8 +132,8 @@ div#footer {
|
|||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0;
|
||||
grid-row-gap: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -127,14 +141,6 @@ div#footer div:last-child {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
div#footer div:last-child img {
|
||||
image-rendering: pixelated;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
table.almanac td:nth-child(odd) {
|
||||
|
|
@ -153,32 +159,33 @@ table.almanac {
|
|||
min-width: 100%;
|
||||
}
|
||||
|
||||
table.conditions-now {
|
||||
table.mx-datatable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: var(--border);
|
||||
filter: var(--shadow-small);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
table.conditions-now th {
|
||||
table.mx-datatable th {
|
||||
text-align: left;
|
||||
background-color: var(--background-dim);
|
||||
border-top: var(--border);
|
||||
}
|
||||
|
||||
table.conditions-now tr td,
|
||||
table.conditions-now tr th {
|
||||
table.mx-datatable tr td,
|
||||
table.mx-datatable tr th {
|
||||
padding: 5px 10px 5px 5px;
|
||||
}
|
||||
table.conditions-now tr td:nth-child(2) {
|
||||
table.mx-datatable tr td:nth-child(2) {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
table.conditions-now tr td:nth-child(odd) {
|
||||
table.current-conditions tr td:nth-child(odd) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.conditions-now tr:last-child td:nth-child(3) {
|
||||
table.current-conditions tr:last-child td:nth-child(3) {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
12
includes/footer.inc.php
Normal file
12
includes/footer.inc.php
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<div id="footer">
|
||||
<div>
|
||||
<span>
|
||||
© floppydisk 2021-<?= date("Y") ?>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Powered by Cumulus MX v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
14
includes/head.inc.php
Normal file
14
includes/head.inc.php
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="weather data">
|
||||
<meta name="keywords" content="Cumulus, weather, data, weather station">
|
||||
<title>Cumulus MX</title>
|
||||
<link rel="icon" type="image/png" href="/images/favicon.png">
|
||||
|
||||
<script src="/lib/jquery/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- All Styles -->
|
||||
<link href="/css/wah.css" rel="stylesheet"> <!-- Specific styles for these templates. -->
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/js/setpagedata.js"></script> <!-- Utility javascripts for all pages. -->
|
||||
19
includes/header.inc.php
Normal file
19
includes/header.inc.php
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<div id="header">
|
||||
<div>
|
||||
<img src="/images/logo.png" width="65">
|
||||
</div>
|
||||
<div>
|
||||
<h1>wah's the weather?</h1>
|
||||
<nav>
|
||||
<strong>Pages:</strong>
|
||||
<a href="/">now</a> |
|
||||
<a href="/today">today</a> |
|
||||
<a href="/yesterday">yesterday</a> |
|
||||
<a href="/todayyest">today-yest</a> |
|
||||
<a href="/gauges">gauges</a> |
|
||||
<a href="/records">records</a> |
|
||||
<a href="/charts">charts</a> |
|
||||
<a href="/reports">reports</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
60
index.php
60
index.php
|
|
@ -2,26 +2,13 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="weather data">
|
||||
<meta name="keywords" content="Cumulus, weather, data, weather station">
|
||||
<title>Cumulus MX</title>
|
||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||||
|
||||
<script src="lib/jquery/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- All Styles -->
|
||||
<link href="css/wah.css" rel="stylesheet"> <!-- Specific styles for these templates. -->
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/setpagedata.js"></script> <!-- Utility javascripts for all pages. -->
|
||||
<?php include("./includes/head.inc.php"); ?>
|
||||
<script>
|
||||
window.onload = () => {
|
||||
$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
|
||||
$('#moonImg').attr('src', '/images/moon.png?' + Date.now());
|
||||
// update the moon image every 20 minutes if the page is left open
|
||||
setInterval(() => {
|
||||
$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
|
||||
$('#moonImg').attr('src', '/images/moon.png?' + Date.now());
|
||||
}, 1200000);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -29,20 +16,7 @@
|
|||
|
||||
<body>
|
||||
<div class="page-container">
|
||||
<div id="header">
|
||||
<h1>wah's the weather?</h1>
|
||||
<nav>
|
||||
<strong>Pages:</strong>
|
||||
<a href="/">now</a> |
|
||||
<a href="">today</a> |
|
||||
<a href="">yesterday</a> |
|
||||
<a href="">today-yest</a> |
|
||||
<a href="">gauges</a> |
|
||||
<a href="">records</a> |
|
||||
<a href="">charts</a> |
|
||||
<a href="">reports</a>
|
||||
</nav>
|
||||
</div>
|
||||
<?php include("./includes/header.inc.php"); ?>
|
||||
<div id="content">
|
||||
<h3>Almanac</h3>
|
||||
<table class="almanac">
|
||||
|
|
@ -55,8 +29,8 @@
|
|||
<td>Moon Rise:</td>
|
||||
<td><span data-cmxdata="moonrise"></span></td>
|
||||
<td rowspan="3" style="width:75px; height: 75px; padding:0"><img id="moonImg"
|
||||
src="images/moon.png" alt="Moon" width="75" height="75" class="w3-image" />Visible <span
|
||||
data-cmxdata="MoonPercentAbs"></span>%
|
||||
src="/images/moon.png" alt="Moon" width="75" height="75" class="w3-image" />Visible
|
||||
<span data-cmxdata="MoonPercentAbs"></span>%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -79,7 +53,7 @@
|
|||
</table>
|
||||
<br><br>
|
||||
<h3>Conditions at local time <span data-cmxdata="time"></span></h3>
|
||||
<table class="conditions-now">
|
||||
<table class="mx-datatable current-conditions">
|
||||
<tr>
|
||||
<th colspan="4">Temperature and Humidity</th>
|
||||
</tr>
|
||||
|
|
@ -108,7 +82,8 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>Temp change last hour</td>
|
||||
<td><span data-cmxdata="TempChangeLastHour"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td><span data-cmxdata="TempChangeLastHour"></span> <span data-cmxdata="tempunit"></span>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
|
@ -177,22 +152,13 @@
|
|||
<td><span data-cmxdata="press"></span> <span data-cmxdata="pressunit"></span>
|
||||
</td>
|
||||
<td><span data-cmxdata="presstrend"></span></td>
|
||||
<td><span data-cmxdata="presstrendval"></span> <span data-cmxdata="pressunit"></span>/hr</td>
|
||||
<td><span data-cmxdata="presstrendval"></span> <span data-cmxdata="pressunit"></span>/hr
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<small>Page data updated <span data-cmxdata="update"></span></small>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div>
|
||||
<span>
|
||||
© floppydisk 2021-2024
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Powered by Cumulus MX v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<?php include("./includes/footer.inc.php"); ?>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ menuSrc = [
|
|||
{ title: "Cumulus Forum", menu: "w", url: "#", forum: true, new_window: true },
|
||||
{ title: "Webcam", menu: "b", url: "#", webcam: true, new_window: true },
|
||||
{ title: "My Cat", menu: "b", url: "mycatpage.htm" },
|
||||
{ title: "Some Cat", menu: "b", url: "https://pixnio.com/free-images/2020/07/26/2020-07-26-08-52-19-1200x1200.jpg", new_window: true }
|
||||
{ title: "Some Cat", menu: "b", url: "https://pixnio.com/free-/images/2020/07/26/2020-07-26-08-52-19-1200x1200.jpg", new_window: true }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ let fixedHeader = false; // Use only true or false
|
|||
let fixedFooter = true; // Use only true or false
|
||||
let headerMargin = 20; // Gap between the header and the main body
|
||||
let footerMargin = 10; // Gap between the body and the footer
|
||||
let load_menu = "js/menu.js"; // menu file to load - path is relative to the page
|
||||
let load_menu = "/js/menu.js"; // menu file to load - path is relative to the page
|
||||
|
||||
|
||||
// Thats the only changes you should make unless you know better!
|
||||
|
|
|
|||
2
lib/steelseries/scripts/RGraph.rose.min.js
vendored
2
lib/steelseries/scripts/RGraph.rose.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
|
|
@ -1,27 +1,26 @@
|
|||
/**
|
||||
* o------------------------------------------------------------------------------o
|
||||
* | This file is part of the RGraph package - you can learn more at: |
|
||||
* | |
|
||||
* | http://www.rgraph.net |
|
||||
* | |
|
||||
* | This package is licensed under the RGraph license. For all kinds of business |
|
||||
* | purposes there is a small one-time licensing fee to pay and for non |
|
||||
* | commercial purposes it is free to use. You can read the full license here: |
|
||||
* | |
|
||||
* | http://www.rgraph.net/LICENSE.txt |
|
||||
* o------------------------------------------------------------------------------o
|
||||
*/
|
||||
/**
|
||||
* o------------------------------------------------------------------------------o
|
||||
* | This file is part of the RGraph package - you can learn more at: |
|
||||
* | |
|
||||
* | http://www.rgraph.net |
|
||||
* | |
|
||||
* | This package is licensed under the RGraph license. For all kinds of business |
|
||||
* | purposes there is a small one-time licensing fee to pay and for non |
|
||||
* | commercial purposes it is free to use. You can read the full license here: |
|
||||
* | |
|
||||
* | http://www.rgraph.net/LICENSE.txt |
|
||||
* o------------------------------------------------------------------------------o
|
||||
*/
|
||||
|
||||
if (typeof(RGraph) == 'undefined') RGraph = {};
|
||||
if (typeof (RGraph) == 'undefined') RGraph = {};
|
||||
|
||||
/**
|
||||
* The rose chart constuctor
|
||||
*
|
||||
* @param object canvas
|
||||
* @param array data
|
||||
*/
|
||||
RGraph.Rose = function (id, data)
|
||||
{
|
||||
/**
|
||||
* The rose chart constuctor
|
||||
*
|
||||
* @param object canvas
|
||||
* @param array data
|
||||
*/
|
||||
RGraph.Rose = function (id, data) {
|
||||
this.id = id;
|
||||
this.canvas = document.getElementById(id);
|
||||
this.context = this.canvas.getContext('2d');
|
||||
|
|
@ -57,7 +56,7 @@
|
|||
'chart.centerx': null,
|
||||
'chart.centery': null,
|
||||
'chart.radius': null,
|
||||
'chart.colors': ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)', 'rgba(0,255,255,0.5)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)','green', 'pink', 'gray', 'aqua'],
|
||||
'chart.colors': ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)', 'rgba(0,255,255,0.5)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)', 'green', 'pink', 'gray', 'aqua'],
|
||||
'chart.colors.sequential': false,
|
||||
'chart.colors.alpha': null,
|
||||
'chart.margin': 0,
|
||||
|
|
@ -120,7 +119,7 @@
|
|||
'chart.zoom.background': true,
|
||||
'chart.zoom.action': 'zoom',
|
||||
'chart.resizable': false,
|
||||
'chart.resize.handle.adjust': [0,0],
|
||||
'chart.resize.handle.adjust': [0, 0],
|
||||
'chart.resize.handle.background': null,
|
||||
'chart.adjustable': false,
|
||||
'chart.ymax': null,
|
||||
|
|
@ -144,7 +143,7 @@
|
|||
* but it doesn't matter.
|
||||
*/
|
||||
var linear_data = RGraph.array_linearize(this.data);
|
||||
for (var i=0; i<linear_data.length; ++i) {
|
||||
for (var i = 0; i < linear_data.length; ++i) {
|
||||
this["$" + i] = {}
|
||||
}
|
||||
|
||||
|
|
@ -154,7 +153,7 @@
|
|||
* done already
|
||||
*/
|
||||
if (!this.canvas.__rgraph_aa_translated__) {
|
||||
this.context.translate(0.5,0.5);
|
||||
this.context.translate(0.5, 0.5);
|
||||
|
||||
this.canvas.__rgraph_aa_translated__ = true;
|
||||
}
|
||||
|
|
@ -165,52 +164,49 @@
|
|||
* Register this object
|
||||
*/
|
||||
RGraph.Register(this);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A simple setter
|
||||
*
|
||||
* @param string name The name of the property to set
|
||||
* @param string value The value of the property
|
||||
*/
|
||||
RGraph.Rose.prototype.Set = function (name, value)
|
||||
{
|
||||
/**
|
||||
* A simple setter
|
||||
*
|
||||
* @param string name The name of the property to set
|
||||
* @param string value The value of the property
|
||||
*/
|
||||
RGraph.Rose.prototype.Set = function (name, value) {
|
||||
/**
|
||||
* This should be done first - prepend the propertyy name with "chart." if necessary
|
||||
*/
|
||||
if (name.substr(0,6) != 'chart.') {
|
||||
if (name.substr(0, 6) != 'chart.') {
|
||||
name = 'chart.' + name;
|
||||
}
|
||||
|
||||
this.properties[name.toLowerCase()] = value;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A simple getter
|
||||
*
|
||||
* @param string name The name of the property to get
|
||||
*/
|
||||
RGraph.Rose.prototype.Get = function (name)
|
||||
{
|
||||
/**
|
||||
* A simple getter
|
||||
*
|
||||
* @param string name The name of the property to get
|
||||
*/
|
||||
RGraph.Rose.prototype.Get = function (name) {
|
||||
/**
|
||||
* This should be done first - prepend the property name with "chart." if necessary
|
||||
*/
|
||||
if (name.substr(0,6) != 'chart.') {
|
||||
if (name.substr(0, 6) != 'chart.') {
|
||||
name = 'chart.' + name;
|
||||
}
|
||||
|
||||
return this.properties[name.toLowerCase()];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* This method draws the rose chart
|
||||
*/
|
||||
RGraph.Rose.prototype.Draw = function ()
|
||||
{
|
||||
/**
|
||||
* This method draws the rose chart
|
||||
*/
|
||||
RGraph.Rose.prototype.Draw = function () {
|
||||
/**
|
||||
* Fire the onbeforedraw event
|
||||
*/
|
||||
|
|
@ -244,9 +240,9 @@
|
|||
|
||||
|
||||
// User specified radius, centerx and centery
|
||||
if (typeof(this.Get('chart.centerx')) == 'number') this.centerx = this.Get('chart.centerx');
|
||||
if (typeof(this.Get('chart.centery')) == 'number') this.centery = this.Get('chart.centery');
|
||||
if (typeof(this.Get('chart.radius')) == 'number') this.radius = this.Get('chart.radius');
|
||||
if (typeof (this.Get('chart.centerx')) == 'number') this.centerx = this.Get('chart.centerx');
|
||||
if (typeof (this.Get('chart.centery')) == 'number') this.centery = this.Get('chart.centery');
|
||||
if (typeof (this.Get('chart.radius')) == 'number') this.radius = this.Get('chart.radius');
|
||||
|
||||
/**
|
||||
* Parse the colors for gradients. Its down here so that the center X/Y can be used
|
||||
|
|
@ -297,13 +293,12 @@
|
|||
* Fire the RGraph ondraw event
|
||||
*/
|
||||
RGraph.FireCustomEvent(this, 'ondraw');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This method draws the rose charts background
|
||||
*/
|
||||
RGraph.Rose.prototype.DrawBackground = function ()
|
||||
{
|
||||
/**
|
||||
* This method draws the rose charts background
|
||||
*/
|
||||
RGraph.Rose.prototype.DrawBackground = function () {
|
||||
this.context.lineWidth = 1;
|
||||
|
||||
|
||||
|
|
@ -312,7 +307,7 @@
|
|||
|
||||
// Draw the background grey circles/spokes
|
||||
if (this.properties['chart.background.grid']) {
|
||||
if (typeof(this.properties['chart.background.grid.count']) == 'number') {
|
||||
if (typeof (this.properties['chart.background.grid.count']) == 'number') {
|
||||
this.properties['chart.background.grid.size'] = this.radius / this.properties['chart.background.grid.count'];
|
||||
}
|
||||
|
||||
|
|
@ -320,7 +315,7 @@
|
|||
this.context.strokeStyle = this.properties['chart.background.grid.color'];
|
||||
|
||||
// Radius must be greater than 0 for Opera to work
|
||||
for (var i=this.properties['chart.background.grid.size']; i<=this.radius; i+=this.properties['chart.background.grid.size']) {
|
||||
for (var i = this.properties['chart.background.grid.size']; i <= this.radius; i += this.properties['chart.background.grid.size']) {
|
||||
|
||||
//this.context.moveTo(this.centerx + i, this.centery);
|
||||
|
||||
|
|
@ -341,11 +336,11 @@
|
|||
|
||||
// Draw the background lines that go from the center outwards
|
||||
this.context.beginPath();
|
||||
if (typeof(this.properties['chart.background.grid.spokes']) == 'number') {
|
||||
if (typeof (this.properties['chart.background.grid.spokes']) == 'number') {
|
||||
|
||||
var num = (360 / this.properties['chart.background.grid.spokes']);
|
||||
|
||||
for (var i=num; i<=360; i+=num) {
|
||||
for (var i = num; i <= 360; i += num) {
|
||||
|
||||
// Radius must be greater than 0 for Opera to work
|
||||
this.context.arc(this.centerx,
|
||||
|
|
@ -358,14 +353,14 @@
|
|||
this.context.lineTo(this.centerx, this.centery);
|
||||
}
|
||||
} else {
|
||||
for (var i=15; i<=360; i+=15) {
|
||||
for (var i = 15; i <= 360; i += 15) {
|
||||
|
||||
// Radius must be greater than 0 for Opera to work
|
||||
this.context.arc(this.centerx,
|
||||
this.centery,
|
||||
this.radius,
|
||||
(i / (180/ PI)) - HALFPI,
|
||||
((i + 0.0001) / (180/ PI)) - HALFPI,
|
||||
(i / (180 / PI)) - HALFPI,
|
||||
((i + 0.0001) / (180 / PI)) - HALFPI,
|
||||
false);
|
||||
|
||||
this.context.lineTo(this.centerx, this.centery);
|
||||
|
|
@ -381,8 +376,8 @@
|
|||
this.context.strokeStyle = this.Get('chart.background.axes.color');
|
||||
|
||||
// Draw the X axis
|
||||
this.context.moveTo(this.centerx - this.radius, Math.round(this.centery) );
|
||||
this.context.lineTo(this.centerx + this.radius, Math.round(this.centery) );
|
||||
this.context.moveTo(this.centerx - this.radius, Math.round(this.centery));
|
||||
this.context.lineTo(this.centerx + this.radius, Math.round(this.centery));
|
||||
|
||||
// Draw the X ends
|
||||
this.context.moveTo(Math.round(this.centerx - this.radius), this.centery - 5);
|
||||
|
|
@ -391,13 +386,13 @@
|
|||
this.context.lineTo(Math.round(this.centerx + this.radius), this.centery + 5);
|
||||
|
||||
// Draw the X check marks
|
||||
for (var i=(this.centerx - this.radius); i<(this.centerx + this.radius); i+=(this.radius / 5)) {
|
||||
for (var i = (this.centerx - this.radius); i < (this.centerx + this.radius); i += (this.radius / 5)) {
|
||||
this.context.moveTo(Math.round(i), this.centery - 3);
|
||||
this.context.lineTo(Math.round(i), this.centery + 3.5);
|
||||
}
|
||||
|
||||
// Draw the Y check marks
|
||||
for (var i=(this.centery - this.radius); i<(this.centery + this.radius); i+=(this.radius / 5)) {
|
||||
for (var i = (this.centery - this.radius); i < (this.centery + this.radius); i += (this.radius / 5)) {
|
||||
this.context.moveTo(this.centerx - 3, Math.round(i));
|
||||
this.context.lineTo(this.centerx + 3, Math.round(i));
|
||||
}
|
||||
|
|
@ -417,15 +412,14 @@
|
|||
this.context.closePath();
|
||||
this.context.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* This method draws the data on the graph
|
||||
*/
|
||||
RGraph.Rose.prototype.DrawRose = function ()
|
||||
{
|
||||
/**
|
||||
* This method draws the data on the graph
|
||||
*/
|
||||
RGraph.Rose.prototype.DrawRose = function () {
|
||||
var max = 0;
|
||||
var data = this.data;
|
||||
var margin = RGraph.degrees2Radians(this.Get('chart.margin'));
|
||||
|
|
@ -439,10 +433,10 @@
|
|||
// Work out the maximum value and the sum
|
||||
if (!this.Get('chart.ymax')) {
|
||||
// Work out the max
|
||||
for (var i=0; i<data.length; ++i) {
|
||||
if (typeof(data[i]) == 'number') {
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
if (typeof (data[i]) == 'number') {
|
||||
max = Math.max(max, data[i]);
|
||||
} else if (typeof(data[i]) == 'object' && this.Get('chart.variant') == 'non-equi-angular') {
|
||||
} else if (typeof (data[i]) == 'object' && this.Get('chart.variant') == 'non-equi-angular') {
|
||||
max = Math.max(max, data[i][0]);
|
||||
|
||||
// Fallback is stacked
|
||||
|
|
@ -482,17 +476,17 @@
|
|||
/*******************************************************
|
||||
* A non-equi-angular Rose chart
|
||||
*******************************************************/
|
||||
if (typeof(this.Get('chart.variant')) == 'string' && this.Get('chart.variant') == 'non-equi-angular') {
|
||||
if (typeof (this.Get('chart.variant')) == 'string' && this.Get('chart.variant') == 'non-equi-angular') {
|
||||
/*******************************************************
|
||||
* NON-EQUI-ANGULAR GOES HERE
|
||||
*******************************************************/
|
||||
var total=0;
|
||||
for (var i=0; i<data.length; ++i) {
|
||||
var total = 0;
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
total += data[i][1];
|
||||
}
|
||||
|
||||
|
||||
for (var i=0; i<this.data.length; ++i) {
|
||||
for (var i = 0; i < this.data.length; ++i) {
|
||||
|
||||
var segmentRadians = ((this.data[i][1] / total) * TWOPI);
|
||||
var radius = ((this.data[i][0] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * this.radius;
|
||||
|
|
@ -507,8 +501,8 @@
|
|||
|
||||
this.context.beginPath(); // Begin the segment
|
||||
|
||||
// var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin;
|
||||
// var endAngle = ((this.startRadians + segmentRadians) * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
|
||||
// var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin;
|
||||
// var endAngle = ((this.startRadians + segmentRadians) * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
|
||||
var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin - segmentRadians / 2;
|
||||
var endAngle = ((this.startRadians + segmentRadians) * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin - segmentRadians / 2;
|
||||
|
||||
|
|
@ -549,7 +543,7 @@
|
|||
/*******************************************************
|
||||
* Draw regular segments here
|
||||
*******************************************************/
|
||||
for (var i=0; i<this.data.length; ++i) {
|
||||
for (var i = 0; i < this.data.length; ++i) {
|
||||
|
||||
this.context.strokeStyle = this.Get('chart.strokestyle');
|
||||
this.context.fillStyle = this.Get('chart.colors')[0];
|
||||
|
|
@ -563,14 +557,14 @@
|
|||
|
||||
var segmentRadians = (1 / this.data.length) * TWOPI;
|
||||
|
||||
if (typeof(this.data[i]) == 'number') {
|
||||
if (typeof (this.data[i]) == 'number') {
|
||||
this.context.beginPath(); // Begin the segment
|
||||
|
||||
var radius = ((this.data[i] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * this.radius;
|
||||
radius = radius * this.properties['chart.animation.grow.multiplier'];
|
||||
|
||||
// var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin;
|
||||
// var endAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) + (segmentRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
|
||||
// var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin;
|
||||
// var endAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) + (segmentRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
|
||||
var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin - segmentRadians / 2;
|
||||
var endAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) + (segmentRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin - segmentRadians / 2;
|
||||
|
||||
|
|
@ -607,15 +601,15 @@
|
|||
/*******************************************************
|
||||
* Draw a stacked segment
|
||||
*******************************************************/
|
||||
} else if (typeof(this.data[i]) == 'object') {
|
||||
} else if (typeof (this.data[i]) == 'object') {
|
||||
|
||||
var margin = this.Get('chart.margin') / (180 / PI);
|
||||
|
||||
|
||||
for (var j=0; j<this.data[i].length; ++j) {
|
||||
for (var j = 0; j < this.data[i].length; ++j) {
|
||||
|
||||
var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin;
|
||||
var endAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor'))+ (segmentRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
|
||||
var endAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) + (segmentRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
|
||||
|
||||
var exploded = this.getexploded(i, startAngle, endAngle, this.Get('chart.exploded'));
|
||||
var explodedX = exploded[0];
|
||||
|
|
@ -709,14 +703,13 @@
|
|||
this.centerx,
|
||||
this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Unsuprisingly, draws the labels
|
||||
*/
|
||||
RGraph.Rose.prototype.DrawLabels = function ()
|
||||
{
|
||||
/**
|
||||
* Unsuprisingly, draws the labels
|
||||
*/
|
||||
RGraph.Rose.prototype.DrawLabels = function () {
|
||||
this.context.lineWidth = 1;
|
||||
var key = this.Get('chart.key');
|
||||
|
||||
|
|
@ -738,13 +731,13 @@
|
|||
var units_post = this.Get('chart.units.post');
|
||||
|
||||
// Draw any circular labels
|
||||
if (typeof(this.Get('chart.labels')) == 'object' && this.Get('chart.labels')) {
|
||||
if (typeof (this.Get('chart.labels')) == 'object' && this.Get('chart.labels')) {
|
||||
this.DrawCircularLabels(context, this.Get('chart.labels'), font_face, font_size, r + 10);
|
||||
}
|
||||
|
||||
|
||||
// Size can be specified seperately for the scale now
|
||||
if (typeof(this.properties['chart.text.size.scale']) == 'number') {
|
||||
if (typeof (this.properties['chart.text.size.scale']) == 'number') {
|
||||
font_size = this.properties['chart.text.size.scale'];
|
||||
}
|
||||
|
||||
|
|
@ -788,24 +781,23 @@
|
|||
}
|
||||
|
||||
if (axes.length > 0) {
|
||||
RGraph.Text(context, font_face, font_size, this.centerx, this.centery, typeof(this.Get('chart.ymin')) == 'number' ? RGraph.number_format(this, Number(this.Get('chart.ymin')).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post) : '0', 'center', 'center', true, false, color);
|
||||
}
|
||||
RGraph.Text(context, font_face, font_size, this.centerx, this.centery, typeof (this.Get('chart.ymin')) == 'number' ? RGraph.number_format(this, Number(this.Get('chart.ymin')).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post) : '0', 'center', 'center', true, false, color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Draws the circular labels that go around the charts
|
||||
*
|
||||
* @param labels array The labels that go around the chart
|
||||
*/
|
||||
RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r)
|
||||
{
|
||||
/**
|
||||
* Draws the circular labels that go around the charts
|
||||
*
|
||||
* @param labels array The labels that go around the chart
|
||||
*/
|
||||
RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r) {
|
||||
var variant = this.Get('chart.variant');
|
||||
var position = this.Get('chart.labels.position');
|
||||
var r = r + 5 + this.Get('chart.labels.offset');
|
||||
|
||||
for (var i=0; i<this.angles.length; ++i) {
|
||||
if (typeof(variant) == 'string' && variant == 'non-equi-angular') {
|
||||
for (var i = 0; i < this.angles.length; ++i) {
|
||||
if (typeof (variant) == 'string' && variant == 'non-equi-angular') {
|
||||
var a = Number(this.angles[i][0]) + ((this.angles[i][1] - this.angles[i][0]) / 2);
|
||||
} else {
|
||||
var a = (TWOPI / labels.length) * (i + 1) - (TWOPI / (labels.length * 2));
|
||||
|
|
@ -826,7 +818,7 @@
|
|||
|
||||
RGraph.Text(context, font_face, font_size, x, y, String(labels[i]), 'center', halign);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -853,19 +845,18 @@
|
|||
|
||||
|
||||
|
||||
/**
|
||||
* This function is for use with circular graph types, eg the Pie or Rose. Pass it your event object
|
||||
* and it will pass you back the corresponding segment details as an array:
|
||||
*
|
||||
* [x, y, r, startAngle, endAngle]
|
||||
*
|
||||
* Angles are measured in degrees, and are measured from the "east" axis (just like the canvas).
|
||||
*
|
||||
* @param object e Your event object
|
||||
*/
|
||||
RGraph.Rose.prototype.getShape =
|
||||
RGraph.Rose.prototype.getSegment = function (e)
|
||||
{
|
||||
/**
|
||||
* This function is for use with circular graph types, eg the Pie or Rose. Pass it your event object
|
||||
* and it will pass you back the corresponding segment details as an array:
|
||||
*
|
||||
* [x, y, r, startAngle, endAngle]
|
||||
*
|
||||
* Angles are measured in degrees, and are measured from the "east" axis (just like the canvas).
|
||||
*
|
||||
* @param object e Your event object
|
||||
*/
|
||||
RGraph.Rose.prototype.getShape =
|
||||
RGraph.Rose.prototype.getSegment = function (e) {
|
||||
RGraph.FixEventObject(e);
|
||||
|
||||
var canvas = this.canvas;
|
||||
|
|
@ -876,7 +867,7 @@
|
|||
/**
|
||||
* Go through all of the angles checking each one
|
||||
*/
|
||||
for (var i=0; i<angles.length ; ++i) {
|
||||
for (var i = 0; i < angles.length; ++i) {
|
||||
|
||||
var angleStart = angles[i][0];
|
||||
var angleEnd = angles[i][1];
|
||||
|
|
@ -946,22 +937,21 @@
|
|||
|
||||
|
||||
|
||||
/**
|
||||
* Returns any exploded for a particular segment
|
||||
*/
|
||||
RGraph.Rose.prototype.getexploded = function (index, startAngle, endAngle, exploded)
|
||||
{
|
||||
/**
|
||||
* Returns any exploded for a particular segment
|
||||
*/
|
||||
RGraph.Rose.prototype.getexploded = function (index, startAngle, endAngle, exploded) {
|
||||
var explodedx, explodedy;
|
||||
|
||||
/**
|
||||
* Retrieve any exploded - the exploded can be an array of numbers or a single number
|
||||
* (which is applied to all segments)
|
||||
*/
|
||||
if (typeof(exploded) == 'object' && typeof(exploded[index]) == 'number') {
|
||||
if (typeof (exploded) == 'object' && typeof (exploded[index]) == 'number') {
|
||||
explodedx = Math.cos(((endAngle - startAngle) / 2) + startAngle) * exploded[index];
|
||||
explodedy = Math.sin(((endAngle - startAngle) / 2) + startAngle) * exploded[index];
|
||||
|
||||
} else if (typeof(exploded) == 'number') {
|
||||
} else if (typeof (exploded) == 'number') {
|
||||
explodedx = Math.cos(((endAngle - startAngle) / 2) + startAngle) * exploded;
|
||||
explodedy = Math.sin(((endAngle - startAngle) / 2) + startAngle) * exploded;
|
||||
|
||||
|
|
@ -971,18 +961,17 @@
|
|||
}
|
||||
|
||||
return [explodedx, explodedy];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* This function facilitates the installation of tooltip event listeners if
|
||||
* tooltips are defined.
|
||||
*/
|
||||
RGraph.Rose.prototype.AllowTooltips = function ()
|
||||
{
|
||||
// Preload any tooltip images that are used in the tooltips
|
||||
RGraph.PreLoadTooltipImages(this);
|
||||
/**
|
||||
* This function facilitates the installation of tooltip event listeners if
|
||||
* tooltips are defined.
|
||||
*/
|
||||
RGraph.Rose.prototype.AllowTooltips = function () {
|
||||
// Preload any tooltip /images that are used in the tooltips
|
||||
RGraph.PreLoadTooltip / images(this);
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -1004,17 +993,16 @@
|
|||
* function that actually shows the appropriate tooltip (if any).
|
||||
*/
|
||||
RGraph.InstallCanvasMouseupTooltipListener(this);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Each object type has its own Highlight() function which highlights the appropriate shape
|
||||
*
|
||||
* @param object shape The shape to highlight
|
||||
*/
|
||||
RGraph.Rose.prototype.Highlight = function (shape)
|
||||
{
|
||||
/**
|
||||
* Each object type has its own Highlight() function which highlights the appropriate shape
|
||||
*
|
||||
* @param object shape The shape to highlight
|
||||
*/
|
||||
RGraph.Rose.prototype.Highlight = function (shape) {
|
||||
if (this.Get('chart.tooltips.highlight')) {
|
||||
// Add the new segment highlight
|
||||
this.context.beginPath();
|
||||
|
|
@ -1034,19 +1022,18 @@
|
|||
this.context.stroke();
|
||||
this.context.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* The getObjectByXY() worker method. Don't call this call:
|
||||
*
|
||||
* RGraph.ObjectRegistry.getObjectByXY(e)
|
||||
*
|
||||
* @param object e The event object
|
||||
*/
|
||||
RGraph.Rose.prototype.getObjectByXY = function (e)
|
||||
{
|
||||
/**
|
||||
* The getObjectByXY() worker method. Don't call this call:
|
||||
*
|
||||
* RGraph.ObjectRegistry.getObjectByXY(e)
|
||||
*
|
||||
* @param object e The event object
|
||||
*/
|
||||
RGraph.Rose.prototype.getObjectByXY = function (e) {
|
||||
var mouseXY = RGraph.getMouseXY(e);
|
||||
|
||||
// Work out the radius
|
||||
|
|
@ -1062,20 +1049,19 @@
|
|||
|
||||
return this;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* This function positions a tooltip when it is displayed
|
||||
*
|
||||
* @param obj object The chart object
|
||||
* @param int x The X coordinate specified for the tooltip
|
||||
* @param int y The Y coordinate specified for the tooltip
|
||||
* @param objec tooltip The tooltips DIV element
|
||||
*/
|
||||
RGraph.Rose.prototype.positionTooltip = function (obj, x, y, tooltip, idx)
|
||||
{
|
||||
/**
|
||||
* This function positions a tooltip when it is displayed
|
||||
*
|
||||
* @param obj object The chart object
|
||||
* @param int x The X coordinate specified for the tooltip
|
||||
* @param int y The Y coordinate specified for the tooltip
|
||||
* @param objec tooltip The tooltips DIV element
|
||||
*/
|
||||
RGraph.Rose.prototype.positionTooltip = function (obj, x, y, tooltip, idx) {
|
||||
|
||||
var coordX = obj.angles[idx][4];
|
||||
var coordY = obj.angles[idx][5];
|
||||
|
|
@ -1106,33 +1092,32 @@
|
|||
|
||||
// LEFT edge
|
||||
if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width / 2)) < 10) {
|
||||
tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius)- (width * 0.1)) + 'px';
|
||||
tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px';
|
||||
tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width * 0.1)) + 'px';
|
||||
tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius) - height - 5) + 'px';
|
||||
img.style.left = ((width * 0.1) - 8.5) + 'px';
|
||||
|
||||
// RIGHT edge
|
||||
} else if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) + (width / 2)) > (document.body.offsetWidth - 10) ) {
|
||||
} else if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) + (width / 2)) > (document.body.offsetWidth - 10)) {
|
||||
tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width * 0.9)) + 'px';
|
||||
tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px';
|
||||
tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius) - height - 5) + 'px';
|
||||
img.style.left = ((width * 0.9) - 8.5) + 'px';
|
||||
|
||||
// Default positioning - CENTERED
|
||||
} else {
|
||||
tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius)- (width / 2)) + 'px';
|
||||
tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px';
|
||||
tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width / 2)) + 'px';
|
||||
tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius) - height - 5) + 'px';
|
||||
img.style.left = ((width * 0.5) - 8.5) + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* This method gives you the relevant radius for a particular value
|
||||
*
|
||||
* @param number value The relevant value to get the radius for
|
||||
*/
|
||||
RGraph.Rose.prototype.getRadius = function (value)
|
||||
{
|
||||
/**
|
||||
* This method gives you the relevant radius for a particular value
|
||||
*
|
||||
* @param number value The relevant value to get the radius for
|
||||
*/
|
||||
RGraph.Rose.prototype.getRadius = function (value) {
|
||||
// Range checking (the Rose minimum is always 0)
|
||||
if (value < 0 || value > this.max) {
|
||||
return null;
|
||||
|
|
@ -1141,16 +1126,15 @@
|
|||
var r = (value / this.max) * this.radius;
|
||||
|
||||
return r;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* This allows for easy specification of gradients
|
||||
*/
|
||||
RGraph.Rose.prototype.parseColors = function ()
|
||||
{
|
||||
for (var i=0; i<this.properties['chart.colors'].length; ++i) {
|
||||
/**
|
||||
* This allows for easy specification of gradients
|
||||
*/
|
||||
RGraph.Rose.prototype.parseColors = function () {
|
||||
for (var i = 0; i < this.properties['chart.colors'].length; ++i) {
|
||||
this.properties['chart.colors'][i] = this.parseSingleColorForGradient(this.properties['chart.colors'][i]);
|
||||
}
|
||||
|
||||
|
|
@ -1158,7 +1142,7 @@
|
|||
* Key colors
|
||||
*/
|
||||
if (!RGraph.is_null(this.properties['chart.key.colors'])) {
|
||||
for (var i=0; i<this.properties['chart.key.colors'].length; ++i) {
|
||||
for (var i = 0; i < this.properties['chart.key.colors'].length; ++i) {
|
||||
this.properties['chart.key.colors'][i] = this.parseSingleColorForGradient(this.properties['chart.key.colors'][i]);
|
||||
}
|
||||
}
|
||||
|
|
@ -1167,19 +1151,18 @@
|
|||
this.properties['chart.title.color'] = this.parseSingleColorForGradient(this.properties['chart.title.color']);
|
||||
this.properties['chart.highlight.fill'] = this.parseSingleColorForGradient(this.properties['chart.highlight.fill']);
|
||||
this.properties['chart.highlight.stroke'] = this.parseSingleColorForGradient(this.properties['chart.highlight.stroke']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* This parses a single color value
|
||||
*/
|
||||
RGraph.Rose.prototype.parseSingleColorForGradient = function (color)
|
||||
{
|
||||
/**
|
||||
* This parses a single color value
|
||||
*/
|
||||
RGraph.Rose.prototype.parseSingleColorForGradient = function (color) {
|
||||
var canvas = this.canvas;
|
||||
var context = this.context;
|
||||
|
||||
if (!color || typeof(color) != 'string') {
|
||||
if (!color || typeof (color) != 'string') {
|
||||
return color;
|
||||
}
|
||||
|
||||
|
|
@ -1195,10 +1178,10 @@
|
|||
|
||||
grad.addColorStop(0, RGraph.trim(parts[0]));
|
||||
|
||||
for (var j=1; j<parts.length; ++j) {
|
||||
for (var j = 1; j < parts.length; ++j) {
|
||||
grad.addColorStop(j * diff, RGraph.trim(parts[j]));
|
||||
}
|
||||
}
|
||||
|
||||
return grad ? grad : color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ var steelseries = (function () {
|
|||
minValue = (undefined === parameters.minValue ? 0 : parameters.minValue),
|
||||
maxValue = (undefined === parameters.maxValue ? (minValue + 100) : parameters.maxValue),
|
||||
niceScale = (undefined === parameters.niceScale ? true : parameters.niceScale),
|
||||
threshold = (undefined === parameters.threshold ? (maxValue - minValue) / 2 + minValue: parameters.threshold),
|
||||
threshold = (undefined === parameters.threshold ? (maxValue - minValue) / 2 + minValue : parameters.threshold),
|
||||
thresholdRising = (undefined === parameters.thresholdRising ? true : parameters.thresholdRising),
|
||||
section = (undefined === parameters.section ? null : parameters.section),
|
||||
area = (undefined === parameters.area ? null : parameters.area),
|
||||
|
|
@ -919,7 +919,7 @@ var steelseries = (function () {
|
|||
};
|
||||
|
||||
// do we have a callback function to process?
|
||||
if (callback && typeof(callback) === "function") {
|
||||
if (callback && typeof (callback) === "function") {
|
||||
tween.onMotionFinished = callback;
|
||||
}
|
||||
|
||||
|
|
@ -969,26 +969,30 @@ var steelseries = (function () {
|
|||
|
||||
this.setTitleString = function (title) {
|
||||
titleString = title;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setUnitString = function (unit) {
|
||||
unitString = unit;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setMinValue = function (value) {
|
||||
minValue = parseFloat(value);
|
||||
resetBuffers({frame: true,
|
||||
background: true});
|
||||
init({frame: true,
|
||||
background: true});
|
||||
resetBuffers({
|
||||
frame: true,
|
||||
background: true
|
||||
});
|
||||
init({
|
||||
frame: true,
|
||||
background: true
|
||||
});
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -999,10 +1003,14 @@ var steelseries = (function () {
|
|||
|
||||
this.setMaxValue = function (value) {
|
||||
maxValue = parseFloat(value);
|
||||
resetBuffers({frame: true,
|
||||
background: true});
|
||||
init({frame: true,
|
||||
background: true});
|
||||
resetBuffers({
|
||||
frame: true,
|
||||
background: true
|
||||
});
|
||||
init({
|
||||
frame: true,
|
||||
background: true
|
||||
});
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -1015,17 +1023,20 @@ var steelseries = (function () {
|
|||
newValue = parseFloat(newValue);
|
||||
var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue);
|
||||
threshold = targetValue;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setArea = function (areaVal) {
|
||||
area = areaVal;
|
||||
resetBuffers({background: true,
|
||||
foreground: true});
|
||||
init({background: true,
|
||||
resetBuffers({
|
||||
background: true,
|
||||
foreground: true
|
||||
});
|
||||
init({
|
||||
background: true,
|
||||
foreground: true
|
||||
});
|
||||
this.repaint();
|
||||
|
|
@ -1034,9 +1045,12 @@ var steelseries = (function () {
|
|||
|
||||
this.setSection = function (areaSec) {
|
||||
section = areaSec;
|
||||
resetBuffers({background: true,
|
||||
foreground: true});
|
||||
init({background: true,
|
||||
resetBuffers({
|
||||
background: true,
|
||||
foreground: true
|
||||
});
|
||||
init({
|
||||
background: true,
|
||||
foreground: true
|
||||
});
|
||||
this.repaint();
|
||||
|
|
@ -1065,19 +1079,21 @@ var steelseries = (function () {
|
|||
};
|
||||
|
||||
this.setFrameDesign = function (newFrameDesign) {
|
||||
resetBuffers({frame: true});
|
||||
resetBuffers({ frame: true });
|
||||
frameDesign = newFrameDesign;
|
||||
init({frame: true});
|
||||
init({ frame: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setBackgroundColor = function (newBackgroundColor) {
|
||||
resetBuffers({background: true,
|
||||
resetBuffers({
|
||||
background: true,
|
||||
pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false) // type2 & 13 depend on background
|
||||
});
|
||||
backgroundColor = newBackgroundColor;
|
||||
init({background: true, // type2 & 13 depend on background
|
||||
init({
|
||||
background: true, // type2 & 13 depend on background
|
||||
pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false)
|
||||
});
|
||||
this.repaint();
|
||||
|
|
@ -1085,19 +1101,21 @@ var steelseries = (function () {
|
|||
};
|
||||
|
||||
this.setForegroundType = function (newForegroundType) {
|
||||
resetBuffers({foreground: true});
|
||||
resetBuffers({ foreground: true });
|
||||
foregroundType = newForegroundType;
|
||||
init({foreground: true});
|
||||
init({ foreground: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setPointerType = function (newPointerType) {
|
||||
resetBuffers({pointer: true,
|
||||
resetBuffers({
|
||||
pointer: true,
|
||||
foreground: true
|
||||
});
|
||||
pointerType = newPointerType;
|
||||
init({pointer: true,
|
||||
init({
|
||||
pointer: true,
|
||||
foreground: true
|
||||
});
|
||||
this.repaint();
|
||||
|
|
@ -1105,25 +1123,25 @@ var steelseries = (function () {
|
|||
};
|
||||
|
||||
this.setPointerColor = function (newPointerColor) {
|
||||
resetBuffers({pointer: true});
|
||||
resetBuffers({ pointer: true });
|
||||
pointerColor = newPointerColor;
|
||||
init({pointer: true});
|
||||
init({ pointer: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setLedColor = function (newLedColor) {
|
||||
resetBuffers({led: true});
|
||||
resetBuffers({ led: true });
|
||||
ledColor = newLedColor;
|
||||
init({led: true});
|
||||
init({ led: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setUserLedColor = function (newLedColor) {
|
||||
resetBuffers({userLed: true});
|
||||
resetBuffers({ userLed: true });
|
||||
userLedColor = newLedColor;
|
||||
init({userLed: true});
|
||||
init({ userLed: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -1177,8 +1195,8 @@ var steelseries = (function () {
|
|||
|
||||
this.setLcdColor = function (newLcdColor) {
|
||||
lcdColor = newLcdColor;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -1197,30 +1215,32 @@ var steelseries = (function () {
|
|||
|
||||
this.setFractionalScaleDecimals = function (decimals) {
|
||||
fractionalScaleDecimals = parseInt(decimals, 10);
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setLabelNumberFormat = function (format) {
|
||||
labelNumberFormat = format;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.repaint = function () {
|
||||
if (!initialized) {
|
||||
init({frame: true,
|
||||
init({
|
||||
frame: true,
|
||||
background: true,
|
||||
led: true,
|
||||
userLed: true,
|
||||
pointer: true,
|
||||
trend: true,
|
||||
foreground: true,
|
||||
odo: true});
|
||||
odo: true
|
||||
});
|
||||
}
|
||||
mainCtx.clearRect(0, 0, size, size);
|
||||
|
||||
|
|
@ -1327,7 +1347,7 @@ var steelseries = (function () {
|
|||
minValue = (undefined === parameters.minValue ? 0 : parameters.minValue),
|
||||
maxValue = (undefined === parameters.maxValue ? (minValue + 100) : parameters.maxValue),
|
||||
niceScale = (undefined === parameters.niceScale ? true : parameters.niceScale),
|
||||
threshold = (undefined === parameters.threshold ? (maxValue - minValue) / 2 + minValue: parameters.threshold),
|
||||
threshold = (undefined === parameters.threshold ? (maxValue - minValue) / 2 + minValue : parameters.threshold),
|
||||
thresholdRising = (undefined === parameters.thresholdRising ? true : parameters.thresholdRising),
|
||||
section = (undefined === parameters.section ? null : parameters.section),
|
||||
useSectionColors = (undefined === parameters.useSectionColors ? false : parameters.useSectionColors),
|
||||
|
|
@ -1668,9 +1688,11 @@ var steelseries = (function () {
|
|||
sectionAngles = [];
|
||||
do {
|
||||
sectionIndex--;
|
||||
sectionAngles.push({start: (((section[sectionIndex].start + Math.abs(minValue)) / (maxValue - minValue)) * degAngleRange),
|
||||
sectionAngles.push({
|
||||
start: (((section[sectionIndex].start + Math.abs(minValue)) / (maxValue - minValue)) * degAngleRange),
|
||||
stop: (((section[sectionIndex].stop + Math.abs(minValue)) / (maxValue - minValue)) * degAngleRange),
|
||||
color: customColorDef(section[sectionIndex].color)});
|
||||
color: customColorDef(section[sectionIndex].color)
|
||||
});
|
||||
} while (0 < sectionIndex);
|
||||
}
|
||||
|
||||
|
|
@ -2069,7 +2091,7 @@ var steelseries = (function () {
|
|||
};
|
||||
|
||||
// do we have a callback function to process?
|
||||
if (callback && typeof(callback) === "function") {
|
||||
if (callback && typeof (callback) === "function") {
|
||||
tween.onMotionFinished = callback;
|
||||
}
|
||||
|
||||
|
|
@ -2079,51 +2101,55 @@ var steelseries = (function () {
|
|||
};
|
||||
|
||||
this.setFrameDesign = function (newFrameDesign) {
|
||||
resetBuffers({frame: true});
|
||||
resetBuffers({ frame: true });
|
||||
frameDesign = newFrameDesign;
|
||||
init({frame: true});
|
||||
init({ frame: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setBackgroundColor = function (newBackgroundColor) {
|
||||
resetBuffers({background: true,
|
||||
led: true});
|
||||
resetBuffers({
|
||||
background: true,
|
||||
led: true
|
||||
});
|
||||
backgroundColor = newBackgroundColor;
|
||||
init({background: true,
|
||||
led: true});
|
||||
init({
|
||||
background: true,
|
||||
led: true
|
||||
});
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setForegroundType = function (newForegroundType) {
|
||||
resetBuffers({foreground: true});
|
||||
resetBuffers({ foreground: true });
|
||||
foregroundType = newForegroundType;
|
||||
init({foreground: true});
|
||||
init({ foreground: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setValueColor = function (newValueColor) {
|
||||
resetBuffers({value: true});
|
||||
resetBuffers({ value: true });
|
||||
valueColor = newValueColor;
|
||||
init({value: true});
|
||||
init({ value: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setLedColor = function (newLedColor) {
|
||||
resetBuffers({led: true});
|
||||
resetBuffers({ led: true });
|
||||
ledColor = newLedColor;
|
||||
init({led: true});
|
||||
init({ led: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setUserLedColor = function (newLedColor) {
|
||||
resetBuffers({userLed: true});
|
||||
resetBuffers({ userLed: true });
|
||||
userLedColor = newLedColor;
|
||||
init({userLed: true});
|
||||
init({ userLed: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -2177,8 +2203,8 @@ var steelseries = (function () {
|
|||
|
||||
this.setLcdColor = function (newLcdColor) {
|
||||
lcdColor = newLcdColor;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -2219,8 +2245,8 @@ var steelseries = (function () {
|
|||
|
||||
this.setMinValue = function (value) {
|
||||
minValue = value;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -2231,8 +2257,8 @@ var steelseries = (function () {
|
|||
|
||||
this.setMaxValue = function (value) {
|
||||
maxValue = value;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -2245,8 +2271,8 @@ var steelseries = (function () {
|
|||
newValue = parseFloat(newValue);
|
||||
var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue);
|
||||
threshold = targetValue;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -2262,16 +2288,16 @@ var steelseries = (function () {
|
|||
|
||||
this.setTitleString = function (title) {
|
||||
titleString = title;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setUnitString = function (unit) {
|
||||
unitString = unit;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -2290,15 +2316,15 @@ var steelseries = (function () {
|
|||
|
||||
this.setFractionalScaleDecimals = function (decimals) {
|
||||
fractionalScaleDecimals = parseInt(decimals, 10);
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
};
|
||||
|
||||
this.setLabelNumberFormat = function (format) {
|
||||
labelNumberFormat = format;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -2313,13 +2339,15 @@ var steelseries = (function () {
|
|||
fraction;
|
||||
|
||||
if (!initialized) {
|
||||
init({frame: true,
|
||||
init({
|
||||
frame: true,
|
||||
background: true,
|
||||
led: true,
|
||||
userLed: true,
|
||||
value: true,
|
||||
trend: true,
|
||||
foreground: true});
|
||||
foreground: true
|
||||
});
|
||||
}
|
||||
|
||||
mainCtx.clearRect(0, 0, size, size);
|
||||
|
|
@ -2638,7 +2666,7 @@ var steelseries = (function () {
|
|||
lcdBuffer = createLcdBackgroundImage(width, height, lcdColor);
|
||||
|
||||
if (null !== section && 0 < section.length) {
|
||||
for (sectionIndex = 0 ; sectionIndex < section.length ; sectionIndex++) {
|
||||
for (sectionIndex = 0; sectionIndex < section.length; sectionIndex++) {
|
||||
sectionBuffer[sectionIndex] = createLcdSectionImage(width, height, section[sectionIndex].color, lcdColor);
|
||||
sectionForegroundColor[sectionIndex] = createSectionForegroundColor(section[sectionIndex].color);
|
||||
}
|
||||
|
|
@ -2664,7 +2692,7 @@ var steelseries = (function () {
|
|||
|
||||
this.setSection = function (newSection) {
|
||||
section = newSection;
|
||||
init({background: true, foreground: true});
|
||||
init({ background: true, foreground: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
|
@ -2696,7 +2724,7 @@ var steelseries = (function () {
|
|||
var sectionIndex;
|
||||
// Draw sections
|
||||
if (null !== section && 0 < section.length) {
|
||||
for (sectionIndex = 0 ; sectionIndex < section.length ; sectionIndex++) {
|
||||
for (sectionIndex = 0; sectionIndex < section.length; sectionIndex++) {
|
||||
if (value >= section[sectionIndex].start && value <= section[sectionIndex].stop) {
|
||||
lcdBackgroundBuffer = sectionBuffer[sectionIndex];
|
||||
lcdTextColor = sectionForegroundColor[sectionIndex];
|
||||
|
|
@ -2799,7 +2827,7 @@ var steelseries = (function () {
|
|||
// Buffer for LCD displays
|
||||
var lcdBuffer;
|
||||
|
||||
// Buffer for latest pointer images painting code
|
||||
// Buffer for latest pointer /images painting code
|
||||
var pointerBufferLatest = createBuffer(size, size);
|
||||
var pointerContextLatest = pointerBufferLatest.getContext('2d');
|
||||
|
||||
|
|
@ -3299,7 +3327,7 @@ var steelseries = (function () {
|
|||
requestAnimFrame(gauge.repaint);
|
||||
}
|
||||
// do we have a callback function to process?
|
||||
if (callback && typeof(callback) === "function") {
|
||||
if (callback && typeof (callback) === "function") {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
|
@ -3351,7 +3379,7 @@ var steelseries = (function () {
|
|||
requestAnimFrame(gauge.repaint);
|
||||
}
|
||||
// do we have a callback function to process?
|
||||
if (callback && typeof(callback) === "function") {
|
||||
if (callback && typeof (callback) === "function") {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
|
@ -3371,66 +3399,68 @@ var steelseries = (function () {
|
|||
|
||||
this.setArea = function (areaVal) {
|
||||
area = areaVal;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setSection = function (areaSec) {
|
||||
section = areaSec;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setFrameDesign = function (newFrameDesign) {
|
||||
frameDesign = newFrameDesign;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setBackgroundColor = function (newBackgroundColor) {
|
||||
backgroundColor = newBackgroundColor;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setForegroundType = function (newForegroundType) {
|
||||
resetBuffers({foreground: true});
|
||||
resetBuffers({ foreground: true });
|
||||
foregroundType = newForegroundType;
|
||||
init({foreground: true});
|
||||
init({ foreground: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setPointerColor = function (newPointerColor) {
|
||||
resetBuffers({pointer: true});
|
||||
resetBuffers({ pointer: true });
|
||||
pointerColor = newPointerColor;
|
||||
init({pointer: true});
|
||||
init({ pointer: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setPointerColorAverage = function (newPointerColor) {
|
||||
resetBuffers({pointer: true});
|
||||
resetBuffers({ pointer: true });
|
||||
pointerColorAverage = newPointerColor;
|
||||
init({pointer: true});
|
||||
init({ pointer: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setPointerType = function (newPointerType) {
|
||||
pointerTypeLatest = newPointerType;
|
||||
resetBuffers({pointer: true,
|
||||
resetBuffers({
|
||||
pointer: true,
|
||||
foreground: true
|
||||
});
|
||||
init({pointer: true,
|
||||
init({
|
||||
pointer: true,
|
||||
foreground: true
|
||||
});
|
||||
this.repaint();
|
||||
|
|
@ -3439,10 +3469,12 @@ var steelseries = (function () {
|
|||
|
||||
this.setPointerTypeAverage = function (newPointerType) {
|
||||
pointerTypeAverage = newPointerType;
|
||||
resetBuffers({pointer: true,
|
||||
resetBuffers({
|
||||
pointer: true,
|
||||
foreground: true
|
||||
});
|
||||
init({pointer: true,
|
||||
init({
|
||||
pointer: true,
|
||||
foreground: true
|
||||
});
|
||||
this.repaint();
|
||||
|
|
@ -3451,35 +3483,37 @@ var steelseries = (function () {
|
|||
|
||||
this.setPointSymbols = function (newPointSymbols) {
|
||||
pointSymbols = newPointSymbols;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setLcdColor = function (newLcdColor) {
|
||||
lcdColor = newLcdColor;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.setLcdTitleStrings = function (titles) {
|
||||
lcdTitleStrings = titles;
|
||||
resetBuffers({background: true});
|
||||
init({background: true});
|
||||
resetBuffers({ background: true });
|
||||
init({ background: true });
|
||||
this.repaint();
|
||||
return this;
|
||||
};
|
||||
|
||||
this.repaint = function () {
|
||||
if (!initialized) {
|
||||
init({frame: true,
|
||||
init({
|
||||
frame: true,
|
||||
background: true,
|
||||
led: true,
|
||||
pointer: true,
|
||||
foreground: true});
|
||||
foreground: true
|
||||
});
|
||||
}
|
||||
|
||||
mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);
|
||||
|
|
@ -3840,7 +3874,7 @@ var steelseries = (function () {
|
|||
};
|
||||
|
||||
// do we have a callback function to process?
|
||||
if (callback && typeof(callback) === "function") {
|
||||
if (callback && typeof (callback) === "function") {
|
||||
tween.onMotionFinished = callback;
|
||||
}
|
||||
|
||||
|
|
@ -3911,7 +3945,7 @@ var steelseries = (function () {
|
|||
|
||||
ctx.translate(-centerX, -centerY);
|
||||
|
||||
/*
|
||||
/*
|
||||
// PATH1_2
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
|
|
@ -4055,7 +4089,7 @@ var steelseries = (function () {
|
|||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
*/
|
||||
*/
|
||||
// Replacement code, not quite the same but much smaller!
|
||||
|
||||
for (i = 0; 360 >= i; i += 90) {
|
||||
|
|
@ -4625,7 +4659,7 @@ var steelseries = (function () {
|
|||
0.875,
|
||||
1];
|
||||
|
||||
colors = [ new RgbaColor(254, 254, 254, 1),
|
||||
colors = [new RgbaColor(254, 254, 254, 1),
|
||||
new RgbaColor(0, 0, 0, 1),
|
||||
new RgbaColor(153, 153, 153, 1),
|
||||
new RgbaColor(0, 0, 0, 1),
|
||||
|
|
@ -4662,7 +4696,7 @@ var steelseries = (function () {
|
|||
0.875,
|
||||
1];
|
||||
|
||||
colors = [ new RgbaColor(254, 254, 254, 1),
|
||||
colors = [new RgbaColor(254, 254, 254, 1),
|
||||
new RgbaColor(210, 210, 210, 1),
|
||||
new RgbaColor(179, 179, 179, 1),
|
||||
new RgbaColor(238, 238, 238, 1),
|
||||
|
|
@ -4709,7 +4743,7 @@ var steelseries = (function () {
|
|||
0.97,
|
||||
1];
|
||||
|
||||
colors = [ new RgbaColor(255, 255, 255, 1),
|
||||
colors = [new RgbaColor(255, 255, 255, 1),
|
||||
new RgbaColor(255, 255, 255, 1),
|
||||
new RgbaColor(136, 136, 138, 1),
|
||||
new RgbaColor(164, 185, 190, 1),
|
||||
|
|
@ -4877,7 +4911,7 @@ var steelseries = (function () {
|
|||
radBCtx.lineWidth = 0.5;
|
||||
end = TWO_PI - stepSize * 0.3;
|
||||
// Step the engine round'n'round
|
||||
for (i = 0 ; i < end; i += stepSize) {
|
||||
for (i = 0; i < end; i += stepSize) {
|
||||
// draw a 'turn'
|
||||
radBCtx.strokeStyle = 'rgba(240, 240, 255, 0.25)';
|
||||
radBCtx.beginPath();
|
||||
|
|
@ -5999,7 +6033,7 @@ var steelseries = (function () {
|
|||
if (radius !== 0) {
|
||||
totR = totG = totB = 0;
|
||||
}
|
||||
for (x = 0; x < width; x ++) {
|
||||
for (x = 0; x < width; x++) {
|
||||
indx = (y * width * 4) + (x * 4);
|
||||
tr = red;
|
||||
tg = green;
|
||||
|
|
@ -6056,7 +6090,7 @@ var steelseries = (function () {
|
|||
indx = 0;
|
||||
for (y = 0; y < height; y++) {
|
||||
totR = totG = totB = 0;
|
||||
for (x = 0; x < radius ; x++) {
|
||||
for (x = 0; x < radius; x++) {
|
||||
i = (indx + x) * 4;
|
||||
totR += inPix.data[i];
|
||||
totG += inPix.data[i + 1];
|
||||
|
|
@ -6174,8 +6208,8 @@ var steelseries = (function () {
|
|||
indx, pixColor,
|
||||
buffer, bufferCtx;
|
||||
|
||||
// Original Version using rotated lines
|
||||
/*
|
||||
// Original Version using rotated lines
|
||||
/*
|
||||
ctx.save();
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.translate(centerX, centerY);
|
||||
|
|
@ -6201,8 +6235,8 @@ var steelseries = (function () {
|
|||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
*/
|
||||
// End - Original Version
|
||||
*/
|
||||
// End - Original Version
|
||||
|
||||
// Create pixel array
|
||||
pixels = ctx.createImageData(diameter, diameter);
|
||||
|
|
@ -6370,9 +6404,11 @@ var steelseries = (function () {
|
|||
}
|
||||
|
||||
function section(start, stop, color) {
|
||||
return {start : start,
|
||||
stop : stop,
|
||||
color : color};
|
||||
return {
|
||||
start: start,
|
||||
stop: stop,
|
||||
color: color
|
||||
};
|
||||
}
|
||||
|
||||
Math.log10 = function (value) {
|
||||
|
|
@ -6422,7 +6458,7 @@ var steelseries = (function () {
|
|||
ctx.lineTo(x, y + radius);
|
||||
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||
ctx.closePath();
|
||||
// ctx.stroke();
|
||||
// ctx.stroke();
|
||||
}
|
||||
|
||||
function createBuffer(width, height) {
|
||||
|
|
@ -6933,42 +6969,42 @@ var steelseries = (function () {
|
|||
//********************************** E X P O R T F U N C T I O N S *******************************************
|
||||
return {
|
||||
// Components EXTERNAL : INTERNAL
|
||||
Radial : radial,
|
||||
RadialBargraph : radialBargraph,
|
||||
Radial: radial,
|
||||
RadialBargraph: radialBargraph,
|
||||
DisplaySingle: displaySingle,
|
||||
WindDirection : windDirection,
|
||||
Led : led,
|
||||
WindDirection: windDirection,
|
||||
Led: led,
|
||||
Odometer: odometer,
|
||||
|
||||
// Images
|
||||
drawFrame : drawRadialFrameImage,
|
||||
drawBackground : drawRadialBackgroundImage,
|
||||
drawForeground : drawRadialForegroundImage,
|
||||
// /images
|
||||
drawFrame: drawRadialFrameImage,
|
||||
drawBackground: drawRadialBackgroundImage,
|
||||
drawForeground: drawRadialForegroundImage,
|
||||
|
||||
// Tools
|
||||
rgbaColor : RgbaColor,
|
||||
ConicalGradient : ConicalGradient,
|
||||
setAlpha : setAlpha,
|
||||
getColorFromFraction : getColorFromFraction,
|
||||
gradientWrapper : GradientWrapper,
|
||||
rgbaColor: RgbaColor,
|
||||
ConicalGradient: ConicalGradient,
|
||||
setAlpha: setAlpha,
|
||||
getColorFromFraction: getColorFromFraction,
|
||||
gradientWrapper: GradientWrapper,
|
||||
|
||||
// Constants
|
||||
BackgroundColor : backgroundColor,
|
||||
LcdColor : lcdColor,
|
||||
ColorDef : color,
|
||||
LedColor : ledColor,
|
||||
GaugeType : gaugeType,
|
||||
BackgroundColor: backgroundColor,
|
||||
LcdColor: lcdColor,
|
||||
ColorDef: color,
|
||||
LedColor: ledColor,
|
||||
GaugeType: gaugeType,
|
||||
Orientation: orientation,
|
||||
FrameDesign : frameDesign,
|
||||
PointerType : pointerType,
|
||||
ForegroundType : foregroundType,
|
||||
KnobType : knobType,
|
||||
FrameDesign: frameDesign,
|
||||
PointerType: pointerType,
|
||||
ForegroundType: foregroundType,
|
||||
KnobType: knobType,
|
||||
KnobStyle: knobStyle,
|
||||
LabelNumberFormat: labelNumberFormat,
|
||||
TickLabelOrientation: tickLabelOrientation,
|
||||
TrendState: trendState,
|
||||
|
||||
// Other
|
||||
Section : section
|
||||
Section: section
|
||||
};
|
||||
}());
|
||||
|
|
|
|||
242
oldindex.htm
242
oldindex.htm
|
|
@ -1,242 +0,0 @@
|
|||
<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
|
||||
<div class="w3-row-padding site-width">
|
||||
<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
|
||||
<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo" />
|
||||
<div class="w3-right-align" style="max-width:600px;">
|
||||
<h5>Lat<span class="w3-hide-small">itude</span>: <span data-cmxdata="latitude"></span><span
|
||||
class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>: <span
|
||||
data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span
|
||||
class="w3-hide-small">itude</span>: <span data-cmxdata="altitude"></span></h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Start of Menu -->
|
||||
<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
|
||||
</div>
|
||||
<!-- Mobile menu -->
|
||||
<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
|
||||
</div> <!-- End of Mobile menu -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="Content">
|
||||
<!-- Start of panel content -->
|
||||
<div class="w3-row-padding w3-theme-light site-width">
|
||||
<!-- Page Title -->
|
||||
<div class="w3-col l12">
|
||||
<h1><span data-cmxdata="location"></span> Weather <span class="subText"></span></h1>
|
||||
</div>
|
||||
</div> <!-- End of title row -->
|
||||
<div class="w3-row site-width w3-theme-light">
|
||||
<!-- Start of Main panel -->
|
||||
<div class="w3-col l9 m12">
|
||||
<!-- 3/4 width panel -->
|
||||
<div class="w3-row-padding">
|
||||
<!-- Row 1 of 3/4 width panel -->
|
||||
<div class="w3-col s12">
|
||||
<!-- Full width of above panel -->
|
||||
<div class="w3-panel w3-container w3-theme-white">
|
||||
<h3 class="">Almanac</h3>
|
||||
<div class="w3-responsive">
|
||||
<table class="w3-table" style="min-width:100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="">Dawn:</td>
|
||||
<td class=""><span data-cmxdata="dawn"></span></td>
|
||||
<td class="">Sun Rise:</td>
|
||||
<td class=""><span data-cmxdata="sunrise"></span></td>
|
||||
<td class="">Moon Rise:</td>
|
||||
<td class=""><span data-cmxdata="moonrise"></span></td>
|
||||
<td rowspan="3" style="width:75px; height: 75px; padding:0"><img id="moonImg"
|
||||
src="images/moon.png" alt="Moon" width="75" height="75"
|
||||
class="w3-image" />Visible <span data-cmxdata="MoonPercentAbs"></span>%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="">Dusk:</td>
|
||||
<td class=""><span data-cmxdata="dusk"></span></td>
|
||||
<td class="">Sun Set:</td>
|
||||
<td class=""><span data-cmxdata="sunset"></span></td>
|
||||
<td class="">Moon Set:</td>
|
||||
<td class=""><span data-cmxdata="moonset"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="">Daylight:</td>
|
||||
<td class=""><span data-cmxdata="daylightlength"></span></td>
|
||||
<td class="">Day Length:</td>
|
||||
<td class=""><span data-cmxdata="daylength"></span></td>
|
||||
<td class="">Moon Phase:</td>
|
||||
<td class=""><span id="moonPhase" data-cmxdata="moonphase"></span></td>
|
||||
</tr>
|
||||
<tr id="currCond" class="w3-hide">
|
||||
<td colspan="7"><strong>Current conditions</strong>: <span
|
||||
data-cmxdata="currcond"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w3-row-padding">
|
||||
<!-- Row 2 of 3/4 width panel -->
|
||||
<div class="w3-col s12">
|
||||
<!-- Full width of above panel -->
|
||||
<div class="w3-panel w3-card w3-theme-white">
|
||||
<h3 class="">Conditions at local time <span data-cmxdata="time"></span></h3>
|
||||
<div class="w3-responsive">
|
||||
<table class="w3-table w3-hoverable" style="min-width:100%;">
|
||||
<tr>
|
||||
<td colspan="4" class="w3-theme-d5">Temperature and Humidity</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Temperature</td>
|
||||
<td><span data-cmxdata="temp"></span> <span data-cmxdata="tempunit"></span>
|
||||
</td>
|
||||
<td>Dew Point</td>
|
||||
<td><span data-cmxdata="dew"></span> <span data-cmxdata="tempunit"></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Windchill</td>
|
||||
<td><span data-cmxdata="wchill"></span> <span data-cmxdata="tempunit"></span>
|
||||
</td>
|
||||
<td>Humidity</td>
|
||||
<td><span data-cmxdata="hum"></span> %</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Heat Index</td>
|
||||
<td><span data-cmxdata="heatindex"></span> <span
|
||||
data-cmxdata="tempunit"></span></td>
|
||||
<td><span data-cmx-apparent class="w3-hide">Apparent Temperature</span><span
|
||||
data-cmx-feels>Feels Like</span></td>
|
||||
<td><span data-cmx-apparent data-cmxdata="apptemp" class="w3-hide"></span><span
|
||||
data-cmx-feels data-cmxdata="feelslike"></span> <span
|
||||
data-cmxdata="tempunit"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Temp change last hour</td>
|
||||
<td><span data-cmxdata="TempChangeLastHour"></span> <span
|
||||
data-cmxdata="tempunit"></span></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="w3-theme-d4">Rainfall</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Rainfall Today</td>
|
||||
<td><span data-cmxdata="rfall"></span> <span data-cmxdata="rainunit"></span>
|
||||
</td>
|
||||
<td>Rainfall Rate</td>
|
||||
<td><span data-cmxdata="rrate"></span> <span data-cmxdata="rainunit"></span>/hr
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Rainfall This Month</td>
|
||||
<td><span data-cmxdata="rmonth"></span> <span data-cmxdata="rainunit"></span>
|
||||
</td>
|
||||
<td>Rainfall This Year</td>
|
||||
<td><span data-cmxdata="ryear"></span> <span data-cmxdata="rainunit"></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Rainfall Last Hour</td>
|
||||
<td><span data-cmxdata="rhour"></span> <span data-cmxdata="rainunit"></span>
|
||||
</td>
|
||||
<td>Last rainfall</td>
|
||||
<td><span data-cmxdata="LastRainTip"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Rainfall Since Midnight</td>
|
||||
<td><span data-cmxdata="rmidnight"></span> <span
|
||||
data-cmxdata="rainunit"></span></td>
|
||||
<td>Rainfall Last 24 Hours</td>
|
||||
<td><span data-cmxdata="r24hour"></span> <span data-cmxdata="rainunit"></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="w3-theme-d3">Wind</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>Wind Speed <span class="subText">(gust)</span></td>
|
||||
<td><span data-cmxdata="wgust"></span> <span data-cmxdata="windunit"></span>
|
||||
</td>
|
||||
<td>Wind Speed <span class="subText">(avg)</span></td>
|
||||
<td><span data-cmxdata="wspeed"></span> <span data-cmxdata="windunit"></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>Wind Bearing</td>
|
||||
<td><span data-cmxdata="avgbearing"></span>° <span data-cmxdata="wdir"></span>
|
||||
</td>
|
||||
<td>Beaufort <span data-cmxdata="beaufort"></span></td>
|
||||
<td><span data-cmxdata="beaudesc"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>Wind Variation <span class="subText">(last 10 minutes)</span></td>
|
||||
<td colspan="3">From <span data-cmxdata="BearingRangeFrom"></span>° to <span
|
||||
data-cmxdata="BearingRangeTo"></span>°</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="w3-theme-d2">Pressure <span class="subText">(sea
|
||||
level)</span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l5">
|
||||
<td>Barometer</td>
|
||||
<td><span data-cmxdata="press"></span> <span data-cmxdata="pressunit"></span>
|
||||
</td>
|
||||
<td><span data-cmxdata="presstrend"></span></td>
|
||||
<td><span data-cmxdata="presstrendval"></span> <span
|
||||
data-cmxdata="pressunit"></span>/hr</td>
|
||||
</tr>
|
||||
<tr class="w3-hide" data-cmx-solar data-cmx-uv>
|
||||
<td colspan="4" class="w3-theme-d1">Solar</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
|
||||
<td>Solar Radiation</td>
|
||||
<td><span data-cmxdata="SolarRad"></span> W/m²</td>
|
||||
<td>Evapotranspiration Today</td>
|
||||
<td><span data-cmxdata="ET"></span> <span data-cmxdata="rainunit"></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
|
||||
<td>UV Index</td>
|
||||
<td><span data-cmxdata="UV"></span></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w3-col l3 m12">
|
||||
<!-- Start of Sidebar 1/4 width -->
|
||||
<div class="w3-row-padding">
|
||||
<div class="w3-col l12">
|
||||
<div class="w3-panel w3-container w3-theme-light">
|
||||
<h3 class="w3-center">Welcome to <br /><span class="subText"><span
|
||||
data-cmxdata="longlocation"></span></span></h3>
|
||||
<p>The weather station in use is the <span data-cmxdata="stationtype"></span><br>
|
||||
This page is updated every <span data-cmxdata="interval"></span> minutes. The
|
||||
meteorological day used at this station ends at <span data-cmxdata="rollovertime"></span>.
|
||||
</p>
|
||||
<p><strong>Forecast:</strong> <span data-cmxdata="forecast"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End of panel content -->
|
||||
</div> <!-- End of content -->
|
||||
<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
|
||||
<div class="w3-row-padding site-width">
|
||||
<p><em>Cumulus MX Template by Neil Thomas
|
||||
<script>
|
||||
document.write(new Date().getFullYear());
|
||||
</script>
|
||||
<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span
|
||||
data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span>
|
||||
</em></p>
|
||||
</div>
|
||||
</div>
|
||||
239
today.htm
239
today.htm
|
|
@ -1,239 +0,0 @@
|
|||
<!--
|
||||
today.htm v:0.0.1 d:Feb 2021 Neil Thomas
|
||||
Last modified: 2022/07/27 10:11:12
|
||||
Page: 1 main panel plus a sidebar
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="weather data">
|
||||
<meta name="keywords" content="Cumulus, weather, data, weather station">
|
||||
<title>Cumulus MX</title>
|
||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||||
|
||||
<!-- jQuery Local -->
|
||||
<script src="lib/jquery/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Fonts System will default to a sans-serif font if no Internet connection -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- All Styles -->
|
||||
<link href="css/w3Pro.css" rel="stylesheet"> <!-- Basic w3shools responsive styles -->
|
||||
<link href="css/colours.css" rel="stylesheet"> <!-- Slightly enhanced w3schools colours -->
|
||||
<link href="css/mx-templates.css" rel="stylesheet"> <!-- Specific styles for these templates. -->
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/setpagedata.js"></script> <!-- Utility javascripts for all pages. -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
|
||||
<div class="w3-row-padding site-width">
|
||||
<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
|
||||
<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
|
||||
<div class="w3-right-align" style="max-width:600px;">
|
||||
<h5>Lat<span class="w3-hide-small">itude</span>: <span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>: <span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>: <span data-cmxdata="altitude"></span></h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Start of Menu -->
|
||||
<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
|
||||
</div>
|
||||
<!-- Mobile menu -->
|
||||
<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
|
||||
</div> <!-- End of Mobile menu -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="Content"> <!-- Start of panel content -->
|
||||
<div class="w3-row-padding w3-theme-light site-width"> <!-- Page Title -->
|
||||
<div class="w3-col l12">
|
||||
<h1>Today <span class="subText"><span data-cmxdata="date"></span></span></h1>
|
||||
</div>
|
||||
</div> <!-- End of title row -->
|
||||
<div class="w3-row site-width w3-theme-light"> <!-- Start of Main panel -->
|
||||
<div class="w3-col l9 m12"> <!-- 3/4 width panel -->
|
||||
<div class="w3-row-padding"> <!-- Row 1 of 3/4 width panel -->
|
||||
<div class="w3-col s12"> <!-- Full width of above panel -->
|
||||
<div class="w3-panel w3-card w3-theme-white">
|
||||
<h2>Today's data</h2>
|
||||
<div class="w3-responsive">
|
||||
<table class="w3-table w3-hoverable" style="width:100%">
|
||||
<tbody>
|
||||
<tr class="w3-theme-d5">
|
||||
<td colspan="3">Temperature and Humidity</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>High Temperature</td>
|
||||
<td><span data-cmxdata="tempTH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TtempTH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Low Temperature</td>
|
||||
<td><span data-cmxdata="tempTL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TtempTL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Temperature Range</td>
|
||||
<td><span data-cmxdata="temprange"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
|
||||
<td>High Apparent Temperature</td>
|
||||
<td><span data-cmxdata="apptempTH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TapptempTH"></span></td>
|
||||
</tr>
|
||||
<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
|
||||
<td>Low Apparent Temperature</td>
|
||||
<td><span data-cmxdata="apptempTL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TapptempTL"></span></td>
|
||||
</tr>
|
||||
<tr data-cmx-feels class="w3-theme-l2">
|
||||
<td>High Feels Like</td>
|
||||
<td><span data-cmxdata="feelslikeTH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TfeelslikeTH"></span></td>
|
||||
</tr>
|
||||
<tr data-cmx-feels class="w3-theme-l2">
|
||||
<td>Low Feels Like</td>
|
||||
<td><span data-cmxdata="feelslikeTL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TfeelslikeTL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Low Wind Chill</td>
|
||||
<td><span data-cmxdata="wchillTL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TwchillTL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>High Heat Index</td>
|
||||
<td><span data-cmxdata="heatindexTH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TheatindexTH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>High Humidity</td>
|
||||
<td><span data-cmxdata="humTH"></span> %</td>
|
||||
<td>at <span data-cmxdata="ThumTH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Low Humidity</td>
|
||||
<td><span data-cmxdata="humTL"></span> %</td>
|
||||
<td>at <span data-cmxdata="ThumTL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-d4">
|
||||
<td colspan="3">Rainfall</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Rainfall Today</td>
|
||||
<td><span data-cmxdata="rfall"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Rainfall Rate Max</td>
|
||||
<td><span data-cmxdata="rrateTM"></span> <span data-cmxdata="rainunit"></span>/hr</td>
|
||||
<td>at <span data-cmxdata="TrrateTM"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>High Hourly Rainfall</td>
|
||||
<td><span data-cmxdata="hourlyrainTH"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td>at <span data-cmxdata="ThourlyrainTH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>High 24 Hour Rainfall</td>
|
||||
<td><span data-cmxdata="rain24hourTH"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td>at <span data-cmxdata="Train24hourTH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Days Since Last Dry Day</td>
|
||||
<td><span data-cmxdata="ConsecutiveRainDays"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Days Since It Last Rained</td>
|
||||
<td><span data-cmxdata="ConsecutiveDryDays"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-d3">
|
||||
<td colspan="3">Wind</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>High Gust</td>
|
||||
<td><span data-cmxdata="wgustTM"></span> <span data-cmxdata="windunit"></span></td>
|
||||
<td>at <span data-cmxdata="TwgustTM"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>High Speed <span class="subText">(10 minute average)</span></td>
|
||||
<td><span data-cmxdata="windTM"></span> <span data-cmxdata="windunit"></span> (<span data-cmxdata="Tbeaufort"></span>)</td>
|
||||
<td>at <span data-cmxdata="TwindTM"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>Wind Run</td>
|
||||
<td><span data-cmxdata="windrun"></span> <span data-cmxdata="windrununit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>Dominant Direction</td>
|
||||
<td><span data-cmxdata="domwindbearing"></span>° <span data-cmxdata="domwinddir"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-d2">
|
||||
<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l5">
|
||||
<td>High Pressure</td>
|
||||
<td><span data-cmxdata="pressTH"></span> <span data-cmxdata="pressunit"></span></td>
|
||||
<td>at <span data-cmxdata="TpressTH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l5">
|
||||
<td>Low Pressure</td>
|
||||
<td><span data-cmxdata="pressTL"></span> <span data-cmxdata="pressunit"></span></td>
|
||||
<td>at <span data-cmxdata="TpressTL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-d1 w3-hide" data-cmx-solar data-cmx-uv>
|
||||
<td colspan="3" class="w3-theme-d1">Solar</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
|
||||
<td>High Solar Radiation</td>
|
||||
<td><span data-cmxdata="solarTH"></span> W/m<sup>2</sup></td>
|
||||
<td>at <span data-cmxdata="TsolarTH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
|
||||
<td>Hours of Sunshine</td>
|
||||
<td><span data-cmxdata="SunshineHours"></span> hrs</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
|
||||
<td>High UV Index</td>
|
||||
<td><span data-cmxdata="UVTH"></span></td>
|
||||
<td>at <span data-cmxdata="TUVTH"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w3-col l3 m12"> <!-- Start of Sidebar 1/4 screen width -->
|
||||
<div class="w3-row-padding">
|
||||
<div class="w3-col l12"> <!-- Full width of sidebar -->
|
||||
<div class="w3-panel w3-container w3-theme-light">
|
||||
<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
|
||||
<p>This page shows the highs, lows and current values for today.<br>
|
||||
This page is updated every <span data-cmxdata="interval"></span> minutes. The meteorological day used at this station ends at
|
||||
<span data-cmxdata="rollovertime"></span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End of panel content -->
|
||||
</div> <!-- End of content -->
|
||||
<!-- Footer -->
|
||||
<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
|
||||
<div class="w3-row-padding site-width">
|
||||
<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
|
||||
<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
148
today/index.php
Normal file
148
today/index.php
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<?php include("../includes/head.inc.php"); ?>
|
||||
<script>
|
||||
window.onload = () => {
|
||||
$('#moonImg').attr('src', '/images/moon.png?' + Date.now());
|
||||
// update the moon image every 20 minutes if the page is left open
|
||||
setInterval(() => {
|
||||
$('#moonImg').attr('src', '/images/moon.png?' + Date.now());
|
||||
}, 1200000);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page-container">
|
||||
<?php include("../includes/header.inc.php"); ?>
|
||||
<div id="content">
|
||||
<h3>Data for today (<span data-cmxdata="date"></span>)</h3>
|
||||
<table class="mx-datatable">
|
||||
<tr>
|
||||
<th colspan="4">Temperature and Humidity</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Temperature</td>
|
||||
<td><span data-cmxdata="tempTH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TtempTH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Temperature</td>
|
||||
<td><span data-cmxdata="tempTL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TtempTL"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Temperature Range</td>
|
||||
<td><span data-cmxdata="temprange"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-cmx-feels>
|
||||
<td>High Feels Like</td>
|
||||
<td><span data-cmxdata="feelslikeTH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TfeelslikeTH"></span></td>
|
||||
</tr>
|
||||
<tr data-cmx-feels>
|
||||
<td>Low Feels Like</td>
|
||||
<td><span data-cmxdata="feelslikeTL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TfeelslikeTL"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Wind Chill</td>
|
||||
<td><span data-cmxdata="wchillTL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TwchillTL"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Heat Index</td>
|
||||
<td><span data-cmxdata="heatindexTH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TheatindexTH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Humidity</td>
|
||||
<td><span data-cmxdata="humTH"></span> %</td>
|
||||
<td>at <span data-cmxdata="ThumTH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Humidity</td>
|
||||
<td><span data-cmxdata="humTL"></span> %</td>
|
||||
<td>at <span data-cmxdata="ThumTL"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="4">Rainfall</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rainfall Today</td>
|
||||
<td><span data-cmxdata="rfall"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rainfall Rate Max</td>
|
||||
<td><span data-cmxdata="rrateTM"></span> <span data-cmxdata="rainunit"></span>/hr</td>
|
||||
<td>at <span data-cmxdata="TrrateTM"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Hourly Rainfall</td>
|
||||
<td><span data-cmxdata="hourlyrainTH"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td>at <span data-cmxdata="ThourlyrainTH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High 24 Hour Rainfall</td>
|
||||
<td><span data-cmxdata="rain24hourTH"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td>at <span data-cmxdata="Train24hourTH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Days Since Last Dry Day</td>
|
||||
<td><span data-cmxdata="ConsecutiveRainDays"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Days Since It Last Rained</td>
|
||||
<td><span data-cmxdata="ConsecutiveDryDays"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="4">Wind</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Gust</td>
|
||||
<td><span data-cmxdata="wgustTM"></span> <span data-cmxdata="windunit"></span></td>
|
||||
<td>at <span data-cmxdata="TwgustTM"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Speed <span class="subText">(10 minute average)</span></td>
|
||||
<td><span data-cmxdata="windTM"></span> <span data-cmxdata="windunit"></span> (<span
|
||||
data-cmxdata="Tbeaufort"></span>)</td>
|
||||
<td>at <span data-cmxdata="TwindTM"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Wind Run</td>
|
||||
<td><span data-cmxdata="windrun"></span> <span data-cmxdata="windrununit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dominant Direction</td>
|
||||
<td><span data-cmxdata="domwindbearing"></span>° <span data-cmxdata="domwinddir"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="4">Pressure (sea level)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Pressure</td>
|
||||
<td><span data-cmxdata="pressTH"></span> <span data-cmxdata="pressunit"></span></td>
|
||||
<td>at <span data-cmxdata="TpressTH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Pressure</td>
|
||||
<td><span data-cmxdata="pressTL"></span> <span data-cmxdata="pressunit"></span></td>
|
||||
<td>at <span data-cmxdata="TpressTL"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<small>Page data updated <span data-cmxdata="update"></span></small>
|
||||
</div>
|
||||
<?php include("../includes/footer.inc.php"); ?>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
225
yesterday.htm
225
yesterday.htm
|
|
@ -1,225 +0,0 @@
|
|||
<!--
|
||||
yesterday.htm v:0.0.1 d:Feb 2021 Neil Thomas
|
||||
Last modified: 2022/07/27 10:10:28
|
||||
Page: 1 main panel plus a sidebar
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="weather data">
|
||||
<meta name="keywords" content="Cumulus, weather, data, weather station">
|
||||
<title>Cumulus MX</title>
|
||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||||
|
||||
<!-- jQuery Local -->
|
||||
<script src="lib/jquery/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Fonts System will default to a sans-serif font if no Internet connection -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- All Styles -->
|
||||
<link href="css/w3Pro.css" rel="stylesheet"> <!-- Basic w3shools responsive styles -->
|
||||
<link href="css/colours.css" rel="stylesheet"> <!-- Slightly enhanced w3schools colours -->
|
||||
<link href="css/mx-templates.css" rel="stylesheet"> <!-- Specific styles for these templates. -->
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/setpagedata.js"></script> <!-- Utility javascripts for all pages. -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
|
||||
<div class="w3-row-padding site-width">
|
||||
<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
|
||||
<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
|
||||
<div class="w3-right-align" style="max-width:600px;">
|
||||
<h5>Lat<span class="w3-hide-small">itude</span>: <span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>: <span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>: <span data-cmxdata="altitude"></span></h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Start of Menu -->
|
||||
<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
|
||||
</div>
|
||||
<!-- Mobile menu -->
|
||||
<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
|
||||
</div> <!-- End of Mobile menu -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="Content"> <!-- Start of panel content -->
|
||||
<div class="w3-row-padding w3-theme-light site-width"> <!-- Page Title -->
|
||||
<div class="w3-col l12">
|
||||
<h1>Yesterday <span class="subText"><span data-cmxdata="yesterday"></span></span></h1>
|
||||
</div>
|
||||
</div> <!-- End of title row -->
|
||||
<div class="w3-row site-width w3-theme-light"> <!-- Start of Main panel -->
|
||||
<div class="w3-col l9 m12"> <!-- 3/4 width panel -->
|
||||
<div class="w3-row-padding"> <!-- Row 1 of 3/4 width panel -->
|
||||
<div class="w3-col s12"> <!-- Full width of above panel -->
|
||||
<div class="w3-panel w3-card w3-theme-white">
|
||||
<h2 class="">Yesterday's data</h2>
|
||||
<div class="w3-responsive">
|
||||
<table class="w3-table w3-hoverable" style="width:100%">
|
||||
<tbody>
|
||||
<tr class="w3-theme-d5">
|
||||
<td colspan="3">Temperature and Humidity</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>High Temperature</td>
|
||||
<td><span data-cmxdata="tempYH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TtempYH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Low Temperature</td>
|
||||
<td><span data-cmxdata="tempYL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TtempYL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Temperature Range</td>
|
||||
<td><span data-cmxdata="temprangeY"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
|
||||
<td>High Apparent Temperature</td>
|
||||
<td><span data-cmxdata="apptempYH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TapptempYH"></span></td>
|
||||
</tr>
|
||||
<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
|
||||
<td>Low Apparent Temperature</td>
|
||||
<td><span data-cmxdata="apptempYL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TapptempYL"></span></td>
|
||||
</tr>
|
||||
<tr data-cmx-feels class="w3-theme-l2">
|
||||
<td>High Feels Like</td>
|
||||
<td><span data-cmxdata="feelslikeYH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TfeelslikeYH"></span></td>
|
||||
</tr>
|
||||
<tr data-cmx-feels class="w3-theme-l2">
|
||||
<td>Low Feels Like</td>
|
||||
<td><span data-cmxdata="feelslikeYL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TfeelslikeYL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Low Wind Chill</td>
|
||||
<td><span data-cmxdata="wchillYL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TwchillYL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>High Heat Index</td>
|
||||
<td><span data-cmxdata="heatindexYH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TheatindexYH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>High Humidity</td>
|
||||
<td><span data-cmxdata="humYH"></span> %</td>
|
||||
<td>at <span data-cmxdata="ThumYH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l2">
|
||||
<td>Low Humidity</td>
|
||||
<td><span data-cmxdata="humYL"></span> %</td>
|
||||
<td>at <span data-cmxdata="ThumYL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-d4">
|
||||
<td colspan="3">Rainfall</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Rainfall Yesterday</td>
|
||||
<td><span data-cmxdata="rfallY"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>Rainfall Rate Max</td>
|
||||
<td><span data-cmxdata="rrateYM"></span> <span data-cmxdata="rainunit"></span>/hr</td>
|
||||
<td>at <span data-cmxdata="TrrateYM"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>High Hourly Rainfall</td>
|
||||
<td><span data-cmxdata="hourlyrainYH"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td>at <span data-cmxdata="ThourlyrainYH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l3">
|
||||
<td>High 24 Hour Rainfall</td>
|
||||
<td><span data-cmxdata="rain24hourYH"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td>at <span data-cmxdata="Train24hourYH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-d3">
|
||||
<td colspan="3">Wind</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>High Gust</td>
|
||||
<td><span data-cmxdata="wgustYM"></span> <span data-cmxdata="windunit"></span></td>
|
||||
<td>at <span data-cmxdata="TwgustYM"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>High Speed <span class="subText">(10 minute average)</span></td>
|
||||
<td><span data-cmxdata="windYM"></span> <span data-cmxdata="windunit"></span> (<span data-cmxdata="Ybeaufort"></span>)</td>
|
||||
<td>at <span data-cmxdata="TwindYM"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>Wind Run</td>
|
||||
<td><span data-cmxdata="windrunY"></span> <span data-cmxdata="windrununit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l4">
|
||||
<td>Dominant Direction</td>
|
||||
<td><span data-cmxdata="domwindbearingY"></span>° <span data-cmxdata="domwinddirY"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-d2">
|
||||
<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l5">
|
||||
<td>High Pressure</td>
|
||||
<td><span data-cmxdata="pressYH"></span> <span data-cmxdata="pressunit"></span></td>
|
||||
<td>at <span data-cmxdata="TpressYH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l5">
|
||||
<td>Low Pressure</td>
|
||||
<td><span data-cmxdata="pressYL"></span> <span data-cmxdata="pressunit"></span></td>
|
||||
<td>at <span data-cmxdata="TpressYL"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-d1 w3-hide" data-cmx-solar data-cmx-uv>
|
||||
<td colspan="3">Solar</td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
|
||||
<td>High Solar Radiation</td>
|
||||
<td><span data-cmxdata="solarYH"></span> W/m²</td>
|
||||
<td>at <span data-cmxdata="TsolarYH"></span></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
|
||||
<td>Hours of Sunshine</td>
|
||||
<td><span data-cmxdata="YSunshineHours"></span> hrs</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
|
||||
<td>High UV Index</td>
|
||||
<td><span data-cmxdata="UVYH"></span></td>
|
||||
<td>at <span data-cmxdata="TUVYH"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w3-col l3 m12"> <!-- Start of Sidebar 1/4 width -->
|
||||
<div class="w3-row-padding">
|
||||
<div class="w3-col l12">
|
||||
<div class="w3-panel w3-container w3-theme-light">
|
||||
<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
|
||||
<p>This page shows a summary of the data for the 24 hrs up to <span data-cmxdata="rollovertime"></span> local time. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End of panel content -->
|
||||
</div> <!-- End of content -->
|
||||
<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
|
||||
<div class="w3-row-padding site-width">
|
||||
<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
|
||||
<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
149
yesterday/index.php
Normal file
149
yesterday/index.php
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<!DOCYYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<?php include("../includes/head.inc.php"); ?>
|
||||
<script>
|
||||
window.onload = () => {
|
||||
$('#moonImg').attr('src', '/images/moon.png?' + Date.now());
|
||||
// update the moon image every 20 minutes if the page is left open
|
||||
setInterval(() => {
|
||||
$('#moonImg').attr('src', '/images/moon.png?' + Date.now());
|
||||
}, 1200000);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page-container">
|
||||
<?php include("../includes/header.inc.php"); ?>
|
||||
<div id="content">
|
||||
<h3>Data for today (<span data-cmxdata="yesterday"></span>)</h3>
|
||||
<table class="mx-datatable">
|
||||
<tr>
|
||||
<th colspan="4">Temperature and Humidity</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Temperature</td>
|
||||
<td><span data-cmxdata="tempYH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TtempYH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Temperature</td>
|
||||
<td><span data-cmxdata="tempYL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TtempYL"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Temperature Range</td>
|
||||
<td><span data-cmxdata="temprange"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-cmx-feels>
|
||||
<td>High Feels Like</td>
|
||||
<td><span data-cmxdata="feelslikeYH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TfeelslikeYH"></span></td>
|
||||
</tr>
|
||||
<tr data-cmx-feels>
|
||||
<td>Low Feels Like</td>
|
||||
<td><span data-cmxdata="feelslikeYL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TfeelslikeYL"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Wind Chill</td>
|
||||
<td><span data-cmxdata="wchillYL"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TwchillYL"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Heat Index</td>
|
||||
<td><span data-cmxdata="heatindexYH"></span> <span data-cmxdata="tempunit"></span></td>
|
||||
<td>at <span data-cmxdata="TheatindexYH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Humidity</td>
|
||||
<td><span data-cmxdata="humYH"></span> %</td>
|
||||
<td>at <span data-cmxdata="ThumYH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Humidity</td>
|
||||
<td><span data-cmxdata="humYL"></span> %</td>
|
||||
<td>at <span data-cmxdata="ThumYL"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="4">Rainfall</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rainfall Today</td>
|
||||
<td><span data-cmxdata="rfall"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rainfall Rate Max</td>
|
||||
<td><span data-cmxdata="rrateYM"></span> <span data-cmxdata="rainunit"></span>/hr</td>
|
||||
<td>at <span data-cmxdata="TrrateYM"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Hourly Rainfall</td>
|
||||
<td><span data-cmxdata="hourlyrainYH"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td>at <span data-cmxdata="ThourlyrainYH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High 24 Hour Rainfall</td>
|
||||
<td><span data-cmxdata="rain24hourYH"></span> <span data-cmxdata="rainunit"></span></td>
|
||||
<td>at <span data-cmxdata="Train24hourYH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Days Since Last Dry Day</td>
|
||||
<td><span data-cmxdata="ConsecutiveRainDays"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Days Since It Last Rained</td>
|
||||
<td><span data-cmxdata="ConsecutiveDryDays"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="4">Wind</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Gust</td>
|
||||
<td><span data-cmxdata="wgustYM"></span> <span data-cmxdata="windunit"></span></td>
|
||||
<td>at <span data-cmxdata="TwgustYM"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Speed <span class="subText">(10 minute average)</span></td>
|
||||
<td><span data-cmxdata="windYM"></span> <span data-cmxdata="windunit"></span> (<span
|
||||
data-cmxdata="Tbeaufort"></span>)</td>
|
||||
<td>at <span data-cmxdata="TwindYM"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Wind Run</td>
|
||||
<td><span data-cmxdata="windrun"></span> <span data-cmxdata="windrununit"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dominant Direction</td>
|
||||
<td><span data-cmxdata="domwindbearing"></span>° <span data-cmxdata="domwinddir"></span>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="4">Pressure (sea level)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Pressure</td>
|
||||
<td><span data-cmxdata="pressYH"></span> <span data-cmxdata="pressunit"></span></td>
|
||||
<td>at <span data-cmxdata="TpressYH"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Pressure</td>
|
||||
<td><span data-cmxdata="pressYL"></span> <span data-cmxdata="pressunit"></span></td>
|
||||
<td>at <span data-cmxdata="TpressYL"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<small>Page data updated <span data-cmxdata="update"></span></small>
|
||||
</div>
|
||||
<?php include("../includes/footer.inc.php"); ?>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue