egoSample/index.html

<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ego Sample</title>
<style>
:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:#07090d;color:#e6e8ee;font:14px/1.5 -apple-system,"Helvetica Neue",Arial,"PingFang SC",sans-serif}
.wrap{display:flex;height:100vh;overflow:hidden}
.side{width:290px;flex:0 0 290px;background:#0b0e13;border-right:1px solid #1c2028;overflow-y:auto}
.side .st{display:flex;align-items:baseline;gap:9px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#8890a0;padding:15px 15px 8px}
.side .st .back{text-transform:none;letter-spacing:0;font-size:12px;color:#6f92c8;text-decoration:none;white-space:nowrap;flex-shrink:0}
.side .st .back:hover{text-decoration:underline}
.cat{border-top:1px solid #14181f}
.cat > .ch{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 15px;cursor:pointer;background:#0e1219}
.cat > .ch:hover{background:#12151c}
.cat > .ch .ct{font-size:12px;font-weight:700;letter-spacing:.02em}
.cat > .ch .cc{font-size:10.5px;color:#6f7787;flex-shrink:0}
.cat > .ch .ct::before{content:"\25B8";color:#6f7787;display:inline-block;width:14px}
.cat.open > .ch .ct::before{content:"\25BE"}
.cbody{display:none}.cat.open .cbody{display:block}
.leaf{padding:9px 12px 9px 29px;cursor:pointer;border-left:3px solid transparent}
.leaf:hover{background:#12151c}
.leaf.on{background:#152036;border-left-color:#6f9fe0}
.leaf .lt{font-size:12.5px;font-weight:600}
.leaf .lm{font-size:10.5px;color:#7f8896;margin-top:2px;display:flex;gap:7px;align-items:center}
.rig{font:9.5px ui-monospace,monospace;color:#6f92c8;background:#12151c;border:1px solid #1c2028;border-radius:4px;padding:0 4px}
.rc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:0 0 auto}
.pl{font-size:9px;font-weight:700;letter-spacing:.06em;color:#07090d;background:#b388eb;border-radius:3px;padding:0 4px;margin-left:4px;vertical-align:1px}
.rig.tag{color:#07090d;background:#6f9fe0;border-color:#6f9fe0;font-weight:700}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.bar{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid #1c2028;background:#0b0e13;min-height:44px}
.bar .title{font-size:13px;color:#c7ccd6}
.bar .title b{color:#e6e8ee}
iframe{flex:1;width:100%;border:0;background:#07090d}
.empty{margin:auto;color:#6f7787;font-size:13px}
</style></head><body>
<div class="wrap">
  <nav class="side">
    <div class="st"><a class="back" href="../index.html">&larr; all datasets</a><span>Ego Sample &mdash; 13 tasks</span></div>
    <div id="nav"></div>
  </nav>
  <div class="main">
    <div class="bar" id="bar"><span class="empty">select a task on the left</span></div>
    <iframe id="stage" allow="autoplay" src="about:blank"></iframe>
  </div>
</div>
<script id="D" type="application/json">[["Retail & Fresh Food", [["Fruit retail & cutting", {"kind": "mego", "src": "mego.html#task_15634_ep003", "slug": "task_15634_ep003", "dur": 30.97, "rig": "MEgo 5-cam", "instr": "Place the pears from the table into the plate and arrange them neatly"}], ["Fruit cutting station", {"kind": "mego", "src": "mego.html#task_15365_ep000", "slug": "task_15365_ep000", "dur": 38.98, "rig": "MEgo 5-cam", "instr": "Sort yellow fruits and pack them into plastic boxes"}], ["Arranging fruits on retail shelf", {"kind": "ego", "src": "ego-legacy/demo09/viewer.html", "dur": 55.0, "rig": "PICO stereo", "instr": ""}], ["Dicing watermelon for storage", {"kind": "ego", "src": "ego-legacy/demo07/viewer.html", "dur": 373.0, "rig": "PICO stereo", "instr": ""}]]], ["Office & Documents", [["Document scanning & archiving", {"kind": "mego", "src": "mego.html#task_15638_ep001", "slug": "task_15638_ep001", "dur": 37.98, "rig": "MEgo 5-cam", "instr": "Organize the documents on the table"}], ["Document printing & binding", {"kind": "mego", "src": "mego.html#task_15659_ep004", "slug": "task_15659_ep004", "dur": 38.98, "rig": "MEgo 5-cam", "instr": "Organize and bind the documents on the table."}], ["Wiping office desk surface", {"kind": "ego", "src": "ego-legacy/demo08/viewer.html", "dur": 85.8, "rig": "PICO stereo", "instr": ""}]]], ["Assembly & Manufacturing", [["Mouse & keyboard assembly", {"kind": "mego", "src": "mego.html#task_15648_ep002", "slug": "task_15648_ep002", "dur": 39.98, "rig": "MEgo 5-cam", "instr": "Place the white keycap on the keyboard and press it"}], ["Trimming threads from garment", {"kind": "ego", "src": "ego-legacy/demo10/viewer.html", "dur": 22.5, "rig": "PICO stereo", "instr": ""}]]], ["Home & Organizing", [["Organizing refrigerator items", {"kind": "ego", "src": "ego-legacy/demo02/viewer.html", "dur": 41.7, "rig": "PICO stereo", "instr": ""}], ["Organizing fan power cord", {"kind": "ego", "src": "ego-legacy/demo05/viewer.html", "dur": 72.5, "rig": "PICO stereo", "instr": ""}]]], ["Creative Workshops", [["Photo keychain crafting", {"kind": "jizhi", "src": "jizhi.html#craft_20260629_sticker_ep000", "slug": "craft_20260629_sticker_ep000", "dur": 79.0, "rig": "Jizhi Stereo", "tags": ["US"], "instr": "Trim photo stickers, mount them in acrylic keychain frames and round badge cases, and attach key rings"}]]], ["Robot Ego \u00b7 Multi-Sensor Capture", [["Restocking a retail shelf", {"kind": "faberu", "src": "faberu.html#restock_20260916_ep000", "slug": "restock_20260916_ep000", "dur": 80.4, "rig": "Faber U", "tags": ["US", "robot ego"], "instr": "Fetch a bottle from the table and restock the shelf"}]], {"planned": true}]]</script>
<script>
const TREE = JSON.parse(document.getElementById('D').textContent);
const esc = s => (s||'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
const fmtDur = d => d==null ? '' : (d>=60 ? (d/60).toFixed(1)+' min' : d.toFixed(1)+' s');

function build(){
  const box = document.getElementById('nav');
  TREE.forEach(([cat, leaves, cm], ci)=>{
    const c = document.createElement('div'); c.className = 'cat' + (ci===0?' open':'');
    c.innerHTML = `<div class="ch"><span class="ct">${esc(cat)}${cm&&cm.planned?' <span class="pl">PLANNED</span>':''}</span><span class="cc">${leaves.length}</span></div><div class="cbody"></div>`;
    c.querySelector('.ch').onclick = ()=>c.classList.toggle('open');
    const body = c.querySelector('.cbody');
    leaves.forEach(([lbl, m])=>{
      const el = document.createElement('div'); el.className = 'leaf';
      el.innerHTML = `<div class="lt">${esc(lbl)}</div>
        <div class="lm"><span class="rig">${m.rig}</span>${(m.tags||[]).length?`<span class="rc">${m.tags.map(t=>`<span class="rig tag">${esc(t)}</span>`).join('')}</span>`:''}<span>${fmtDur(m.dur)}${m.instr?' · '+esc(m.instr):''}</span></div>`;
      el.onclick = ()=>open(m, lbl, el);
      body.appendChild(el);
    });
    box.appendChild(c);
  });
}

function open(m, lbl, el){
  document.querySelectorAll('.leaf.on').forEach(x=>x.classList.remove('on'));
  el.classList.add('on');
  const stage = document.getElementById('stage'), bar = document.getElementById('bar');
  if(m.kind === 'ego'){
    stage.src = m.src;
    bar.innerHTML = `<span class="title"><b>${esc(lbl)}</b> &middot; legacy PICO stereo ego &middot; ${fmtDur(m.dur)}</span>`;
  } else {
    const page = m.src.split('#')[0];
    const onPage = (stage.src||'').split('#')[0].endsWith('/'+page);
    let done = false;
    try{ if(onPage && stage.contentWindow){ stage.contentWindow.location.hash = m.slug; done = true; } }catch(e){}
    if(!done) stage.src = m.src;
    bar.innerHTML = `<span class="title"><b>${esc(lbl)}</b> &middot; ${esc(m.rig)}${m.instr?' &middot; '+esc(m.instr):''}</span>`;
  }
}

build();
const first = document.querySelector('.cat.open .leaf');
if(first) first.click();
</script>
</body></html>