Add timer

author: pacien 2018-07-19 00:50:11 +0200
committer: pacien 2018-07-19 00:50:11 +0200
commit: d0f01fdec2c36cc491c5af0dec97081f548feaaa (patch)
tree: 77eef9ddbf5c998096912dfe00f2be74003cfd52
parent: 7a69146d0d7b667bae73970932114a0f8242fca5 (diff)
download: beamer-viewer-d0f01fdec2c36cc491c5af0dec97081f548feaaa.tar.gz
5 files changed, 66 insertions, 3 deletions
diff --git a/pointless/viewer/screen.js b/pointless/viewer/screen.js
index 0c1c3ad..28f4f55 100644
--- a/pointless/viewer/screen.js
+++ b/pointless/viewer/screen.js
@@ -8,7 +8,7 @@
 "use strict";
 class Screen {
-  constructor(window, secondary=false) {
+  constructor(window, secondary=false, withTimer=false) {
    this.window = window;
    this.secondary = secondary;
    this.canvas = window.document.getElementById("screen");
@@ -19,11 +19,18 @@ class Screen {
    this.window.addEventListener("resize", function() {
      self._refreshPage();
    });
+    this.timer = withTimer ? new Timer(window) : null;
+    this.pageTurnCount = 0;
  }
  setPage(page) {
+    if (this.pageTurnCount === 1 && this.timer != null)
+      this.timer.start();
    this.page = page;
    this._refreshPage();
+    this.pageTurnCount++;
  }
  _resizeScreen(ratio) {
diff --git a/pointless/viewer/stage.js b/pointless/viewer/stage.js
index 8c36981..68fdb45 100644
--- a/pointless/viewer/stage.js
+++ b/pointless/viewer/stage.js
@@ -17,8 +17,8 @@ class Stage {
    var self = this;
    this.projector.addEventListener("load", function() {
-      self.audienceScreen = new Screen(self.projector, false);
+      self.audienceScreen = new Screen(self.projector, false, false);
-      self.presenterScreen = new Screen(window, true);
+      self.presenterScreen = new Screen(window, true, true);
      onReady();
    });
diff --git a/pointless/viewer/timer.js b/pointless/viewer/timer.js
new file mode 100644
index 0000000..4f19986
--- /dev/null
+++ b/pointless/viewer/timer.js
@@ -0,0 +1,37 @@
+/*
+ * timer.js
+ * Part of Pointless Viewer, a Beamer presentation viewer
+ * Copyright 2018 Pacien TRAN-GIRARD
+ * License: GNU GPL v3
+ */
+"use strict";
+class Timer {
+  constructor(window) {
+    this.display = window.document.getElementById("timer");
+    this.startTime = null;
+    this._setDisplay(0);
+  }
+  start() {
+    if (this.startTime != null) return;
+    this.startTime = Date.now();
+    var self = this;
+    setInterval(function() {
+      self._runTimer();
+    }, 1000);
+  }
+  _runTimer() {
+    var timeDelta = Math.floor((Date.now() - this.startTime) / 1000);
+    this._setDisplay(timeDelta);
+  }
+  _setDisplay(seconds) {
+    var dateObj = new Date(null);
+    dateObj.setSeconds(seconds);
+    this.display.textContent = dateObj.toISOString().substr(11, 8);
+  }
+}
diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css
index dee9802..14db376 100644
--- a/pointless/viewer/viewer.css
+++ b/pointless/viewer/viewer.css
@@ -17,3 +17,19 @@ body {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
 }
+.notification {
+    position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.5rem 1rem;
+  border-radius: 1rem 1rem 0 0;
+  background-color: black;
+  font-family: sans-serif;
+  font-size: 1.6rem;
+}
+.notification:empty {
+  display: none;
+}
diff --git a/viewer.html b/viewer.html
index 88e4f2e..f4c6dde 100644
--- a/viewer.html
+++ b/viewer.html
@@ -16,8 +16,11 @@
  <body>
    <canvas id="screen"></canvas>
+    <div id="timer" class="notification"></div>
+    <div id="message" class="notification"></div>
    <script type="text/javascript" src="pointless/pdfjs/pdf.js"></script>
+    <script type="text/javascript" src="pointless/viewer/timer.js"></script>
    <script type="text/javascript" src="pointless/viewer/screen.js"></script>
    <script type="text/javascript" src="pointless/viewer/stage.js"></script>
    <script type="text/javascript" src="pointless/viewer/presentation.js"></script>
author	pacien	2018-07-19 00:50:11 +0200
committer	pacien	2018-07-19 00:50:11 +0200
commit	d0f01fdec2c36cc491c5af0dec97081f548feaaa (patch)
tree	77eef9ddbf5c998096912dfe00f2be74003cfd52
parent	7a69146d0d7b667bae73970932114a0f8242fca5 (diff)
download	beamer-viewer-d0f01fdec2c36cc491c5af0dec97081f548feaaa.tar.gz

diff --git a/pointless/viewer/screen.js b/pointless/viewer/screen.js index 0c1c3ad..28f4f55 100644 --- a/pointless/viewer/screen.js +++ b/pointless/viewer/screen.js
@@ -8,7 +8,7 @@
8	"use strict";	8	"use strict";
9		9
10	class Screen {	10	class Screen {
11	constructor(window, secondary=false) {	11	constructor(window, secondary=false, withTimer=false) {
12	this.window = window;	12	this.window = window;
13	this.secondary = secondary;	13	this.secondary = secondary;
14	this.canvas = window.document.getElementById("screen");	14	this.canvas = window.document.getElementById("screen");
@@ -19,11 +19,18 @@ class Screen {
19	this.window.addEventListener("resize", function() {	19	this.window.addEventListener("resize", function() {
20	self._refreshPage();	20	self._refreshPage();
21	});	21	});
		22
		23	this.timer = withTimer ? new Timer(window) : null;
		24	this.pageTurnCount = 0;
22	}	25	}
23		26
24	setPage(page) {	27	setPage(page) {
		28	if (this.pageTurnCount === 1 && this.timer != null)
		29	this.timer.start();
		30
25	this.page = page;	31	this.page = page;
26	this._refreshPage();	32	this._refreshPage();
		33	this.pageTurnCount++;
27	}	34	}
28		35
29	_resizeScreen(ratio) {	36	_resizeScreen(ratio) {


diff --git a/pointless/viewer/stage.js b/pointless/viewer/stage.js index 8c36981..68fdb45 100644 --- a/pointless/viewer/stage.js +++ b/pointless/viewer/stage.js
@@ -17,8 +17,8 @@ class Stage {
17		17
18	var self = this;	18	var self = this;
19	this.projector.addEventListener("load", function() {	19	this.projector.addEventListener("load", function() {
20	self.audienceScreen = new Screen(self.projector, false);	20	self.audienceScreen = new Screen(self.projector, false, false);
21	self.presenterScreen = new Screen(window, true);	21	self.presenterScreen = new Screen(window, true, true);
22	onReady();	22	onReady();
23	});	23	});
24		24


diff --git a/pointless/viewer/timer.js b/pointless/viewer/timer.js new file mode 100644 index 0000000..4f19986 --- /dev/null +++ b/pointless/viewer/timer.js
@@ -0,0 +1,37 @@
		1	/*
		2	* timer.js
		3	* Part of Pointless Viewer, a Beamer presentation viewer
		4	* Copyright 2018 Pacien TRAN-GIRARD
		5	* License: GNU GPL v3
		6	*/
		7
		8	"use strict";
		9
		10	class Timer {
		11	constructor(window) {
		12	this.display = window.document.getElementById("timer");
		13	this.startTime = null;
		14	this._setDisplay(0);
		15	}
		16
		17	start() {
		18	if (this.startTime != null) return;
		19	this.startTime = Date.now();
		20
		21	var self = this;
		22	setInterval(function() {
		23	self._runTimer();
		24	}, 1000);
		25	}
		26
		27	_runTimer() {
		28	var timeDelta = Math.floor((Date.now() - this.startTime) / 1000);
		29	this._setDisplay(timeDelta);
		30	}
		31
		32	_setDisplay(seconds) {
		33	var dateObj = new Date(null);
		34	dateObj.setSeconds(seconds);
		35	this.display.textContent = dateObj.toISOString().substr(11, 8);
		36	}
		37	}


diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css index dee9802..14db376 100644 --- a/pointless/viewer/viewer.css +++ b/pointless/viewer/viewer.css
@@ -17,3 +17,19 @@ body {
17	left: 50%;	17	left: 50%;
18	transform: translateX(-50%) translateY(-50%);	18	transform: translateX(-50%) translateY(-50%);
19	}	19	}
		20
		21	.notification {
		22	position: absolute;
		23	bottom: 0;
		24	left: 50%;
		25	transform: translateX(-50%);
		26	padding: 0.5rem 1rem;
		27	border-radius: 1rem 1rem 0 0;
		28	background-color: black;
		29	font-family: sans-serif;
		30	font-size: 1.6rem;
		31	}
		32
		33	.notification:empty {
		34	display: none;
		35	}


diff --git a/viewer.html b/viewer.html index 88e4f2e..f4c6dde 100644 --- a/viewer.html +++ b/viewer.html
@@ -16,8 +16,11 @@
16		16
17	<body>	17	<body>
18	<canvas id="screen"></canvas>	18	<canvas id="screen"></canvas>
		19	<div id="timer" class="notification"></div>
		20	<div id="message" class="notification"></div>
19		21
20	<script type="text/javascript" src="pointless/pdfjs/pdf.js"></script>	22	<script type="text/javascript" src="pointless/pdfjs/pdf.js"></script>
		23	<script type="text/javascript" src="pointless/viewer/timer.js"></script>
21	<script type="text/javascript" src="pointless/viewer/screen.js"></script>	24	<script type="text/javascript" src="pointless/viewer/screen.js"></script>
22	<script type="text/javascript" src="pointless/viewer/stage.js"></script>	25	<script type="text/javascript" src="pointless/viewer/stage.js"></script>
23	<script type="text/javascript" src="pointless/viewer/presentation.js"></script>	26	<script type="text/javascript" src="pointless/viewer/presentation.js"></script>