<head>
<meta charset="UTF-8">
<title>Mreža +1 -1 defektov</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
  }

  select {
    margin-right: 10px;
    padding: 5px;
  }

  .grid-container {
    margin-top: 30px;
  }

  .grid {
    border-collapse: collapse;
    margin-bottom: 40px;
  }

  .grid td, .grid th {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
  }

  img.imggrid {
    width: 400px;
    height: auto;
  }

  .group-title {
    margin: 20px 0 5px;
    font-weight: bold;
  }
</style>
</head>
<body>

# Mreža +1 ter -1 defektov

Naprintal sem mrežo alternirajočih +1 ter -1 defektov.

V tem poročilu so najprej prikazani 3d renderji is DeScriba, AFM slike, nato pa
slike iz optičnega mikroskopa, najprej prazne celice, nato pa celice napolnjene
z 5CB slikane pod prekrižanimi polarizatorji, vzporednimi polarizatorji ter z
lambda ploščico.

Defektne linije sem naprintal z šestimi različnimi gostotami (density) d1 - d6.

Vsak set d1 - d6 je naprintan z laser power: 25, 30, 35, 40, 45, 50, 60

## DeScribe 3d renderji

describe vseh šest primerov

<img src="describe_cela.png" width="1200">

describe d1

<img src="describe_d1.png" width="600">

describe d1 detajl

<img src="describe_d1_detajl.png" width="600">

describe d2

<img src="describe_d2.png" width="600">

describe d2 detajl

<img src="describe_d2_detajl.png" width="600">

describe d3

<img src="describe_d3.png" width="600">

describe d3 detajl

<img src="describe_d3_detajl.png" width="600">

describe d4

<img src="describe_d4.png" width="600">

describe d4 detajl

<img src="describe_d4_detajl.png" width="600">

describe d5

<img src="describe_d5.png" width="600">

describe d5 detajl

<img src="describe_d5_detajl.png" width="600">

describe d6

<img src="describe_d6.png" width="600">

describe d6 detajl

<img src="describe_d6_detajl.png" width="600">


# AFM slike

Zraven vsake slike afm-ja je še slika prereza po logični liniji.

lp=30, d=3

<img src="afmpic/lp30,d3.008.jpg" width="600">

lp=30, d=3 (prerez)

<img src="afmpic/lp30,d3.008_section.png" width="600">

lp=35, d=1

<img src="afmpic/lp35,d1.000.jpg" width="600">

lp=35, d=1 (prerez)

<img src="afmpic/lp35,d1.000_section.png" width="600">

lp=35, d=3

<img src="afmpic/lp35,d3.009.jpg" width="600">

lp=35, d=3 (prerez)

<img src="afmpic/lp35,d3.009_section.png" width="600">

lp=35, d=4

<img src="afmpic/lp35,d4.001.jpg" width="600">

lp=35, d=4 (prerez)

<img src="afmpic/lp35,d4.001_section.png" width="600">

lp=35, d=6

<img src="afmpic/lp35,d6.003.jpg" width="600">

lp=35, d=6 (prerez)

<img src="afmpic/lp35,d6.003_section.png" width="600">

lp=40, d=3

<img src="afmpic/lp40,d3.005.jpg" width="600">

lp=40, d=3 (prerez)

<img src="afmpic/lp40,d3.005_section.png" width="600">

lp=50, d=6

<img src="afmpic/lp50,d6.004.jpg" width="600">

lp=50, d=6 (prerez)

<img src="afmpic/lp50,d6.004_section.png" width="600">

lp=60, d=6

<img src="afmpic/lp60,d6.007.jpg" width="600">

lp=60, d=6

<img src="afmpic/lp60,d6.007_section.png" width="600">

Izmerjena debelina na robu vzorca lp=35, d=4

<img src="afmpic/lp35,d4,debelina.002.jpg" width="600">

Izmerjena debelina na robu vzorca lp=35, d=4 (prerez)

<img src="afmpic/lp35,d4,debelina.002_section.png" width="600">


## Optični mikroskop (brez LC)


Slika z optičnim mikroskopom v transmisiji (sestavljena iz večih slik):

<img src="om/tr,vsi.jpg" width="600">

Slika z optičnim mikroskopom v refleksiji (sestavljena iz večih slik):

<img src="om/re,vsi.jpg" width="600">



## Optični mikroskop z LC

Slikano z črno Flir belo kamero, vsak vzorec z prekrižanimi in vzporedni polarizatorji ter z lambda ploščico.


Z optičnim mikroskopom sem slikal vse vzorce.
Ker je slik zelo veliko je tu programček, ki omogoča sortiranje po X in Y osi z različnimi parameteri.

<label>X Axis:</label>
<select id="axisX"></select>

<label>Y Axis:</label>
<select id="axisY"></select>

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

<script>
// ------------------ INPUT FILES ------------------
const files = [
  "lp=25,d=1,a=0deg.jpg",
  "lp=25,d=1,a=90deg,lambda.jpg",
  "lp=25,d=1,a=90deg.jpg",
  "lp=25,d=2,a=0deg.jpg",
  "lp=25,d=2,a=90deg,lambda.jpg",
  "lp=25,d=2,a=90deg.jpg",
  "lp=25,d=3,a=0deg.jpg",
  "lp=25,d=3,a=90deg,lambda.jpg",
  "lp=25,d=3,a=90deg.jpg",
  "lp=25,d=4,a=0deg.jpg",
  "lp=25,d=4,a=90deg,lambda.jpg",
  "lp=25,d=4,a=90deg.jpg",
  "lp=25,d=5,a=0deg.jpg",
  "lp=25,d=5,a=90deg,lambda.jpg",
  "lp=25,d=5,a=90deg.jpg",
  "lp=25,d=6,a=0deg.jpg",
  "lp=25,d=6,a=90deg,lambda.jpg",
  "lp=25,d=6,a=90deg.jpg",
  "lp=30,d=1,a=0deg.jpg",
  "lp=30,d=1,a=90deg,lambda.jpg",
  "lp=30,d=1,a=90deg.jpg",
  "lp=30,d=2,a=0deg.jpg",
  "lp=30,d=2,a=90deg,lambda.jpg",
  "lp=30,d=2,a=90deg.jpg",
  "lp=30,d=3,a=0deg.jpg",
  "lp=30,d=3,a=90deg,lambda.jpg",
  "lp=30,d=3,a=90deg.jpg",
  "lp=30,d=4,a=0deg.jpg",
  "lp=30,d=4,a=90deg,lambda.jpg",
  "lp=30,d=4,a=90deg.jpg",
  "lp=30,d=5,a=0deg.jpg",
  "lp=30,d=5,a=90deg,lambda.jpg",
  "lp=30,d=5,a=90deg.jpg",
  "lp=30,d=6,a=0deg.jpg",
  "lp=30,d=6,a=90deg,lambda.jpg",
  "lp=30,d=6,a=90deg.jpg",
  "lp=35,d=1,a=0deg.jpg",
  "lp=35,d=1,a=90deg,lambda.jpg",
  "lp=35,d=1,a=90deg.jpg",
  "lp=35,d=2,a=0deg.jpg",
  "lp=35,d=2,a=90deg,lambda.jpg",
  "lp=35,d=2,a=90deg.jpg",
  "lp=35,d=3,a=0deg.jpg",
  "lp=35,d=3,a=90deg,lambda.jpg",
  "lp=35,d=3,a=90deg.jpg",
  "lp=35,d=4,a=0deg.jpg",
  "lp=35,d=4,a=90deg,lambda.jpg",
  "lp=35,d=4,a=90deg.jpg",
  "lp=35,d=5,a=0deg.jpg",
  "lp=35,d=5,a=90deg,lambda.jpg",
  "lp=35,d=5,a=90deg.jpg",
  "lp=35,d=6,a=0deg.jpg",
  "lp=35,d=6,a=90deg,lambda.jpg",
  "lp=35,d=6,a=90deg.jpg",
  "lp=40,d=1,a=0deg.jpg",
  "lp=40,d=1,a=90deg,lambda.jpg",
  "lp=40,d=1,a=90deg.jpg",
  "lp=40,d=2,a=0deg.jpg",
  "lp=40,d=2,a=90deg,lambda.jpg",
  "lp=40,d=2,a=90deg.jpg",
  "lp=40,d=3,a=0deg.jpg",
  "lp=40,d=3,a=135deg.jpg",
  "lp=40,d=3,a=45deg.jpg",
  "lp=40,d=3,a=90deg-100x.jpg",
  "lp=40,d=3,a=90deg,lambda.jpg",
  "lp=40,d=3,a=90deg.jpg",
  "lp=40,d=4,a=0deg.jpg",
  "lp=40,d=4,a=90deg,lambda.jpg",
  "lp=40,d=4,a=90deg.jpg",
  "lp=40,d=5,a=0deg.jpg",
  "lp=40,d=5,a=90deg,lambda.jpg",
  "lp=40,d=5,a=90deg.jpg",
  "lp=40,d=6,a=0deg.jpg",
  "lp=40,d=6,a=90deg,lambda.jpg",
  "lp=40,d=6,a=90deg.jpg",
  "lp=50,d=1,a=0deg.jpg",
  "lp=50,d=1,a=90deg,lambda.jpg",
  "lp=50,d=1,a=90deg.jpg",
  "lp=50,d=2,a=0deg.jpg",
  "lp=50,d=2,a=90deg,lambda.jpg",
  "lp=50,d=2,a=90deg.jpg",
  "lp=50,d=3,a=0deg.jpg",
  "lp=50,d=3,a=90deg,lambda.jpg",
  "lp=50,d=3,a=90deg.jpg",
  "lp=50,d=4,a=0deg.jpg",
  "lp=50,d=4,a=90deg,lambda.jpg",
  "lp=50,d=4,a=90deg.jpg",
  "lp=50,d=5,a=0deg.jpg",
  "lp=50,d=5,a=90deg,lambda.jpg",
  "lp=50,d=5,a=90deg.jpg",
  "lp=50,d=6,a=0deg.jpg",
  "lp=50,d=6,a=90deg,lambda.jpg",
  "lp=50,d=6,a=90deg.jpg",
  "lp=60,d=1,a=0deg.jpg",
  "lp=60,d=1,a=90deg,lambda.jpg",
  "lp=60,d=1,a=90deg.jpg",
  "lp=60,d=2,a=0deg.jpg",
  "lp=60,d=2,a=90deg,lambda.jpg",
  "lp=60,d=2,a=90deg.jpg",
  "lp=60,d=3,a=0deg.jpg",
  "lp=60,d=3,a=90deg,lambda.jpg",
  "lp=60,d=3,a=90deg.jpg",
  "lp=60,d=4,a=0deg.jpg",
  "lp=60,d=4,a=90deg,lambda.jpg",
  "lp=60,d=4,a=90deg.jpg",
  "lp=60,d=5,a=0deg.jpg",
  "lp=60,d=5,a=90deg,lambda.jpg",
  "lp=60,d=5,a=90deg.jpg",
  "lp=60,d=6,a=0deg.jpg",
  "lp=60,d=6,a=90deg,lambda.jpg",
  "lp=60,d=6,a=90deg.jpg",
];

// ------------------ PARSER ------------------
function parseFilename(filename) {
  const name = filename.replace(/\.[^.]+$/, "");
  const parts = name.split(",");
  const obj = {};

  parts.forEach(part => {
    if (part.includes("=")) {
      const [k, v] = part.split("=");
      obj[k.trim()] = v.trim();
    } else {
      obj[part.trim()] = "1";
    }
  });

  return obj;
}

// ------------------ SORT ------------------
function numericSort(a, b) {
  const na = parseFloat(a);
  const nb = parseFloat(b);
  if (!isNaN(na) && !isNaN(nb)) return na - nb;
  return a.localeCompare(b);
}

// ------------------ BUILD GRIDS ------------------
function buildGrids(files, axisX, axisY) {
  const parsed = files.map(f => ({
    file: f,
    params: parseFilename(f)
  }));

  const grids = {};

  parsed.forEach(({ file, params }) => {
    const x = params[axisX];
    const y = params[axisY];
    if (!x || !y) return;

    const other = { ...params };
    delete other[axisX];
    delete other[axisY];

    const key = JSON.stringify(other);

    if (!grids[key]) {
      grids[key] = {
        other,
        xs: new Set(),
        ys: new Set(),
        grid: {}
      };
    }

    const g = grids[key];
    g.xs.add(x);
    g.ys.add(y);

    if (!g.grid[y]) g.grid[y] = {};
    g.grid[y][x] = file;
  });

  Object.values(grids).forEach(g => {
    g.xs = Array.from(g.xs).sort(numericSort);
    g.ys = Array.from(g.ys).sort(numericSort);
  });

  return grids;
}

// ------------------ RENDER ------------------
function render() {
  const axisX = document.getElementById("axisX").value;
  const axisY = document.getElementById("axisY").value;
  const output = document.getElementById("output");

  output.innerHTML = "";

  if (axisX === axisY) return;

  const grids = buildGrids(files, axisX, axisY);

  Object.values(grids).forEach(g => {
    const title = document.createElement("div");
    title.className = "group-title";
    title.textContent = "Other params: " + JSON.stringify(g.other);
    output.appendChild(title);

    const table = document.createElement("table");
    table.className = "grid";

    // header
    const header = document.createElement("tr");
    header.appendChild(document.createElement("th"));
    g.xs.forEach(x => {
      const th = document.createElement("th");
      th.textContent = x;
      header.appendChild(th);
    });
    table.appendChild(header);

    // rows
    g.ys.forEach(y => {
      const tr = document.createElement("tr");

      const th = document.createElement("th");
      th.textContent = y;
      tr.appendChild(th);

      g.xs.forEach(x => {
        const td = document.createElement("td");
        const file = g.grid[y]?.[x];

        if (file) {
          const img = document.createElement("img");

          // IMPORTANT: adjust path if needed
          img.src = "./om2/" + file;

          img.alt = file;
          img.classList.add('imggrid');
          td.appendChild(img);
        }

        tr.appendChild(td);
      });

      table.appendChild(tr);
    });

    output.appendChild(table);
  });
}

// ------------------ INIT ------------------
function init() {
  const allParams = new Set();

  files.forEach(f => {
    const p = parseFilename(f);
    Object.keys(p).forEach(k => allParams.add(k));
  });

  const axisX = document.getElementById("axisX");
  const axisY = document.getElementById("axisY");

  allParams.forEach(p => {
    const opt1 = new Option(p, p);
    const opt2 = new Option(p, p);
    axisX.add(opt1);
    axisY.add(opt2);
  });

  axisX.selectedIndex = 0;
  axisY.selectedIndex = 1;

  axisX.onchange = render;
  axisY.onchange = render;

  render();
}

init();
</script>

