diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/img/favicon.ico | bin | 0 -> 2734 bytes | |||
| -rw-r--r-- | www/img/helsinki.png | bin | 0 -> 5005 bytes | |||
| -rw-r--r-- | www/index.html | 32 | ||||
| -rw-r--r-- | www/js/clock.js | 139 | ||||
| -rw-r--r-- | www/styles/main.css | 96 |
5 files changed, 267 insertions, 0 deletions
diff --git a/www/img/favicon.ico b/www/img/favicon.ico Binary files differnew file mode 100644 index 0000000..d8432d4 --- /dev/null +++ b/www/img/favicon.ico diff --git a/www/img/helsinki.png b/www/img/helsinki.png Binary files differnew file mode 100644 index 0000000..ec74fc3 --- /dev/null +++ b/www/img/helsinki.png diff --git a/www/index.html b/www/index.html new file mode 100644 index 0000000..7a55666 --- /dev/null +++ b/www/index.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>Radio Helsinki - Automation Status/Export</title> + <meta charset="utf-8"> + <meta name="author" content="Christian Pointner <equinox@helsinki.at>"> + + <link rel="shortcut icon" href="/img/favicon.ico" /> + <link href="/styles/main.css" rel="stylesheet"> + <script src="/js/clock.js"></script> + </head> + <body> + <h1>Radio Helsinki - Automation Status</h1> + <div id="container"> + <img src="/img/helsinki.png" alt="Radio Helsinki Logo" /> + <h1>Radio Helsinki - Automation Status</h1> + + <div id="clock"> + <span class="current-week"></span> + <span class="clock-date"></span> + <span class="clock-time"></span> + </div> + </div> + + <script type="text/javascript"> + clock_init(); + drawClock('Do, 1.1.1970', '00:00:00', 0); + clock_add_callback(drawClock); + </script> + + </body> +</html> diff --git a/www/js/clock.js b/www/js/clock.js new file mode 100644 index 0000000..cd6b6ce --- /dev/null +++ b/www/js/clock.js @@ -0,0 +1,139 @@ +/* + * rhrdweb + * + * Copyright (C) 2016 Christian Pointner <equinox@helsinki.at> + * + * This file is part of rhrdweb. + * + * rhrdweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * rhrdweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with rhrdweb. If not, see <http://www.gnu.org/licenses/>. + */ + +'use strict'; + +function Clock() { + this.draw_callbacks = $.Callbacks('unique'); + + this.last_message = { t1: 0, t2: 0, t3: 0, t4: 0, tz_offset: 3600 }; + this.clock_offset = 0; + this.clock_rtt = 0; + this.state = 'NEW'; + + this.redraw = function() { + var rdtime_ms = (+new Date()) + (this.last_message.tz_offset * 1000) + this.clock_offset; + + var rdtime = new Date(rdtime_ms); + var date_str = weekday_short[rdtime.getUTCDay()] + ', '; + date_str += rdtime.getUTCDate() + '.' + (rdtime.getUTCMonth() + 1) + '.' + rdtime.getUTCFullYear(); + + var time_str = (rdtime.getUTCHours() > 9 ? ' ' : ' 0') + rdtime.getUTCHours(); + time_str += (rdtime.getUTCMinutes() > 9 ? ':' : ':0') + rdtime.getUTCMinutes(); + time_str += (rdtime.getUTCSeconds() > 9 ? ':' : ':0') + rdtime.getUTCSeconds(); + + this.draw_callbacks.fireWith(window, [date_str, time_str, get_rd_week(rdtime_ms)]); + } + + this.addCallback = function(cb) { + this.draw_callbacks.add(cb); + } + + this.ntp_update = function(event) { + var t4 = (+new Date()); + + var msg = JSON.parse(event.data); + msg.t4 = t4; + this.last_message = msg; + this.clock_offset = ((msg.t2 - msg.t1) + (msg.t3 - msg.t4)) / 2; + this.clock_rtt = (msg.t4 - msg.t1) - (msg.t3 - msg.t2); +// console.log('got new ntp message from rhrdtime (rtt=' + this.clock_rtt + ' ms): new offset = ' + this.clock_offset + ' ms'); + } + + this.ntp_request = function() { + this.sock.send(JSON.stringify({ t1: (+new Date()), t2: 0, t3: 0, t4: 0, tz_offset: 0, week: 0 })); + } + + this.sock_onopen = function() { +// console.log('clock websocket connection established'); + this.state = 'CONNECTED'; + this.ntp_request(); + this.interval_request = setInterval(this.ntp_request.bind(this), 2000); + } + + this.sock_onclose = function(event) { + if(this.state == 'STOPPED') { + delete this.sock; + } else { +// console.log('clock websocket closed with code ' + event.code + ', trying reconnect...'); + clearInterval(this.interval_request); + delete this.interval_request; + this.sock.close(); + delete this.sock; + setTimeout(this.connect.bind(this), 1000); + this.state = 'RECONNECTING'; + } + } + + this.connect = function() { + this.sock = new WebSocket('wss://' + window.location.host + '/ntp'); + this.sock.onmessage = this.ntp_update.bind(this); + this.sock.onopen = this.sock_onopen.bind(this); + this.sock.onclose = this.sock_onclose.bind(this); + this.state = 'CONNECTING'; + } + + this.start = function() { + this.connect(); + this.interval_redraw = setInterval(this.redraw.bind(this), 200); + } + + this.stop = function() { + this.state = 'STOPPED'; + clearInterval(this.interval_redraw); + delete this.interval_redraw; + clearInterval(this.interval_request); + delete this.interval_request; + this.sock.close(); + } +} + +var clock = new Clock(); + +function clock_init() { + clock.start(); +} + +function clock_add_callback(cb) { + clock.addCallback(cb); +} + +function drawClock(date, time, week) { + $('#clock span.clock-date').text(date); + $('#clock span.clock-time').text(time); + var weekspan = $('#clock span.current-week').removeClass().addClass('current-week').addClass('label'); + switch(week) { + case 1: + weekspan.addClass('label-info').text('Woche 1'); + break; + case 2: + weekspan.addClass('label-warning').text('Woche 2'); + break; + case 3: + weekspan.addClass('label-success').text('Woche 3'); + break; + case 4: + weekspan.addClass('label-danger').text('Woche 4'); + break; + default: + weekspan.addClass('label-default').text('Fehler'); + } +} diff --git a/www/styles/main.css b/www/styles/main.css new file mode 100644 index 0000000..d0bc42f --- /dev/null +++ b/www/styles/main.css @@ -0,0 +1,96 @@ +/* + * rhrdweb + * + * Copyright (C) 2016 Christian Pointner <equinox@helsinki.at> + * + * This file is part of rhrdweb. + * + * rhrdweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * rhrdweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with rhrdweb. If not, see <http://www.gnu.org/licenses/>. + */ + +body { + background-color: #eee; +} + +#container { + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.label { + display: inline; + padding: .2em .6em .3em; + font-size: 75%; + font-weight: bold; + line-height: 1; + color: #ffffff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; + position: relative; + top: -1px; +} +a.label:hover, +a.label:focus { + color: #ffffff; + text-decoration: none; + cursor: pointer; +} +.label:empty { + display: none; +} +.label-default { + background-color: #777777; +} +.label-default[href]:hover, +.label-default[href]:focus { + background-color: #5e5e5e; +} +.label-primary { + background-color: #428bca; +} +.label-primary[href]:hover, +.label-primary[href]:focus { + background-color: #3071a9; +} +.label-success { + background-color: #5cb85c; +} +.label-success[href]:hover, +.label-success[href]:focus { + background-color: #449d44; +} +.label-info { + background-color: #5bc0de; +} +.label-info[href]:hover, +.label-info[href]:focus { + background-color: #31b0d5; +} +.label-warning { + background-color: #f0ad4e; +} +.label-warning[href]:hover, +.label-warning[href]:focus { + background-color: #ec971f; +} +.label-danger { + background-color: #d9534f; +} +.label-danger[href]:hover, +.label-danger[href]:focus { + background-color: #c9302c; +}
\ No newline at end of file |
