youen/vehicle-monitor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

font size relative to screen size

Browse Source 
added button to toggle fullscreen mode
This commit is contained in:
Youen Toupin 2022-05-26 19:32:40 +02:00
parent 47e1a429b9
commit 47443e7e4d
7 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
WebApp/src/app.ts
View File

@ -6,7 +6,7 @@ import { DashboardPage } from 'pages/dashboard/dashboard-page';
require('../node_modules/bulma/css/bulma.css'); require('../node_modules/bulma/css/bulma.css');
m.route(document.body, "/raw", { m.route(document.body, "/dashboard", {
"/dashboard": { render: () => m(Layout, m(DashboardPage)) }, "/dashboard": { render: () => m(Layout, m(DashboardPage)) },
"/raw": { render: () => m(Layout, m(RawDataPage)) }, "/raw": { render: () => m(Layout, m(RawDataPage)) },
}); });

BIN
WebApp/src/assets/icons/compress.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 B

BIN
WebApp/src/assets/icons/expand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 428 B

18
WebApp/src/index.html
View File

@ -1,9 +1,11 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<head> <html class="app-root">
<meta charset="UTF-8"/> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta charset="UTF-8"/>
<title>Ordinateur de bord</title> <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head> <title>Ordinateur de bord</title>
<body> </head>
<p>Chargement...</p> <body>
</body> <p>Chargement...</p>
</body>
</html>

8
WebApp/src/layout.css
View File

@ -1,3 +1,7 @@
html.app-root {
font-size: 3.4vmin;
}
html, html > body { html, html > body {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -11,3 +15,7 @@ html > body {
html > body > section { html > body > section {
flex: 1; flex: 1;
} }
img.img-icon {
height: 1em;
}

36
WebApp/src/layout.tsx
View File

@ -2,9 +2,44 @@ import m from 'mithril';
require("./layout.css"); require("./layout.css");
import ExpandIcon from 'assets/icons/expand.png';
import CompressIcon from 'assets/icons/compress.png';
export default class Layout { export default class Layout {
private menuActive = false; private menuActive = false;
private drawCount = 0; 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) { view(vnode: m.Vnode) {
this.drawCount = this.drawCount + 1; this.drawCount = this.drawCount + 1;
@ -13,6 +48,7 @@ export default class Layout {
<nav class="navbar" role="navigation" aria-label="main navigation"> <nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="#!/dashboard" onclick={() => { this.menuActive = false; return true; }}>Tableau de bord</a> <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"> <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> <span aria-hidden="true"></span>

2
WebApp/src/pages/raw-data/raw-data-page.tsx
View File

@ -27,6 +27,8 @@ export class RawDataPage extends Page {
view() { view() {
return this.status return this.status
? <div class="raw-data-page"> ? <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>Tension batterie : {this.status.batteryVoltage.toFixed(3)}V</p>
<p>Courant : {this.status.motorCurrent.toFixed(3)}A</p> <p>Courant : {this.status.motorCurrent.toFixed(3)}A</p>
<p>Puissance : {(this.status.batteryVoltage * this.status.motorCurrent).toFixed(1)}W</p> <p>Puissance : {(this.status.batteryVoltage * this.status.motorCurrent).toFixed(1)}W</p>