font size relative to screen size

added button to toggle fullscreen mode
3 years ago · 47443e7e4d
7 changed files with 57 additions and 9 deletions
--- a/WebApp/src/app.ts
+++ b/WebApp/src/app.ts
@ -6,7 +6,7 @@ import { DashboardPage } from 'pages/dashboard/dashboard-page';

 require('../node_modules/bulma/css/bulma.css');

-m.route(document.body, "/raw", {
+m.route(document.body, "/dashboard", {
 	"/dashboard": { render: () => m(Layout, m(DashboardPage)) },
    "/raw": { render: () => m(Layout, m(RawDataPage)) },
 });
--- a/WebApp/src/assets/icons/compress.png
+++ b/WebApp/src/assets/icons/compress.png
--- a/WebApp/src/assets/icons/expand.png
+++ b/WebApp/src/assets/icons/expand.png
--- a/WebApp/src/index.html
+++ b/WebApp/src/index.html
@ -1,4 +1,5 @@
 <!DOCTYPE HTML>
+<html class="app-root">
 	<head>
 		<meta charset="UTF-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1"/>
@ -7,3 +8,4 @@
 	<body>
 		<p>Chargement...</p>
 	</body>
+</html>
--- a/WebApp/src/layout.css
+++ b/WebApp/src/layout.css
@ -1,3 +1,7 @@
+html.app-root {
+	font-size: 3.4vmin;
+}
+
 html, html > body {
 	height: 100%;
 	width: 100%;
@ -11,3 +15,7 @@ html > body {
 html > body > section {
 	flex: 1;
 }
+
+img.img-icon {
+	height: 1em;
+}
--- a/WebApp/src/layout.tsx
+++ b/WebApp/src/layout.tsx
@ -2,9 +2,44 @@ import m from 'mithril';

 require("./layout.css");

+import ExpandIcon from 'assets/icons/expand.png';
+import CompressIcon from 'assets/icons/compress.png';
+
 export default class Layout {
 	private menuActive = false;
 	private drawCount = 0;
+	private isFullscreen = false;
+	
+	fullscreen(fullscreen: boolean) {
+		if(fullscreen) {
+			let elem = document.documentElement as any;
+			if (elem.requestFullscreen) {
+				elem.requestFullscreen();
+			} else if (elem.webkitRequestFullscreen) { /* Safari */
+				elem.webkitRequestFullscreen();
+			} else if (elem.msRequestFullscreen) { /* IE11 */
+				elem.msRequestFullscreen();
+			}
+		}
+		else {
+			let doc = document as any;
+			if (doc.exitFullscreen) {
+				doc.exitFullscreen();
+			} else if (doc.webkitExitFullscreen) { /* Safari */
+				doc.webkitExitFullscreen();
+			} else if (doc.msExitFullscreen) { /* IE11 */
+				doc.msExitFullscreen();
+			}
+			setTimeout(() => {
+				window.scrollTo(0, 0);
+			}, 500);
+		}
+		this.isFullscreen = fullscreen;
+	}
+	
+	toggleFullscreen() {
+		this.fullscreen(!this.isFullscreen);
+	}
 	
 	view(vnode: m.Vnode) {
 		this.drawCount = this.drawCount + 1;
@ -13,6 +48,7 @@ export default class Layout {
 			<nav class="navbar" role="navigation" aria-label="main navigation">
 				<div class="navbar-brand">
 					<a class="navbar-item" href="#!/dashboard" onclick={() => { this.menuActive = false; return true; }}>Tableau de bord</a>
+					<a class="navbar-item" onclick={() => { this.toggleFullscreen(); }}><img class="img-icon" src={this.isFullscreen ? CompressIcon : ExpandIcon}></img></a>
 					
 					<a role="button" class={'navbar-burger ' + (this.menuActive ? 'is-active' : '')} onclick={() => this.menuActive = !this.menuActive} aria-label="menu" aria-expanded="false" data-target="mainMenu">
 						<span aria-hidden="true"></span>
--- a/WebApp/src/pages/raw-data/raw-data-page.tsx
+++ b/WebApp/src/pages/raw-data/raw-data-page.tsx
@ -27,6 +27,8 @@ export class RawDataPage extends Page {
 	view() {
 		return this.status
 			? <div class="raw-data-page">
+				<p>{window.screen.availWidth}x{window.screen.availHeight}, DPR={window.devicePixelRatio}</p>
+				
 				<p>Tension batterie : {this.status.batteryVoltage.toFixed(3)}V</p>
 				<p>Courant : {this.status.motorCurrent.toFixed(3)}A</p>
 				<p>Puissance : {(this.status.batteryVoltage * this.status.motorCurrent).toFixed(1)}W</p>