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
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 += '
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 }); }