summaryrefslogtreecommitdiffhomepage
path: root/html
diff options
context:
space:
mode:
Diffstat (limited to 'html')
-rw-r--r--html/index.html6
-rw-r--r--html/whiteboard.css13
-rw-r--r--html/whiteboard.js65
3 files changed, 65 insertions, 19 deletions
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");
generated by Reichwein.IT Webserver and cgit