241 lines
7.0 KiB
HTML
241 lines
7.0 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title> PCU system status
|
|
</title>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
|
<meta charset="utf-8">
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK0ovprzLWo9wrcZFsFy2Gm3FRUjBCvHw"></script>
|
|
<style>
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.gmap {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 50% !important;
|
|
/* left: 25% */
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<center>
|
|
<h1> System status</h1>
|
|
<div id="system_status"> System status</div>
|
|
<div id="system_heading"> System heading</div>
|
|
<div id="system_gps"> System gps</div>
|
|
<div id="system_speed"> System speed</div>
|
|
<div id="system_steering"> System steering</div>
|
|
<div id="estop"> Estop: </div>
|
|
<div id="armed"> Armed: </div>
|
|
<button onclick="estop()">ESTOP</button>
|
|
<div id="map" class="gmap">
|
|
</center>
|
|
</body>
|
|
|
|
<script>
|
|
var initCoords = {
|
|
lat: 52.216531,
|
|
lon: -2.22221
|
|
//GPS: LAT: 52.2165315 LON: -2.2222162 = Worcester
|
|
|
|
} //change this to relevant starting place
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 18,
|
|
tilt: 0,
|
|
center: new google.maps.LatLng(initCoords.lat, initCoords.lon),
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE
|
|
});
|
|
var polygons = []
|
|
var circles = []
|
|
|
|
var current_heading = 0
|
|
var current_coords = {
|
|
lat: 0,
|
|
lon: 0
|
|
}
|
|
|
|
function drawCircle(lat, lon) {
|
|
var newCircle = new google.maps.Circle({
|
|
strokeColor: "#FF0000",
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: "#FF0000",
|
|
fillOpacity: 0.35,
|
|
map: map,
|
|
center: {
|
|
lat: lat,
|
|
lng: lon
|
|
},
|
|
radius: 3
|
|
});
|
|
circles.push(newCircle)
|
|
// map.fitBounds(newCircle.getBounds());
|
|
}
|
|
|
|
function drawLine(lat1, lon1, bearing) {
|
|
line_end = calcLineCoords(lat1, lon1, bearing)
|
|
var polygonCoords = [{
|
|
lat: lat1,
|
|
lng: lon1
|
|
}, {
|
|
lat: line_end.lat,
|
|
lng: line_end.lon
|
|
}];
|
|
var myPolygon = new google.maps.Polygon({
|
|
paths: polygonCoords,
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: '#FF0000',
|
|
fillOpacity: 0.35
|
|
});
|
|
polygons.push(myPolygon)
|
|
myPolygon.setMap(map);
|
|
}
|
|
|
|
function degrees_to_radians(degrees) {
|
|
var pi = Math.PI;
|
|
return degrees * (pi / 180);
|
|
}
|
|
|
|
function radians_to_degrees(radians) {
|
|
var pi = Math.PI;
|
|
return radians * (180 / pi);
|
|
}
|
|
|
|
function calcLineCoords(lat, lon, bearing_deg) {
|
|
var dist = 20 / 1000 //km?
|
|
|
|
R = 6378.1 // Radius of the Earth
|
|
bearing_rad = degrees_to_radians(bearing_deg)
|
|
brng = bearing_rad // Bearing is 90 degrees converted to radians.
|
|
d = dist // Distance in km
|
|
|
|
lat1 = degrees_to_radians(lat) // Current lat point converted to radians
|
|
lon1 = degrees_to_radians(lon) // Current long point converted to radians
|
|
|
|
lat2 = Math.asin(Math.sin(lat1) * Math.cos(d / R) +
|
|
Math.cos(lat1) * Math.sin(d / R) * Math.cos(brng))
|
|
|
|
lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(d / R) * Math.cos(lat1),
|
|
Math.cos(d / R) - Math.sin(lat1) * Math.sin(lat2))
|
|
|
|
lat2 = radians_to_degrees(lat2)
|
|
lon2 = radians_to_degrees(lon2)
|
|
return {
|
|
lat: lat2,
|
|
lon: lon2
|
|
}
|
|
}
|
|
|
|
function clearMap() {
|
|
circles.forEach(function(item, index) {
|
|
console.log(item, index);
|
|
item.setMap(null)
|
|
});
|
|
polygons.forEach(function(item, index) {
|
|
console.log(item, index);
|
|
item.setMap(null)
|
|
});
|
|
}
|
|
|
|
function updateVehiclePos(lat, lon, heading) {
|
|
clearMap()
|
|
drawCircle(lat, lon)
|
|
drawLine(lat, lon, heading)
|
|
}
|
|
|
|
|
|
function estop() {
|
|
fetch("/estop", {
|
|
method: "POST",
|
|
// body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById("estop").innerHTML = "Estop: " + data.success
|
|
})
|
|
}
|
|
|
|
function update_data() {
|
|
fetch("/heading", {
|
|
method: "GET",
|
|
// body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById("system_heading").innerHTML = "Heading: " + data.heading
|
|
current_heading = data.heading
|
|
})
|
|
fetch("/state", {
|
|
method: "GET",
|
|
// body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById("system_status").innerHTML = "System state: " + data.state
|
|
})
|
|
fetch("/gps", {
|
|
method: "GET",
|
|
// body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById("system_gps").innerHTML = "GPS: LAT: " + data.lat + " LON: " + data.lon
|
|
current_coords.lat = data.lat
|
|
current_coords.lon = data.lon
|
|
})
|
|
fetch("/speed", {
|
|
method: "GET",
|
|
// body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById("system_speed").innerHTML = "Speed: " + data.speed + " %"
|
|
})
|
|
fetch("/steering", {
|
|
method: "GET",
|
|
// body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById("system_steering").innerHTML = "Steering: " + data.steering + " %"
|
|
})
|
|
|
|
fetch("/get_estop", {
|
|
method: "GET",
|
|
// body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById("estop").innerHTML = "Estop: " + data.estop
|
|
})
|
|
fetch("/get_arm", {
|
|
method: "GET",
|
|
// body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById("armed").innerHTML = "Armed: " + data.armed
|
|
})
|
|
}
|
|
|
|
update_data()
|
|
|
|
var intervalId = window.setInterval(function() {
|
|
update_data();
|
|
updateVehiclePos(current_coords.lat, current_coords.lon, current_heading)
|
|
}, 500);
|
|
</script>
|
|
|
|
</html> |