From 2a4d96188afa83110b30931559732d4fd9bacab2 Mon Sep 17 00:00:00 2001 From: Roland Reichwein Date: Tue, 22 Nov 2022 17:07:44 +0100 Subject: First working whiteboard --- html/index.html | 7 +-- html/whiteboard.js | 158 ++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 108 insertions(+), 57 deletions(-) (limited to 'html') diff --git a/html/index.html b/html/index.html index 780660a..64eae90 100644 --- a/html/index.html +++ b/html/index.html @@ -14,12 +14,7 @@

-

Contact

- Roland Reichwein
- Hauptstr. 101a
- 82008 Unterhaching
- mail@reichwein.it
- https://www.reichwein.it
+ Reichwein.IT Whiteboard by https://www.reichwein.it
diff --git a/html/whiteboard.js b/html/whiteboard.js index dd81ff0..2b35180 100644 --- a/html/whiteboard.js +++ b/html/whiteboard.js @@ -1,40 +1,81 @@ // started on main page load function init() { - - // Connect "Enter" in text field with Button click - var url = document.getElementById("url"); - url.addEventListener("keyup", function(event) { - if (event.keyCode === 13) { - event.preventDefault(); - on_start(); - } - }); + init_board(); } -function set_status(message) { - if (message == "") - message = " "; +function init_board() { + var xhr = new XMLHttpRequest(); + + // run on data received back + xhr.onreadystatechange = function() { + if (this.readyState == 3) { + //set_status("Please wait while downloading " + filename + " ..."); + return; + } + if (this.readyState != 4) { + return; + } + if (this.status != 200) { + //set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText); + return; + } + + var file = new Blob([this.response]); + reader = new FileReader(); + reader.onload = function() { + var board = document.getElementById("board"); + board.innerHTML = reader.result; + + // Initialization done. Now we can start modifying. + board.addEventListener("input", function() {on_modify(); }); + + setInterval(function() {checkupdate();}, 2000); + } + + reader.readAsBinaryString(file); + + //set_status(""); // OK + } + + var parser = new DOMParser(); + var xmlDocument = parser.parseFromString("", "text/xml"); + + var requestElement = xmlDocument.getElementsByTagName("request")[0]; + + var commandElement = xmlDocument.createElement("command"); + commandElement.appendChild(document.createTextNode("getfile")); + requestElement.appendChild(commandElement); + + var idElement = xmlDocument.createElement("id"); + idElement.appendChild(document.createTextNode("id1")); + requestElement.appendChild(idElement); + + xhr.open("POST", "whiteboard.fcgi", true); + xhr.setRequestHeader("Content-type", "text/xml"); + xhr.responseType = 'blob'; + xhr.send(xmlDocument); - document.getElementById("status").innerHTML = message; + //set_status("Please wait while server prepares " + filename + " ..."); } -// started on button click: get filename -function on_start() { +function on_modify() { var xhr = new XMLHttpRequest(); - + // run on data received back xhr.onreadystatechange = function() { + if (this.readyState == 3) { + //set_status("Please wait while downloading " + filename + " ..."); + return; + } if (this.readyState != 4) { return; } if (this.status != 200) { - set_status("Server Error while retrieving filename, " + filename + ", status: " + this.status + " " + this.statusText); + //set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText); return; } - var filename = this.responseText; - - get_file(filename); + //set_status(""); // OK } var parser = new DOMParser(); @@ -43,50 +84,65 @@ function on_start() { var requestElement = xmlDocument.getElementsByTagName("request")[0]; var commandElement = xmlDocument.createElement("command"); - commandElement.appendChild(document.createTextNode("getfilename")); + commandElement.appendChild(document.createTextNode("modify")); requestElement.appendChild(commandElement); - var urlElement = xmlDocument.createElement("url"); - urlElement.appendChild(document.createTextNode(document.getElementById("url").value)); - requestElement.appendChild(urlElement); + var idElement = xmlDocument.createElement("id"); + idElement.appendChild(document.createTextNode("id1")); + requestElement.appendChild(idElement); + + var dataElement = xmlDocument.createElement("data"); + dataElement.appendChild(document.createTextNode(document.getElementById("board").value)); + requestElement.appendChild(dataElement); - var formatElement = xmlDocument.createElement("format"); - formatElement.appendChild(document.createTextNode(document.getElementById("mp3").checked ? "mp3" : "mp4")); - requestElement.appendChild(formatElement); - xhr.open("POST", "whiteboard.fcgi", true); xhr.setRequestHeader("Content-type", "text/xml"); - xhr.responseType = 'text'; + xhr.responseType = 'blob'; xhr.send(xmlDocument); - set_status("Please wait while retrieving filename..."); + //set_status("Please wait while server prepares " + filename + " ..."); } -// started on button click: get file -function get_file(filename) { - var xhr = new XMLHttpRequest(); +// checksum of string +function checksum32(s) { + var result = 0; + for (var i = 0; i < s.length; i++) { + result = ((((result >>> 1) | ((result & 1) << 31)) | 0) ^ (s.charCodeAt(i) & 0xFF)) | 0; + } + return (result & 0x7FFFFFFF) | 0; +} +// gets called by regular polling +function checkupdate() { + var xhr = new XMLHttpRequest(); + // run on data received back xhr.onreadystatechange = function() { if (this.readyState == 3) { - set_status("Please wait while downloading " + filename + " ..."); + //set_status("Please wait while downloading " + filename + " ..."); return; } if (this.readyState != 4) { return; } if (this.status != 200) { - set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText); + //set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText); return; } - var a = document.getElementById("download-a"); - a.setAttribute("download", filename); - var file = new Blob([this.response]); - a.href = window.URL.createObjectURL(file); - a.click(); - - set_status(""); // OK + // no change if response is text/plain + if (this.getResponseHeader("Content-Type") == "application/octet-stream") { + var file = new Blob([this.response]); + reader = new FileReader(); + reader.onload = function() { + var board = document.getElementById("board"); + board.value = reader.result; + } + + reader.readAsBinaryString(file); + } + + //set_status(""); // OK } var parser = new DOMParser(); @@ -95,22 +151,22 @@ function get_file(filename) { var requestElement = xmlDocument.getElementsByTagName("request")[0]; var commandElement = xmlDocument.createElement("command"); - commandElement.appendChild(document.createTextNode("getfile")); + commandElement.appendChild(document.createTextNode("checkupdate")); requestElement.appendChild(commandElement); - var urlElement = xmlDocument.createElement("url"); - urlElement.appendChild(document.createTextNode(document.getElementById("url").value)); - requestElement.appendChild(urlElement); + var idElement = xmlDocument.createElement("id"); + idElement.appendChild(document.createTextNode("id1")); + requestElement.appendChild(idElement); + + var checksumElement = xmlDocument.createElement("checksum"); + checksumElement.appendChild(document.createTextNode(checksum32(document.getElementById("board").value))); + requestElement.appendChild(checksumElement); - var formatElement = xmlDocument.createElement("format"); - formatElement.appendChild(document.createTextNode(document.getElementById("mp3").checked ? "mp3" : "mp4")); - requestElement.appendChild(formatElement); - xhr.open("POST", "whiteboard.fcgi", true); xhr.setRequestHeader("Content-type", "text/xml"); xhr.responseType = 'blob'; xhr.send(xmlDocument); - set_status("Please wait while server prepares " + filename + " ..."); + //set_status("Please wait while server prepares " + filename + " ..."); } -- cgit v1.2.3