| |
| import {profiles} from './emotions.js'; |
| export function attachDeskControls(rig){ |
| const caption=document.createElement('p');caption.className='desk-caption';caption.textContent='Drag the robot to orbit · scroll to zoom · arrow keys also rotate the view. Camera tracking turns the head towards you.'; |
| const details=document.createElement('details');details.className='desk-controls'; |
| details.innerHTML=`<summary>Inspect the two-axis prototype <span>↗</span></summary> |
| <p>Procedural reconstruction of your desk-robot proposal. No arms, heart, cross or mechanical roll. The camera aperture sits above the round display.</p> |
| <div class="desk-buttons"><button type="button" id="desk-front">Front</button><button type="button" id="desk-threequarter">Three-quarter</button><button type="button" id="desk-rear">Rear</button><button type="button" id="desk-center">Reset view</button></div> |
| <label><input id="desk-manual" type="checkbox"> Manual head position (overrides camera tracking)</label> |
| <label for="desk-pan">Head pan <output id="desk-pan-value">0°</output></label><input id="desk-pan" type="range" min="-90" max="90" value="0" step="1"> |
| <label for="desk-tilt">Head tilt <output id="desk-tilt-value">0°</output></label><input id="desk-tilt" type="range" min="-15" max="15" value="0" step="1"> |
| <label><input id="desk-tour" type="checkbox"> Demonstrate pan and tilt</label> |
| <label><input id="desk-grid" type="checkbox"> Show axes and ground grid</label> |
| <label for="desk-explode">Assembly separation <output id="desk-explode-value">assembled</output></label><input id="desk-explode" type="range" min="0" max="1" value="0" step=".05"> |
| <div class="desk-buttons"><button type="button" id="desk-emotions">Preview all 40 expressions</button><button type="button" id="desk-zoom-in" aria-label="Zoom in">＋ Zoom</button><button type="button" id="desk-zoom-out" aria-label="Zoom out">− Zoom</button></div> |
| <label for="desk-quality">Rendering budget</label><select id="desk-quality"><option value="30">30 fps target · standard</option><option value="20">20 fps target · lower CPU</option></select> |
| <dl><div><dt>Head shell / depth</dt><dd>Ø 190 / ~110–125 mm</dd></div><div><dt>Base / total height</dt><dd>Ø 220 / ~315 mm</dd></div><div><dt>Display / active image</dt><dd>Ø 150 / Ø 127.6 mm</dd></div><div><dt>Display mounting</dt><dd>4 × M4, 75 × 75 mm</dd></div><div><dt>Conservative virtual limits</dt><dd>Pan ±90° · tilt ±15° · no roll</dd></div></dl> |
| <p class="desk-caution">A visual, kinematic prototype—not manufacturing CAD, collision/torque simulation or a servo controller. Part fit, cable clearance and load limits require physical checks.</p>`; |
| document.getElementById('avatar').after(caption,details); |
| const $=id=>document.getElementById(id),r=x=>x*Math.PI/180; |
| const manual=()=>{rig.setManual(+$('desk-pan').value,+$('desk-tilt').value,$('desk-manual').checked);$('desk-pan-value').value=$('desk-pan').value+'°';$('desk-tilt-value').value=$('desk-tilt').value+'°';}; |
| for(const id of ['desk-pan','desk-tilt'])$(id).oninput=()=>{$('desk-manual').checked=true;manual();}; |
| $('desk-manual').onchange=manual; |
| $('desk-front').onclick=()=>{rig.state.view=0;rig.state.elevation=r(4);}; |
| $('desk-threequarter').onclick=()=>{rig.state.view=r(-32);rig.state.elevation=r(12);}; |
| $('desk-rear').onclick=()=>{rig.state.view=r(180);rig.state.elevation=r(8);}; |
| $('desk-center').onclick=()=>{rig.center();$('desk-pan').value=$('desk-tilt').value=0;$('desk-manual').checked=$('desk-tour').checked=false;manual();}; |
| $('desk-tour').onchange=()=>{rig.setTour($('desk-tour').checked);if($('desk-tour').checked){$('desk-manual').checked=false;rig.state.manual=false;}}; |
| $('desk-grid').onchange=()=>rig.setBlueprint($('desk-grid').checked); |
| $('desk-explode').oninput=()=>{rig.setExploded(+$('desk-explode').value);$('desk-explode-value').value=rig.state.exploded?Math.round(rig.state.exploded*100)+'% separated':'assembled';}; |
| $('desk-quality').onchange=()=>rig.state.fps=+$('desk-quality').value; |
| $('desk-zoom-in').onclick=()=>rig.state.distance=Math.max(450,rig.state.distance-60); |
| $('desk-zoom-out').onclick=()=>rig.state.distance=Math.min(950,rig.state.distance+60); |
| let emotionTimer=null,index=0; |
| function stopPreview(){clearInterval(emotionTimer);emotionTimer=null;$('desk-emotions').textContent='Preview all 40 expressions';} |
| $('expression').addEventListener('change',stopPreview); |
| $('desk-emotions').onclick=()=>{ |
| if(emotionTimer){stopPreview();$('expression').value='auto';return;} |
| $('desk-emotions').textContent='Stop expression tour';index=0; |
| const advance=()=>{$('expression').value=profiles[index++%profiles.length].slug;};advance();emotionTimer=setInterval(advance,1600); |
| }; |
| const stats=document.createElement('p');stats.id='desk-render-stats';stats.className='desk-caption';details.after(stats); |
| const interval=setInterval(()=>{const s=rig.snapshot();if(s.renderCount)stats.textContent=`CPU software 3D · ${rig.state.fps} fps target · render p95 ${s.renderP95Ms.toFixed(1)} ms · pan ${s.pan.toFixed(1)}° · tilt ${s.tilt.toFixed(1)}° · roll 0°`;},800); |
| addEventListener('pagehide',()=>{clearInterval(interval);stopPreview();rig.dispose();},{once:true}); |
| } |
|
|
