Lora/Lora-Map
1
0
Fork 0
Code Issues 8 Pull Requests Releases 23 Wiki Activity

Begin of #1

Browse Source
This commit is contained in:
BlubbFish 2019-03-08 10:39:43 +01:00
parent 44574b61cf
commit 3f75dba452
5 changed files with 78 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Lora-Map/Lora-Map.csproj
View File

@ -71,6 +71,9 @@
<Content Include="resources\css\global.css">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="resources\css\icons\marker.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="resources\js\leaflet\images\layers-2x.png" />
<Content Include="resources\js\leaflet\images\layers.png" />
<Content Include="resources\js\leaflet\images\marker-icon-2x.png" />

41
Lora-Map/resources/css/global.css
View File

@ -26,8 +26,9 @@ html, body {
#menucollumn .pos {
display: block;
height: 32px;
width: 32px;
height: 30px;
width: 30px;
background-image: url("icons/marker.png");
}
#version {
@ -42,3 +43,39 @@ html, body {
border: #707070 2px solid;
border: rgba(0,0,0,0.4) 2px solid;
}
#pannels {
position: absolute;
top: 85px;
left: 45px;
bottom: 35px;
width: 250px;
z-index: 50000;
background-color: white;
border: #707070 2px solid;
border: rgba(0,0,0,0.4) 2px solid;
border-radius: 4px;
display: none;
}
#pannels #pannels_pos {
display: none;
}
#pannels #pannels_pos .item {
margin: 4px;
font-size: 11px;
font-family: Verdana;
}
#pannels #pannels_pos .item .color {
float: left;
width: 2px;
height: 38px;
}
#pannels #pannels_pos .item .icon {
float: left;
height: 38px;
width: 40px;
margin-right: 5px;
}
#pannels #pannels_pos .item .line1 .name {
font-weight: bold;
}

BIN
Lora-Map/resources/css/icons/marker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

20
Lora-Map/resources/index.html
View File

@ -10,9 +10,27 @@
<body>
<div id="bigmap"></div>
<div id="menucollumn">
<span class="pos"></span>
<span class="pos" onclick="showHidePanel('pannels_pos');"></span>
</div>
<div id="version">vx.x.x</div>
<div id="pannels">
<div id="pannels_pos">
<div class="item">
<span class="color" style="background-color: red;"></span>
<span class="icon"></span>
<div class="line1">
<span class="name">A</span>
<span class="akku"></span>
</div>
<div class="line2" style="color: green;">
GPS-Empfang
</div>
<div class="line3">
Letzter Datenempfang: vor 10 s
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/leaflet/leaflet.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>

105
Lora-Map/resources/js/nav.js
View File

@ -16,6 +16,7 @@ function datarunner() {
xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true);
xhttp.send();
}
//https://leafletjs.com/reference-1.4.0.html#marker
function parsedata() {
if (this.readyState == 4 && this.status == 200) {
@ -33,94 +34,18 @@ function parsedata() {
}
}
/*var devices = {};
function get_elm() {
var colors = new Array(
"http://maps.google.com/mapfiles/ms/icons/green-dot.png",
"http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
"http://maps.google.com/mapfiles/ms/icons/purple-dot.png",
"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
var i = 0;
for (var names in obj) {
if (obj.hasOwnProperty(names)) {
if (!devices.hasOwnProperty(names)) {
devices[names] = 0;
}
var list = obj[names];
var j = devices[names];
for (var pos in list) {
if (list.hasOwnProperty(pos)) {
var m = new google.maps.Marker({
icon: colors[i % colors.length],
position: new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]),
animation: google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content: "<div>" +
"Name: " + names + "<br>" +
"PacketRssi: " + list[pos]["PacketRssi"] + "<br>" +
"Rssi: " + list[pos]["Rssi"] + "<br>" +
"Snr: " + list[pos]["Snr"] + "<br>" +
"Upatedtime: " + list[pos]["Upatedtime"] + "<br>" +
"Hdop: " + list[pos]["Hdop"] + "<br>" +
"Battery: " + list[pos]["Battery"] + "<br>" +
"Fix: " + list[pos]["Fix"] +
"</div>"
});
m.addListener('click', function () {
infowindow.open(map, m);
});
m.setMap(map);
if (!center_set) {
map.setCenter(new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]));
smoothZoom(15, map.getZoom());
center_set = true;
}
j++;
}
}
devices[names] = j;
i++;
}
}
}
};
var qstring = "";
for (var item in devices) {
if (devices.hasOwnProperty(item)) {
qstring += item + ":" + devices[item];
}
qstring += ";";
}
xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc?i=" + qstring.substr(0, qstring.length - 1), true);
xhttp.send();
var visiblePanel = null;
function showHidePanel(name) {
if (visiblePanel == null) {
document.getElementById("pannels").style.display = "block";
document.getElementById(name).style.display = "block";
visiblePanel = name;
} else if (visiblePanel == name) {
document.getElementById("pannels").style.display = "none";
visiblePanel = null;
} else {
document.getElementById(visiblePanel).style.display = "none";
document.getElementById(name).style.display = "block";
visiblePanel = name;
}
}
setInterval(get_elm, 5000);
function smoothZoom(max, current) {
if (current >= max) {
return;
} else {
var z = google.maps.event.addListener(map, 'zoom_changed', function (event) {
google.maps.event.removeListener(z);
smoothZoom(max, current + 1);
});
setTimeout(function () { map.setZoom(current) }, 150);
}
}
*/
/*var map;
var center_set = false;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(0, 0)
});
}
*/