JSFiddle - React, Tailwind, and code Playground

by arian_

HTML

<h1>nn::util::Float(Column/Row)Major4x3 Array Parser</h1>

<form id="parseForm">

    <label for="fileInput">Upload Binary File:</label>
    <input type="file" id="fileInput"><br><br>

    <label for="sizeInput">Number of Matrices (default 25):</label>
    <input type="number" id="sizeInput" min="1" value="25"><br><br>

    <label for="modeSelect">Select Parsing Mode:</label>
    <select id="modeSelect">
        <option value="column-major" selected>Column-Major</option>
        <option value="row-major">Row-Major</option>
    </select><br><br>

    <button>Parse</button>
</form>

<div id="output"></div>

<script>
// VariableIconBodyWorldMatrix (25 matrices)
// from blanco: ~/Downloads/variableiconbody\ binary/blanco-VariableIconBodyWorldMatrix.bin
const WORLD_MATRIX_INPUT = new Uint8Array([0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x4d, 0x9e, 0xdc, 0x41, 0x8e, 0xae, 0x2c, 0x37, 0x24, 0x5c, 0xdd, 0x3e, 0x00, 0x00, 0x00, 0x00, 0x26, 0xcf, 0xc5, 0x39, 0xbc, 0x55, 0x19, 0xb6, 0xf4, 0xb7, 0x1b, 0x3f, 0x34, 0x97, 0x2b, 0x3b, 0xae, 0xce, 0xc5, 0xb9, 0xac, 0xeb, 0xf3, 0xba, 0x9e, 0x5b, 0xdd, 0x3e, 0x00, 0x00, 0x00, 0x00, 0x4d, 0x9e, 0xdc, 0x41, 0x8e, 0xae, 0x2c, 0x37, 0x62, 0xce, 0x7f,...

CSS

body {
    margin: 20px;
}
h1 {
    color: #333;
}
input[type="number"] {
    width: 60px;
}
select {
    margin-left: 10px;
}
table {
    border-collapse: collapse;
    margin-top: 20px;
    width: 100%;
    overflow-x: auto;
}
th, td {
    border: 1px solid #999;
    padding: 8px;
    text-align: center;
}
th {
    background-color: #eee;
}
.matrix {
    margin-bottom: 20px;
}

JavaScript

const output = document.getElementById('output');
const sizeInput = document.getElementById('sizeInput');
const modeSelect = document.getElementById('modeSelect');

function displayMatrices(/** @type {ArrayBuffer} */ arrayBuffer) {
    const floatArray = new Float32Array(arrayBuffer);

    const desiredSize = parseInt(sizeInput.value) || 25;
    const mode = modeSelect.value;

    const floatsPerMatrix = 12; // 3 rows x 4 columns or 4 columns x 3 rows
    const matrices = [];

    const totalMatricesInFile = Math.floor(floatArray.length / floatsPerMatrix);

    for (let i = 0; i < Math.min(desiredSize, totalMatricesInFile); i++) {
        const offset = i * floatsPerMatrix;
        const matrix = [];

        // Initialize a 3x4 matrix (3 rows x 4 columns)
        for (let row = 0; row < 3; row++) {
            matrix[row] = [0, 0, 0, 0]; // 4 columns: X, Y, Z, W
        }

        if (mode === 'column-major') {
            // Column-Major Parsing
            for (let col = 0; col < 4; col++) { // 4 columns: X, Y, Z, W
                for (let row = 0; row < 3; row++) { // 3 rows
                    matrix[row][col] = floatArray[offset + col * 3 + row];
                }
            }
        } else if (mode === 'row-major') {
            // Row-Major Parsing
            for (let row = 0; row < 3; row++) { // 3 rows
                for (let col = 0; col < 4; col++) { // 4 columns: X, Y, Z, W
                    matrix[row][col] = floatArray[offset + row * 4 + col];
                }
            }
        }

        matrices.push(matrix);
    }

    // If not enough matrices, pad with zero matrices
    while (matrices.length < desiredSize) {
        const zeroMatrix = [
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ];
        matrices.push(zeroMatrix);
    }

    // Display the matrices
    output.innerHTML = ''; // Clear previous output

    matrices.forEach((matrix,...