Theatre Stage Plot Generator

Theatre Stage Plot Generator

Design and document your performance's technical and scenic layout. Define stage dimensions, set pieces, props, and audio/visual requirements.

STAGE PLOT REPORT

--

The Final Scene (Act III)
Date: --
Stage: --
Capacity: --

Conceptual Stage Diagram (Top View)

Dimensions: --

Upstage Left Upstage Center Upstage Right Downstage Left Downstage Center Downstage Right
AUDIENCE / PROSCENIUM

[Elements listed below]

Inventory & Technical Requirements

Set Pieces (Size, Placement)

Hand Props & Dressings

Sound & Audio Inputs (Mics, Playback)

Lighting Instruments (Type, Color)

Plot Configuration

Scene Context & Dimensions

Technical Requirements

No hand props or dressings listed.

'; } else { propsArray.forEach(item => { const div = document.createElement('div'); div.className = 'tsp-list-item'; div.innerText = item.trim(); propsContainer.appendChild(div); }); } // --- 3. Technical --- // Sound List const soundContainer = document.getElementById('out-sound-inputs'); soundContainer.innerHTML = ''; const soundArray = soundRaw.split('\n').filter(s => s.trim() !== ''); if (soundArray.length === 0) { soundContainer.innerHTML = '

No audio requirements listed.

'; } else { soundArray.forEach(item => { const div = document.createElement('div'); div.className = 'tsp-list-item'; div.innerText = item.trim(); soundContainer.appendChild(div); }); } // Lighting List const lightingContainer = document.getElementById('out-lighting'); lightingContainer.innerHTML = ''; const lightingArray = lightingRaw.split('\n').filter(s => s.trim() !== ''); if (lightingArray.length === 0) { lightingContainer.innerHTML = `

No lighting cues or instruments listed.

`; } else { lightingArray.forEach(item => { const div = document.createElement('div'); div.className = 'tsp-list-item'; div.innerText = item.trim(); lightingContainer.appendChild(div); }); } // Power Notes (Append to Lighting List for simplicity, or create a new section if needed) if (powerNotes.trim()) { const powerDiv = document.createElement('div'); powerDiv.className = 'tsp-list-item'; powerDiv.style.fontWeight = 'bold'; powerDiv.style.backgroundColor = '#FFD700'; powerDiv.style.color = '#333'; powerDiv.innerText = `[NOTES] ${powerNotes.trim()}`; lightingContainer.appendChild(powerDiv); } // --- 4. Conceptual Diagram Update --- const diagElements = document.getElementById('out-diagram-elements'); let diagHtml = ''; // Combine set pieces, primary sound, and primary lighting elements for the visual summary const summaryElements = [ ...setPiecesArray.map(s => s.split(',')[0].trim()), ...soundArray.map(s => s.split('(')[0].trim()), ...lightingArray.map(s => s.split('(')[0].trim()) ].filter(e => e.length > 0); if (summaryElements.length > 0) { diagHtml += '
    '; summaryElements.slice(0, 6).forEach(element => { // Limit to 6 for space diagHtml += `
  • ${element}
  • `; }); if (summaryElements.length > 6) { diagHtml += `
  • + ${summaryElements.length - 6} other elements...
  • `; } diagHtml += '
'; } else { diagHtml = `

Stage is Clear.

`; } diagElements.innerHTML = diagHtml; } function tspDownloadPDF() { const element = document.getElementById('tsp-print-area'); // Show PDF header const headers = element.querySelectorAll('.pdf-header'); headers.forEach(h => h.style.display = 'block'); // Set white background for PDF const plotSheet = element.querySelector('.tsp-plot-sheet'); plotSheet.style.backgroundColor = '#fff'; const opt = { margin: 0.4, filename: 'Stage_Plot.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; html2pdf().set(opt).from(element).save().then(function() { // Hide header again and reset background headers.forEach(h => h.style.display = 'none'); plotSheet.style.backgroundColor = '#fff'; // Retain white background or adjust if the original wrapper style is needed }); }
Scroll to Top