Skip to content

Fit Lab: DirectorDeck restyle, facing ring that matches the screen, 2x2 3D view #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DatMoshu wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fit Lab: DirectorDeck restyle, facing ring that matches the screen, 2x2 3D view #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b4ad53
Restyle Fit Lab in DirectorDeck's palette and fix its layout overflow
DatMoshu Oct 6, 2026
415d081
Make the Fit Lab facing ring match the screen and add a 2x2 3D view
DatMoshu Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion tools/fit-lab/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,11 @@ existing manifest item format; `file` paths point into the cache. Limits: 100 GL
- **Top:** pack, save status, undo/redo, save.
- **Left:** slot and its items. Tick items to show them in 3D; click one (or its preview card) to select it.
- **Centre:** the live 3D body through the UO camera (drag to orbit, **UO camera** resets) beside the Blender render
pane; below them action, direction ring 0–7 (dashed 5–7 are mirrored like the client), play and frame. Below it, scroll across enlarged 136×120 previews of every item in the
pane. **1 view / 2×2** (remembered per browser) switches the 3D pane to four views: the orbit view plus fixed
front, side and back views that turn with the character. Below them: action, the facing ring, play and frame.
Each ring number sits where the character faces on screen (0 faces the viewer, then 45° clockwise per step:
1 down-left, 2 left, 3 up-left, 4 away, 5 up-right, 6 right, 7 down-right); the needle and label show the current
facing, arrow keys turn one step, and dashed 5–7 are mirrored from 3–1 like the client. Below it, scroll across enlarged 136×120 previews of every item in the
slot, with independent animation and direction cycling. Magenta marks body pixels poking through.
- **Right**, in tabs (Fit, Corrections, Render, Measure, History):
- Slot fit: offset, rotation, scale, skinned or rigid binding, plus an offset for one item only.
Expand Down
13 changes: 7 additions & 6 deletions tools/fit-lab/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fit Lab</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap">
<link rel="stylesheet" href="lab.css">
<script type="importmap">
{"imports": {
Expand All @@ -17,7 +15,7 @@
</head>
<body>
<header id="top">
<div class="brand"><h1>Fit Lab</h1><p id="packName"></p><a href="http://127.0.0.1:8772/" target="_blank" rel="noopener">Open Content Studio ↗</a></div>
<div class="brand"><span class="logo" aria-hidden="true">S</span><h1>Fit Lab</h1><p id="packName"></p><a href="http://127.0.0.1:8772/" target="_blank" rel="noopener">Open Content Studio ↗</a></div>
<div id="topActions" inert>
<p id="saveStatus" role="status" aria-live="polite">Loading saved adjustments…</p>
<button id="undo" title="Undo (Ctrl+Z)" disabled>Undo</button><button id="redo" title="Redo (Ctrl+Y)" disabled>Redo</button>
Expand All @@ -39,10 +37,13 @@
<main id="center">
<div id="stage">
<section class="pane" aria-label="Live 3D fit">
<header class="pane-head"><h2>Live 3D</h2><span class="pane-note">Drag to orbit</span>
<header class="pane-head"><h2>Live 3D</h2>
<div id="viewModes" class="seg" role="group" aria-label="3D view layout">
<button data-layout="single" aria-pressed="true" title="One orbit view">1 view</button><button data-layout="quad" aria-pressed="false" title="Orbit view plus front, side and back">2×2</button>
</div>
<button id="uoView" class="quiet" title="Reset to the UO camera">UO camera</button>
<label class="check"><input id="showHidden" type="checkbox"> Hidden faces</label></header>
<div id="view"></div>
<div id="view" title="Drag to orbit"><span class="view-tag" data-i="0">Orbit · drag to turn</span><span class="view-tag" data-i="1">Front</span><span class="view-tag" data-i="2">Side</span><span class="view-tag" data-i="3">Back</span></div>
</section>
<section class="pane" id="renderPane" aria-label="Blender render">
<header class="pane-head"><h2>Blender render</h2>
Expand Down Expand Up @@ -70,7 +71,7 @@

<div id="bar" inert>
<label class="field inline">Action <select id="action"></select></label>
<div id="dirs" role="group" aria-label="Direction"></div>
<div id="dirs" role="group" aria-label="Facing direction (arrow keys turn)"></div><span id="dirLabel" aria-live="polite"></span>
<button id="play" class="play" aria-label="Play">Play</button>
<input id="frame" type="range" min="0" max="0" value="0">
<span id="frameLabel" class="num">0</span>
Expand Down
Loading
Loading