aboutsummaryrefslogtreecommitdiffstats
path: root/fg21sim/webui
diff options
context:
space:
mode:
authorAaron LI <aaronly.me@outlook.com>2016-11-02 14:27:28 +0800
committerAaron LI <aaronly.me@outlook.com>2016-11-02 14:27:28 +0800
commit4cb5f42fd11207482565ecf8dd8cebe033208ff7 (patch)
treef26b35d119406f245f22292aa21a5d1721f9cd66 /fg21sim/webui
parent68cbe49b04104ca6e1dcfb25165b2100f853449a (diff)
downloadfg21sim-4cb5f42fd11207482565ecf8dd8cebe033208ff7.tar.bz2
webui: Add preliminary WebSocket support to front-end UI
Add a label to the header banner to show the WebSocket support status and connection status.
Diffstat (limited to 'fg21sim/webui')
-rw-r--r--fg21sim/webui/static/css/main.css5
-rw-r--r--fg21sim/webui/static/js/websocket.js51
-rw-r--r--fg21sim/webui/templates/header.html5
-rw-r--r--fg21sim/webui/templates/index.html4
4 files changed, 65 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!!");
+ }
+});
diff --git a/fg21sim/webui/templates/header.html b/fg21sim/webui/templates/header.html
index 6309b50..b086515 100644
--- a/fg21sim/webui/templates/header.html
+++ b/fg21sim/webui/templates/header.html
@@ -12,6 +12,11 @@
</a>
<span class="description">Foregrounds Simulation for EoR 21cm Signal Detection</span>
+ <span id="ws-status" class="label label-default">
+ <span class="icon fa fa-question-circle" aria-hidden="true"></span>
+ <span class="text">N/A</span>
+ </span>
+
<ul class="navigation-list float-right">
<li class="navigation-item"><a class="navigation-link button button-outline" href="#configs" title="Configurations"><span class="fa fa-wrench" aria-hidden="true"></span> Configurations</a></li>
<li class="navigation-item"><a class="navigation-link button button-outline" href="#console" title="Console"><span class="fa fa-gamepad" aria-hidden="true"></span> Console</a></li>
diff --git a/fg21sim/webui/templates/index.html b/fg21sim/webui/templates/index.html
index 105c4a0..8eb65cd 100644
--- a/fg21sim/webui/templates/index.html
+++ b/fg21sim/webui/templates/index.html
@@ -28,3 +28,7 @@
{% block footer %}
{% include "footer.html" %}
{% end %}
+
+{% block extra_script %}
+ <script src="{{ static_url('js/websocket.js') }}"></script>
+{% end %}