tester.html

<p> Frame format Multipoint Data Format 2 :
    1121ffffff0009dd47000c28040b2710210a013b402b64046b80bc600f7a031b8033181254026a600538</p>
<p>MP Frame Format 0 : 1121ffffff00099207000c267f0b2700002680ff68267f0b2700002680ff68267f0b2700002680ff68</p>

<input id="input"
    value="21 04 08 64 07 00 0d 69 65 05 4a 0a 3c 81 00 00 00 26 00 24 00 65 08 00 16 00 1e 00 00 00 00 00 00 00 00 00 00 00 00 06 a3 01 d4 5c 3a a5 84 81 50 07 f6 00 cc c0 00">Raw
Payload (HEX)</input>
<input id="fport" value="21">Fport</input>
<br>
<button id="button_decode">Decode</button>
<pre id="output"></pre>


<script src="./TnnJsDecoder/TE_TtnDecoder.js"></script>


<script type="module">




    document.getElementById("button_decode").addEventListener("click", handle_click);

    document.getElementById("input").addEventListener("keydown", function (e) {
        if (e.code === "Enter") {  //checks whether the pressed key is "Enter"
            handle_click();
        }
    });

    function handle_click() {
        let input = parseHexString(document.getElementById("input").value.trim().replace(/\s/g, ''));
        let fport = document.getElementById("fport").value
        let output = syntaxHighlight(te_decoder(input, fport))
        document.getElementById("output").innerHTML = output
    }

    function parseHexString(str) {
        var result = [];
        // Ignore any trailing single digit; I don't know what your needs
        // are for this case, so you may want to throw an error or convert
        // the lone digit depending on your needs.
        while (str.length >= 2) {
            result.push(parseInt(str.substring(0, 2), 16));
            str = str.substring(2, str.length);
        }

        return result;
    }

    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

</script>

<style>
    input {
        width: 1000px;
    }

    pre {
        outline: 1px solid #ccc;
        padding: 5px;
        margin: 5px;
    }

    .string {
        color: green;
    }

    .number {
        color: darkorange;
    }

    .boolean {
        color: blue;
    }

    .null {
        color: magenta;
    }

    .key {
        color: red;
    }
</style>