-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathNMEA-Sentence-Decoder.html
97 lines (95 loc) · 4.86 KB
/
NMEA-Sentence-Decoder.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NMEA Sentence Decoder</title>
<meta name="description" content="Turn a .txt file of NMEA Sentences or a text input to a CSV, GPX, or KML file of GNSS/positional data">
<meta name="author" content="Brendan Luke">
<!-- favicon from https://iconarchive.com/show/100-flat-icons-by-graphicloads/location-icon.html with modification-->
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="stylesheet.css">
<script src="NMEA-Sentence-Parsing-Functions.js" async></script>
<script src="CSV-output-function.js" async></script>
<script src="GPX-output-function.js" async></script>
<script src="KML-output-function.js" async></script>
<script src="Stationary-output-function.js" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js" async></script> <!-- Chart.js CDN -->
<script src="output-selection-functionality.js"></script> <!-- cannot be loaded async because needed to run at page load -->
<!--
Date: September 8, 2021
-->
</head>
<body>
<div id="header"> <!-- Output type select 'buttons', default to CSV selection -->
<div id="CSV" class="header-select-icon" style="left: 5vw;" onclick="selectCSV()">CSV</div>
<div id="GPX" class="header-select-icon" style="left: 30vw;" onclick="selectGPX()">GPX</div>
<div id="KML" class="header-select-icon" style="left: 55vw;" onclick="selectKML()">KML</div>
<div id="Stationary" class="header-select-icon" style="left: 80vw;" onclick="selectStationary()">Stationary</div>
</div>
<div id="StartHouse">
<div id="inputHouse"> <!-- two input options; .txt file and raw text input -->
<div id="leftBox" class="borderBox">
<div id="uploadButtonHouse" class="innerBox">
<button onclick="fileUpload()" class="inputUnit">Upload NMEA Sentences .txt File</button>
<input id="fileInput" type="file" accept=".txt"/>
<!-- ^ this element is hidden and activated by button click^^ because it has limited styling -->
</div>
</div>
<div id="rightBox"class="borderBox">
<div id="textInputHouse" class="innerBox">
<label for="input">Paste NMEA Sentences here</label>
<textarea id="textInput" name="input" style="margin-top: 1.5vh;" class="inputUnit"></textarea>
</div>
</div>
</div>
<div id="submitHouse"> <!-- submit button for raw text input -->
<button id="submitText" class="submitButton" onclick="textSubmit()">Submit Text Input</button>
</div>
</div>
</body>
<script>
// run 'selectCSV()' function initially (default to CSV slelection)
selectCSV();
// Read uploaded .txt file case:
inputButton = document.getElementById('fileInput');
inputButton.addEventListener('change',fileUpload); // add event listener for change in fileInput
function fileUpload() {
document.getElementById('fileInput').click();
var file = this.files[0]; // get the first file
var fileName = file.name; // filename of uploaded file
var reader = new FileReader(); // create new file reader
reader.readAsBinaryString(file); // required
reader.onload = function(e) { // when file upload is completed do the following:
let data = e.target.result; // data string
if (outputFlag == 1) { // CSV case
outputCSV(data,fileName);
} else if (outputFlag == 2) { // GPX case
outputGPX(data,fileName);
} else if (outputFlag == 3) { // KML case
outputKML(data,fileName);
} else { // stationary case
outputStationary(data,filename);
}
}
}
// Read submitted text case:
function textSubmit() {
var data = document.getElementById('textInput').value; // get contents of textInput element
if (data === "") { // check if input is empty
alert('Please submit data to the text input area.'); // alert user to input data
} else {
if (outputFlag == 1) { // CSV case
outputCSV(data,"Output GNSS Data.txt");
} else if (outputFlag == 2) { // GPX case
outputGPX(data,"Output GNSS Data.txt");
} else if (outputFlag == 3) { // KML case
outputKML(data,"Output GNSS Data.txt");
} else { // stationary case
outputStationary(data,"Output GNSS Data.txt");
}
}
}
</script>
</html>