677  Protocol Overhead Calculator

677.1 Protocol Overhead Calculator

This interactive tool calculates and compares protocol overhead across different IoT protocols, helping you understand the true cost of data transmission and optimize your protocol selection for constrained networks.

ieeeColors = ({
  navy: "#2C3E50",
  teal: "#16A085",
  orange: "#E67E22",
  gray: "#7F8C8D",
  red: "#C0392B",
  green: "#27AE60",
  purple: "#8E44AD",
  blue: "#3498DB",
  yellow: "#F1C40F",
  darkGray: "#34495E",
  lightGray: "#BDC3C7",
  white: "#ECF0F1"
})

// Protocol definitions with overhead characteristics
protocolDefinitions = ({
  "MQTT 3.1.1": {
    name: "MQTT 3.1.1",
    transport: "TCP",
    minHeader: 2,
    maxHeader: 5,
    fixedOverhead: 0,
    topicOverhead: 2, // 2 bytes for topic length
    qosOverheads: { 0: 0, 1: 2, 2: 2 }, // Message ID for QoS 1,2
    description: "Lightweight pub/sub messaging protocol",
    color: ieeeColors.teal
  },
  "MQTT 5.0": {
    name: "MQTT 5.0",
    transport: "TCP",
    minHeader: 2,
    maxHeader: 5,
    fixedOverhead: 1, // Properties length (minimum)
    topicOverhead: 2,
    qosOverheads: { 0: 0, 1: 2, 2: 2 },
    description: "Enhanced MQTT with properties and features",
    color: ieeeColors.green
  },
  "CoAP": {
    name: "CoAP",
    transport: "UDP",
    minHeader: 4,
    maxHeader: 4,
    fixedOverhead: 0,
    topicOverhead: 0, // URI is in options
    optionOverhead: 1, // Per option byte + length
    qosOverheads: { 0: 0, 1: 0, 2: 0 }, // NON, CON handled in type
    description: "Constrained Application Protocol for IoT",
    color: ieeeColors.orange
  },
  "HTTP/1.1": {
    name: "HTTP/1.1",
    transport: "TCP",
    minHeader: 100, // Minimal request line + headers
    maxHeader: 500,
    fixedOverhead: 50, // Content-Type, Content-Length, etc.
    topicOverhead: 0,
    qosOverheads: { 0: 0, 1: 0, 2: 0 },
    description: "Standard web protocol with text headers",
    color: ieeeColors.red
  },
  "HTTP/2": {
    name: "HTTP/2",
    transport: "TCP",
    minHeader: 9, // Frame header
    maxHeader: 50, // With HPACK compression
    fixedOverhead: 20,
    topicOverhead: 0,
    qosOverheads: { 0: 0, 1: 0, 2: 0 },
    description: "Binary framing with header compression",
    color: ieeeColors.purple
  },
  "AMQP": {
    name: "AMQP",
    transport: "TCP",
    minHeader: 8,
    maxHeader: 8,
    fixedOverhead: 20, // Delivery annotations, properties
    topicOverhead: 4,
    qosOverheads: { 0: 0, 1: 4, 2: 8 },
    description: "Advanced Message Queuing Protocol",
    color: ieeeColors.blue
  },
  "LwM2M": {
    name: "LwM2M",
    transport: "UDP",
    minHeader: 4, // CoAP base
    maxHeader: 4,
    fixedOverhead: 2, // Object/Instance/Resource IDs
    topicOverhead: 0,
    qosOverheads: { 0: 0, 1: 0, 2: 0 },
    description: "Lightweight M2M over CoAP",
    color: ieeeColors.navy
  },
  "Raw TCP": {
    name: "Raw TCP",
    transport: "TCP",
    minHeader: 0,
    maxHeader: 0,
    fixedOverhead: 0,
    topicOverhead: 0,
    qosOverheads: { 0: 0, 1: 0, 2: 0 },
    description: "Direct TCP socket communication",
    color: ieeeColors.gray
  },
  "Raw UDP": {
    name: "Raw UDP",
    transport: "UDP",
    minHeader: 0,
    maxHeader: 0,
    fixedOverhead: 0,
    topicOverhead: 0,
    qosOverheads: { 0: 0, 1: 0, 2: 0 },
    description: "Direct UDP datagram communication",
    color: ieeeColors.darkGray
  }
})

// Transport layer overhead
transportOverheads = ({
  "TCP": { header: 20, options: 12, description: "Transmission Control Protocol" },
  "UDP": { header: 8, options: 0, description: "User Datagram Protocol" },
  "DTLS 1.2": { header: 13, options: 0, macSize: 8, description: "Datagram TLS" },
  "TLS 1.2": { header: 5, options: 0, macSize: 20, description: "Transport Layer Security" },
  "TLS 1.3": { header: 5, options: 0, macSize: 16, description: "TLS with reduced overhead" }
})

// Network layer overhead
networkOverheads = ({
  "IPv4": { header: 20, options: 0, description: "Internet Protocol v4" },
  "IPv6": { header: 40, options: 0, description: "Internet Protocol v6" },
  "6LoWPAN": { header: 7, options: 0, description: "IPv6 over Low-Power WPAN (compressed)" },
  "6LoWPAN-Full": { header: 40, options: 0, description: "6LoWPAN without compression" }
})

// Link layer overhead
linkOverheads = ({
  "Ethernet": { header: 14, trailer: 4, preamble: 8, mtu: 1500, description: "IEEE 802.3" },
  "Wi-Fi": { header: 36, trailer: 4, preamble: 0, mtu: 2304, description: "IEEE 802.11" },
  "802.15.4": { header: 25, trailer: 2, preamble: 6, mtu: 127, description: "IEEE 802.15.4 (Zigbee/Thread)" },
  "BLE": { header: 10, trailer: 3, preamble: 1, mtu: 251, description: "Bluetooth Low Energy 5.0" },
  "LoRa": { header: 13, trailer: 0, preamble: 8, mtu: 255, description: "Long Range radio" },
  "NB-IoT": { header: 0, trailer: 0, preamble: 0, mtu: 1600, description: "Narrowband IoT (cellular)" }
})

// Predefined scenarios
scenarios = ({
  "tiny_sensor": {
    name: "Tiny Sensor Reading",
    description: "4-byte temperature/humidity reading",
    payload: 4,
    topic: 20,
    qos: 0,
    headers: 0
  },
  "json_telemetry": {
    name: "JSON Telemetry",
    description: "100-byte JSON sensor data",
    payload: 100,
    topic: 30,
    qos: 1,
    headers: 20
  },
  "structured_data": {
    name: "Structured Data",
    description: "500-byte protobuf message",
    payload: 500,
    topic: 25,
    qos: 1,
    headers: 10
  },
  "image_upload": {
    name: "Image Upload",
    description: "10KB image data",
    payload: 10240,
    topic: 40,
    qos: 2,
    headers: 50
  },
  "constrained_network": {
    name: "Constrained Network",
    description: "Minimal payload for 802.15.4",
    payload: 20,
    topic: 10,
    qos: 0,
    headers: 0
  },
  "custom": {
    name: "Custom Configuration",
    description: "User-defined parameters",
    payload: 50,
    topic: 20,
    qos: 1,
    headers: 10
  }
})

// State management
viewModel = {
  const state = Mutable({
    selectedProtocols: ["MQTT 3.1.1", "CoAP", "HTTP/1.1"],
    scenario: "json_telemetry",
    payloadSize: 100,
    topicLength: 30,
    qosLevel: 1,
    customHeaders: 20,
    transportSecurity: "None",
    networkLayer: "IPv4",
    linkLayer: "Ethernet",
    showComparison: true,
    comparisonMode: "absolute" // or "relative"
  });
  return state;
}

// Current state accessor
currentState = viewModel.value

// Scenario selector
html`<div style="background: linear-gradient(135deg, ${ieeeColors.navy} 0%, ${ieeeColors.darkGray} 100%);
                 color: white; padding: 25px; border-radius: 12px; margin-bottom: 20px;">
  <h3 style="margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;">
    <span style="font-size: 1.5em;">📊</span> Protocol Overhead Calculator
  </h3>
  <p style="margin: 0; opacity: 0.9; font-size: 0.95em;">
    Calculate and compare protocol overhead across different IoT protocols to optimize bandwidth efficiency.
  </p>
</div>`

677.1.1 Configuration Panel

scenarioSelect = Inputs.select(
  Object.keys(scenarios),
  {
    value: currentState.scenario,
    label: "Preset Scenario",
    format: x => scenarios[x].name
  }
)

// Update state when scenario changes
scenarioEffect = {
  const scenario = scenarios[scenarioSelect];
  if (scenarioSelect !== "custom") {
    viewModel.value = {
      ...viewModel.value,
      scenario: scenarioSelect,
      payloadSize: scenario.payload,
      topicLength: scenario.topic,
      qosLevel: scenario.qos,
      customHeaders: scenario.headers
    };
  } else {
    viewModel.value = { ...viewModel.value, scenario: scenarioSelect };
  }
  return scenarioSelect;
}

// Scenario description
html`<div style="background: ${ieeeColors.white}; border-left: 4px solid ${ieeeColors.teal};
                 padding: 15px; margin: 15px 0; border-radius: 0 8px 8px 0;">
  <strong>${scenarios[scenarioSelect].name}</strong>
  <p style="margin: 5px 0 0 0; color: ${ieeeColors.gray}; font-size: 0.9em;">
    ${scenarios[scenarioSelect].description}
  </p>
</div>`

protocolCheckboxes = Inputs.checkbox(
  Object.keys(protocolDefinitions),
  {
    value: currentState.selectedProtocols,
    label: "Select Protocols to Compare"
  }
)

// Update selected protocols
protocolEffect = {
  viewModel.value = { ...viewModel.value, selectedProtocols: protocolCheckboxes };
  return protocolCheckboxes;
}

677.1.1.1 Message Parameters

payloadSlider = Inputs.range(
  [1, 10000],
  {
    value: currentState.payloadSize,
    step: 1,
    label: "Payload Size (bytes)"
  }
)

// Topic/URI length
topicSlider = Inputs.range(
  [0, 200],
  {
    value: currentState.topicLength,
    step: 1,
    label: "Topic/URI Length (bytes)"
  }
)

// QoS Level
qosSelect = Inputs.select(
  [0, 1, 2],
  {
    value: currentState.qosLevel,
    label: "QoS / Reliability Level",
    format: x => x === 0 ? "0 - At most once" : x === 1 ? "1 - At least once" : "2 - Exactly once"
  }
)

// Custom headers
headersSlider = Inputs.range(
  [0, 500],
  {
    value: currentState.customHeaders,
    step: 1,
    label: "Custom Headers/Options (bytes)"
  }
)

// Update message parameters
messageEffect = {
  viewModel.value = {
    ...viewModel.value,
    payloadSize: payloadSlider,
    topicLength: topicSlider,
    qosLevel: qosSelect,
    customHeaders: headersSlider
  };
  return { payloadSlider, topicSlider, qosSelect, headersSlider };
}

677.1.1.2 Network Stack Configuration

securitySelect = Inputs.select(
  ["None", "TLS 1.2", "TLS 1.3", "DTLS 1.2"],
  {
    value: currentState.transportSecurity,
    label: "Transport Security"
  }
)

// Network layer
networkSelect = Inputs.select(
  Object.keys(networkOverheads),
  {
    value: currentState.networkLayer,
    label: "Network Layer",
    format: x => `${x} (${networkOverheads[x].header} bytes)`
  }
)

// Link layer
linkSelect = Inputs.select(
  Object.keys(linkOverheads),
  {
    value: currentState.linkLayer,
    label: "Link Layer",
    format: x => `${x} (MTU: ${linkOverheads[x].mtu} bytes)`
  }
)

// Update network stack
networkEffect = {
  viewModel.value = {
    ...viewModel.value,
    transportSecurity: securitySelect,
    networkLayer: networkSelect,
    linkLayer: linkSelect
  };
  return { securitySelect, networkSelect, linkSelect };
}

677.1.2 Overhead Calculation Results

function calculateProtocolOverhead(protocolName, config) {
  const protocol = protocolDefinitions[protocolName];
  const transport = protocol.transport;

  // Application layer overhead
  let appOverhead = protocol.minHeader + protocol.fixedOverhead;
  appOverhead += config.topicLength + protocol.topicOverhead;
  appOverhead += protocol.qosOverheads[config.qosLevel] || 0;
  appOverhead += config.customHeaders;

  // Special handling for HTTP
  if (protocolName === "HTTP/1.1") {
    // Approximate HTTP headers
    appOverhead = 100 + config.topicLength + config.customHeaders;
    // Add typical headers: Content-Type, Content-Length, Host, etc.
    appOverhead += 80;
  } else if (protocolName === "HTTP/2") {
    // HPACK compressed headers
    appOverhead = 9 + Math.ceil(config.topicLength * 0.5) + Math.ceil(config.customHeaders * 0.3);
    appOverhead += 20;
  }

  // CoAP options for URI
  if (protocolName === "CoAP" || protocolName === "LwM2M") {
    // URI-Path option: 1 byte header + path segments
    const pathSegments = Math.ceil(config.topicLength / 10);
    appOverhead += pathSegments * 2; // Option headers
  }

  // Transport layer overhead
  let transportBase = transport === "TCP" ? transportOverheads["TCP"] : transportOverheads["UDP"];
  let transportOverhead = transportBase.header;

  // Add security overhead
  if (config.transportSecurity !== "None") {
    const security = transportOverheads[config.transportSecurity];
    if (security) {
      transportOverhead += security.header + security.macSize;
      // Add IV/nonce (typically 8-12 bytes)
      transportOverhead += 12;
    }
  }

  // Network layer overhead
  const network = networkOverheads[config.networkLayer];
  const networkOverhead = network.header;

  // Link layer overhead
  const link = linkOverheads[config.linkLayer];
  const linkOverhead = link.header + link.trailer + link.preamble;

  // Total overhead
  const totalOverhead = appOverhead + transportOverhead + networkOverhead + linkOverhead;

  // Calculate efficiency
  const totalSize = config.payloadSize + totalOverhead;
  const efficiency = (config.payloadSize / totalSize) * 100;

  // Calculate fragments needed
  const mtu = link.mtu;
  const fragmentPayload = mtu - networkOverhead - transportOverhead - link.header - link.trailer;
  const fragments = Math.ceil((config.payloadSize + appOverhead) / Math.max(fragmentPayload, 1));

  // Total with fragmentation overhead
  const totalWithFragmentation = fragments > 1
    ? totalOverhead * fragments + config.payloadSize
    : totalSize;

  return {
    protocol: protocolName,
    transport: transport,
    appOverhead,
    transportOverhead,
    networkOverhead,
    linkOverhead,
    totalOverhead,
    payloadSize: config.payloadSize,
    totalSize,
    efficiency,
    fragments,
    totalWithFragmentation,
    mtu,
    color: protocol.color,
    description: protocol.description
  };
}

// Calculate for all selected protocols
calculationConfig = ({
  topicLength: topicSlider,
  qosLevel: qosSelect,
  customHeaders: headersSlider,
  transportSecurity: securitySelect,
  networkLayer: networkSelect,
  linkLayer: linkSelect,
  payloadSize: payloadSlider
})

calculatedResults = protocolCheckboxes.map(p => calculateProtocolOverhead(p, calculationConfig))

// Sort by efficiency
sortedResults = [...calculatedResults].sort((a, b) => b.efficiency - a.efficiency)

677.1.2.1 Summary Statistics

// Summary cards
html`<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
  ${sortedResults.length > 0 ? html`
    <div style="background: linear-gradient(135deg, ${ieeeColors.green}22, ${ieeeColors.green}11);
                border: 2px solid ${ieeeColors.green}; border-radius: 12px; padding: 20px; text-align: center;">
      <div style="font-size: 0.85em; color: ${ieeeColors.gray}; text-transform: uppercase; letter-spacing: 1px;">
        Most Efficient
      </div>
      <div style="font-size: 1.5em; font-weight: bold; color: ${ieeeColors.green}; margin: 10px 0;">
        ${sortedResults[0].protocol}
      </div>
      <div style="font-size: 1.2em; color: ${ieeeColors.navy};">
        ${sortedResults[0].efficiency.toFixed(1)}% efficiency
      </div>
    </div>
  ` : ''}

  ${sortedResults.length > 1 ? html`
    <div style="background: linear-gradient(135deg, ${ieeeColors.red}22, ${ieeeColors.red}11);
                border: 2px solid ${ieeeColors.red}; border-radius: 12px; padding: 20px; text-align: center;">
      <div style="font-size: 0.85em; color: ${ieeeColors.gray}; text-transform: uppercase; letter-spacing: 1px;">
        Least Efficient
      </div>
      <div style="font-size: 1.5em; font-weight: bold; color: ${ieeeColors.red}; margin: 10px 0;">
        ${sortedResults[sortedResults.length - 1].protocol}
      </div>
      <div style="font-size: 1.2em; color: ${ieeeColors.navy};">
        ${sortedResults[sortedResults.length - 1].efficiency.toFixed(1)}% efficiency
      </div>
    </div>
  ` : ''}

  <div style="background: linear-gradient(135deg, ${ieeeColors.blue}22, ${ieeeColors.blue}11);
              border: 2px solid ${ieeeColors.blue}; border-radius: 12px; padding: 20px; text-align: center;">
    <div style="font-size: 0.85em; color: ${ieeeColors.gray}; text-transform: uppercase; letter-spacing: 1px;">
      Payload Size
    </div>
    <div style="font-size: 1.5em; font-weight: bold; color: ${ieeeColors.blue}; margin: 10px 0;">
      ${payloadSlider.toLocaleString()} bytes
    </div>
    <div style="font-size: 0.9em; color: ${ieeeColors.gray};">
      ${linkSelect} MTU: ${linkOverheads[linkSelect].mtu}
    </div>
  </div>

  <div style="background: linear-gradient(135deg, ${ieeeColors.orange}22, ${ieeeColors.orange}11);
              border: 2px solid ${ieeeColors.orange}; border-radius: 12px; padding: 20px; text-align: center;">
    <div style="font-size: 0.85em; color: ${ieeeColors.gray}; text-transform: uppercase; letter-spacing: 1px;">
      Network Stack
    </div>
    <div style="font-size: 1.1em; font-weight: bold; color: ${ieeeColors.orange}; margin: 10px 0;">
      ${networkSelect} / ${linkSelect}
    </div>
    <div style="font-size: 0.9em; color: ${ieeeColors.gray};">
      ${securitySelect !== "None" ? securitySelect : "No encryption"}
    </div>
  </div>
</div>`

677.1.3 Stacked Bar Chart - Layer Breakdown

// Stacked bar chart visualization
stackedBarChart = {
  const width = 800;
  const height = 400;
  const margin = { top: 40, right: 150, bottom: 80, left: 60 };
  const chartWidth = width - margin.left - margin.right;
  const chartHeight = height - margin.top - margin.bottom;

  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("font-family", "system-ui, sans-serif");

  // Background
  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", ieeeColors.white)
    .attr("rx", 8);

  const chart = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

  // Title
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 25)
    .attr("text-anchor", "middle")
    .attr("font-size", "16px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text("Protocol Overhead by Layer");

  if (sortedResults.length === 0) {
    chart.append("text")
      .attr("x", chartWidth / 2)
      .attr("y", chartHeight / 2)
      .attr("text-anchor", "middle")
      .attr("fill", ieeeColors.gray)
      .text("Select at least one protocol to compare");
    return svg.node();
  }

  // Prepare stacked data
  const layers = ["linkOverhead", "networkOverhead", "transportOverhead", "appOverhead", "payloadSize"];
  const layerColors = {
    linkOverhead: ieeeColors.purple,
    networkOverhead: ieeeColors.blue,
    transportOverhead: ieeeColors.teal,
    appOverhead: ieeeColors.orange,
    payloadSize: ieeeColors.green
  };
  const layerLabels = {
    linkOverhead: "Link Layer",
    networkOverhead: "Network Layer",
    transportOverhead: "Transport Layer",
    appOverhead: "Application Layer",
    payloadSize: "Payload"
  };

  // Calculate max total for scale
  const maxTotal = d3.max(sortedResults, d => d.totalSize);

  // Scales
  const xScale = d3.scaleBand()
    .domain(sortedResults.map(d => d.protocol))
    .range([0, chartWidth])
    .padding(0.3);

  const yScale = d3.scaleLinear()
    .domain([0, maxTotal * 1.1])
    .range([chartHeight, 0]);

  // Stack generator
  const stack = d3.stack()
    .keys(layers)
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

  const stackedData = stack(sortedResults);

  // Draw bars
  const barGroups = chart.selectAll(".layer")
    .data(stackedData)
    .join("g")
    .attr("class", "layer")
    .attr("fill", d => layerColors[d.key]);

  barGroups.selectAll("rect")
    .data(d => d)
    .join("rect")
    .attr("x", d => xScale(d.data.protocol))
    .attr("y", d => yScale(d[1]))
    .attr("height", d => yScale(d[0]) - yScale(d[1]))
    .attr("width", xScale.bandwidth())
    .attr("rx", 2)
    .style("opacity", 0.85);

  // Add efficiency labels on top
  chart.selectAll(".efficiency-label")
    .data(sortedResults)
    .join("text")
    .attr("class", "efficiency-label")
    .attr("x", d => xScale(d.protocol) + xScale.bandwidth() / 2)
    .attr("y", d => yScale(d.totalSize) - 8)
    .attr("text-anchor", "middle")
    .attr("font-size", "11px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text(d => `${d.efficiency.toFixed(1)}%`);

  // X axis
  chart.append("g")
    .attr("transform", `translate(0, ${chartHeight})`)
    .call(d3.axisBottom(xScale))
    .selectAll("text")
    .attr("transform", "rotate(-25)")
    .attr("text-anchor", "end")
    .attr("font-size", "11px");

  // Y axis
  chart.append("g")
    .call(d3.axisLeft(yScale).ticks(8).tickFormat(d => d + " B"))
    .selectAll("text")
    .attr("font-size", "10px");

  // Y axis label
  chart.append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -chartHeight / 2)
    .attr("y", -45)
    .attr("text-anchor", "middle")
    .attr("font-size", "12px")
    .attr("fill", ieeeColors.gray)
    .text("Total Bytes");

  // Legend
  const legend = svg.append("g")
    .attr("transform", `translate(${width - margin.right + 10}, ${margin.top})`);

  layers.slice().reverse().forEach((layer, i) => {
    const g = legend.append("g")
      .attr("transform", `translate(0, ${i * 22})`);

    g.append("rect")
      .attr("width", 16)
      .attr("height", 16)
      .attr("fill", layerColors[layer])
      .attr("rx", 3)
      .style("opacity", 0.85);

    g.append("text")
      .attr("x", 22)
      .attr("y", 12)
      .attr("font-size", "11px")
      .attr("fill", ieeeColors.navy)
      .text(layerLabels[layer]);
  });

  return svg.node();
}

677.1.4 Pie Chart - Overhead vs Payload Distribution

// Pie chart for each protocol
pieCharts = {
  const containerWidth = 800;
  const pieSize = 150;
  const padding = 30;
  const cols = Math.min(sortedResults.length, 4);
  const rows = Math.ceil(sortedResults.length / cols);
  const width = containerWidth;
  const height = rows * (pieSize + padding + 40) + 60;

  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("font-family", "system-ui, sans-serif");

  // Background
  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", ieeeColors.white)
    .attr("rx", 8);

  // Title
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 25)
    .attr("text-anchor", "middle")
    .attr("font-size", "16px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text("Overhead vs Payload Distribution");

  if (sortedResults.length === 0) {
    svg.append("text")
      .attr("x", width / 2)
      .attr("y", height / 2)
      .attr("text-anchor", "middle")
      .attr("fill", ieeeColors.gray)
      .text("Select at least one protocol to compare");
    return svg.node();
  }

  const pie = d3.pie()
    .value(d => d.value)
    .sort(null);

  const arc = d3.arc()
    .innerRadius(pieSize * 0.3)
    .outerRadius(pieSize * 0.45);

  sortedResults.forEach((result, i) => {
    const col = i % cols;
    const row = Math.floor(i / cols);
    const cx = (col + 0.5) * (width / cols);
    const cy = row * (pieSize + padding + 40) + pieSize / 2 + 60;

    const g = svg.append("g")
      .attr("transform", `translate(${cx}, ${cy})`);

    const data = [
      { label: "Payload", value: result.payloadSize, color: ieeeColors.green },
      { label: "App", value: result.appOverhead, color: ieeeColors.orange },
      { label: "Transport", value: result.transportOverhead, color: ieeeColors.teal },
      { label: "Network", value: result.networkOverhead, color: ieeeColors.blue },
      { label: "Link", value: result.linkOverhead, color: ieeeColors.purple }
    ];

    const arcs = pie(data);

    g.selectAll("path")
      .data(arcs)
      .join("path")
      .attr("d", arc)
      .attr("fill", d => d.data.color)
      .attr("stroke", "white")
      .attr("stroke-width", 2)
      .style("opacity", 0.85);

    // Center text - efficiency
    g.append("text")
      .attr("text-anchor", "middle")
      .attr("dy", "-0.2em")
      .attr("font-size", "14px")
      .attr("font-weight", "bold")
      .attr("fill", ieeeColors.navy)
      .text(`${result.efficiency.toFixed(1)}%`);

    g.append("text")
      .attr("text-anchor", "middle")
      .attr("dy", "1em")
      .attr("font-size", "9px")
      .attr("fill", ieeeColors.gray)
      .text("efficiency");

    // Protocol name
    g.append("text")
      .attr("y", pieSize * 0.55)
      .attr("text-anchor", "middle")
      .attr("font-size", "12px")
      .attr("font-weight", "bold")
      .attr("fill", result.color)
      .text(result.protocol);

    // Total size
    g.append("text")
      .attr("y", pieSize * 0.55 + 15)
      .attr("text-anchor", "middle")
      .attr("font-size", "10px")
      .attr("fill", ieeeColors.gray)
      .text(`${result.totalSize} bytes total`);
  });

  return svg.node();
}

677.1.5 Detailed Comparison Table

// Detailed table
comparisonTable = {
  if (sortedResults.length === 0) {
    return html`<p style="text-align: center; color: ${ieeeColors.gray};">Select protocols to see comparison</p>`;
  }

  return html`
    <div style="overflow-x: auto;">
      <table style="width: 100%; border-collapse: collapse; font-size: 0.9em; margin: 20px 0;">
        <thead>
          <tr style="background: ${ieeeColors.navy}; color: white;">
            <th style="padding: 12px 8px; text-align: left; border-radius: 8px 0 0 0;">Protocol</th>
            <th style="padding: 12px 8px; text-align: center;">Transport</th>
            <th style="padding: 12px 8px; text-align: right;">App Layer</th>
            <th style="padding: 12px 8px; text-align: right;">Transport</th>
            <th style="padding: 12px 8px; text-align: right;">Network</th>
            <th style="padding: 12px 8px; text-align: right;">Link</th>
            <th style="padding: 12px 8px; text-align: right;">Total OH</th>
            <th style="padding: 12px 8px; text-align: right;">Total Size</th>
            <th style="padding: 12px 8px; text-align: center;">Efficiency</th>
            <th style="padding: 12px 8px; text-align: center; border-radius: 0 8px 0 0;">Fragments</th>
          </tr>
        </thead>
        <tbody>
          ${sortedResults.map((r, i) => html`
            <tr style="background: ${i % 2 === 0 ? ieeeColors.white : '#f8f9fa'};
                       border-bottom: 1px solid ${ieeeColors.lightGray};">
              <td style="padding: 10px 8px; font-weight: bold; color: ${r.color};">
                ${r.protocol}
              </td>
              <td style="padding: 10px 8px; text-align: center;">
                <span style="background: ${r.transport === 'TCP' ? ieeeColors.blue : ieeeColors.orange}22;
                             color: ${r.transport === 'TCP' ? ieeeColors.blue : ieeeColors.orange};
                             padding: 2px 8px; border-radius: 12px; font-size: 0.85em;">
                  ${r.transport}
                </span>
              </td>
              <td style="padding: 10px 8px; text-align: right;">${r.appOverhead} B</td>
              <td style="padding: 10px 8px; text-align: right;">${r.transportOverhead} B</td>
              <td style="padding: 10px 8px; text-align: right;">${r.networkOverhead} B</td>
              <td style="padding: 10px 8px; text-align: right;">${r.linkOverhead} B</td>
              <td style="padding: 10px 8px; text-align: right; font-weight: bold; color: ${ieeeColors.red};">
                ${r.totalOverhead} B
              </td>
              <td style="padding: 10px 8px; text-align: right; font-weight: bold;">
                ${r.totalSize.toLocaleString()} B
              </td>
              <td style="padding: 10px 8px; text-align: center;">
                <div style="background: linear-gradient(90deg, ${ieeeColors.green} ${r.efficiency}%, ${ieeeColors.lightGray} ${r.efficiency}%);
                            border-radius: 10px; padding: 4px 8px; color: ${r.efficiency > 50 ? 'white' : ieeeColors.navy};
                            font-weight: bold; font-size: 0.85em;">
                  ${r.efficiency.toFixed(1)}%
                </div>
              </td>
              <td style="padding: 10px 8px; text-align: center;">
                ${r.fragments > 1
                  ? html`<span style="color: ${ieeeColors.red}; font-weight: bold;">${r.fragments}</span>`
                  : html`<span style="color: ${ieeeColors.green};">1</span>`}
              </td>
            </tr>
          `)}
        </tbody>
      </table>
    </div>
  `;
}

677.1.6 Efficiency Metrics Dashboard

metricsData = sortedResults.map(r => {
  const mtu = linkOverheads[linkSelect].mtu;
  const messagesPerMTU = Math.floor(mtu / r.totalSize);
  const wastedBytes = mtu - (messagesPerMTU * r.totalSize);
  const bandwidthUtilization = (messagesPerMTU * r.payloadSize) / mtu * 100;
  const overheadRatio = r.totalOverhead / r.payloadSize;

  return {
    ...r,
    messagesPerMTU,
    wastedBytes,
    bandwidthUtilization,
    overheadRatio
  };
})

// Metrics visualization
metricsViz = {
  const width = 800;
  const height = 350;
  const margin = { top: 50, right: 30, bottom: 80, left: 60 };
  const chartWidth = width - margin.left - margin.right;
  const chartHeight = height - margin.top - margin.bottom;

  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("font-family", "system-ui, sans-serif");

  // Background
  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", ieeeColors.white)
    .attr("rx", 8);

  // Title
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 25)
    .attr("text-anchor", "middle")
    .attr("font-size", "16px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text("Bandwidth Efficiency Comparison");

  if (metricsData.length === 0) {
    svg.append("text")
      .attr("x", width / 2)
      .attr("y", height / 2)
      .attr("text-anchor", "middle")
      .attr("fill", ieeeColors.gray)
      .text("Select protocols to compare");
    return svg.node();
  }

  const chart = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

  // X scale
  const xScale = d3.scaleBand()
    .domain(metricsData.map(d => d.protocol))
    .range([0, chartWidth])
    .padding(0.2);

  // Y scale for efficiency
  const yScale = d3.scaleLinear()
    .domain([0, 100])
    .range([chartHeight, 0]);

  // Draw bars for bandwidth utilization
  chart.selectAll(".util-bar")
    .data(metricsData)
    .join("rect")
    .attr("class", "util-bar")
    .attr("x", d => xScale(d.protocol))
    .attr("y", d => yScale(d.bandwidthUtilization))
    .attr("width", xScale.bandwidth())
    .attr("height", d => chartHeight - yScale(d.bandwidthUtilization))
    .attr("fill", d => d.color)
    .attr("rx", 4)
    .style("opacity", 0.7);

  // Efficiency line
  const line = d3.line()
    .x(d => xScale(d.protocol) + xScale.bandwidth() / 2)
    .y(d => yScale(d.efficiency))
    .curve(d3.curveMonotoneX);

  chart.append("path")
    .datum(metricsData)
    .attr("fill", "none")
    .attr("stroke", ieeeColors.navy)
    .attr("stroke-width", 3)
    .attr("d", line);

  // Efficiency points
  chart.selectAll(".eff-point")
    .data(metricsData)
    .join("circle")
    .attr("class", "eff-point")
    .attr("cx", d => xScale(d.protocol) + xScale.bandwidth() / 2)
    .attr("cy", d => yScale(d.efficiency))
    .attr("r", 6)
    .attr("fill", ieeeColors.navy)
    .attr("stroke", "white")
    .attr("stroke-width", 2);

  // Labels
  chart.selectAll(".label")
    .data(metricsData)
    .join("text")
    .attr("class", "label")
    .attr("x", d => xScale(d.protocol) + xScale.bandwidth() / 2)
    .attr("y", d => yScale(d.bandwidthUtilization) - 8)
    .attr("text-anchor", "middle")
    .attr("font-size", "11px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text(d => `${d.bandwidthUtilization.toFixed(1)}%`);

  // X axis
  chart.append("g")
    .attr("transform", `translate(0, ${chartHeight})`)
    .call(d3.axisBottom(xScale))
    .selectAll("text")
    .attr("transform", "rotate(-25)")
    .attr("text-anchor", "end")
    .attr("font-size", "11px");

  // Y axis
  chart.append("g")
    .call(d3.axisLeft(yScale).ticks(5).tickFormat(d => d + "%"))
    .selectAll("text")
    .attr("font-size", "10px");

  // Y axis label
  chart.append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -chartHeight / 2)
    .attr("y", -45)
    .attr("text-anchor", "middle")
    .attr("font-size", "12px")
    .attr("fill", ieeeColors.gray)
    .text("Bandwidth Utilization / Efficiency %");

  // Legend
  const legend = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${height - 25})`);

  legend.append("rect")
    .attr("width", 16)
    .attr("height", 16)
    .attr("fill", ieeeColors.teal)
    .attr("rx", 3)
    .style("opacity", 0.7);

  legend.append("text")
    .attr("x", 22)
    .attr("y", 12)
    .attr("font-size", "11px")
    .attr("fill", ieeeColors.navy)
    .text("Bandwidth Utilization (payload per MTU)");

  legend.append("circle")
    .attr("cx", 220)
    .attr("cy", 8)
    .attr("r", 6)
    .attr("fill", ieeeColors.navy);

  legend.append("text")
    .attr("x", 232)
    .attr("y", 12)
    .attr("font-size", "11px")
    .attr("fill", ieeeColors.navy)
    .text("Protocol Efficiency");

  return svg.node();
}

677.1.7 Messages Per MTU Analysis

// Messages per MTU visualization
messagesPerMTUViz = {
  const width = 800;
  const height = 300;
  const margin = { top: 50, right: 30, bottom: 80, left: 60 };
  const chartWidth = width - margin.left - margin.right;
  const chartHeight = height - margin.top - margin.bottom;

  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("font-family", "system-ui, sans-serif");

  // Background
  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", ieeeColors.white)
    .attr("rx", 8);

  // Title
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 25)
    .attr("text-anchor", "middle")
    .attr("font-size", "16px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text(`Messages Per MTU (${linkSelect}: ${linkOverheads[linkSelect].mtu} bytes)`);

  if (metricsData.length === 0) {
    return svg.node();
  }

  const chart = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

  const maxMessages = d3.max(metricsData, d => d.messagesPerMTU) || 1;

  const xScale = d3.scaleBand()
    .domain(metricsData.map(d => d.protocol))
    .range([0, chartWidth])
    .padding(0.3);

  const yScale = d3.scaleLinear()
    .domain([0, Math.max(maxMessages * 1.2, 1)])
    .range([chartHeight, 0]);

  // Draw bars
  chart.selectAll(".msg-bar")
    .data(metricsData)
    .join("rect")
    .attr("class", "msg-bar")
    .attr("x", d => xScale(d.protocol))
    .attr("y", d => yScale(d.messagesPerMTU))
    .attr("width", xScale.bandwidth())
    .attr("height", d => chartHeight - yScale(d.messagesPerMTU))
    .attr("fill", d => d.messagesPerMTU > 0 ? d.color : ieeeColors.red)
    .attr("rx", 4);

  // Labels
  chart.selectAll(".msg-label")
    .data(metricsData)
    .join("text")
    .attr("class", "msg-label")
    .attr("x", d => xScale(d.protocol) + xScale.bandwidth() / 2)
    .attr("y", d => yScale(d.messagesPerMTU) - 8)
    .attr("text-anchor", "middle")
    .attr("font-size", "14px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text(d => d.messagesPerMTU === 0 ? "Fragments!" : d.messagesPerMTU);

  // X axis
  chart.append("g")
    .attr("transform", `translate(0, ${chartHeight})`)
    .call(d3.axisBottom(xScale))
    .selectAll("text")
    .attr("transform", "rotate(-25)")
    .attr("text-anchor", "end")
    .attr("font-size", "11px");

  // Y axis
  chart.append("g")
    .call(d3.axisLeft(yScale).ticks(5))
    .selectAll("text")
    .attr("font-size", "10px");

  // Y axis label
  chart.append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -chartHeight / 2)
    .attr("y", -45)
    .attr("text-anchor", "middle")
    .attr("font-size", "12px")
    .attr("fill", ieeeColors.gray)
    .text("Messages per MTU");

  return svg.node();
}

677.1.8 Overhead Ratio Analysis

// Overhead ratio visualization
overheadRatioViz = {
  const width = 800;
  const height = 300;
  const margin = { top: 50, right: 120, bottom: 80, left: 60 };
  const chartWidth = width - margin.left - margin.right;
  const chartHeight = height - margin.top - margin.bottom;

  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("font-family", "system-ui, sans-serif");

  // Background
  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", ieeeColors.white)
    .attr("rx", 8);

  // Title
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 25)
    .attr("text-anchor", "middle")
    .attr("font-size", "16px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text("Overhead Ratio (bytes overhead per byte payload)");

  if (metricsData.length === 0) {
    return svg.node();
  }

  const chart = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

  const maxRatio = d3.max(metricsData, d => d.overheadRatio) || 1;

  const yScale = d3.scaleBand()
    .domain(metricsData.map(d => d.protocol))
    .range([0, chartHeight])
    .padding(0.3);

  const xScale = d3.scaleLinear()
    .domain([0, maxRatio * 1.2])
    .range([0, chartWidth]);

  // Reference line at ratio = 1
  if (maxRatio >= 1) {
    chart.append("line")
      .attr("x1", xScale(1))
      .attr("x2", xScale(1))
      .attr("y1", 0)
      .attr("y2", chartHeight)
      .attr("stroke", ieeeColors.red)
      .attr("stroke-width", 2)
      .attr("stroke-dasharray", "5,5");

    chart.append("text")
      .attr("x", xScale(1) + 5)
      .attr("y", 15)
      .attr("font-size", "10px")
      .attr("fill", ieeeColors.red)
      .text("1:1 ratio");
  }

  // Draw bars
  chart.selectAll(".ratio-bar")
    .data(metricsData)
    .join("rect")
    .attr("class", "ratio-bar")
    .attr("x", 0)
    .attr("y", d => yScale(d.protocol))
    .attr("width", d => xScale(d.overheadRatio))
    .attr("height", yScale.bandwidth())
    .attr("fill", d => d.overheadRatio > 1 ? ieeeColors.red : d.color)
    .attr("rx", 4)
    .style("opacity", 0.8);

  // Labels
  chart.selectAll(".ratio-label")
    .data(metricsData)
    .join("text")
    .attr("class", "ratio-label")
    .attr("x", d => xScale(d.overheadRatio) + 8)
    .attr("y", d => yScale(d.protocol) + yScale.bandwidth() / 2 + 4)
    .attr("font-size", "11px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text(d => d.overheadRatio.toFixed(2) + "x");

  // Y axis
  chart.append("g")
    .call(d3.axisLeft(yScale))
    .selectAll("text")
    .attr("font-size", "11px");

  // X axis
  chart.append("g")
    .attr("transform", `translate(0, ${chartHeight})`)
    .call(d3.axisBottom(xScale).ticks(8))
    .selectAll("text")
    .attr("font-size", "10px");

  // X axis label
  chart.append("text")
    .attr("x", chartWidth / 2)
    .attr("y", chartHeight + 40)
    .attr("text-anchor", "middle")
    .attr("font-size", "12px")
    .attr("fill", ieeeColors.gray)
    .text("Overhead Bytes / Payload Bytes");

  return svg.node();
}

677.1.9 Protocol Stack Visualization

// Protocol stack diagram
stackDiagram = {
  const width = 800;
  const height = 400;
  const margin = { top: 40, right: 20, bottom: 20, left: 20 };

  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("font-family", "system-ui, sans-serif");

  // Background
  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", ieeeColors.white)
    .attr("rx", 8);

  // Title
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 25)
    .attr("text-anchor", "middle")
    .attr("font-size", "16px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text("Protocol Stack Layer Visualization");

  if (sortedResults.length === 0) {
    svg.append("text")
      .attr("x", width / 2)
      .attr("y", height / 2)
      .attr("text-anchor", "middle")
      .attr("fill", ieeeColors.gray)
      .text("Select a protocol to view stack");
    return svg.node();
  }

  // Show first protocol in detail
  const proto = sortedResults[0];
  const stackWidth = 400;
  const stackX = (width - stackWidth) / 2;
  const layerHeight = 50;
  const startY = 60;

  const layers = [
    { name: "Link Layer", desc: linkSelect, bytes: proto.linkOverhead, color: ieeeColors.purple },
    { name: "Network Layer", desc: networkSelect, bytes: proto.networkOverhead, color: ieeeColors.blue },
    { name: "Transport Layer", desc: proto.transport + (securitySelect !== "None" ? " + " + securitySelect : ""), bytes: proto.transportOverhead, color: ieeeColors.teal },
    { name: "Application Layer", desc: proto.protocol, bytes: proto.appOverhead, color: ieeeColors.orange },
    { name: "Payload", desc: "User data", bytes: proto.payloadSize, color: ieeeColors.green }
  ];

  const totalBytes = layers.reduce((sum, l) => sum + l.bytes, 0);

  layers.forEach((layer, i) => {
    const y = startY + i * (layerHeight + 5);
    const widthRatio = layer.bytes / totalBytes;
    const barWidth = Math.max(widthRatio * stackWidth, 40);

    // Layer box
    const g = svg.append("g")
      .attr("transform", `translate(${stackX}, ${y})`);

    g.append("rect")
      .attr("width", stackWidth)
      .attr("height", layerHeight)
      .attr("fill", layer.color)
      .attr("rx", 6)
      .style("opacity", 0.2);

    g.append("rect")
      .attr("width", barWidth)
      .attr("height", layerHeight)
      .attr("fill", layer.color)
      .attr("rx", 6)
      .style("opacity", 0.7);

    // Layer name
    g.append("text")
      .attr("x", 10)
      .attr("y", layerHeight / 2 - 8)
      .attr("font-size", "12px")
      .attr("font-weight", "bold")
      .attr("fill", ieeeColors.navy)
      .text(layer.name);

    // Description
    g.append("text")
      .attr("x", 10)
      .attr("y", layerHeight / 2 + 8)
      .attr("font-size", "10px")
      .attr("fill", ieeeColors.gray)
      .text(layer.desc);

    // Bytes
    g.append("text")
      .attr("x", stackWidth - 10)
      .attr("y", layerHeight / 2)
      .attr("text-anchor", "end")
      .attr("font-size", "14px")
      .attr("font-weight", "bold")
      .attr("fill", ieeeColors.navy)
      .attr("dominant-baseline", "middle")
      .text(`${layer.bytes} B`);

    // Percentage
    g.append("text")
      .attr("x", stackWidth - 10)
      .attr("y", layerHeight / 2 + 14)
      .attr("text-anchor", "end")
      .attr("font-size", "10px")
      .attr("fill", ieeeColors.gray)
      .text(`(${(widthRatio * 100).toFixed(1)}%)`);
  });

  // Summary box
  const summaryY = startY + layers.length * (layerHeight + 5) + 10;

  svg.append("rect")
    .attr("x", stackX)
    .attr("y", summaryY)
    .attr("width", stackWidth)
    .attr("height", 50)
    .attr("fill", ieeeColors.navy)
    .attr("rx", 6)
    .style("opacity", 0.1);

  svg.append("text")
    .attr("x", stackX + 10)
    .attr("y", summaryY + 20)
    .attr("font-size", "12px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.navy)
    .text(`Total: ${totalBytes} bytes`);

  svg.append("text")
    .attr("x", stackX + 10)
    .attr("y", summaryY + 38)
    .attr("font-size", "11px")
    .attr("fill", ieeeColors.gray)
    .text(`Overhead: ${proto.totalOverhead} bytes (${(100 - proto.efficiency).toFixed(1)}%)`);

  svg.append("text")
    .attr("x", stackX + stackWidth - 10)
    .attr("y", summaryY + 30)
    .attr("text-anchor", "end")
    .attr("font-size", "18px")
    .attr("font-weight", "bold")
    .attr("fill", ieeeColors.green)
    .text(`${proto.efficiency.toFixed(1)}% efficient`);

  return svg.node();
}

677.1.10 Constrained Network Analysis

// Constrained network comparison
constrainedAnalysis = {
  // Calculate for 802.15.4 (127 byte MTU)
  const constrainedConfig = {
    ...calculationConfig,
    linkLayer: "802.15.4"
  };

  const constrainedResults = protocolCheckboxes.map(p =>
    calculateProtocolOverhead(p, constrainedConfig)
  ).sort((a, b) => b.efficiency - a.efficiency);

  if (constrainedResults.length === 0) {
    return html`<p style="text-align: center; color: ${ieeeColors.gray};">Select protocols to analyze</p>`;
  }

  return html`
    <div style="background: linear-gradient(135deg, ${ieeeColors.orange}11, ${ieeeColors.red}11);
                border: 2px solid ${ieeeColors.orange}; border-radius: 12px; padding: 20px; margin: 20px 0;">
      <h4 style="margin: 0 0 15px 0; color: ${ieeeColors.navy}; display: flex; align-items: center; gap: 10px;">
        <span style="font-size: 1.3em;">📡</span> 802.15.4 Constrained Network Analysis (127-byte MTU)
      </h4>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px;">
        ${constrainedResults.map(r => html`
          <div style="background: white; border-radius: 8px; padding: 15px;
                      border-left: 4px solid ${r.fragments > 1 ? ieeeColors.red : ieeeColors.green};">
            <div style="font-weight: bold; color: ${r.color}; margin-bottom: 8px;">${r.protocol}</div>
            <div style="font-size: 0.9em; color: ${ieeeColors.gray};">
              <div>Efficiency: <strong style="color: ${r.efficiency > 50 ? ieeeColors.green : ieeeColors.red};">
                ${r.efficiency.toFixed(1)}%</strong>
              </div>
              <div>Total: <strong>${r.totalSize}</strong> bytes</div>
              <div>Fragments:
                <strong style="color: ${r.fragments > 1 ? ieeeColors.red : ieeeColors.green};">
                  ${r.fragments}${r.fragments > 1 ? ' (fragmented!)' : ''}
                </strong>
              </div>
            </div>
          </div>
        `)}
      </div>

      <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid ${ieeeColors.lightGray};">
        <p style="margin: 0; font-size: 0.9em; color: ${ieeeColors.gray};">
          <strong>Note:</strong> Protocols requiring fragmentation on 802.15.4 networks incur additional
          overhead per fragment and increased latency. Consider CoAP or MQTT-SN for constrained networks.
        </p>
      </div>
    </div>
  `;
}

677.1.11 Recommendations

// Generate recommendations
recommendations = {
  if (sortedResults.length === 0) {
    return html`<p>Select protocols to see recommendations.</p>`;
  }

  const best = sortedResults[0];
  const worst = sortedResults[sortedResults.length - 1];
  const payloadSize = payloadSlider;
  const mtu = linkOverheads[linkSelect].mtu;

  let recs = [];

  // Small payload recommendation
  if (payloadSize < 50) {
    recs.push({
      icon: "💡",
      title: "Small Payload Detected",
      text: `With only ${payloadSize} bytes of payload, protocol overhead becomes proportionally significant.
             Consider binary protocols like CoAP or MQTT over text-based HTTP.`,
      type: "info"
    });
  }

  // Large payload recommendation
  if (payloadSize > 1000) {
    recs.push({
      icon: "📦",
      title: "Large Payload",
      text: `Large payloads (${payloadSize} bytes) amortize fixed overhead well.
             Focus on compression and chunking strategies rather than protocol selection.`,
      type: "info"
    });
  }

  // Constrained network warning
  if (linkSelect === "802.15.4" || linkSelect === "BLE") {
    const fragmentedProtocols = sortedResults.filter(r => r.fragments > 1);
    if (fragmentedProtocols.length > 0) {
      recs.push({
        icon: "⚠️",
        title: "Fragmentation Required",
        text: `${fragmentedProtocols.map(p => p.protocol).join(", ")} will require fragmentation
               on ${linkSelect}. Consider using ${best.fragments === 1 ? best.protocol : "smaller payloads"}.`,
        type: "warning"
      });
    }
  }

  // Security overhead
  if (securitySelect !== "None") {
    recs.push({
      icon: "🔒",
      title: "Security Overhead",
      text: `${securitySelect} adds encryption overhead. For constrained devices,
             consider DTLS for UDP-based protocols or pre-shared keys to reduce handshake overhead.`,
      type: "info"
    });
  }

  // Best protocol
  recs.push({
    icon: "✅",
    title: "Best Choice",
    text: `For your configuration, <strong>${best.protocol}</strong> offers the best efficiency
           at ${best.efficiency.toFixed(1)}% with ${best.totalOverhead} bytes overhead.`,
    type: "success"
  });

  // Efficiency warning
  if (best.efficiency < 50) {
    recs.push({
      icon: "⚠️",
      title: "Low Efficiency",
      text: `Even the best protocol achieves only ${best.efficiency.toFixed(1)}% efficiency.
             Consider increasing payload size or reducing topic length to improve efficiency.`,
      type: "warning"
    });
  }

  return html`
    <div style="margin: 20px 0;">
      <h4 style="color: ${ieeeColors.navy}; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
        <span style="font-size: 1.3em;">📋</span> Recommendations
      </h4>
      ${recs.map(r => html`
        <div style="background: ${r.type === 'warning' ? ieeeColors.orange + '11' :
                                   r.type === 'success' ? ieeeColors.green + '11' :
                                   ieeeColors.blue + '11'};
                    border-left: 4px solid ${r.type === 'warning' ? ieeeColors.orange :
                                              r.type === 'success' ? ieeeColors.green :
                                              ieeeColors.blue};
                    padding: 15px; margin-bottom: 10px; border-radius: 0 8px 8px 0;">
          <div style="font-weight: bold; color: ${ieeeColors.navy}; margin-bottom: 5px;">
            ${r.icon} ${r.title}
          </div>
          <div style="color: ${ieeeColors.gray}; font-size: 0.95em;">${html([r.text])}</div>
        </div>
      `)}
    </div>
  `;
}

677.1.12 Export Results

// Export button
exportButton = {
  const exportData = {
    configuration: {
      payloadSize: payloadSlider,
      topicLength: topicSlider,
      qosLevel: qosSelect,
      customHeaders: headersSlider,
      transportSecurity: securitySelect,
      networkLayer: networkSelect,
      linkLayer: linkSelect,
      mtu: linkOverheads[linkSelect].mtu
    },
    results: sortedResults.map(r => ({
      protocol: r.protocol,
      transport: r.transport,
      applicationOverhead: r.appOverhead,
      transportOverhead: r.transportOverhead,
      networkOverhead: r.networkOverhead,
      linkOverhead: r.linkOverhead,
      totalOverhead: r.totalOverhead,
      totalSize: r.totalSize,
      efficiency: r.efficiency,
      fragments: r.fragments
    })),
    timestamp: new Date().toISOString()
  };

  const downloadJSON = () => {
    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'protocol-overhead-analysis.json';
    a.click();
    URL.revokeObjectURL(url);
  };

  const downloadCSV = () => {
    const headers = ['Protocol', 'Transport', 'App Overhead', 'Transport OH', 'Network OH', 'Link OH', 'Total OH', 'Total Size', 'Efficiency %', 'Fragments'];
    const rows = sortedResults.map(r => [
      r.protocol, r.transport, r.appOverhead, r.transportOverhead, r.networkOverhead,
      r.linkOverhead, r.totalOverhead, r.totalSize, r.efficiency.toFixed(2), r.fragments
    ]);

    const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'protocol-overhead-analysis.csv';
    a.click();
    URL.revokeObjectURL(url);
  };

  return html`
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <button onclick=${downloadJSON}
              style="background: ${ieeeColors.navy}; color: white; border: none;
                     padding: 10px 20px; border-radius: 8px; cursor: pointer;
                     font-size: 0.9em; display: flex; align-items: center; gap: 8px;">
        📄 Export JSON
      </button>
      <button onclick=${downloadCSV}
              style="background: ${ieeeColors.teal}; color: white; border: none;
                     padding: 10px 20px; border-radius: 8px; cursor: pointer;
                     font-size: 0.9em; display: flex; align-items: center; gap: 8px;">
        📊 Export CSV
      </button>
    </div>
  `;
}

677.2 Understanding Protocol Overhead

677.2.1 What is Protocol Overhead?

Protocol overhead refers to the additional bytes required beyond your actual data (payload) to successfully transmit a message. This overhead comes from multiple layers of the network stack:

1. Application Layer: Protocol-specific headers, topic names, message identifiers, QoS flags
2. Transport Layer: TCP/UDP headers, TLS/DTLS encryption overhead
3. Network Layer: IP headers (IPv4: 20 bytes, IPv6: 40 bytes)
4. Link Layer: Frame headers, preambles, checksums

677.2.2 Why Does Overhead Matter?

NoteImpact on Constrained Devices

For IoT devices with limited bandwidth, battery, or memory, every byte counts. High protocol overhead can:

• Increase power consumption: More bytes = more radio transmission time
• Reduce effective throughput: Less payload per packet
• Cause fragmentation: Messages exceeding MTU require multiple packets
• Increase latency: More packets mean more transmission cycles

677.2.3 Protocol Overhead Characteristics

Protocol	Typical Overhead	Best For
MQTT 3.1.1	2-5 bytes + topic	Pub/sub messaging
CoAP	4 bytes + options	Constrained devices
HTTP/1.1	100-500 bytes	Web integration
HTTP/2	20-50 bytes	Multiplexed streams
AMQP	8+ bytes	Enterprise messaging
LwM2M	6+ bytes	Device management

677.2.4 MTU Considerations

Different network technologies have different Maximum Transmission Unit (MTU) sizes:

• Ethernet: 1500 bytes
• Wi-Fi: 2304 bytes
• 802.15.4: 127 bytes (very constrained!)
• BLE: 251 bytes
• LoRa: 255 bytes

WarningFragmentation Impact

When a message exceeds the MTU, it must be fragmented into multiple packets. Each fragment incurs:

• Additional header overhead
• Reassembly buffer requirements
• Risk of packet loss affecting entire message
• Increased latency from multiple transmissions

677.3 Key Takeaways

TipProtocol Selection Guidelines

1. For constrained networks (802.15.4, BLE): Use CoAP or MQTT-SN with small payloads
2. For small sensor readings: Binary protocols vastly outperform text-based ones
3. For large data transfers: Protocol overhead becomes less significant; focus on compression
4. For secure communications: DTLS overhead is significant; pre-shared keys help reduce handshake overhead
5. For variable payload sizes: Consider protocols with efficient variable-length encoding

677.4 Related Topics

• IoT Protocols Overview
• MQTT Protocol
• CoAP Protocol
• 6LoWPAN
• Protocol Selector Wizard