EN · 中文 keys in app · Tagalog below

Layout Tool — User Manual

Cabinet & closet layout, elevation, styling, quoting and PDF export.

Manual version 1.0 · Covers app build June 2026 · Languages in app: English / 中文 / Filipino

1. Signing in & the Jobs menu

Open the app in your browser. After sign-in you land on the Jobs menu — this is your home screen. Each row is one project (a kitchen or closet).

• + New job — create a project. You'll be asked for a name and the type (kitchen or closet). A new job starts as a four-wall room (A, B, C, D).
• Open — start working on a job.
• Rename / Duplicate / Archive — manage a job. Duplicate copies the whole layout; Archive hides it (toggle show archived to see archived jobs).

2. Switching language

Use the language dropdown in the top-right corner of the header — English, 中文, or Filipino. Your choice is remembered the next time you open the app. The whole interface translates instantly. Note: the exported PDF prints in English when Chinese is selected (the PDF font cannot draw Chinese characters).

3. The seven tabs

Tab	What it's for
Plan	Top-down floor plan. Place and arrange every item.
Elevation	Front-on view of one wall. See and edit cabinet faces.
Win/Door	Add and position windows, doors and openings.
Trim	Toe kicks, crown and fillers.
Countertop	Add countertops, including auto-countertops over a selection.
Styles	Build reusable cabinet face layouts (drawers / doors / shelves).
Quote	Pricing, markup, tax and the quote PDF.

4. Plan view — placing & moving items

• Add items from the toolbar on the right (+ Base, + Wall, + Island, + Closet, appliances, etc.).
• Drag a cabinet to move it. It snaps to neighbours and wall ends and won't overlap another item in the same band.
• Right-click an item for Rotate 90°, Duplicate, or Delete. You can also press Delete.
• Zoom with the controls at the bottom-left (or reset to 100%).
• Click an item to open its editor (right panel): code, dimensions, face style, pricing.

5. Choosing which wall to place on

At the top of the toolbar there is a wall selector. Pick the wall (A–D) and every "+ Add" button drops the new item on that wall instead of the one you happen to be viewing. It defaults to the wall currently shown in Elevation.

6. Auto-fill base & wall

On the Elevation tab pick a wall, then use:

• ⚡ Fill base — fills the empty floor run with standard base cabinets, skipping doors and openings.
• ⚡ Fill wall — fills the upper run with wall cabinets. It works around the fridge and range widths, keeps 3″ clear of windows, and drops an over-fridge and over-range cabinet automatically.

7. Elevation view

Pick a wall (A–D) to see it front-on. Cabinets show their real face layout — drawers, doors, shelves, hanging rods and vertical dividers. Drag to reposition; stacked labels fan out so codes never overlap. Click a cabinet to edit it in the right panel.

8. Windows, Doors, Trim, Countertop

• Win/Door — click + Window / + Door / + Opening, then click the plan to drop it on the nearest wall. Each has width, height and sill height.
• Trim — add toe kicks, crown and fillers.
• Countertop — add a countertop, or select base cabinets and use Auto countertop so the top follows the bases it covers (with overhang).

9. Styles — the face editor

A face style is a reusable layout of drawers, doors and shelves that you can apply to any cabinet. Open the Styles tab and click + New style or Edit.

• Select / edit mode — click a section to set its type (drawer, door, shelf, open, hanging rod…), its door/shelf count, and its height. Drag the blue lines to move a divider; double-click a line to remove it.
• Draw shelf mode — click anywhere inside a section to drop a shelf line exactly there.
• Multi-select & Divide evenly — hold Ctrl (or ⌘) and click several sections, then press Divide evenly. They are split to the exact same height (true measurement, not rounded to a fraction).
• Vertical shelves (columns) — set the Vertical shelves number on a section to add vertical dividers across that bay.
• Door style note — the text field at the top of the Styles tab records the door style for the whole job (e.g. "Shaker, paint-grade maple"). It appears on the PDF; it is a note, not a drawn shape.

10. Editing a face from Elevation & saving a new style

Select a cabinet (in Elevation or Plan) and, in its editor, click "✏ Edit this face / save as new style". The face editor opens pre-loaded with that cabinet's current layout. Change it, give it a name, and press Save as new style & apply. This creates a brand-new style (your existing styles are never overwritten) and applies it back to that cabinet. Cancel / Back returns to the cabinet without saving.

11. Quote

The Quote tab lists every item with its price. Set Markup % and Tax % and press Save rates. Custom items are priced by size; RTA items use the unit price you enter in the item editor. Press ⬇ Quote PDF to export.

12. PDF export & annotation

Press ⬇ PDF to open the annotate-and-export window. Pick a page (plan or any wall elevation), then mark it up with Text, Arrow, Pen or Box in any colour. Save keeps your marks with the job; ⬇ Download PDF produces the full set plus a cabinet schedule (and the job's door-style note).

TAGALOG / FILIPINO

Layout Tool — Manwal ng Gumagamit

Layout ng kabinet at closet, elebasyon, estilo, quotation at PDF export.

Bersyon ng manwal 1.0 · Para sa build ng app noong Hunyo 2026 · Mga wika sa app: English / 中文 / Filipino

1. Pag-sign in at ang menu ng Mga Trabaho

Buksan ang app sa iyong browser. Pagkatapos mag-sign in, mapupunta ka sa menu na Mga Trabaho — ito ang iyong home screen. Bawat row ay isang proyekto (kitchen o closet).

• + Bagong trabaho — gumawa ng proyekto. Hihingin ang pangalan at uri (kitchen o closet). Ang bagong trabaho ay nagsisimula bilang silid na may apat na dingding (A, B, C, D).
• Buksan — simulan ang trabaho.
• Palitan ang pangalan / Magdoble / I-archive — pamahalaan ang trabaho. Ang Magdoble ay kinokopya ang buong layout; ang I-archive ay itinatago ito (i-on ang ipakita ang naka-archive para makita).

2. Pagpalit ng wika

Gamitin ang dropdown ng wika sa kanang itaas na sulok ng header — English, 中文, o Filipino. Naaalala ang pinili mo sa susunod na pagbukas. Agad na nagsasalin ang buong interface. Tandaan: ang na-export na PDF ay nakalimbag sa Ingles kapag Chinese ang napili (hindi kayang iguhit ng PDF font ang mga Chinese na karakter).

3. Ang pitong tab

Tab	Para saan
Plano	Tanawin mula sa itaas. Ilagay at ayusin ang lahat ng item.
Elebasyon	Harapang tanawin ng isang dingding. Tingnan at i-edit ang mukha ng kabinet.
Bintana/Pinto	Magdagdag at maglagay ng bintana, pinto at bukasan.
Moldura (Trim)	Toe kick, crown at filler.
Countertop	Magdagdag ng countertop, kasama ang auto-countertop sa mga piniling base.
Mga Estilo	Gumawa ng magagamit-ulit na layout ng mukha (drawer / pinto / istante).
Quotation	Presyo, markup, buwis at ang quote PDF.

4. Plano — paglalagay at paggalaw ng item

• Magdagdag ng item mula sa toolbar sa kanan (+ Base, + Wall, + Island, + Aparador, mga appliance, atbp.).
• I-drag ang kabinet para igalaw. Kumakabit ito sa katabi at sa dulo ng dingding, at hindi magdidikit sa kapwa item sa parehong banda.
• I-right-click ang item para sa I-rotate 90°, Magdoble, o Burahin. Pwede rin ang Delete.
• Mag-zoom gamit ang kontrol sa kaliwang ibaba (o ibalik sa 100%).
• I-click ang item para buksan ang editor nito (kanang panel): code, sukat, estilo ng mukha, presyo.

5. Pagpili kung saang dingding ilalagay

Sa itaas ng toolbar may selector ng dingding. Piliin ang dingding (A–D) at bawat "+ Add" na button ay ilalagay ang bagong item sa dingding na iyon, hindi sa kasalukuyang tinitingnan. Ang default ay ang dingding na kasalukuyang nakikita sa Elebasyon.

6. Auto-fill ng base at wall

Sa tab na Elebasyon, pumili ng dingding, tapos gamitin ang:

• ⚡ Punuin ang base — pinupunan ang bakanteng sahig ng standard na base cabinet, nilalaktawan ang mga pinto at bukasan.
• ⚡ Punuin ang wall — pinupunan ang itaas ng wall cabinet. Iniiwasan nito ang lapad ng refrigerator at kalan, nag-iiwan ng 3″ na espasyo mula sa bintana, at awtomatikong naglalagay ng kabinet sa ibabaw ng refrigerator at ibabaw ng kalan.

7. Elebasyon

Pumili ng dingding (A–D) para makita ito nang harapan. Ipinapakita ng kabinet ang tunay na layout ng mukha nito — drawer, pinto, istante, sabitan ng damit at patayong dibisyon. I-drag para iposisyon; ang mga magkakapatong na label ay nagkakalat para hindi magkadikit ang mga code. I-click ang kabinet para i-edit sa kanang panel.

8. Bintana, Pinto, Moldura, Countertop

• Bintana/Pinto — i-click ang + Bintana / + Pinto / + Bukasan, tapos i-click ang plano para ilagay sa pinakamalapit na dingding. May lapad, taas at taas ng sill ang bawat isa.
• Moldura — magdagdag ng toe kick, crown at filler.
• Countertop — magdagdag ng countertop, o pumili ng mga base cabinet at gamitin ang Auto countertop para sundan ng ibabaw ang mga base na sinasaklaw nito (may overhang).

9. Mga Estilo — ang face editor

Ang estilo ng mukha ay magagamit-ulit na layout ng drawer, pinto at istante na maaari mong ilapat sa kahit anong kabinet. Buksan ang tab na Mga Estilo at i-click ang + Bagong estilo o I-edit.

• Piliin / i-edit mode — i-click ang seksyon para itakda ang uri nito (drawer, pinto, istante, bukas, sabitan…), ang bilang ng pinto/istante, at ang taas. I-drag ang asul na linya para igalaw ang dibisyon; i-double-click ang linya para tanggalin.
• Draw shelf mode — i-click kahit saan sa loob ng seksyon para mag-drop ng linya ng istante doon mismo.
• Multi-select at Hatiin nang pantay — pindutin ang Ctrl (o ⌘) at i-click ang ilang seksyon, tapos pindutin ang Hatiin nang pantay. Hahatiin sila sa eksaktong parehong taas (totoong sukat, hindi binilog sa fraction).
• Patayong istante (column) — itakda ang bilang ng Patayong istante sa isang seksyon para magdagdag ng patayong dibisyon sa bay na iyon.
• Tala ng estilo ng pinto — ang text field sa itaas ng tab na Mga Estilo ay nagtatala ng estilo ng pinto para sa buong trabaho (hal. "Shaker, paint-grade maple"). Lumalabas ito sa PDF; ito ay tala, hindi iginuhit na hugis.

10. Pag-edit ng mukha mula sa Elebasyon at pag-save ng bagong estilo

Pumili ng kabinet (sa Elebasyon o Plano) at, sa editor nito, i-click ang "✏ I-edit ang mukha / i-save bilang bagong estilo". Bubukas ang face editor na naka-load na ang kasalukuyang layout ng kabinet na iyon. Baguhin ito, lagyan ng pangalan, at pindutin ang I-save bilang bagong estilo at ilapat. Gumagawa ito ng bagong estilo (hindi kailanman ino-overwrite ang dati mong mga estilo) at inilalapat ito pabalik sa kabinet. Ang Kanselahin / Balik ay babalik sa kabinet nang hindi nagse-save.

11. Quotation

Inililista ng tab na Quotation ang bawat item kasama ang presyo. Itakda ang Markup % at Buwis % at pindutin ang I-save ang rate. Ang custom na item ay pinepresyo ayon sa sukat; ang RTA na item ay gumagamit ng unit price na inilagay mo sa editor ng item. Pindutin ang ⬇ Quote PDF para i-export.

12. PDF export at annotation

Pindutin ang ⬇ PDF para buksan ang annotate-and-export window. Pumili ng pahina (plano o kahit aling elebasyon ng dingding), tapos markahan ito ng Teksto, Pana, Panulat o Kahon sa kahit anong kulay. Ang I-save ay itinatago ang iyong mga marka kasama ng trabaho; ang ⬇ I-download ang PDF ay gumagawa ng buong set kasama ang cabinet schedule (at ang tala ng estilo ng pinto ng trabaho).

Layout Tool · Manual v1.0 · PBS Houston