Files
isokit/studio/index.html
T
grabowski 95ea4a8512
Deploy web Studio / deploy (push) Successful in 3m27s
Build your own house: walls, windows, doors, floors, roof, stairs, furniture
House parts (stdlib isokit/house): house_wall drawn along a line, with ends
that adapt at corners, T-junctions and straight runs so no two walls
overlap; window and door that sit on a wall and cut its opening (door
styles panel, glass, double, sliding, opening; swing and hinge by
rotation); floor (boards, tiles, carpet, stone); roof (hip, gable, flat,
optional solar); stairs.

Furniture (stdlib isokit/furniture): chair, sofa / armchair, table with
chairs, desk with monitor and chair, TV, bed, cupboard, bookshelf, kitchen
run, bathtub, shower, toilet, washbasin, plant, rug, floor lamp.

Cut-open levels: on gf / 1f the walls in front of a room are cut low
(rooms are found by their floors), the roof becomes an outline on the
floor, and storeys above are left out. A part's storey comes from z
(storey_h, default 3 m).

Scripting: objects_of, objects_at, objects_on, mount_of, mounted, frame,
to_world, to_local, local_of. Prefab meta: shape (line / rect), mount,
storey.

Studio: drag to draw lines and rectangles (walls, roads, fences, hedges,
floors, areas, buildings, roofs). The Room tool draws a floor plus walls,
without doubling walls that already stand on an edge. Windows and doors
snap onto walls with a hover preview, and they move, turn, copy and
delete with their wall in one undo step. New parts land on the storey
the view shows. Palette categories collapse, and the palette scrolls
apart from the object list.

The MCP instructions explain house building, and list_prefabs shows
sits_on. examples/house is a furnished bungalow; the web Studio gets a
House demo button. Tests: wall corners and junctions, zero depth-sort
cycles in every view, cut levels, and the house demo in every view;
check_studio covers the room / window / door / storey flow, check_web
the House demo.
2026-10-24 17:39:04 +07:00

84 lines
4.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>isokit Studio</title>
<script>
(function(){var t=null;try{t=localStorage.getItem("isokit-theme")}catch(e){}
if(t!=="light"&&t!=="dark")t=window.matchMedia&&matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";
document.documentElement.setAttribute("data-theme",t);})();
</script>
<link rel="icon" type="image/svg+xml" href="/assets/studio/favicon.svg">
<link rel="stylesheet" href="/assets/viewer/isokit-view.css">
<link rel="stylesheet" href="/assets/theme.css">
<link rel="stylesheet" href="/assets/studio/studio.css">
</head>
<body>
<header class="st-head">
<b class="st-logo">isokit <span>Studio</span></b>
<span class="st-title" id="title"></span>
<span class="st-grow"></span>
<button type="button" id="undo" title="Undo (Ctrl+Z)" disabled>&#x21B6; Undo</button>
<button type="button" id="redo" title="Redo (Ctrl+Y)" disabled>&#x21B7; Redo</button>
<span class="st-save" id="save" title="Every change is saved to scene.json at once">Saved</span>
<span class="st-sep"></span>
<a class="st-btn" id="preview" href="/view" target="_blank" rel="noopener" title="The scene as visitors see it (live)">Preview</a>
<button type="button" id="build" title="Write the self-contained HTML page">Build page</button>
<button type="button" id="theme" title="Light / dark">&#x25D0;</button>
<button type="button" id="help" title="Keys and tips">?</button>
</header>
<main class="st-main">
<aside class="st-left">
<section class="st-panel st-pal-panel">
<h2>Add <small>click, then click or drag on the map</small></h2>
<input type="search" id="psearch" placeholder="Search objects…" autocomplete="off">
<div id="palette" class="st-palette"></div>
</section>
<section class="st-panel st-grow-panel">
<h2>Objects <small id="ocount"></small></h2>
<input type="search" id="osearch" placeholder="Filter…" autocomplete="off">
<ul id="objects" class="st-objects"></ul>
</section>
</aside>
<section class="st-centre">
<div id="view" class="iso-fill"></div>
<div class="st-hint" id="hint" hidden></div>
<footer class="st-status">
<span id="cursor">x – y –</span>
<label title="Snap positions to a grid">Snap
<select id="snap"><option value="0">off</option><option value="0.1">0.1 m</option><option value="0.5" selected>0.5 m</option><option value="1">1 m</option><option value="5">5 m</option></select>
</label>
<span class="st-grow"></span>
<button type="button" id="warnbtn" class="st-link" hidden></button>
<span id="stats"></span>
<a id="ver" class="st-ver" href="https://git.b4l.co.th/B4L/isokit" target="_blank" rel="noopener"></a>
</footer>
</section>
<aside class="st-right" id="right"></aside>
</main>
<div class="st-toast" id="toast" hidden></div>
<dialog id="helpdlg" class="st-dialog">
<h3>isokit Studio</h3>
<table>
<tr><th>Add</th><td>pick an object on the left, click on the map (Shift-click to place several)</td></tr>
<tr><th>Draw</th><td>walls, roads, fences: drag along the map; floors, areas, buildings, roofs: drag a rectangle; Room: drag a rectangle for a floor with walls around it</td></tr>
<tr><th>Windows, doors</th><td>click on a wall: they snap onto it, cut their opening and move, turn, copy and delete with the wall; R turns a door to the other hinge and swing side</td></tr>
<tr><th>Storeys</th><td>GF, 1F, … cut a house open; on 1F and up, new walls, floors and furniture go onto that storey (3 m each, parameter <code>storey_h</code>)</td></tr>
<tr><th>Select</th><td>click it on the map or in the list</td></tr>
<tr><th>Move</th><td>drag it, or arrow keys (by the snap step)</td></tr>
<tr><th>Turn</th><td>R / Shift+R, or the ⟲ ⟳ buttons</td></tr>
<tr><th>Copy / delete</th><td>Ctrl+D / Delete</td></tr>
<tr><th>Undo / redo</th><td>Ctrl+Z / Ctrl+Y</td></tr>
<tr><th>View</th><td>drag the ground to pan, Ctrl + wheel or pinch to zoom, ↺ ↻ to rotate, levels to look inside</td></tr>
<tr><th>Agent</th><td>✦ Agent opens a chat with a language model that edits the scene for you; Undo takes its steps back. Drag the window by its title, resize it at the top-left corner</td></tr>
<tr><th>MCP</th><td>connect an AI agent over MCP; its edits appear here live (see the panel when nothing is selected)</td></tr>
</table>
<form method="dialog"><button>Close</button></form>
</dialog>
<script src="/assets/viewer/isokit-view.js"></script>
<script src="/assets/studio/studio.js"></script>
<script src="/assets/studio/agent.js"></script>
</body>
</html>