diff --git a/htdocs/map.css b/htdocs/css/map.css similarity index 53% rename from htdocs/map.css rename to htdocs/css/map.css index a982e1b..7595ab7 100644 --- a/htdocs/map.css +++ b/htdocs/css/map.css @@ -1,3 +1,11 @@ +@import url("openwebrx-header.css"); +@import url("openwebrx-globals.css"); + +/* expandable photo not implemented on map page */ +#webrx-top-photo-clip { + max-height: 67px; +} + html, body, .openwebrx-map { width: 100%; height: 100%; diff --git a/htdocs/css/openwebrx-globals.css b/htdocs/css/openwebrx-globals.css new file mode 100644 index 0000000..a01982d --- /dev/null +++ b/htdocs/css/openwebrx-globals.css @@ -0,0 +1,8 @@ +html, body +{ + margin: 0; + padding: 0; + height: 100%; + font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; + overflow: hidden; +} diff --git a/htdocs/css/openwebrx-header.css b/htdocs/css/openwebrx-header.css new file mode 100644 index 0000000..9cfcc0c --- /dev/null +++ b/htdocs/css/openwebrx-header.css @@ -0,0 +1,201 @@ +#webrx-top-container +{ + position: relative; + z-index:1000; +} + +#webrx-top-photo +{ + width: 100%; + display: block; +} + +#webrx-top-photo-clip +{ + min-height: 67px; + max-height: 350px; + overflow: hidden; + position: relative; +} + +.webrx-top-bar-parts +{ + height:67px; +} + +#webrx-top-bar +{ + background: rgba(128, 128, 128, 0.15); + margin:0; + padding:0; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + overflow: hidden; + position: absolute; + left: 0; + top: 0; + right: 0; +} + +#webrx-top-logo +{ + padding: 12px; + float: left; +} + +#webrx-ha5kfu-top-logo +{ + float: right; + padding: 15px; +} + +#webrx-rx-avatar-background +{ + cursor:pointer; + background-image: url(../gfx/openwebrx-avatar-background.png); + background-origin: content-box; + background-repeat: no-repeat; + float: left; + width: 54px; + height: 54px; + padding: 7px; +} + +#webrx-rx-avatar +{ + cursor:pointer; + width: 46px; + height: 46px; + padding: 4px; + border-radius: 8px; +} + +#webrx-rx-texts { + float: left; + padding: 10px; +} + +#webrx-rx-texts div { + padding: 3px; +} + +#webrx-rx-title +{ + white-space:nowrap; + overflow: hidden; + cursor:pointer; + font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; + color: #909090; + font-size: 11pt; + font-weight: bold; +} + +#webrx-rx-desc +{ + white-space:nowrap; + overflow: hidden; + cursor:pointer; + font-size: 10pt; + color: #909090; +} + +#webrx-rx-desc a +{ + color: #909090; +} + +#openwebrx-rx-details-arrow +{ + cursor:pointer; + position: absolute; + left: 470px; + top: 51px; +} + +#openwebrx-rx-details-arrow a +{ + margin: 0; + padding: 0; +} + +#openwebrx-rx-details-arrow-down +{ + display:none; +} + +#openwebrx-main-buttons ul +{ + display: table; + margin:0; +} + + +#openwebrx-main-buttons ul li +{ + display: table-cell; + padding-left: 5px; + padding-right: 5px; + cursor:pointer; +} + +#openwebrx-main-buttons a { + color: inherit; + text-decoration: inherit; +} + +#openwebrx-main-buttons li:hover +{ + background-color: rgba(255, 255, 255, 0.3); +} + +#openwebrx-main-buttons li:active +{ + background-color: rgba(255, 255, 255, 0.55); +} + + +#openwebrx-main-buttons +{ + float: right; + margin:0; + color: white; + text-shadow: 0px 0px 4px #000000; + text-align: center; + font-size: 9pt; + font-weight: bold; +} + +#webrx-rx-photo-title +{ + position: absolute; + left: 15px; + top: 78px; + color: White; + font-size: 16pt; + text-shadow: 1px 1px 4px #444; + opacity: 1; +} + +#webrx-rx-photo-desc +{ + position: absolute; + left: 15px; + top: 109px; + color: White; + font-size: 10pt; + font-weight: bold; + text-shadow: 0px 0px 6px #444; + opacity: 1; + line-height: 1.5em; +} + +#webrx-rx-photo-desc a +{ + color: #5ca8ff; + text-shadow: none; +} + diff --git a/htdocs/include/header.include.html b/htdocs/include/header.include.html new file mode 100644 index 0000000..b2f3bc9 --- /dev/null +++ b/htdocs/include/header.include.html @@ -0,0 +1,30 @@ +
+
+ +
+ + +
+ +
+
+
+
+
+
+ + +
+
+
    +

  • Status
    • +

  • Log
    • +

  • Receiver
    • +

  • Map
    • +
+
+
+
+
+
+
diff --git a/htdocs/index.html b/htdocs/index.html index e945f3f..c17d83b 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -33,36 +33,7 @@
-
-
- -
- - -
- -
-
-
-
-
-
- - -
-
-
    -

  • Status
    • -

  • Log
    • -

  • Receiver
    • -

  • Map
    • -
-
-
-
-
-
-
+ ${header}
diff --git a/htdocs/map.html b/htdocs/map.html index 9e4b25b..f09a44a 100644 --- a/htdocs/map.html +++ b/htdocs/map.html @@ -5,10 +5,11 @@ - + + ${header}
diff --git a/htdocs/openwebrx.css b/htdocs/openwebrx.css index 3c3ffcd..39a5b95 100644 --- a/htdocs/openwebrx.css +++ b/htdocs/openwebrx.css @@ -18,15 +18,8 @@ along with this program. If not, see . */ - -html, body -{ - margin: 0; - padding: 0; - height: 100%; - font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; - overflow: hidden; -} +@import url("css/openwebrx-header.css"); +@import url("css/openwebrx-globals.css"); select { @@ -147,179 +140,12 @@ input[type=range]:focus::-ms-fill-upper background: #B6B6B6; } -#webrx-top-container -{ - position: relative; - z-index:1000; -} - -.webrx-top-bar-parts -{ - height:67px; -} - -#webrx-top-bar -{ - background: rgba(128, 128, 128, 0.15); - margin:0; - padding:0; - user-select: none; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - overflow: hidden; - position: absolute; - left: 0; - top: 0; - right: 0; -} - -#webrx-top-logo -{ - padding: 12px; - float: left; -} - -#webrx-ha5kfu-top-logo -{ - float: right; - padding: 15px; -} - -#webrx-top-photo -{ - width: 100%; - display: block; -} - -#webrx-rx-avatar-background -{ - cursor:pointer; - background-image: url(gfx/openwebrx-avatar-background.png); - background-origin: content-box; - background-repeat: no-repeat; - float: left; - width: 54px; - height: 54px; - padding: 7px; -} - -#webrx-rx-avatar -{ - cursor:pointer; - width: 46px; - height: 46px; - padding: 4px; - border-radius: 8px; -} - -#webrx-top-photo-clip -{ - min-height: 67px; - max-height: 350px; - overflow: hidden; - position: relative; -} - #webrx-page-container { min-height:100%; position:relative; } -#webrx-rx-photo-title -{ - position: absolute; - left: 15px; - top: 78px; - color: White; - font-size: 16pt; - text-shadow: 1px 1px 4px #444; - opacity: 1; -} - -#webrx-rx-photo-desc -{ - position: absolute; - left: 15px; - top: 109px; - color: White; - font-size: 10pt; - font-weight: bold; - text-shadow: 0px 0px 6px #444; - opacity: 1; - line-height: 1.5em; -} - -#webrx-rx-photo-desc a -{ - color: #5ca8ff; - text-shadow: none; -} - -#webrx-rx-texts { - float: left; - padding: 10px; -} - -#webrx-rx-texts div { - padding: 3px; -} - -#webrx-rx-title -{ - white-space:nowrap; - overflow: hidden; - cursor:pointer; - font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; - color: #909090; - font-size: 11pt; - font-weight: bold; -} - -#webrx-rx-desc -{ - white-space:nowrap; - overflow: hidden; - cursor:pointer; - font-size: 10pt; - color: #909090; -} - -#webrx-rx-desc a -{ - color: #909090; -} - -#openwebrx-rx-details-arrow -{ - cursor:pointer; - position: absolute; - left: 470px; - top: 51px; -} - -#openwebrx-rx-details-arrow a -{ - margin: 0; - padding: 0; -} - -#openwebrx-rx-details-arrow-down -{ - display:none; -} - -/*canvas#waterfall-canvas -{ - border-style: none; - border-width: 1px; - height: 150px; - width: 100%; -}*/ - #openwebrx-scale-container { height: 47px; @@ -638,52 +464,6 @@ img.openwebrx-mirror-img height: 20px; } -#openwebrx-main-buttons img -{ -} - -#openwebrx-main-buttons ul -{ - display: table; - margin:0; -} - - -#openwebrx-main-buttons ul li -{ - display: table-cell; - padding-left: 5px; - padding-right: 5px; - cursor:pointer; -} - -#openwebrx-main-buttons a { - color: inherit; - text-decoration: inherit; -} - -#openwebrx-main-buttons li:hover -{ - background-color: rgba(255, 255, 255, 0.3); -} - -#openwebrx-main-buttons li:active -{ - background-color: rgba(255, 255, 255, 0.55); -} - - -#openwebrx-main-buttons -{ - float: right; - margin:0; - color: white; - text-shadow: 0px 0px 4px #000000; - text-align: center; - font-size: 9pt; - font-weight: bold; -} - #openwebrx-panel-receiver { width:110px; diff --git a/owrx/controllers.py b/owrx/controllers.py index f979891..0732f2f 100644 --- a/owrx/controllers.py +++ b/owrx/controllers.py @@ -2,6 +2,7 @@ import os import mimetypes import json from datetime import datetime +from string import Template from owrx.websocket import WebSocketConnection from owrx.config import PropertyManager from owrx.source import ClientRegistry @@ -72,14 +73,36 @@ class AssetsController(Controller): filename = self.request.matches.group(1) self.serve_file(filename) -class IndexController(AssetsController): - def handle_request(self): - self.serve_file("index.html") +class TemplateController(Controller): + def render_template(self, file, **vars): + f = open('htdocs/' + file, 'r') + template = Template(f.read()) + f.close() -class MapController(AssetsController): + return template.safe_substitute(**vars) + + def serve_template(self, file, **vars): + self.send_response(self.render_template(file, **vars), content_type = 'text/html') + + def default_variables(self): + return {} + + +class WebpageController(TemplateController): + def template_variables(self): + header = self.render_template('include/header.include.html') + return { "header": header } + + +class IndexController(WebpageController): + def handle_request(self): + self.serve_template("index.html", **self.template_variables()) + + +class MapController(WebpageController): def handle_request(self): #TODO check if we have a google maps api key first? - self.serve_file("map.html") + self.serve_template("map.html", **self.template_variables()) class FeatureController(AssetsController): def handle_request(self):