lin-ldf

https://github.com/zpg6/lin-ldf
Admin
A Rust library for parsing LIN Description Files (.ldf) using the nom parser combinator library,...
Tokens:11,209
Snippets:18
Trust Score:7.5
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install lin-ldf

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/README.md

Installs the lin-ldf package using npm.

```bash
npm install lin-ldf
```

--------------------------------

### Usage Example

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/README.md

Demonstrates how to use the lin-ldf library to parse, validate, and get statistics from LDF content in a JavaScript environment.

```javascript
import * as linLdf from "lin-ldf";

const ldfContent = `/* MY BLOCK COMMENT */
            
LIN_description_file ; 
LIN_protocol_version = "2.1" ; 
LIN_language_version = "2.1" ; 
LIN_speed = 19.2 kbps ; 

Nodes {
    Master: Master, 5 ms, 0.1 ms ;
    Slaves: Slave1, Slave2, Slave3 ;
}

// MY LINE COMMENT

Signals {
    Signal1: 10, 0, Master, Slave1 , Slave2 ;
    Signal2: 10, 0, Master, Slave1 ;
    Signal3: 10, 0, Master, Slave1 ;
    Signal4: 10, 0, Slave1, Master ;
    Signal5: 2, 0, Slave1, Master ;
    Signal6: 1, 0, Slave1, Master ;
}

Diagnostic_signals {
    MasterReqB0: 8, 0 ;   /* MID SECTION COMMENT */
    MasterReqB1: 8, 0 ;
    MasterReqB2: 8, 0 ;
    MasterReqB3: 8, 0 ;
    MasterReqB4: 8, 0 ;
    MasterReqB5: 8, 0 ;   /* MID SECTION COMMENT */
}

Frames {
    Frame1: 0, Master, 8 {
        Signal1, 0 ;      /* MID SECTION COMMENT */
        Signal2, 10 ;
    }
    Frame2: 0x16, Slave1, 8 {
        Signal3, 0 ;
        Signal4, 10 ;
    }
}

Diagnostic_frames {
    MasterReq: 0x3C {
        MasterReqB0, 0 ;
        MasterReqB1, 8 ;
        MasterReqB2, 16 ;
        MasterReqB3, 24 ;
        MasterReqB4, 32 ;
        MasterReqB5, 40 ;
        MasterReqB6, 48 ;
        MasterReqB7, 56 ;
    }
    SlaveResp: 0x3D {
        SlaveRespB0, 0 ;
        SlaveRespB1, 8 ;
        SlaveRespB2, 16 ;
        SlaveRespB3, 24 ;
        SlaveRespB4, 32 ;
        SlaveRespB5, 40 ;
        SlaveRespB6, 48 ;
        SlaveRespB7, 56 ;
    }
}

Node_attributes {
    Slave1{
        LIN_protocol = "2.1" ;
        configured_NAD = 0xB ;
        initial_NAD = 0xB ;
        product_id = 0x123, 0x4567, 8 ;
        response_error = Signal1 ;
        P2_min = 100 ms ;
        ST_min = 0 ms ;
        N_As_timeout = 1000 ms ;
        N_Cr_timeout = 1000 ms ;
        configurable_frames {
            Frame1 ;
            Frame2 ;
        }
    }
    Slave2{
        LIN_protocol = "2.1" ;
        configured_NAD = 0xC ;
        initial_NAD = 0xC ;
        product_id = 0x124, 0x4568, 0x66 ;
        response_error = Signal2 ;
        P2_min = 100 ms ;
        ST_min = 0 ms ;
        N_As_timeout = 1000 ms ;
        N_Cr_timeout = 1000 ms ;
        configurable_frames {
            Frame1 ;
            Frame2 ;
        }
    }
}

Schedule_tables {
    AllFrames {
        Frame1 delay 10 ms ;
        Frame2 delay 10 ms ;
    }
}

Signal_encoding_types {
    ENC_BOOL {
        logical_value, 0, "FALSE" ;
        logical_value, 1, "TRUE" ;
    }
    ENC_TEMP {
        physical_value, 0, 1023, 0.2, -40, "degC" ;
    }
    ENC_RPM {
        physical_value, 0, 1023, 10, 0, "rpm" ;
    }
}

Signal_representation {
    ENC_BOOL: Signal1, Signal2 ;
    ENC_TEMP: Signal3, Signal4 ;
    ENC_RPM: Signal5, Signal6 ;
}`;

try {
    // Parse LDF file and get JavaScript object
    const parsed = linLdf.parse_ldf_file(ldfContent);
    console.log("Parsed LDF:", parsed);

    // Or get as JSON string
    const jsonString = linLdf.parse_ldf_to_json(ldfContent);
    console.log("LDF as JSON:", jsonString);

    // Validate LDF content
    const isValid = linLdf.validate_ldf(ldfContent);
    console.log("Is valid:", isValid);

    // Get statistics
    const stats = linLdf.get_ldf_stats(ldfContent);
    console.log("LDF stats:", stats);
} catch (error) {
    console.error("Parse error:", error);
}
```

--------------------------------

### Build and Run WebAssembly Demo

Source: https://github.com/zpg6/lin-ldf/blob/main/README.md

Builds the WebAssembly module for the lin-ldf parser and serves a local demo using Python's HTTP server. This is useful for testing the parser in a browser without installation.

```bash
cd wasm
./build.sh

python3 -m http.server 8000
# Then open http://localhost:8000
```

--------------------------------

### Install lin-ldf NPM Package

Source: https://github.com/zpg6/lin-ldf/blob/main/README.md

Installs the lin-ldf WebAssembly package via npm. This allows using the LIN Description File parser in JavaScript environments.

```bash
npm install lin-ldf
```

--------------------------------

### Running lin-ldf WASM Tests with Bun

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/tests/README.md

Provides commands to install dependencies, run all tests, execute specific test files, and use watch mode for the lin-ldf WASM package tests using the Bun runtime.

```bash
# Install dependencies
bun install

# Run all tests
bun test

# Run specific test file
bun test tests/basic.test.ts

# Watch mode
bun test --watch
```

--------------------------------

### Load Example LDF Content

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

Populates the LDF input textarea with a comprehensive example LDF string. This includes various sections like LIN description, nodes, signals, diagnostic signals, frames, diagnostic frames, node attributes, schedule tables, and signal encoding types.

```javascript
function loadExample() {
  const exampleLdf = `/* MY BLOCK COMMENT */ LIN_description_file ; LIN_protocol_version = "2.1" ; LIN_language_version = "2.1" ; LIN_speed = 19.2 kbps ; Nodes { Master: Master, 5 ms, 0.1 ms ; Slaves: Slave1, Slave2, Slave3 ; } // MY LINE COMMENT Signals { Signal1: 10, 0, Master, Slave1 , Slave2 ; Signal2: 10, 0, Master, Slave1 ; Signal3: 10, 0, Master, Slave1 ; Signal4: 10, 0, Slave1, Master ; Signal5: 2, 0, Slave1, Master ; Signal6: 1, 0, Slave1, Master ; } Diagnostic_signals { MasterReqB0: 8, 0 ; /* MID SECTION COMMENT */ MasterReqB1: 8, 0 ; MasterReqB2: 8, 0 ; MasterReqB3: 8, 0 ; MasterReqB4: 8, 0 ; MasterReqB5: 8, 0 ; MasterReqB6: 8, 0 ; MasterReqB7: 8, 0 ; SlaveRespB0: 8, 0 ; SlaveRespB1: 8, 0 ; SlaveRespB2: 8, 0 ; SlaveRespB3: 8, 0 ; SlaveRespB4: 8, 0 ; SlaveRespB5: 8, 0 ; SlaveRespB6: 8, 0 ; SlaveRespB7: 8, 0 ; /* MID SECTION COMMENT */ } Frames { Frame1: 0, Master, 8 { Signal1, 0 ; /* MID SECTION COMMENT */ Signal2, 10 ; } Frame2: 0x16, Slave1, 8 { Signal3, 0 ; Signal4, 10 ; } } Diagnostic_frames { MasterReq: 0x3C { MasterReqB0, 0 ; MasterReqB1, 8 ; MasterReqB2, 16 ; MasterReqB3, 24 ; MasterReqB4, 32 ; MasterReqB5, 40 ; MasterReqB6, 48 ; MasterReqB7, 56 ; } SlaveResp: 0x3D { SlaveRespB0, 0 ; SlaveRespB1, 8 ; SlaveRespB2, 16 ; SlaveRespB3, 24 ; SlaveRespB4, 32 ; SlaveRespB5, 40 ; SlaveRespB6, 48 ; SlaveRespB7, 56 ; } } Node_attributes { Slave1{ LIN_protocol = "2.1" ; configured_NAD = 0xB ; initial_NAD = 0xB ; product_id = 0x123, 0x4567, 8 ; response_error = Signal1 ; P2_min = 100 ms ; ST_min = 0 ms ; N_As_timeout = 1000 ms ; N_Cr_timeout = 1000 ms ; configurable_frames { Frame1 ; Frame2 ; } } Slave2{ LIN_protocol = "2.1" ; configured_NAD = 0xC ; initial_NAD = 0xC ; product_id = 0x124, 0x4568, 0x66 ; response_error = Signal2 ; P2_min = 100 ms ; ST_min = 0 ms ; N_As_timeout = 1000 ms ; N_Cr_timeout = 1000 ms ; configurable_frames { Frame1 ; Frame2 ; } } } Schedule_tables { AllFrames { Frame1 delay 10 ms ; Frame2 delay 10 ms ; } } Signal_encoding_types { ENC_BOOL { logical_value, 0, "FALSE" ; logical_value, 1, "TRUE" ; } ENC_TEMP { physical_value, 0, 1023, 0.2, -40, "degC" ; } ENC_RPM { physical_value, 0, 1023, 10, 0, "rpm" ; } } Signal_representation { ENC_BOOL: Signal1, Signal2 ; ENC_TEMP: Signal3, Signal4 ; ENC_RPM: Signal5, Signal6 ; }`;
  document.getElementById("ldf-input").value = exampleLdf;
  showStatus('Example LDF loaded. Click "Parse LDF" to analyze it.', "success");
}
```

--------------------------------

### Event Listeners and Initial State

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

Sets up event listeners for the parse, load example, and clear buttons. It also initializes the page by disabling the parse button and adding a loading class until the WASM module is ready.

```javascript
// Event listeners
document.getElementById("parse-button").addEventListener("click", parseLdf);
document.getElementById("load-example").addEventListener("click", loadExample);
document.getElementById("clear-button").addEventListener("click", clearAll);

// Initially disable parse button until WASM loads
document.getElementById("parse-button").disabled = true;
document.getElementById("parse-button").classList.add("loading");

// Initialize WASM
run();
```

--------------------------------

### Parse LDF File and Access Data in Rust

Source: https://github.com/zpg6/lin-ldf/blob/main/README.md

This snippet demonstrates parsing a LIN Description File (LDF) string using the `lin_ldf::parse_ldf` function. It then accesses and prints information about the LIN protocol version, speed, frames, and signals within the parsed data. The example assumes a valid LDF string is provided.

```rust
use lin_ldf::parse_ldf;

let ldf = r#"\nLIN_description_file ;\nLIN_protocol_version = \"2.1\" ;\nLIN_language_version = \"2.1\" ;\nLIN_speed = 19.2 kbps ;\n\n/* PARSING IGNORES BLOCK COMMENTS */\n// AND LINE COMMENTS\n\nNodes {\n    Master: Master, 5 ms, 0.1 ms ;\n    Slaves: Slave1, Slave2, Slave3 ;\n}\n\nSignals {\n    Signal1: 10, 0, Master, Slave1 , Slave2 ;\n    Signal2: 10, 0, Master, Slave1 ;\n    Signal3: 10, 0, Slave1, Master ;\n    Signal4: 10, 0, Slave1, Master ;\n    Signal5: 2, 0, Slave1, Master ;\n    Signal6: 1, 0, Slave1, Master ;\n}\n\nFrames {\n    Frame1: 0, Master, 8 {\n        Signal1, 0 ;\n        Signal2, 10 ;\n    }\n    Frame2: 0x16, Slave1, 8 {\n        Signal3, 0 ;\n        Signal4, 10 ;\n    }\n}\n\nNode_attributes {\n   Slave1 {\n       LIN_protocol = \"2.1\" ;\n       configured_NAD = 0xB ;\n       initial_NAD = 0xB ;\n       product_id = 0x123, 0x4567, 8 ;\n       response_error = Signal1 ;\n       P2_min = 100 ms ;\n       ST_min = 0 ms ;\n       N_As_timeout = 1000 ms ;\n       N_Cr_timeout = 1000 ms ;\n       configurable_frames {\n           Frame1 ;\n           Frame2 ;\n       }\n   }\n   Slave2 {\n       LIN_protocol = \"2.1\" ;\n       configured_NAD = 0xC ;\n       initial_NAD = 0xC ;\n       product_id = 0x124, 0x4568, 0x66 ;\n       response_error = Signal2 ;\n       P2_min = 100 ms ;\n       ST_min = 0 ms ;\n       N_As_timeout = 1000 ms ;\n       N_Cr_timeout = 1000 ms ;\n       configurable_frames {\n           Frame1 ;\n           Frame2 ;\n       }\n   }\n}\n\nSchedule_tables {\n    AllFrames {\n        Frame1 delay 10 ms ;\n        Frame2 delay 10 ms ;\n    }\n}\n"#;

let parsed_ldf = parse_ldf(ldf).expect("Failed to parse LDF file");

println!("LIN Version: {}", parsed_ldf.lin_protocol_version); // 2.1
println!("LIN Speed: {}", parsed_ldf.lin_speed); // 19200

for frame in parsed_ldf.frames {
    println!("Frame: `{}` is {} bytes long", frame.frame_name, frame.frame_size);
    for signal in frame.signals {
        println!("\tSignal: `{}` at bit position {}", signal.signal_name, signal.start_bit);
    }
}

```

--------------------------------

### lin-ldf API Documentation

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/README.md

Documentation for the lin-ldf library functions, including parsing, validation, and conversion utilities.

```APIDOC
lin-ldf API:

- parse_ldf_file(content: string): object
  Parses LDF content and returns a JavaScript object representing the LDF structure.
  Parameters:
    - content: A string containing the LDF file content.
  Returns: A JavaScript object with the parsed LDF data.

- parse_ldf_to_json(content: string): string
  Parses LDF content and returns it as a JSON string.
  Parameters:
    - content: A string containing the LDF file content.
  Returns: A JSON string representation of the LDF data.

- parse_ldf_to_pretty_json(content: string): string
  Parses LDF content and returns it as a formatted JSON string.
  Parameters:
    - content: A string containing the LDF file content.
  Returns: A pretty-printed JSON string representation of the LDF data.

- validate_ldf(content: string): boolean
  Validates the LDF content without performing a full parse.
  Parameters:
    - content: A string containing the LDF file content.
  Returns: true if the LDF content is valid, false otherwise.

- get_ldf_stats(content: string): object
  Retrieves statistics about the LDF file.
  Parameters:
    - content: A string containing the LDF file content.
  Returns: An object containing statistics about the LDF file.

- ldf_from_json(json: string): object
  Creates an LDF object from a JSON string.
  Parameters:
    - json: A JSON string representing LDF data.
  Returns: A JavaScript object representing the LDF structure.
```

--------------------------------

### Initialize and Load WASM Module

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

Initializes the lin-ldf WebAssembly module and retrieves its version. It also enables a parse button and displays a success or error message.

```javascript
import init, { parse_ldf_file, get_wasm_version } from "./pkg/lin_ldf.js";
let wasm;
async function run() {
  try {
    wasm = await init();
    console.log("lin-ldf-wasm module loaded, version:", get_wasm_version());
    document.getElementById("parse-button").disabled = false;
    document.getElementById("parse-button").classList.remove("loading");
    showStatus("lin-ldf-wasm module loaded successfully!", "success");
  } catch (error) {
    console.error("Failed to load lin-ldf-wasm module:", error);
    showStatus("Failed to load lin-ldf-wasm module: " + error.message, "error");
  }
}
```

--------------------------------

### LIN LDF Parsing

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

This snippet demonstrates the core functionality of parsing LIN Description Files (LDF). It takes LDF content as input and processes it to extract network configuration details such as nodes, signals, frames, and scheduling. The underlying implementation uses the lin-ldf Rust crate, compiled to WebAssembly for browser execution.

```javascript
import init, { parse_ldf } from 'lin-ldf';

async function loadLDFParser() {
  await init(); // Initialize the WASM module
}

function parseLDFContent(ldfContent) {
  try {
    const parsedData = parse_ldf(ldfContent);
    return parsedData;
  } catch (error) {
    console.error("Error parsing LDF content:", error);
    return null;
  }
}

// Example Usage:
// loadLDFParser().then(() => {
//   const ldfString = "... your LDF content here ...";
//   const result = parseLDFContent(ldfString);
//   if (result) {
//     console.log(result);
//   }
// });
```

```rust
use lin_ldf::parse_ldf;

#[wasm_bindgen]
pub fn parse_ldf(ldf_content: &str) -> Result<JsValue, JsValue> {
    match parse_ldf(ldf_content) {
        Ok(data) => Ok(serde_wasm_bindgen::to_value(&data).unwrap()),
        Err(e) => Err(JsValue::from_str(&format!("Failed to parse LDF: {}", e)))
    }
}

// Note: This Rust code is intended to be compiled to WASM and called from JavaScript.
```

--------------------------------

### Display Parsing Statistics

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

Populates a stats div with key statistics from the parsed LIN description file, including the number of signals, frames, nodes, and schedule tables.

```javascript
function showStats(parsedLdf) {
  const statsDiv = document.getElementById("stats");
  statsDiv.innerHTML = `
 <div class="stats">
 <div class="stat-item">
 <span class="stat-number">${parsedLdf.signals.length}</span>
 <span class="stat-label">Signals</span>
 </div>
 <div class="stat-item">
 <span class="stat-number">${parsedLdf.frames.length}</span>
 <span class="stat-label">Frames</span>
 </div>
 <div class="stat-item">
 <span class="stat-number">${parsedLdf.nodes.slaves.length + 1}</span>
 <span class="stat-label">Nodes</span>
 </div>
 <div class="stat-item">
 <span class="stat-number">${parsedLdf.schedule_tables.length}</span>
 <span class="stat-label">Schedules</span>
 </div>
 </div>
 `;
}
```

--------------------------------

### Basic HTML Structure for LDF Parser

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

This snippet outlines the fundamental HTML structure for the LDF parser application. It includes sections for the header, input area, control buttons, output display, and statistics.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LDF Reader</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>LDF Reader</h1>
            <nav class="nav-links">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </nav>
        </header>

        <main>
            <section class="input-section">
                <label for="ldf-input">Paste LDF Content Here:</label>
                <textarea id="ldf-input" placeholder="Enter your LDF content..."></textarea>
                <div class="buttons">
                    <button id="parse-button">Parse LDF</button>
                    <button id="clear-button">Clear</button>
                </div>
            </section>

            <section class="output-section">
                <h2 class="section-title">Parsing Results</h2>
                <div id="result" class="result"></div>
            </section>

            <section class="stats-section">
                <h2 class="section-title">Statistics</h2>
                <div id="stats" class="stats"></div>
            </section>
        </main>
    </div>
    <script src="script.js"></script>
</body>
</html>
```

--------------------------------

### Format Parsed LDF Data for Display

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

Generates HTML content from a parsed LIN description object. It includes a table of contents and detailed sections for header information, network nodes, signals, frames, and schedule tables.

```javascript
function formatParsedData(parsedLdf) {
  let output = "";
  // Build table of contents
  let toc = `<div class="table-of-contents"> <h3>Table of Contents</h3> <ul> <li><a href="#header-info">Header Information</a></li> <li><a href="#network-nodes">Network Nodes</a></li>`;
  if (parsedLdf.signals.length > 0) {
    toc += `<li><a href="#signals">Signals</a></li>`;
  }
  if (parsedLdf.frames.length > 0) {
    toc += `<li><a href="#frames">Frames</a></li>`;
  }
  if (parsedLdf.schedule_tables.length > 0) {
    toc += `<li><a href="#schedule-tables">Schedule Tables</a></li>`;
  }
  toc += `</ul></div>`;
  output += toc;

  // Header Information
  output += `<h3 class="section-title" id="header-info">Header Information</h3>`;
  output += `<table class="data-table"> <tr><th>Property</th><th>Value</th></tr> <tr><td>Protocol Version</td><td>${parsedLdf.header.lin_protocol_version}</td></tr> <tr><td>Language Version</td><td>${parsedLdf.header.lin_language_version}</td></tr> <tr><td>Speed</td><td>${parsedLdf.header.lin_speed} bps</td></tr> ${ parsedLdf.header.channel_name ? `<tr><td>Channel Name</td><td>${parsedLdf.header.channel_name}</td></tr>` : "" } </table>`;

  // Nodes
  output += `<h3 class="section-title" id="network-nodes">Network Nodes</h3>`;
  output += `<table class="data-table"> <tr><th>Type</th><th>Name</th><th>Time Base</th><th>Jitter</th></tr> <tr><td>Master</td><td>${parsedLdf.nodes.master.name}</td><td>${parsedLdf.nodes.master.time_base}</td><td>${parsedLdf.nodes.master.jitter}</td></tr> </table>`;
  if (parsedLdf.nodes.slaves.length > 0) {
    output += `<table class="data-table"> <tr><th>Slave Nodes</th></tr> ${parsedLdf.nodes.slaves.map(slave => `<tr><td>${slave.name}</td></tr>`).join("")} </table>`;
  }

  // Signals
  if (parsedLdf.signals.length > 0) {
    output += `<h3 class="section-title" id="signals">Signals</h3>`;
    output += `<table class="data-table"> <tr><th>Name</th><th>Size (bits)</th><th>Init Value</th><th>Publisher</th><th>Subscribers</th></tr> ${parsedLdf.signals .map( signal => `
 <tr> 
 <td>${signal.name}</td> 
 <td>${signal.signal_size}</td> 
 <td>${JSON.stringify(signal.init_value)}</td> 
 <td>${signal.published_by}</td> 
 <td>${signal.subscribed_by.join(", ")}</td> 
 </tr> 
 ` ) .join("")}
 </table>`;
  }

  // Frames
  if (parsedLdf.frames.length > 0) {
    output += `<h3 class="section-title" id="frames">Frames</h3>`;
    parsedLdf.frames.forEach(frame => {
      output += `<div class="frame-section">`;
      output += `<h4>${frame.frame_name} LIN ID: 0x${frame.frame_id .toString(16) .padStart(2, "0") .toUpperCase()}</h4>`;
      output += `<table class="data-table"> <tr><th>Property</th><th>Value</th></tr> <tr><td>Publisher</td><td>${frame.published_by}</td></tr> <tr><td>Size</td><td>${frame.frame_size} bytes</td></tr> </table>`;
      if (frame.signals.length > 0) {
        output += `<table class="data-table"> <tr><th>Signal</th><th>Start Bit</th></tr> ${frame.signals .map( signal => ` 
 <tr> 
 <td>${signal.signal_name}</td> 
 <td>${signal.start_bit}</td> 
 </tr> 
 ` ) .join("")}
 </table>`;
      }
      output += `</div>`;
    });
  }

  // Schedule Tables
  if (parsedLdf.schedule_tables.length > 0) {
    output += `<h3 class="section-title" id="schedule-tables">Schedule Tables</h3>`;
    parsedLdf.schedule_tables.forEach(schedule => {
      output += `<h4>${schedule.schedule_table_name}</h4>`;
      output += `<table class="data-table"> <tr><th>Frame</th><th>Delay (ms)</th></tr> ${schedule.frame_delays .map( entry => ` 
 <tr> 
 <td>${entry.frame_name}</td> 
 <td>${entry.frame_time}</td> 
 </tr> 
 ` ) .join("")}
 </table>`;
    });
  }

  return output;
}
```

--------------------------------

### LDF Parsing and Display Logic

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

Handles the core logic for parsing LDF content, displaying results, and managing status messages. It relies on an external `wasm` module and utility functions like `showStatus`, `showStats`, and `formatParsedData`.

```javascript
function parseLdf() {
  const input = document.getElementById("ldf-input").value.trim();
  if (!input) {
    showStatus("Please enter LDF content to parse", "error");
    return;
  }
  if (!wasm) {
    showStatus("lin-ldf-wasm module not loaded yet", "error");
    return;
  }
  try {
    const result = parse_ldf_file(input);
    console.log("Parsed LDF:", result);
    showStatus("LDF parsed successfully!", "success");
    showStats(result);
    const formattedOutput = formatParsedData(result);
    document.getElementById("result").innerHTML = formattedOutput;
  } catch (error) {
    console.error("Parse error:", error);
    showStatus("Parse error: " + error, "error");
    document.getElementById("result").innerHTML = "";
    document.getElementById("stats").innerHTML = "";
  }
}
```

--------------------------------

### CSS Styling for LDF Parser UI

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

This CSS code provides the styling for the LDF parser web application. It defines the color scheme, typography, layout, and interactive elements like buttons and text areas, creating a dark-themed, user-friendly interface.

```CSS
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 0; background: #09090b; color: #fafafa; line-height: 1.6; min-height: 100vh; }
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.header { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid #27272a; }
h1 { font-size: 2.5rem; font-weight: 700; margin: 0 0 1rem 0; background: linear-gradient(135deg, #fafafa 0%, #a1a1aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-links { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; }
.nav-links a { color: #d4d4d8; text-decoration: none; font-weight: 500; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: all 0.2s ease; border: 1px solid #27272a; background: #18181b; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); }
.nav-links a:hover { color: #fafafa; background: #27272a; border-color: #3f3f46; transform: translateY(-1px); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); }
.info-card { background: #18181b; border: 1px solid #27272a; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); }
.info-card strong { color: #fafafa; }
.info-card a { color: #60a5fa; text-decoration: none; font-weight: 500; }
.info-card a:hover { color: #93c5fd; text-decoration: underline; }
.input-section { margin-bottom: 2rem; }
label { display: block; margin-bottom: 0.75rem; font-weight: 600; color: #fafafa; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
textarea { width: 100%; height: 200px; padding: 1rem; background: #18181b; border: 1px solid #27272a; border-radius: 0.5rem; color: #fafafa; font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 0.875rem; resize: vertical; transition: all 0.2s ease; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); }
textarea:focus { outline: none; border-color: #3f3f46; box-shadow: 0 0 0 3px rgba(63, 63, 70, 0.3); }
textarea::placeholder { color: #71717a; }
.buttons { display: flex; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; }
button { background: #fafafa; color: #09090b; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; transition: all 0.2s ease; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; }
button:hover { background: #e4e4e7; transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); }
button:active { transform: translateY(0); }
button:disabled { background: #3f3f46; color: #71717a; cursor: not-allowed; transform: none; box-shadow: none; }
#parse-button { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); color: white; }
#parse-button:hover:not(:disabled) { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.output-section { margin-top: 2rem; }
.result { background: #18181b; border: 1px solid #27272a; border-radius: 0.5rem; padding: 1rem; margin-top: 1rem; font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 0.875rem; max-height: 400px; overflow-y: auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); }
.result::-webkit-scrollbar { width: 8px; }
.result::-webkit-scrollbar-track { background: #27272a; border-radius: 4px; }
.result::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
.result::-webkit-scrollbar-thumb:hover { background: #52525b; }
.error { background: #1f1315; border-color: #7c2d12; color: #fca5a5; }
.success { background: #1414; border-color: #166534; color: #86efac; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; padding: 1.5rem; background: #18181b; border: 1px solid #27272a; border-radius: 0.75rem; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); }
.stat-item { text-align: center; padding: 1rem; background: #09090b; border-radius: 0.5rem; border: 1px solid #27272a; }
.stat-number { font-size: 2rem; font-weight: 700; color: #60a5fa; display: block; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.75rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.section-title { color: #fafafa; font-size: 1.25rem; font-weight: 600; margin: 2.5rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid #3f3f46; position: relative; }
.section-title::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 3rem; height: 2px; background: #60a5fa; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: #18181b; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #27272a; }
.data-table th { background: #3f3f46; font-weight: 600; color: #fafafa; }
```

--------------------------------

### Display Status Messages

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

Updates a status div with messages indicating success or errors during module loading or parsing. The message is styled based on the type provided.

```javascript
function showStatus(message, type) {
  const statusDiv = document.getElementById("status");
  statusDiv.innerHTML = `<div class="result ${type}">${message}</div>`;
}
```

--------------------------------

### Clear Input and Output Fields

Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html

Resets all input and output fields on the page to their default empty states. This includes the LDF input textarea, the result display area, the stats display area, and the status message area.

```javascript
function clearAll() {
  document.getElementById("ldf-input").value = "";
  document.getElementById("result").innerHTML = "";
  document.getElementById("stats").innerHTML = "";
  document.getElementById("status").innerHTML = "";
}
```
Tokens:
Raw