Added zoom selector

pull/18/head
Sami Mokaddem 2017-10-23 16:56:25 +02:00
parent 2b6e696548
commit d24a41cf39
5 changed files with 35 additions and 8 deletions

View File

@ -5,6 +5,7 @@ graph_log_refresh_rate = 1
rotation_wait_time = 30 rotation_wait_time = 30
max_img_rotation = 10 max_img_rotation = 10
hours_spanned = 48 hours_spanned = 48
zoomlevel = 15
[Log] [Log]
fieldname_order=["id", "category", "type", "value"] fieldname_order=["id", "category", "type", "value"]

View File

@ -86,7 +86,8 @@ def index():
graph_log_refresh_rate=cfg.getint('Dashboard' ,'graph_log_refresh_rate'), graph_log_refresh_rate=cfg.getint('Dashboard' ,'graph_log_refresh_rate'),
rotation_wait_time=cfg.getint('Dashboard' ,'rotation_wait_time'), rotation_wait_time=cfg.getint('Dashboard' ,'rotation_wait_time'),
max_img_rotation=cfg.getint('Dashboard' ,'max_img_rotation'), max_img_rotation=cfg.getint('Dashboard' ,'max_img_rotation'),
hours_spanned=cfg.getint('Dashboard' ,'hours_spanned') hours_spanned=cfg.getint('Dashboard' ,'hours_spanned'),
zoomlevel=cfg.getint('Dashboard' ,'zoomlevel')
) )
@app.route("/_logs") @app.route("/_logs")

View File

@ -138,6 +138,13 @@ $(document).ready(function () {
mapEventManager._timeoutRotate = setTimeout(function(){ mapEventManager.rotateMap(); }, ROTATIONWAITTIME); mapEventManager._timeoutRotate = setTimeout(function(){ mapEventManager.rotateMap(); }, ROTATIONWAITTIME);
} }
}); });
$( "#zoom_selector" ).change(function() {
var sel = parseInt($( this ).val());
zoomlevel = sel;
ZOOMLEVEL = sel;
});
}); });

View File

@ -5,9 +5,10 @@ const MAXIMGROTATION = max_img_rotation;
const OSMURL='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; const OSMURL='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const OSMATTRIB='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; const OSMATTRIB='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var ROTATIONWAITTIME = 1000*rotation_wait_time; //seconds var ROTATIONWAITTIME = 1000*rotation_wait_time; //seconds
var ZOOMLEVEL = zoomlevel;
var myOpenStreetMap = L.map('feedDivMap1').setView([0, 0], 1); var myOpenStreetMap = L.map('feedDivMap1').setView([0, 0], 1);
var osm = new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 17}).addTo(myOpenStreetMap); var osm = new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 18}).addTo(myOpenStreetMap);
class MapEvent { class MapEvent {
constructor(json, marker) { constructor(json, marker) {
@ -83,7 +84,7 @@ class MapEventManager {
this._latToPing = mapEvent.coord.lat; this._latToPing = mapEvent.coord.lat;
this._lonToPing = mapEvent.coord.lon; this._lonToPing = mapEvent.coord.lon;
var marker = mapEvent.marker; var marker = mapEvent.marker;
myOpenStreetMap.flyTo([mapEvent.coord.lat, mapEvent.coord.lon], 15); myOpenStreetMap.flyTo([mapEvent.coord.lat, mapEvent.coord.lon], ZOOMLEVEL);
mapEvent.marker.bindPopup(mapEvent.textMarker).openPopup(); mapEvent.marker.bindPopup(mapEvent.textMarker).openPopup();
$("#textMap1").fadeOut(400, function(){ $(this).text(mapEvent.text); }).fadeIn(400); $("#textMap1").fadeOut(400, function(){ $(this).text(mapEvent.text); }).fadeIn(400);

View File

@ -49,6 +49,12 @@ table {
margin-right:auto; margin-right:auto;
} }
.leftSepa {
border-left-color: rgb(221, 221, 221);
border-left-style: solid;
border-left-width: 2px;
padding-left: 8px;
}
small { small {
font-size: 100%; font-size: 100%;
@ -81,13 +87,23 @@ small {
<div class="panel-heading bg-info" style="font-weight: bold;"> <div class="panel-heading bg-info" style="font-weight: bold;">
<b id="textMap1"> No map </b> <b id="textMap1"> No map </b>
<div style="float: right;"> <div style="float: right;">
<i id="txtMapNum">1</i><i>/{{ max_img_rotation }}</i> <i class="leftSepa" id="txtMapNum">Rotation speed: </i>
<select id="rotation_wait_time_selector" style="margin-top: -7px;"> <select id="rotation_wait_time_selector" style="margin-top: -7px;">
<option value="∞" selected>No rotation</option> <option value="∞" selected>No rotation</option>
<option value="{{ rotation_wait_time }}" selected>{{ rotation_wait_time }} sec</option> <option value="{{ rotation_wait_time }}" selected>{{ rotation_wait_time }} sec</option>
<option value="{{ rotation_wait_time * 2 }}">{{ rotation_wait_time * 2 }} sec</option> <option value="{{ rotation_wait_time * 2 }}">{{ rotation_wait_time * 2 }} sec</option>
<option value="{{ rotation_wait_time * 5}}">{{ rotation_wait_time * 5 }} sec</option> <option value="{{ rotation_wait_time * 5}}">{{ rotation_wait_time * 5 }} sec</option>
</select> </select>
<i class="leftSepa" id="txtMapNum">Zoom level: </i>
<select id="zoom_selector" style="margin-top: -7px;">
<option value="{{ zoomlevel + 3 }}">{{ zoomlevel + 3 }}</option>
<option value="{{ zoomlevel + 2 }}">{{ zoomlevel + 2 }}</option>
<option value="{{ zoomlevel }}" selected>{{ zoomlevel }}</option>
<option value="{{ zoomlevel - 2 }}">{{ zoomlevel - 2 }}</option>
<option value="{{ zoomlevel - 4 }}">{{ zoomlevel - 4 }}</option>
<option value="{{ zoomlevel - 6 }}">{{ zoomlevel - 6 }}</option>
<option value="{{ zoomlevel - 8 }}">{{ zoomlevel - 8 }}</option>
</select>
</div> </div>
</div> </div>
<div id="panelbody" class="panel-body" style="height: 93%; padding: 5px"> <div id="panelbody" class="panel-body" style="height: 93%; padding: 5px">
@ -191,6 +207,7 @@ small {
var rotation_wait_time = {{ rotation_wait_time }}; var rotation_wait_time = {{ rotation_wait_time }};
var max_img_rotation = {{ max_img_rotation }}; var max_img_rotation = {{ max_img_rotation }};
var hours_spanned = {{ hours_spanned }}; var hours_spanned = {{ hours_spanned }};
var zoomlevel = {{ zoomlevel}};
</script> </script>