diff --git a/static/scripts/accChart.js b/static/scripts/accChart.js index 75e2941..e31f5ad 100644 --- a/static/scripts/accChart.js +++ b/static/scripts/accChart.js @@ -1,6 +1,12 @@ -let allAccSerial = [] -let allSerialCoords = [] +/** + * This file defines a line chart used in the full replay page, showing Ublox horizontal accuracy, + * smartphone horizontal accuracy and distance between the positions of the Ublox + * and the Smartphone at a same time in meters, over time. + * + * @authors Timo Volkmann, Frank Herkommer. + */ +//Defines the chart and its properties let ctx = document.getElementById('accChart').getContext('2d'); let accChart = new Chart(ctx, { type: 'line', @@ -58,14 +64,20 @@ let accChart = new Chart(ctx, { } }); +/** + * Function to calculate the distance between to coordinates at a same time using the vincenty algorithm. + * + * @param data all collected data. + */ function addDistances(data){ + //collect all horizontal accuracies from serial source and tcp source. let serialHAccs = data.map(el => { return el.ser.HAcc }) let tcpHAccs = data.map(el => { return el.tcp.HAcc }) - + //apply vincenty algorithm on coordinates from serial and tcp source. let distances = data.map((el, i, arr) => { // return distVincenty(el.ser.Position, el.tcp.Position) const plaindist = distVincenty(el.ser.Position, el.tcp.Position) @@ -79,6 +91,7 @@ function addDistances(data){ return el.tcp.Timestamp }) + //add the data to the chart and update the hart accChart.data.labels = tcpTimes accChart.data.datasets[0].data = serialHAccs accChart.data.datasets[1].data = tcpHAccs @@ -86,6 +99,12 @@ function addDistances(data){ accChart.update() } +/** + * Function to calculate distance between two coordinates using the haversine algorithm (less precise). + * @param coord1 first set of coordinates. + * @param coord2 second set of coordinates. + * @returns {number} distance between the two points in meters. + */ function distanceInMetersBetweenEarthCoordinates(coord1, coord2) { let long1 = coord1[0] let lat1 = coord1[1] @@ -110,6 +129,12 @@ function distanceInMetersBetweenEarthCoordinates(coord1, coord2) { Number.prototype.toRad = function () { return this * Math.PI / 180; } +/** + * Function to calculate distance between two coordinates using the vincenty algorithm (more precise). + * @param coord1 first set of coordinates. + * @param coord2 second set of coordinates. + * @returns {string|number} distance between the two point is meters. + */ function distVincenty(coord1, coord2) { const lon1 = coord1[0] const lat1 = coord1[1] diff --git a/static/scripts/accuracy.js b/static/scripts/accuracy.js index c0092fc..127d211 100644 --- a/static/scripts/accuracy.js +++ b/static/scripts/accuracy.js @@ -1,5 +1,14 @@ -var ctx = document.getElementById("accuracy").getContext('2d'); -var barChart = new Chart(ctx, { +/** + * This file defines an horizontal bar chart used in the live tracking page, showing Ublox horizontal accuracy, + * smartphone horizontal accuracy and distance between the positions of the Ublox + * and the Smartphone at a same time in meters. + * + * @authors Timo Volkmann, Frank Herkommer. + */ + +//Defines the chart and its properties. +let ctx = document.getElementById("accuracy").getContext('2d'); +let barChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["Meters"], @@ -37,16 +46,33 @@ var barChart = new Chart(ctx, { } }); +/** + * Function to add the Horizontal and Vertical accuracy sent by the Ublox to the chart. + * Called every time a message is received over serial connection from the server. + * @param hacc horizontal accuracy in meters. + * @param vacc vertical accuracy in meters + */ function addSerialAccuracy(hacc, vacc){ barChart.data.datasets[0].data = [hacc, vacc]; barChart.update(); } +/** + * Function to add the Horizontal and Vertical accuracy sent by the Smartphone to the chart. + * Called every time a message is received over tcp connection from the server. + * @param hacc horizontal accuracy in meters. + * @param vacc vertical accuracy in meters + */ function addTCPAccuracy(hacc, vacc){ barChart.data.datasets[1].data = [hacc, vacc]; barChart.update(); } +/** + * Function to add the calculated distance between coordinates sent by the Ublox and the coordinates + * sent by the smartphone to the chart. + * @param dist distance calculated in meters. + */ function addDistanceToBarChart(dist){ barChart.data.datasets[2].data = [dist]; barChart.update(); diff --git a/static/scripts/map.js b/static/scripts/map.js index 8f75f95..4293404 100644 --- a/static/scripts/map.js +++ b/static/scripts/map.js @@ -1,9 +1,17 @@ +/** + * This file defines the map in satellite style for the live tracking page, defines and updates its data sources. + * + * @authors Timo Volkmann, Frank Herkommer. + */ + mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg'; let map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/satellite-v9', zoom: 0 }); + +//Empty geoJSON for coordinates from TCP input let emptyTCP = { type: "FeatureCollection", features: [ @@ -15,7 +23,7 @@ let emptyTCP = { } }] } - +//Empty geoJSON for coordinates from serial input let emptySERIAL = { type: "FeatureCollection", features: [ @@ -28,6 +36,9 @@ let emptySERIAL = { }] } +/** + * Set up the map with its data sources and its different layers. + */ map.on('load', function () { map.addSource('routeTCP', { 'type': 'geojson', 'data': emptyTCP }) @@ -69,11 +80,27 @@ map.on('load', function () { stateLegendEl.style.display = 'block'; }) +/** + * Function to push coordinates data coming from a TCP connection + * into the emptyTCP geoJSON object. + * Called every time a message is received over TCP from the server. + * + * @param TCPlong longitude coming in from device connected over TCP port. + * @param TCPlat latitude coming in from device connected over TCP port. + */ function updateMapTCP (TCPlong, TCPlat) { emptyTCP.features[0].geometry.coordinates.push([TCPlong, TCPlat]); map.getSource('routeTCP').setData(emptyTCP); } +/** + * Function to push coordinates data coming from a serial connection + * into the emptySERIAL geoJSON object. + * Called every time a message is received over serial connection from the server. + * + * @param SERIALlong longitude coming in from device connected over serial port. + * @param SERIALlat latitude coming in from device connected over serial port. + */ function updateMapSERIAL (SERIALlong, SERIALlat) { emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]); map.getSource('routeSERIAL').setData(emptySERIAL); diff --git a/static/scripts/mapfull.js b/static/scripts/mapfull.js index e833929..542b4b3 100644 --- a/static/scripts/mapfull.js +++ b/static/scripts/mapfull.js @@ -1,3 +1,9 @@ +/** + * This file defines the map in satellite style for the full replay page. + * + * @authors Timo Volkmann, Frank Herkommer. + */ + mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg'; let map = new mapboxgl.Map({ container: 'map', @@ -5,6 +11,9 @@ let map = new mapboxgl.Map({ zoom: 0 }); +/** + * Set up the map with its data sources and its different layers. + */ map.on('load', function () { map.addSource('routeTCP', { 'type': 'geojson', 'data': null }) @@ -46,6 +55,10 @@ map.on('load', function () { stateLegendEl.style.display = 'block'; }) +/** + * Function to add all collected coordinates sent in by the Smartphone to the map. + * @param sensordataList List of all received messages of the tcp source and their sensor data + */ function updateMapTCPbulk(sensordataList) { console.log("add TCP data to map") let geoJsonTCP = { @@ -72,6 +85,10 @@ function updateMapTCPbulk(sensordataList) { map.panTo(geoJsonTCP.features[0].geometry.coordinates[geoJsonTCP.features[0].geometry.coordinates.length-1]); } +/** + * Function to add all collected coordinates sent in by the Ublox to the map. + * @param sensordataList List of all received messages of the serial source and their sensor data + */ function updateMapSERIALbulk(sensordataList) { console.log("add SERIAL data to map") let geoJsonSerial = { diff --git a/static/scripts/refull.js b/static/scripts/refull.js index 952623c..61c7e2f 100644 --- a/static/scripts/refull.js +++ b/static/scripts/refull.js @@ -1,4 +1,14 @@ +/** + * This file contains all the controls for the full replay page. + * + * @authors Timo Volkmann, Frank Herkommer. + */ + let indexes +//list of all horizontal accuracies sent in by the Ublox +let allAccSerial = [] +//list of all coordinates sent in by the Ublox +let allSerialCoords = [] function composeTimestamp(servertime){ let composed; diff --git a/static/scripts/speedChart.js b/static/scripts/speedChart.js index b809040..da2afda 100644 --- a/static/scripts/speedChart.js +++ b/static/scripts/speedChart.js @@ -1,5 +1,14 @@ +/** + * This file defines a line chart used in the full replay page, showing Ublox speeds and + * smartphone speeds at a same moment in time in km/h, over time. + * + * @authors Timo Volkmann, Frank Herkommer. + */ + +//List of all speeds sent in by the Ublox let allSpeedsSerial = [] +//Define the line chart and its properties let ctx = document.getElementById('speedChart').getContext('2d'); let speedChart = new Chart(ctx, { type: 'line', @@ -48,6 +57,12 @@ let speedChart = new Chart(ctx, { } }); +/** + * Function filtering out speed data sent in by the Ublox using only the given indexes calculated in the refull.js file, + * and adding the data to the chart. + * As there is less smartphone data collected, we only want the Ublox speeds that come in at the moment with the + * smallest time difference between the TCP message and the Serial message. + */ function addSerialSpeedData() { let speeds = [] @@ -58,6 +73,11 @@ function addSerialSpeedData() { speedChart.update(); } +/** + * Function to extract only the speeds and Timestamps out of the messages received from the smartphone + * and add tem to the chart. + * @param sensordataList List of all received messages of the tcp source and their sensor data. + */ function addTCPSpeedData(sensordataList) { let speedsTCP = [] let times = [] diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js index f9e6cc9..309d0df 100644 --- a/static/scripts/speedometer.js +++ b/static/scripts/speedometer.js @@ -1,3 +1,10 @@ +/** + * This file defines a doughnut chart used in the live tracking page, representing a speedometer showing + * Ublox speeds and smartphone speeds in km/h. + * + * @authors Timo Volkmann, Frank Herkommer. + */ + let options1 = { type: 'doughnut', data: { @@ -142,12 +149,18 @@ let options2 = { cutoutPercentage: 65 } } - +//chart showing the actual speed of the two devices. let ctx1 = document.getElementById('speedometer').getContext('2d'); let mySpeedometer = new Chart(ctx1, options1); +//chart adding the different speed areas colored from green to red. let ctx2 = document.getElementById('speedometerSpeeds').getContext('2d'); let mySpeedometer2 = new Chart(ctx2, options2); +/** + * Function that adds speed data sent by the Ublox, converted to km/h, to the speedometer. + * Called every time a message is received over serial connection from the server. + * @param speedSERIAL speed of the Ublox in m/s + */ function addSpeedSerial(speedSERIAL){ let speedSERIALkmh = (speedSERIAL * 3.6) let speedSERIALpercent = (speedSERIALkmh/250)*100 @@ -156,6 +169,11 @@ function addSpeedSerial(speedSERIAL){ mySpeedometer.update(); } +/** + * Function that adds speed data sent by the Smartphone, converted to km/h, to the speedometer. + * Called every time a message is received over tcp connection from the server. + * @param speedTCP speed of the Smartphone in m/s + */ function addSpeedTcp(speedTCP){ let speedTCPkmh = (speedTCP * 3.6) let speedTCPpercent = (speedTCPkmh/250)*100;