Home Verkennen Help
Registreren Inloggen
tarka
/
weather-station
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

Show last update + small display improvements

- Show last update so I know if the page as reloaded, or is being served
  from cache.
- Emphasize sub-zero temperatures
  - If the highest value is negative, show at least up to zero.
  - Include a fill to/from zero.
- Use a logarihmic scale for light.
Jason Tarka 3 jaren geleden
bovenliggende
0b72835f56
commit
6dba21eb24
4 gewijzigde bestanden met toevoegingen van 27 en 5 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 5 1
      web-view/src/index.html
  2. 1 1
      web-view/src/js/consts.ts
  3. 13 2
      web-view/src/js/graphs.ts
  4. 8 1
      web-view/src/js/main.ts

+ 5 - 1
web-view/src/index.html
Bestand weergeven 

@@ -9,7 +9,7 @@
 
 			text-align: center;
 
 		}
 
 
-		h2 {
 
+		h2, #last-update {
 
 			text-align: center;
 
 			font-family: sans, 'sans-serif';
 
 		}
 
@@ -62,6 +62,10 @@
 
 </head>
 
 <body>
 
 	<div id="gauges"></div>
 
+	<div id="last-update">
 
+		<strong>Latest reading:</strong>
 
+		<span id="last-update-value"></span>
 
+	</div>
 
 	<div id="time-series-graphs"></div>
 
 
 	<div id="hour-selector">

+ 1 - 1
web-view/src/js/consts.ts
Bestand weergeven 

@@ -84,7 +84,7 @@ export const FIELDS: FieldInfo[] = [
 
 		unit: '',
 
 		colour: Colours.Orange,
 
 		canSpike: false, // Does spike, but it doesn't matter
 
-		minValue: 0,
 
+		minValue: 50,
 
 		maxValue: 8191,
 
 		gaugeColours: {
 
 			0: Colours.Blue,

+ 13 - 2
web-view/src/js/graphs.ts
Bestand weergeven 

@@ -72,18 +72,29 @@ function createGraph(
 
 				label: `${fieldInfo.label} (${fieldInfo.unit})`,
 
 				data: data.map(d => d.value),
 
 				backgroundColor: fieldInfo.colour, // Colour of the dots
 
-				borderColor: fieldInfo.colour // Colour of the line
 
+				borderColor: fieldInfo.colour, // Colour of the line
 
+				fill: {
 
+					target: { value: 0 },
 
+					above: 'rgba(200, 200, 50, 0.2)',
 
+					below: 'rgba(50, 200, 200, 0.2)'
 
+				},
 
 			}]
 
 		},
 
 		options: {
 
 			scales: {
 
 				y: {
 
 					suggestedMin: minMax.min - (RANGE_PADDING / 2),
 
-					suggestedMax: minMax.max + (RANGE_PADDING / 2)
 
+					suggestedMax: minMax.max < 0 ? 0 : minMax.max + (RANGE_PADDING / 2)
 
 				}
 
 			}
 
 		}
 
 	};
 
+
 
+	if(fieldInfo.key === 'light') {
 
+		const scale = config.options.scales.y;
 
+		scale.type = 'logarithmic';
 
+	}
 
+
 
 	new Chart(canvas, config);
 
 }

+ 8 - 1
web-view/src/js/main.ts
Bestand weergeven 

@@ -16,7 +16,9 @@ document.body.onload = init;
 
 
 async function init() {
 
 	const hoursAgo = getHoursAgo();
 
-	const readings = await getRecentData(hoursAgo);
 
+	const readings:Reading[] = await getRecentData(hoursAgo);
 
+
 
+	showLatestReading(readings);
 
 
 	// Force a 15-minute window for the gauges, to ensure it shows the most
 
 	// up-to-date value it can (that's had spikes filtered out)
 
@@ -57,6 +59,11 @@ function getHoursAgo():number {
 
 	return hours;
 
 }
 
 
+function showLatestReading(readings:Reading[]) {
 
+	const span = document.getElementById('last-update-value');
 
+	span.textContent = new Date(readings.pop().time).toLocaleTimeString();
 
+}
 
+
 
 function showHourSelection() {
 
 	const options:HTMLSelectElement =
 
 		document.getElementById('hours-ago') as HTMLSelectElement;