Add welcome screen

author: pacien 2018-07-19 12:32:20 +0200
committer: pacien 2018-07-19 12:32:20 +0200
commit: feed2b79f25899d4655b1391b2ff58f8147303af (patch)
tree: c154c369cf24624271fbf76ece78c33d7005eb24
parent: 8931cc9418be09206de86f6081b61d591ce8e862 (diff)
download: beamer-viewer-feed2b79f25899d4655b1391b2ff58f8147303af.tar.gz
3 files changed, 38 insertions, 4 deletions
diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css
index be4f876..57d95f4 100644
--- a/pointless/viewer/viewer.css
+++ b/pointless/viewer/viewer.css
@@ -13,10 +13,22 @@ html, body {
  height: 100%;
 }
-#fileInput {
+#welcomeScreen {
  display: none;
 }
+#welcomeScreen table {
+  width: 100%;
+  border-collapse: collapse;
+}
+#welcomeScreen table td {
+  text-align: center;
+  border: 1px solid white;
+  width: 50%;
+  height: 8rem;
+}
 .centered {
  position: absolute;
  top: 50%;
diff --git a/pointless/viewer/viewer.js b/pointless/viewer/viewer.js
index 78035ee..9e92c2c 100644
--- a/pointless/viewer/viewer.js
+++ b/pointless/viewer/viewer.js
@@ -9,13 +9,15 @@
 class Viewer {
  constructor() {
+    this.welcomeScreen = document.getElementById("welcomeScreen");
    this.fileInput = document.getElementById("fileInput");
-    this.fileInput.style.display = "block";
+    this.welcomeScreen.style.display = "block";
    this._listenForInput();
  }
  load(source) {
-    this.fileInput.style.display = "none";
+    this.welcomeScreen.style.display = "none";
    pdfjsLib.getDocument(source).then(function(pdf) {
      var presentation = new Presentation(pdf);
    });
diff --git a/viewer.html b/viewer.html
index df529ca..99accb4 100644
--- a/viewer.html
+++ b/viewer.html
@@ -16,7 +16,27 @@
  <body>
    <canvas id="screen" class="centered"></canvas>
-    <input id="fileInput" class="centered" type="file" multiple="false"/>
+    <div id="welcomeScreen" class="centered">
+      <h1>Pointless Viewer</h1>
+      
+      <p>This viewer accepts double-width PDF presentations of the following shape:</p>
+      <table>
+        <tr>
+          <td>LEFT<br>(slides)</td>
+          <td>RIGHT<br>(notes)</td>
+        </tr>
+      </table>
+      <p>
+        (LaTeX-Beamer users may use
+        <code>\setbeameroption{show notes on second screen=right}</code>)
+      </p>
+      <p>Please select a PDF presentation file to open.</p>
+      <input id="fileInput" type="file" multiple="false"/>
+    </div>
+    
    <div id="timer" class="notification"></div>
    <div id="message" class="notification"></div>
author	pacien	2018-07-19 12:32:20 +0200
committer	pacien	2018-07-19 12:32:20 +0200
commit	feed2b79f25899d4655b1391b2ff58f8147303af (patch)
tree	c154c369cf24624271fbf76ece78c33d7005eb24
parent	8931cc9418be09206de86f6081b61d591ce8e862 (diff)
download	beamer-viewer-feed2b79f25899d4655b1391b2ff58f8147303af.tar.gz

diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css index be4f876..57d95f4 100644 --- a/pointless/viewer/viewer.css +++ b/pointless/viewer/viewer.css
@@ -13,10 +13,22 @@ html, body {
13	height: 100%;	13	height: 100%;
14	}	14	}
15		15
16	#fileInput {	16	#welcomeScreen {
17	display: none;	17	display: none;
18	}	18	}
19		19
		20	#welcomeScreen table {
		21	width: 100%;
		22	border-collapse: collapse;
		23	}
		24
		25	#welcomeScreen table td {
		26	text-align: center;
		27	border: 1px solid white;
		28	width: 50%;
		29	height: 8rem;
		30	}
		31
20	.centered {	32	.centered {
21	position: absolute;	33	position: absolute;
22	top: 50%;	34	top: 50%;


diff --git a/pointless/viewer/viewer.js b/pointless/viewer/viewer.js index 78035ee..9e92c2c 100644 --- a/pointless/viewer/viewer.js +++ b/pointless/viewer/viewer.js
@@ -9,13 +9,15 @@
9		9
10	class Viewer {	10	class Viewer {
11	constructor() {	11	constructor() {
		12	this.welcomeScreen = document.getElementById("welcomeScreen");
12	this.fileInput = document.getElementById("fileInput");	13	this.fileInput = document.getElementById("fileInput");
13	this.fileInput.style.display = "block";	14
		15	this.welcomeScreen.style.display = "block";
14	this._listenForInput();	16	this._listenForInput();
15	}	17	}
16		18
17	load(source) {	19	load(source) {
18	this.fileInput.style.display = "none";	20	this.welcomeScreen.style.display = "none";
19	pdfjsLib.getDocument(source).then(function(pdf) {	21	pdfjsLib.getDocument(source).then(function(pdf) {
20	var presentation = new Presentation(pdf);	22	var presentation = new Presentation(pdf);
21	});	23	});


diff --git a/viewer.html b/viewer.html index df529ca..99accb4 100644 --- a/viewer.html +++ b/viewer.html
@@ -16,7 +16,27 @@
16		16
17	<body>	17	<body>
18	<canvas id="screen" class="centered"></canvas>	18	<canvas id="screen" class="centered"></canvas>
19	<input id="fileInput" class="centered" type="file" multiple="false"/>	19
		20	<div id="welcomeScreen" class="centered">
		21	<h1>Pointless Viewer</h1>
		22
		23	<p>This viewer accepts double-width PDF presentations of the following shape:</p>
		24	<table>
		25	<tr>
		26	<td>LEFT<br>(slides)</td>
		27	<td>RIGHT<br>(notes)</td>
		28	</tr>
		29	</table>
		30
		31	<p>
		32	(LaTeX-Beamer users may use
		33	<code>\setbeameroption{show notes on second screen=right}</code>)
		34	</p>
		35
		36	<p>Please select a PDF presentation file to open.</p>
		37	<input id="fileInput" type="file" multiple="false"/>
		38	</div>
		39
20	<div id="timer" class="notification"></div>	40	<div id="timer" class="notification"></div>
21	<div id="message" class="notification"></div>	41	<div id="message" class="notification"></div>
22		42