Begin of #1
This commit is contained in:
parent
44574b61cf
commit
3f75dba452
@ -71,6 +71,9 @@
|
|||||||
<Content Include="resources\css\global.css">
|
<Content Include="resources\css\global.css">
|
||||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||||
</Content>
|
</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-2x.png" />
|
||||||
<Content Include="resources\js\leaflet\images\layers.png" />
|
<Content Include="resources\js\leaflet\images\layers.png" />
|
||||||
<Content Include="resources\js\leaflet\images\marker-icon-2x.png" />
|
<Content Include="resources\js\leaflet\images\marker-icon-2x.png" />
|
||||||
|
|||||||
@ -26,8 +26,9 @@ html, body {
|
|||||||
|
|
||||||
#menucollumn .pos {
|
#menucollumn .pos {
|
||||||
display: block;
|
display: block;
|
||||||
height: 32px;
|
height: 30px;
|
||||||
width: 32px;
|
width: 30px;
|
||||||
|
background-image: url("icons/marker.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
#version {
|
#version {
|
||||||
@ -41,4 +42,40 @@ html, body {
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
border: #707070 2px solid;
|
border: #707070 2px solid;
|
||||||
border: rgba(0,0,0,0.4) 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
BIN
Lora-Map/resources/css/icons/marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@ -10,9 +10,27 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="bigmap"></div>
|
<div id="bigmap"></div>
|
||||||
<div id="menucollumn">
|
<div id="menucollumn">
|
||||||
<span class="pos"></span>
|
<span class="pos" onclick="showHidePanel('pannels_pos');"></span>
|
||||||
</div>
|
</div>
|
||||||
<div id="version">vx.x.x</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/leaflet/leaflet.js"></script>
|
||||||
<script type="text/javascript" src="js/nav.js"></script>
|
<script type="text/javascript" src="js/nav.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -16,6 +16,7 @@ function datarunner() {
|
|||||||
xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true);
|
xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true);
|
||||||
xhttp.send();
|
xhttp.send();
|
||||||
}
|
}
|
||||||
|
|
||||||
//https://leafletjs.com/reference-1.4.0.html#marker
|
//https://leafletjs.com/reference-1.4.0.html#marker
|
||||||
function parsedata() {
|
function parsedata() {
|
||||||
if (this.readyState == 4 && this.status == 200) {
|
if (this.readyState == 4 && this.status == 200) {
|
||||||
@ -33,94 +34,18 @@ function parsedata() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var visiblePanel = null;
|
||||||
|
function showHidePanel(name) {
|
||||||
/*var devices = {};
|
if (visiblePanel == null) {
|
||||||
function get_elm() {
|
document.getElementById("pannels").style.display = "block";
|
||||||
var colors = new Array(
|
document.getElementById(name).style.display = "block";
|
||||||
"http://maps.google.com/mapfiles/ms/icons/green-dot.png",
|
visiblePanel = name;
|
||||||
"http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
|
} else if (visiblePanel == name) {
|
||||||
"http://maps.google.com/mapfiles/ms/icons/purple-dot.png",
|
document.getElementById("pannels").style.display = "none";
|
||||||
"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
visiblePanel = null;
|
||||||
);
|
} else {
|
||||||
var xhttp = new XMLHttpRequest();
|
document.getElementById(visiblePanel).style.display = "none";
|
||||||
xhttp.onreadystatechange = function () {
|
document.getElementById(name).style.display = "block";
|
||||||
if (this.readyState == 4 && this.status == 200) {
|
visiblePanel = name;
|
||||||
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();
|
|
||||||
}
|
|
||||||
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)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
Loading…
Reference in New Issue
Block a user