Improving appearance

- Use the same colours everywhere
- Flexbox to make the gauges spaced better
- Center everything

web-view/src/index.html

@@ -4,16 +4,38 @@
 	<meta charset="UTF-8">
 	<title>Weather Station</title>
 	<style>
+		div.graph-container {
+			text-align: center;
+		}
+
+		h2 {
+			text-align: center;
+			font-family: sans, 'sans-serif';
+		}
+
 		#time-series-graphs canvas {
 			max-width: 800px;
-			max-height: 200px;
-			display: block;
+			max-height: 300px;
+			display: inline-block !important;
+			/*margin-left: auto;*/
+			/*margin-right: auto;*/
 		}
 
+
+		#gauges {
+			display: flex;
+			flex-flow: row nowrap;
+			justify-content: space-around;
+
+			width: 100%;
+		}
+
+
 		#gauges > div {
-			display: inline-block;
-			width: 200px;
-			height: 200px;
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: 150px;
+			max-width: 200px;
 		}
 
 		/* The unfilled part of a dial */

web-view/src/js/consts.ts

@@ -26,7 +26,7 @@ export const FIELDS: FieldInfo[] = [
 		key: 'temperature',
 		label: 'Temperature',
 		unit: '°C',
-		colour: 'rgb(255, 0, 0)',
+		colour: Colours.Red,
 		canSpike: true,
 		minValue: -10,
 		maxValue: 30,
@@ -43,7 +43,7 @@ export const FIELDS: FieldInfo[] = [
 		key: 'humidity',
 		label: 'Relative Humidity',
 		unit: '%',
-		colour: 'rgb(0, 255, 255)',
+		colour: Colours.Blue,
 		canSpike: false, // Affected by temperature, so can spike
 		minValue: 0,
 		maxValue: 100,
@@ -58,9 +58,9 @@ export const FIELDS: FieldInfo[] = [
 		key: 'pressure',
 		label: 'Air Pressure',
 		unit: 'hPa',
-		colour: 'rgb(0, 255, 0)',
+		colour: Colours.Green,
 		canSpike: false,
-		minValue: 975,
+		minValue: 960,
 		maxValue: 1030,
 		gaugeColours: {
 			990: Colours.Blue,
@@ -72,7 +72,7 @@ export const FIELDS: FieldInfo[] = [
 		key: 'light',
 		label: 'Light',
 		unit: '',
-		colour: 'rgb(255, 255, 0)',
+		colour: Colours.Orange,
 		canSpike: false, // Does spike, but it doesn't matter
 		minValue: 0,
 		maxValue: 8191,