| Server IP : 79.136.114.73 / Your IP : 13.59.91.46 Web Server : Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.29 OpenSSL/1.0.1f System : Linux b8009 3.13.0-170-generic #220-Ubuntu SMP Thu May 9 12:40:49 UTC 2019 x86_64 User : www-data ( 33) PHP Version : 5.5.9-1ubuntu4.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/appsrv.astacus.se/XMP/viewer/ |
Upload File : |
<?php
$mysqli = new mysqli("www.astacus.se", "carlhoffstedt", "Astacus2020!", "dronemap");
?>
<html>
<head>
<title>ASTACUS DRONE MAP</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="acAttributesInfo.js"></script>
<script src="ACHelper.js"></script>
<script src="ACDronePhotoIdInfo.js"></script>
<script src="ACDroneProjectIdInfo.js"></script>
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<!-- <script type="module" src="index.js"></script> -->
<link rel="stylesheet" type="text/css" href="./style.css" />
<script>
var m_InforObj = [];
var m_map;
var m_markersBlueGreenYellowWhiteDict;
var m_clusterers_BlueGreenYellow_array;
var m_renderers_BlueGreenYellow_array;
var m_droneProjectId;
var m_projectName;
var m_centerLatLong;
var m_AttributePhotoId;
var m_AttributeAttributeId;
var m_markersOnMap_Dict_All_DB = {};
var m_infoWindow;
window.addEventListener('resize', onResizeWindow);
function onResizeWindow()
{
const windowSize = getBrowserSize();
//document.getElementById("id_LabelLoading").style.left = '' + ((windowSize.width * 0.5) - 90 - (213 * 0.5)) + 'px';
}
function getBrowserSize()
{
return ({
width: $(window).width(),
height: $(window).height()
});
}
function onLoad()
{
//onResizeWindow();
initMap();
}
async function initMap()
{
document.getElementById("id_BtnClickShowMarkerOrthographic").addEventListener("click", show_markerOrthoGraphic);
document.getElementById("id_BtnClickShowMarkerPerspective").addEventListener("click", show_markerPerspective);
const params = getUrlVars();
download_Project_Data(params);
}
function getUrlVars()
{
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
const params = hashes[0];
return params;
}
async function download_Project_Data(params)
{
var url = 'https://appsrv.astacus.se/XMP/viewer/get_data_project.php?' + params;
jQuery.ajax({
url: url,
type: 'GET',
success: function (dataString)
{
var resultDict = JSON.parse(dataString);
var resultArray = resultDict['result'];
var rowData = resultArray[0];
m_droneProjectId = rowData['ProjectId'];
m_projectName = rowData['ProjectId'];
m_centerLatLong = rowData['CenterLatLong'];
m_map = get_Map();
download_Photos_Data(params);
},
error: function (err)
{
alert('Error in getting data');
}
});
}
async function download_Photos_Data(params)
{
var url = 'https://appsrv.astacus.se/XMP/viewer/get_data_photos.php?' + params;
document.getElementById("id_GoogleMap_Loading").style.visibility = "visible";
jQuery.ajax({
url: url,
type: 'GET',
success: function (dataString)
{
var resultDict = JSON.parse(dataString);
var resultArray = resultDict['result'];
var acDroneProjectIdInfo = new ACDroneProjectIdInfo();
resultArray.forEach((rowData, index) =>
{
var droneProjectsId = rowData['DroneProjectsId'];
var dronePhotosId = rowData['DronePhotosId'];
var photoName = rowData['PhotoName'];
var xmlString = rowData['XMP'];
var parser = new DOMParser();
var xmlDocument = parser.parseFromString(xmlString,"text/xml");
try
{
var rdfDescription = xmlDocument.firstElementChild.firstElementChild.firstElementChild;
if (rdfDescription != null)
{
var GpsLatitude = rdfDescription.attributes["drone-dji:GpsLatitude"].value;
var GpsLongitude;
var GpsLongtitude;
if (rdfDescription.attributes["drone-dji:GpsLongitude"] != null)
{
GpsLongitude = rdfDescription.attributes["drone-dji:GpsLongitude"].value;
}
else
{
GpsLongtitude = rdfDescription.attributes["drone-dji:GpsLongtitude"].value;
}
var GpsAltitude = 40;
var GimbalRollDegree = rdfDescription.attributes["drone-dji:GimbalRollDegree"].value;
var GimbalYawDegree = rdfDescription.attributes["drone-dji:GimbalYawDegree"].value;
var GimbalPitchDegree = rdfDescription.attributes["drone-dji:GimbalPitchDegree"].value;
var FlightRollDegree = rdfDescription.attributes["drone-dji:FlightRollDegree"].value;
var FlightYawDegree = rdfDescription.attributes["drone-dji:FlightYawDegree"].value;
var FlightPitchDegree = rdfDescription.attributes["drone-dji:FlightPitchDegree"].value;
if(!is_Numeric(GpsLongitude))
{
GpsLongitude = GpsLongtitude;
}
var file = "https://appsrv.astacus.se/XMP/data/" + m_droneProjectId + "/" + photoName;
//var file = "https://appsrv.astacus.se/XMP/data/" + "12345" + "/" + photoName;
var file_low = file;//"https://appsrv.astacus.se/XMP/data/" + m_droneProjectId + "/low/" + photoName;
var fileName = file.substring(0, file.length-3) + 'JPG';
var fileName_low = fileName;//file_low.substring(0, file_low.length-3) + 'jpg';
var strArray = {
'placeName' : fileName,
'placeName_low' : fileName_low,
'fligthParameters' : 'FlightRollDegree: ' + FlightRollDegree +
', FlightYawDegree: ' + FlightYawDegree +
', FlightPitchDegree: ' + FlightPitchDegree +
', GimbalRollDegree: ' + GimbalRollDegree +
', GimbalYawDegree: ' + GimbalYawDegree +
', GimbalPitchDegree: ' + GimbalPitchDegree,
'FlightYawDegree' : parseFloat((Math.round(FlightYawDegree)).toString().trim()),
'GimbalYawDegree' : parseFloat((Math.round(GimbalYawDegree)).toString().trim()),
'GimbalPitchDegree' : parseFloat((Math.round(GimbalPitchDegree)).toString().trim()),
'LatLng': [{
'lat': parseFloat(GpsLatitude),
'lng': parseFloat(GpsLongitude),
'altitude': parseFloat(GpsAltitude),
}],
};//$str
var acDronePhotoIdInfo = new ACDronePhotoIdInfo();
acDronePhotoIdInfo.PhotoName = photoName;
acDronePhotoIdInfo.XMP = strArray;
acDroneProjectIdInfo.DronePhotoIdInfosDict[dronePhotosId] = acDronePhotoIdInfo;
}
}
catch (e)
{
}
});//forEach
document.getElementById("id_GoogleMap_Loading").style.visibility = "hidden";
m_markersOnMap_Dict_All_DB[m_droneProjectId] = acDroneProjectIdInfo;
async_initMap_LoadData();
},
error: function (err)
{
alert('Error in getting data');
}
});
}
function getValue(rdfDescription, variable)
{
var eObj = rdfDescription.attributes[variable];
if (eObj == null)
{
return (0);
}
return eObj.value;
}
function is_Numeric(num) {
return !isNaN(parseFloat(num)) && isFinite(num);
}
async function async_initMap_LoadData()
{
m_clusterers_BlueGreenYellow_array = [];
m_renderers_BlueGreenYellow_array = [];
const centerPosition = get_CenterOfAllMarkers();
m_map.setCenter(centerPosition);
m_map.setZoom(16);
m_infoWindow = get_InfoWindow();
m_markersBlueGreenYellowWhiteDict = get_Markers();
/***** Blue cluster *****/
m_renderers_BlueGreenYellow_array.push(getRenderer("blue"));
const clustererBlue = new markerClusterer.MarkerClusterer({
map: null,
markers: getRequiredMarkersOnMap("blue"),
renderer: m_renderers_BlueGreenYellow_array[0],
algorithmOptions: { maxZoom: 19, ignoreHidden: true},
});
m_clusterers_BlueGreenYellow_array.push(clustererBlue);
/***** Blue cluster *****/
/***** green cluster *****/
m_renderers_BlueGreenYellow_array.push(getRenderer("green"));
const clustererGreen = new markerClusterer.MarkerClusterer({
map: null,
markers: getRequiredMarkersOnMap("green"),
renderer: m_renderers_BlueGreenYellow_array[1],
algorithmOptions: { maxZoom: 19, ignoreHidden: true},
});
m_clusterers_BlueGreenYellow_array.push(clustererGreen);
/***** green cluster *****/
/***** yellow cluster *****/
m_renderers_BlueGreenYellow_array.push(getRenderer("yellow"));
const clustererYellow = new markerClusterer.MarkerClusterer({
map: null,
markers: getRequiredMarkersOnMap("yellow"),
renderer: m_renderers_BlueGreenYellow_array[2],
algorithmOptions: { maxZoom: 19, ignoreHidden: true},
});
m_clusterers_BlueGreenYellow_array.push(clustererYellow);
/***** yellow cluster *****/
/***** white cluster *****/
m_renderers_BlueGreenYellow_array.push(getRenderer("white"));
const clustererWhite = new markerClusterer.MarkerClusterer({
map: null,
markers: getRequiredMarkersOnMap("white"),
renderer: m_renderers_BlueGreenYellow_array[3],
algorithmOptions: { maxZoom: 19, ignoreHidden: true},
});
m_clusterers_BlueGreenYellow_array.push(clustererWhite);
/***** white cluster *****/
m_clusterers_BlueGreenYellow_array[0].setMap(m_map);
m_clusterers_BlueGreenYellow_array[1].setMap(m_map);
m_clusterers_BlueGreenYellow_array[2].setMap(m_map);
m_clusterers_BlueGreenYellow_array[3].setMap(m_map);
}
function getRenderer(colorCluster)
{
var textColor = (colorCluster == "white") ? "black" : "white";
let renderer = {
render({ count, position }, stats) {
const svg = window.btoa(`
<svg fill="${colorCluster}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
<circle cx="120" cy="120" opacity="0.7" r="70" /></svg>`);
return new google.maps.Marker({
label: { text: String(count), color: textColor, fontSize: "12px" },
position,
icon: {
url: `data:image/svg+xml;base64,${svg}`,
scaledSize: new google.maps.Size(60, 60),
},
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
});
}
};
return (renderer);
}
function loadAttributes(){
<?php
$sql = "SELECT * FROM tblDronePhotoAttributes, tblDronePhotos WHERE tblDronePhotos.DronePhotosId = tblDronePhotoAttributes.PhotoId and tblDronePhotoAttributes.ProjectId = '".$_GET['project']."'";
$result = $mysqli->query($sql);
$photoAttributes = "let photoAttributes = [";
while($obj = $result->fetch_object())
{
$photoAttributes .= "['".$obj->PhotoName."', ".$obj->AttributeId."],";
}
echo($photoAttributes."['',0]];");
?>
let content = m_infoWindow.getContent();
content = content.substring(content.indexOf("http"),content.indexOf("JPG"))+"JPG";
let PhotoName = content.substring(content.lastIndexOf("/")+1,200);
for (const element of photoAttributes) { // You can use `let` instead of `const` if you like
if(element[0] == PhotoName){
document.getElementById("Attribute_"+element[1]).checked = true;
}
}
}
function saveAttributes(project){
let content = m_infoWindow.getContent();
content = content.substring(content.indexOf("http"),content.indexOf("JPG"))+"JPG";
let PhotoName = content.substring(content.lastIndexOf("/")+1,200);
let arr = [];
let x = 0;
for (let i = 0; i < 1000; i++) {
if(document.getElementById("Attribute_"+i) != undefined){
if(document.getElementById("Attribute_"+i).checked == true){
arr[x] = i;
x++;
}
}
}
var url = 'https://appsrv.astacus.se/XMP/viewer/save_data_attributes.php?PhotoName='+PhotoName+'&project='+project;
jQuery.ajax({
url: url,
type: 'POST',
data: { attributesArray: arr },
success: function (dataString)
{
alert('Sparat! '+dataString);
},
error: function (err)
{
alert('Error in getting data');
}
});
}
function get_Markers()
{
var markersBlueGreenYellowWhiteDict_Local = {};
var markersBlueDict = {};
var markersGreenDict = {};
var markersYellowDict = {};
var markersWhiteDict = {};
Object.keys(m_markersOnMap_Dict_All_DB[m_droneProjectId].DronePhotoIdInfosDict).forEach((keyPhotoId) =>
{
let markerInfo = m_markersOnMap_Dict_All_DB[m_droneProjectId].DronePhotoIdInfosDict[keyPhotoId].XMP;
<?php
$sql = "SELECT * FROM tblDroneAttributes";
$result = $mysqli->query($sql);
$checkbox = "var checkbox ='";
while($obj = $result->fetch_object())
{
$checkbox .="<input type=\"checkbox\" id=\"Attribute_".$obj->DronePhotoAttributesId."\" name=\"".$obj->Attribute."\" /> <label for=\"Attrubute_".$obj->DronePhotoAttributesId."\">".$obj->Attribute."</label>";
}
echo($checkbox." <button type=\"button\" onclick=\"saveAttributes(".$_GET['project'].");\">Save</button>' ");
?>
var contentString = '<div id="content" name="'+ markerInfo.placeName +'" onmouseenter="loadAttributes();"><a href="' + markerInfo.placeName +'"><img src="'+ markerInfo.placeName_low + '" width="800" ></a><br> '+checkbox+' </div>';
var angleDegrees = parseInt(markerInfo.FlightYawDegree)-0;
var GimbalPitchDegree = parseInt(markerInfo.GimbalPitchDegree);
var fillColor = GetFillColor(GimbalPitchDegree);
var position = markerInfo.LatLng[0];
const marker = addMarker(fillColor, angleDegrees, position);
if (fillColor == 'blue')
{
markersBlueDict[keyPhotoId] = marker;
}
else if (fillColor == 'green')
{
markersGreenDict[keyPhotoId] = marker;
}
else if (fillColor == 'yellow')
{
markersYellowDict[keyPhotoId] = marker;
}
else if (fillColor == 'white')
{
markersWhiteDict[keyPhotoId] = marker;
}
addListener(marker, contentString);
});
markersBlueGreenYellowWhiteDict_Local['blue'] = markersBlueDict;
markersBlueGreenYellowWhiteDict_Local['green'] = markersGreenDict;
markersBlueGreenYellowWhiteDict_Local['yellow'] = markersYellowDict;
markersBlueGreenYellowWhiteDict_Local['white'] = markersWhiteDict;
return (markersBlueGreenYellowWhiteDict_Local);
}
function get_CenterOfAllMarkers()
{
var lat = 0;
var lng = 0;
var markersOnMap = getAllMarkersOnMap_DB();
markersOnMap.map((markerInfo, index) => {
lat += markerInfo.LatLng[0].lat;
lng += markerInfo.LatLng[0].lng;
});
const center = { lat: (lat / markersOnMap.length), lng: (lng / markersOnMap.length)};
return (center);
}
function get_Map()
{
var splitArray = m_centerLatLong.split(',');
var lat = parseFloat(splitArray[0].trim());
var longg = parseFloat(splitArray[1].trim());
var centerLatLong = {lat:lat, lng: longg};
const map = new google.maps.Map(document.getElementById("id_GoogleMap"),
{
zoom: 5.3,//16//18
center: centerLatLong,
mapTypeId: 'satellite',
mapId: "DEMO_MAP_ID",
gestureHandling: 'greedy',//to disable ctrl + scroll to zoom the map error
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
},
});
return (map);
}
function get_InfoWindow()
{
const infoWindow = new google.maps.InfoWindow({
content: "",
maxWidth: 850,
});
return (infoWindow);
}
function GetFillColor(GimbalPitchDegree)
{
var fillColor = "white";
GimbalPitchDegree = Math.abs(GimbalPitchDegree);
if(GimbalPitchDegree >= 0 && GimbalPitchDegree <= 45)
{
fillColor = "blue";
}
else if(GimbalPitchDegree > 45)
{
fillColor = "green";
}
return (fillColor);
}
/*function GetFillColor_Old(GimbalPitchDegree)
{
var fillColor = "white";
GimbalPitchDegree = Math.abs(GimbalPitchDegree);
if(GimbalPitchDegree < 0 && GimbalPitchDegree >= 22.5){
fillColor = "yellow";
}else if(GimbalPitchDegree < 22.5 && GimbalPitchDegree >= 45){
fillColor = "blue";
}else if(GimbalPitchDegree < 45 && GimbalPitchDegree >= 67.5){
fillColor = "green";
}else if(GimbalPitchDegree >= 90)
{
fillColor = "green";
}
return (fillColor);
}*/
function addMarker(fillColor, angleDegrees, position)
{
const marker = new google.maps.Marker({
position: position,
map: m_map,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 6,
fillColor: fillColor,
fillOpacity: 0.8,
strokeWeight: 2,
rotation: angleDegrees
}
});
return (marker);
}
function addListener(marker, contentString)
{
marker.addListener("click", () =>
{
closeOtherInfo();
m_infoWindow.setContent(contentString);
m_infoWindow.open(m_map, marker);
m_InforObj[0] = m_infoWindow;
});
}
function closeOtherInfo()
{
if (m_InforObj.length > 0)
{
m_InforObj[0].set("marker", null);
m_InforObj[0].close();
m_InforObj.length = 0;
}
}
function show_markerOrthoGraphic()
{
clearAllMarkerClusters();
m_clusterers_BlueGreenYellow_array[1].addMarkers(getRequiredMarkersOnMap("green"));
}
function show_markerPerspective()
{
clearAllMarkerClusters();
m_clusterers_BlueGreenYellow_array[0].addMarkers(getRequiredMarkersOnMap("blue"));
}
function ShowMarkerBasedOnAttribute(attributeid)
{
clearAllMarkerClusters();
download_Attribute_Data(attributeid);
}
async function download_Attribute_Data(attributeid)
{
var url = 'https://appsrv.astacus.se/XMP/viewer/get_data_attributes.php?project=' + m_droneProjectId + "&attributeId=" + attributeid;
var markersOnMap_BasedOnAttribute = [];
jQuery.ajax({
url: url,
type: 'GET',
success: function (dataString)
{
if (dataString != "0 results")
{
var resultDict = JSON.parse(dataString);
var resultArray = resultDict['result'];
var photoIds = [];
resultArray.forEach((rowData) =>
{
var dronePhotoAttributesId = rowData['DronePhotoAttributesId'];
var attributeId = rowData['AttributeId'];
var photoId = rowData['PhotoId'];
photoIds.push(photoId);
var acDronePhotoIdInfo_Found = m_markersOnMap_Dict_All_DB[m_droneProjectId].DronePhotoIdInfosDict[photoId];
if (acDronePhotoIdInfo_Found != undefined)
{
var gimbalPitchDegree = acDronePhotoIdInfo_Found.XMP.GimbalPitchDegree;
var fillColor = GetFillColor(gimbalPitchDegree);
markersOnMap_BasedOnAttribute.push(acDronePhotoIdInfo_Found);
}
});
loadMarkersBasedOnAttribute(photoIds, markersOnMap_BasedOnAttribute);
}
},
error: function (err)
{
alert('Error in getting data');
}
});
}
function loadMarkersBasedOnAttribute(photoIds, markersOnMap_BasedOnAttribute)
{
if (markersOnMap_BasedOnAttribute.length > 0)
{
var GimbalPitchDegree = parseInt(markersOnMap_BasedOnAttribute[0].XMP.GimbalPitchDegree);
var fillColor = GetFillColor(GimbalPitchDegree);
var markersRequired = [];
photoIds.forEach((photoId) =>
{
if (Object.keys(m_markersBlueGreenYellowWhiteDict[fillColor]).includes(photoId))
{
let marker = m_markersBlueGreenYellowWhiteDict[fillColor][photoId];
markersRequired.push(marker);
}
});
if (markersRequired.length > 0)
{
if (fillColor == 'blue')
{
m_clusterers_BlueGreenYellow_array[0].addMarkers(markersRequired);
}
else if (fillColor == 'green')
{
m_clusterers_BlueGreenYellow_array[1].addMarkers(markersRequired);
}
else if (fillColor == 'yellow')
{
m_clusterers_BlueGreenYellow_array[2].addMarkers(markersRequired);
}
else if (fillColor == 'white')
{
m_clusterers_BlueGreenYellow_array[3].addMarkers(markersRequired);
}
}
}
}
function getRequiredMarkersOnMap(fillColor)
{
var markersOnMap = [];
Object.keys(m_markersBlueGreenYellowWhiteDict[fillColor]).forEach((keyPhotoId) =>
{
let marker = m_markersBlueGreenYellowWhiteDict[fillColor][keyPhotoId];
markersOnMap.push(marker);
});
return (markersOnMap);
}
function getAllMarkersOnMap_DB()
{
var markersOnMap = [];
let dronePhotoIdInfosDict = m_markersOnMap_Dict_All_DB[m_droneProjectId].DronePhotoIdInfosDict;
Object.keys(dronePhotoIdInfosDict).forEach((keyPhotoId) =>
{
let marker = dronePhotoIdInfosDict[keyPhotoId].XMP;
markersOnMap.push(marker);
});
return (markersOnMap);
}
function clearAllMarkerClusters()
{
m_clusterers_BlueGreenYellow_array[0].clearMarkers();
m_clusterers_BlueGreenYellow_array[1].clearMarkers();
m_clusterers_BlueGreenYellow_array[2].clearMarkers();
m_clusterers_BlueGreenYellow_array[3].clearMarkers();
}
</script>
</head>
<body onload="onLoad()">
<div id="id_GoogleMap_Loading">LOADING</div>
<div id="id_GoogleMap"></div>
<!-- <div id="id_LabelLoading">Loading please wait!...</div> -->
<div id="id_GoogleMap_Menu">
KAMERAFILTRERING
<br>
<a id="id_BtnClickShowMarkerOrthographic" href="#"> Visa markbilder </a>
<br>
<a id="id_BtnClickShowMarkerPerspective" href="#"> Visa perspektivbilder </a>
<br>
<hr>
OBJEKTFILTRERING
<br>
<?php
$sql = "SELECT * FROM tblDroneAttributes";
$result = $mysqli->query($sql);
while($obj = $result->fetch_object())
{
echo(' <a id="id_ShowMarkerAttrubute'.$obj->DronePhotoAttributesId.'" href="#" onclick="ShowMarkerBasedOnAttribute('.$obj->DronePhotoAttributesId.');"> '.$obj->Attribute.' </a><br>');
}
?>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQD6RdzrxcUb6vVbKHS7aeCFUuoqH2TSY"></script>
</body>
</html>