diff options
| -rw-r--r-- | fg21sim/webui/static/css/main.css | 5 | ||||
| -rw-r--r-- | fg21sim/webui/static/js/websocket.js | 51 | ||||
| -rw-r--r-- | fg21sim/webui/templates/header.html | 5 | ||||
| -rw-r--r-- | fg21sim/webui/templates/index.html | 4 |
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 %} |