Home Explore Help
Register Sign In
tarka
/
weather-station
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Improve mobile display + deploy to Storm

- Add a meta tag so responsive designs can actually work.
- Make the temperature gauge take the first whole row.
  - Had to force this, otherwise sometimes the light one would take the
    whole second row.
- Show a negative sign when temperature is negative, but rounds to zero.
Jason Tarka 4 years ago
parent
3cfa63d0d9
commit
95b4d6aa74
3 changed files with 22 additions and 8 deletions
Split View Show Diff Stats
  1. 2 1
      web-view/package.json
  2. 15 6
      web-view/src/index.html
  3. 5 1
      web-view/src/js/graphs.ts

+ 2 - 1
web-view/package.json
View File 

@@ -10,7 +10,8 @@
 
     "build:html": "cp -r ./src/*.html ./build",
 
     "build:js": "webpack --mode=production",
 
     "watch:js": "webpack --mode=development --watch",
 
-    "watch:html": "npm-watch"
 
+    "watch:html": "npm-watch",
 
+    "deploy": "npm run build && scp -r build/* storm:/mnt2/nginx-data/weather/"
 
   },
 
   "watch": {
 
     "build:html": {

+ 15 - 6
web-view/src/index.html
View File 

@@ -2,6 +2,7 @@
 
 <html lang="en">
 
 <head>
 
 	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width,initial-scale=1">
 
 	<title>Weather Station</title>
 
 	<style>
 
 		div.graph-container {
 
@@ -17,15 +18,13 @@
 
 			max-width: 800px;
 
 			max-height: 300px;
 
 			display: inline-block !important;
 
-			/*margin-left: auto;*/
 
-			/*margin-right: auto;*/
 
 		}
 
 
 
 		#gauges {
 
 			display: flex;
 
-			flex-flow: row nowrap;
 
-			justify-content: space-around;
 
+			flex-flow: row wrap;
 
+			justify-content: center;
 
 
 			width: 100%;
 
 		}
 
@@ -34,8 +33,8 @@
 
 		#gauges > div {
 
 			flex-grow: 1;
 
 			flex-shrink: 1;
 
-			flex-basis: 150px;
 
-			max-width: 200px;
 
+			flex-basis: 2cm;
 
+			max-width: 5cm;
 
 		}
 
 
 		/* The unfilled part of a dial */
 
@@ -48,7 +47,17 @@
 
 			stroke-width: 7px;
 
 		}
 
 
+		@media only screen and (max-width: 500px) {
 
+			#gauges > div.temperature {
 
+				min-width: 80%;
 
+				flex-grow: 2;
 
+				flex-shrink: 0;
 
+			}
 
 
+			#gauges > div:not(.temperature) {
 
+				min-width: 30%;
 
+			}
 
+		}
 
 	</style>
 
 </head>
 
 <body>

+ 5 - 1
web-view/src/js/graphs.ts
View File 

@@ -94,6 +94,7 @@ function addGauge(
 
 	parentElement:HTMLElement
 
 ) {
 
 	const container = document.createElement('div');
 
+	container.className = field.key;
 
 	parentElement.appendChild(container);
 
 
 	const rangeIncrement = (field.maxValue - field.minValue) * 0.05;
 
@@ -101,7 +102,10 @@ function addGauge(
 
 	const config = {
 
 		max: field.maxValue >= value ? field.maxValue : value + rangeIncrement,
 
 		min: field.minValue <= value ? field.minValue : value - rangeIncrement,
 
-		label: v => `${v.toFixed(0)}${field.unit}`,
 
+		label: v => {
 
+			const sign = v > -0.5 && v < 0 ? '-' : ''; // Show minus zero
 
+			return `${sign}${v.toFixed(0)}${field.unit}`;
 
+		},
 
 		color: v => {
 
 			let buckets = Object.keys(field.gaugeColours)
 
 				.sort((a,b) => parseInt(a) - parseInt(b));