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

font size relative to screen size 

added button to toggle fullscreen mode
master
Youen Toupin 3 years ago
parent
47e1a429b9
commit
47443e7e4d
7 changed files with 57 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      WebApp/src/app.ts
  2. BIN
      WebApp/src/assets/icons/compress.png
  3. BIN
      WebApp/src/assets/icons/expand.png
  4. 10
      WebApp/src/index.html
  5. 8
      WebApp/src/layout.css
  6. 36
      WebApp/src/layout.tsx
  7. 2
      WebApp/src/pages/raw-data/raw-data-page.tsx

2
WebApp/src/app.ts
Unescape 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 428 B

10
WebApp/src/index.html
Unescape View File

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

8
WebApp/src/layout.css
Unescape 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
Unescape 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
Unescape 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>

Write Preview
Loading…
Cancel
Save