aboutsummaryrefslogtreecommitdiffstats
path: root/fg21sim/webui/static
diff options
context:
space:
mode:
Diffstat (limited to 'fg21sim/webui/static')
-rw-r--r--fg21sim/webui/static/css/main.css5
-rw-r--r--fg21sim/webui/static/js/websocket.js51
2 files changed, 56 insertions, 0 deletions
diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index 4dcffb8..4672298 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -120,6 +120,7 @@ header.masthead {
}
.navigation .description {
font-style: italic;
+ margin-right: 2.5rem;
}
.navigation .navigation-list {
list-style: none;
@@ -247,6 +248,10 @@ label, legend {
background-color: #d9534f;
}
+.label .icon {
+ margin-right: 0.2rem;
+}
+
/**
* Button styles
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
new file mode 100644
index 0000000..08f128f
--- /dev/null
+++ b/fg21sim/webui/static/js/websocket.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2016 Weitian LI <liweitianux@live.com>
+ * MIT license
+ *
+ * WebSocket codes for the Web UI of "fg21sim"
+ */
+
+
+$(document).ready(function () {
+ /**
+ * Check `WebSocket` support
+ */
+ if (window.WebSocket) {
+ // WebSocket supported
+ var createWebSocket = function (uri) {
+ $("#ws-status .text").text("Supported");
+ var proto = {"http:": "ws:", "https:": "wss:"}[location.protocol];
+ var host = location.hostname;
+ var port = location.port;
+ var url = proto + "//" + host + ":" + port + uri;
+ var socket = new WebSocket(url);
+ return socket;
+ };
+
+ var ws = createWebSocket("/ws");
+ ws.onopen = function () {
+ $("#ws-status").removeClass("label-default label-danger")
+ .addClass("label-success");
+ $("#ws-status .icon").removeClass("fa-question-circle fa-warning")
+ .addClass("fa-check-circle");
+ $("#ws-status .text").text("Connected");
+ };
+ ws.onclose = function () {
+ $("#ws-status").removeClass("label-default label-success")
+ .addClass("label-danger");
+ $("#ws-status .icon").removeClass("fa-question-circle fa-check-circle")
+ .addClass("fa-warning");
+ $("#ws-status .text").text("Disconnected!");
+ };
+ ws.onmessage = function (e) {
+ console.log("WS received: " + e.data);
+ };
+
+ } else {
+ // WebSocket NOT supported
+ $("#ws-status").removeClass("label-default").addClass("label-danger");
+ $("#ws-status .icon").removeClass("fa-question-circle")
+ .addClass("fa-times-circle");
+ $("#ws-status .text").text("Unsupported!!");
+ }
+});