-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (82 loc) · 5.21 KB
/
index.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Automatic Javascript Decoder Generator for The Things Network</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</head>
<body class="class bg-light p-3 m-1 border-1 bd-example" >
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div class="container py-3">
<h1>Automatic TTN Decoder Generator</h1>
<p> </p>
<p> This script takes as input a list of json objects representing the packet variables, their types, starting byte position and the conditions to execute each decoding operation.Visit the <a href="https://github.com/victorsobral/auto-generated_ttn_decoder">project repository</a> for more details.</p>
<p> </p>
<div class="form-group">
<label for="input_params" class="fw-bold">Template decoder json: </label>
<textarea class="form-control" rows="100" id="input_params" style="height: 200px"></textarea>
</div>
<p> </p>
<div class="form-group">
<label for="output_js" class="fw-bold">TTN javascript decoder: </label>
<textarea class="form-control" rows="100" id="output_js" style="height: 200px"></textarea>
</div>
<p> </p>
<button class="btn btn-primary" onclick="generateFunction()" id="generate_btn">Generate decoder's javascript</button>
<button class="btn btn-danger" onclick="clearFunction()" id="clear_btn">Clear</button>
<button type="button" class="btn btn-secondary" onclick="copyFunction()" id="copy_btn">
copy to clipboard
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"></path>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"></path>
</svg>
</button>
</div>
<div id = "liveAlertPlaceholder"></div>
<script type="text/javascript" src="javascript/decoder_auto_generator.js">
</script>
<script>
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const alert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} d-flex align-items-center alert-dismissible fade show" role="alert">`,
` <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
setTimeout(function() {
alertPlaceholder.innerHTML = '<div></div>';
}, 2000);
};
function generateFunction() {
var input_params = document.getElementById('input_params').value;
var decoding_instructions = JSON.parse(input_params);
if(!(Array.isArray(decoding_instructions))){
decoding_instructions = Array(decoding_instructions);
}
document.getElementById("output_js").value = generate_decoder(decoding_instructions);
alert('Javascript decoder successfully generated!', 'success');
}
function copyFunction(){
navigator.clipboard.writeText(document.getElementById("output_js").value);
alert('Code sucessfully copied', 'success');
}
function clearFunction(){
document.getElementById("output_js").value = '';
}
</script>
</body>
</html>