From f44d36b05e43cabde31aeaba5d25fded140345a1 Mon Sep 17 00:00:00 2001
From: Roland Reichwein <mail@reichwein.it>
Date: Fri, 27 Jan 2023 19:42:08 +0100
Subject: Added diff.cpp

---
 html/index.html     |  6 +++--
 html/whiteboard.css | 13 ++++++++++-
 html/whiteboard.js  | 65 ++++++++++++++++++++++++++++++++++++++++-------------
 3 files changed, 65 insertions(+), 19 deletions(-)

(limited to 'html')

diff --git a/html/index.html b/html/index.html
index f06ea01..4d1fb2a 100644
--- a/html/index.html
+++ b/html/index.html
@@ -19,10 +19,12 @@
 			<br/>
 			<br/>
 			<button class="button" onclick="on_new_page();">New page</button>
-			<button class="button" onclick="on_qrcode();">QR code</button>
+			<button class="button" onclick="on_qrcode_click();">QR code</button>
+			<span id="connecting">Connecting...</span>
+			<button class="buttonred" id="reconnect" onclick="on_reconnect_click();" hidden>Reconnect</button>
 			<br/>
 			<br/>
-			Reichwein.IT Whiteboard by <a href="https://www.reichwein.it">https://www.reichwein.it</a><br/>
+                        Reichwein.IT Whiteboard <span id="version"></span> by <a href="https://www.reichwein.it">https://www.reichwein.it</a><br/>
 		</div>
 
 		<a id="download-a" hidden></a>
diff --git a/html/whiteboard.css b/html/whiteboard.css
index 55e68cf..4de9b46 100644
--- a/html/whiteboard.css
+++ b/html/whiteboard.css
@@ -1,5 +1,5 @@
 body {
-	font-family: "sans-serif";
+	font-family: sans-serif;
 }
 
 figcaption {
@@ -100,6 +100,17 @@ img.banner {
 	cursor: pointer;
 }
 
+.buttonred {
+        color:#FFFFFF;
+        background-color:#B05050;
+        text-decoration: none;
+        padding: 15px 20px;
+        font-size: 16px;
+        border: none;
+        border-radius: 6px;
+	cursor: pointer;
+}
+
 @media only screen and (min-width: 1px) and (max-width: 630px) {
 
 .qrwindow {
diff --git a/html/whiteboard.js b/html/whiteboard.js
index 9610468..83601b8 100644
--- a/html/whiteboard.js
+++ b/html/whiteboard.js
@@ -30,8 +30,13 @@ function on_getfile(data, rev, pos)
 	if (board.value != data) {
 		board.value = data;
 	}
-	textAreaSetPos("board", pos);
 	revision = rev;
+	textAreaSetPos("board", pos);
+}
+
+function on_getpos(pos)
+{
+	textAreaSetPos("board", pos);
 }
 
 function on_newid(id)
@@ -42,13 +47,17 @@ function on_newid(id)
 
 function on_qrcode(png)
 {
-	var blob = new Blob([png], {type: 'image/png'});
-	var url = URL.createObjectURL(blob);
+	var url = "data:image/png;base64," + png;
 	var img = document.getElementById("qrcode");
 	img.src = url;
 	showQRWindow();
 }
 
+function on_version(version)
+{
+	document.getElementById("version").textContent = version;
+}
+
 function on_modify_ack(rev)
 {
 	revision = rev;
@@ -63,13 +72,17 @@ function on_message(e) {
 	if (type == "getfile") {
 		on_getfile(xmlDocument.getElementsByTagName("data")[0].textContent,
 			   parseInt(xmlDocument.getElementsByTagName("revision")[0].textContent),
-			   parseInt(xmlDocument.getElementsByTagName("cursorpos")[0].textContent));
+		           parseInt(xmlDocument.getElementsByTagName("pos")[0].textContent));
+	} else if (type == "getpos") {
+		on_getpos(parseInt(xmlDocument.getElementsByTagName("pos")[0].textContent));
 	} else if (type == "modify") {
 		on_modify_ack(parseInt(xmlDocument.getElementsByTagName("revision")[0].textContent));
 	} else if (type == "newid") {
 		on_newid(xmlDocument.getElementsByTagName("id")[0].textContent);
 	} else if (type == "qrcode") {
 		on_qrcode(xmlDocument.getElementsByTagName("png")[0].textContent);
+	} else if (type == "version") {
+		on_version(xmlDocument.getElementsByTagName("version")[0].textContent);
 	} else if (type == "error") {
 		alert(xmlDocument.getElementsByTagName("message")[0].textContent);
 	} else {
@@ -88,12 +101,15 @@ function handleSelection() {
   }
 }
 
-function init_board() {
+function connect_websocket() {
+	document.getElementById("reconnect").style.display = 'none';
+	document.getElementById("connecting").style.display = 'block';
 	var newlocation = location.origin + location.pathname;
 	newlocation = newlocation.replace(/^http/, 'ws');
 	if (newlocation.slice(-1) != "/")
 		newlocation += "/";
 	newlocation += "websocket";
+
 	websocket = new WebSocket(newlocation);
 
 	websocket.onmessage = function(e) { on_message(e); };
@@ -105,24 +121,37 @@ function init_board() {
 			return;
 		}
 
-		var board = document.getElementById("board");
-		board.addEventListener("input", function() {on_input(); });
-                // Need this workaround (different from direct on_selectionchange) for Chrome.
-		// Otherwise, callback will not be called on Chrome.
-		document.addEventListener("selectionchange", handleSelection);
-		//board.addEventListener("selectionchange", function() {on_selectionchange(); });
-
+		websocket.send("<request><command>getversion</command></request>");
 		websocket.send("<request><command>getfile</command><id>" + get_id() + "</id></request>");
+		document.getElementById("connecting").style.display = 'none';
 	};
 	
 	websocket.onclose = function(e) {
 		alert("Server connection closed.");
+		document.getElementById("reconnect").style.display = 'inline';
 	};
 
 	websocket.onerror = function(e) {
 		alert("Error: Server connection closed.");
+		document.getElementById("reconnect").style.display = 'inline';
 	};
 
+}
+
+function on_reconnect_click() {
+	connect_websocket();
+}
+
+function init_board() {
+	connect_websocket();
+	
+	var board = document.getElementById("board");
+	board.addEventListener("input", function() {on_input(); });
+	// Need this workaround (different from direct on_selectionchange) for Chrome.
+	// Otherwise, callback will not be called on Chrome.
+	document.addEventListener("selectionchange", handleSelection);
+	//board.addEventListener("selectionchange", function() {on_selectionchange(); });
+
         document.getElementById("qrwindow").onclick = function() {
          hideQRWindow();
         }
@@ -173,6 +202,10 @@ function on_input()
 	dataElement.appendChild(document.createTextNode(document.getElementById("board").value));
 	requestElement.appendChild(dataElement);
 
+	var posElement = xmlDocument.createElement("pos");
+	posElement.appendChild(document.createTextNode(document.getElementById("board").selectionStart));
+	requestElement.appendChild(posElement);
+
 	websocket.send(new XMLSerializer().serializeToString(xmlDocument));
 }
 
@@ -192,9 +225,9 @@ function on_selectionchange(pos)
 	idElement.appendChild(document.createTextNode(get_id()));
 	requestElement.appendChild(idElement);
 
-	var dataElement = xmlDocument.createElement("pos");
-	dataElement.appendChild(document.createTextNode(pos));
-	requestElement.appendChild(dataElement);
+	var posElement = xmlDocument.createElement("pos");
+	posElement.appendChild(document.createTextNode(pos));
+	requestElement.appendChild(posElement);
 
 	websocket.send(new XMLSerializer().serializeToString(xmlDocument));
 }
@@ -209,7 +242,7 @@ function textAreaSetPos(id, pos)
 }
 
 // HTML button
-function on_qrcode()
+function on_qrcode_click()
 {
 	var parser = new DOMParser();
 	var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
-- 
cgit v1.2.3