diff --git a/Lora-Map/Lora-Map.csproj b/Lora-Map/Lora-Map.csproj index df752e9..16279d6 100644 --- a/Lora-Map/Lora-Map.csproj +++ b/Lora-Map/Lora-Map.csproj @@ -71,6 +71,9 @@ PreserveNewest + + PreserveNewest + diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css index b8cadb4..1e5e9aa 100644 --- a/Lora-Map/resources/css/global.css +++ b/Lora-Map/resources/css/global.css @@ -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 { @@ -41,4 +42,40 @@ html, body { width: 40px; border: #707070 2px solid; border: rgba(0,0,0,0.4) 2px solid; -} \ No newline at end of file +} + +#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; +} diff --git a/Lora-Map/resources/css/icons/marker.png b/Lora-Map/resources/css/icons/marker.png new file mode 100644 index 0000000..4135182 Binary files /dev/null and b/Lora-Map/resources/css/icons/marker.png differ diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html index 736a8be..9fc4b91 100644 --- a/Lora-Map/resources/index.html +++ b/Lora-Map/resources/index.html @@ -10,9 +10,27 @@
vx.x.x
+
+
+
+ + +
+ A + +
+
+ GPS-Empfang +
+
+ Letzter Datenempfang: vor 10 s +
+
+
+
diff --git a/Lora-Map/resources/js/nav.js b/Lora-Map/resources/js/nav.js index a4c99a9..334f023 100644 --- a/Lora-Map/resources/js/nav.js +++ b/Lora-Map/resources/js/nav.js @@ -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: "
" + - "Name: " + names + "
" + - "PacketRssi: " + list[pos]["PacketRssi"] + "
" + - "Rssi: " + list[pos]["Rssi"] + "
" + - "Snr: " + list[pos]["Snr"] + "
" + - "Upatedtime: " + list[pos]["Upatedtime"] + "
" + - "Hdop: " + list[pos]["Hdop"] + "
" + - "Battery: " + list[pos]["Battery"] + "
" + - "Fix: " + list[pos]["Fix"] + - "
" - }); - 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(); -} -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) - }); -} -*/ \ No newline at end of file +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; + } +} \ No newline at end of file