decoder-app.html

<!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">
	<title>Smart Parks Decoder app</title>
	<link rel="shortcut icon" href="/assets/favicon32x32.jpg" type="image/x-icon">
	<link rel="stylesheet" href="/css/bootstrap.css">
	<link rel="stylesheet" href="/css/shared.css">
	<style type="text/css">
	</style>
</head>
<body class="bg-light">

<!---------------------------------------Do not include when exporting page - Internal navigation------------------------------------------>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
	<div class="container">
		<a class="navbar-brand" href="/index.html">Smart Parks Toolset</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link" href="/index.html">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="/battery-calculator.html">Sensor Battery Calculator</a>
				</li>
				<li class="nav-item">
					<a class="nav-link active" href="/decoder-app.html">Decoder app</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="/encoder-app.html">Encoder app</a>
				</li>
			</ul>
		</div>
	</div>
</nav>
<!--------------------------------------- END - Do not include when exporting page - Internal navigation------------------------------------------>


<div class="container">
	<div class="row">
		<div class="col py-5 text-center">
			<h2>Decoder app</h2>
			<p class="lead">This tool can be used to decode LoRaWAN payloads in HEX and BASE64 format. We have also provided some default decoders. Please be aware that this is a tool for debugging only. In
			                doubt, please consult Smart Parks directly.</p>
		</div>
	</div>
	<div class="row">
		<form id="inputForm">
			<div class="form-group mb-2">
				<label for="payloadIn">Base 64 or Hexadecimal payload</label>
				<div class="input-group">
					<input id="payloadIn" type="text" class="form-control" placeholder="Base 64 or Hexadecimal payload">
					<span class="input-group-text" id="payloadInType"></span>
				</div>
			</div>

			<div class="form-group mb-4">
				<label for="translatedPayloadIn">Translated payload</label>
				<div class="input-group">
					<input id="translatedPayloadIn" type="text" class="form-control" placeholder="Translated payload to: Base 64 or Hexadecimal" aria-label="readonly input example" readonly>
					<span class="input-group-text" id="translatedPayloadInType"></span>
					<button class="btn btn-outline-secondary" type="button" id="CopyTranslatedPayload" onclick="copyText('translatedPayloadIn')">Copy</button>
				</div>
			</div>
			<label for="portIn">Port</label>
			<div class="btn-toolbar mb-4" role="toolbar" aria-label="Select port">
				<div class="btn-group me-2" role="group" aria-label="Pre selected ports">
					<button type="button" class="btn btn-outline-primary preDefinePort" value="1" data-bs-toggle="tooltip" data-bs-placement="top" title="SP: GPS message">1</button>
					<button type="button" class="btn btn-outline-primary preDefinePort" value="2" data-bs-toggle="tooltip" data-bs-placement="top" title="HP: GPS">2</button>
					<button type="button" class="btn btn-outline-primary preDefinePort" value="3" data-bs-toggle="tooltip" data-bs-placement="top" title="SP: Settings">3</button>
					<button type="button" class="btn btn-outline-primary preDefinePort" value="4" data-bs-toggle="tooltip" data-bs-placement="top" title="SP: Status message">4</button>
					<button type="button" class="btn btn-outline-primary preDefinePort" value="11" data-bs-toggle="tooltip" data-bs-placement="top" title="SP: Get GPS log">11</button>
					<button type="button" class="btn btn-outline-primary preDefinePort" value="12" data-bs-toggle="tooltip" data-bs-placement="top" title="SP: Status message">12</button>
				</div>
				<div class="input-group">
					<input type="number" class="form-control" id="portIn" placeholder="1" value="1">
				</div>
			</div>


			<div class="row mb-4">
				<label>Variables</label>
				<div class="col">
					<input type="text" class="form-control" id="variables-key-1" placeholder="Key" aria-label="Key">
				</div>
				<div class="col">
					<input type="text" class="form-control" id="variables-value-1" placeholder="Value" aria-label="Value">
				</div>
			</div>

			<div class="form-group mb-2">
				<label for="decoderList">What decoder are you using?</label>
				<select class="form-select" id="decoderList">
					<option selected value="custom">Custom</option>

				</select>
			</div>

			<div class="form-group mb-4">
				<label for="decoder">Decoder</label>
				<textarea class="form-control" id="decoder" placeholder="paste your decoder here" rows="15"></textarea>
			</div>
			<div class="form-group mb-4">
				<label for="resultSet">Result Set</label>
				<div class="form-control">
					<pre id="resultSet"></pre>
					<div style="visibility: hidden; height: 0;">
						<label for="resultSetCopy"></label>
						<textarea class="form-control" id="resultSetCopy" rows="1"></textarea>
					</div>
					<button type="button" class="btn btn-outline-primary" onclick="copyText('resultSetCopy')">Copy</button>
				</div>
			</div>
		</form>
	</div>
</div>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
<script src="/js/shared.js"></script>
<script src="/js/decoder.js"></script>
</body>
</html>