Use this free online stained glass project manager to count geometric panel pieces, track glass colors, and organize your cutting list effectively for any project.
AI Generation Prompt
Stained Glass Geometric Pattern Piece Calculator
Overview
A clean, professional, single-page utility for stained glass artists to manage geometric panel projects. This tool focuses on accuracy, clarity, and ease of use, allowing users to track piece counts, dimensions, and material types in a sandboxed, in-memory environment.
Technical Implementation Strategy
- Architecture: Single HTML file using Tailwind CSS (via CDN) for styling and Vanilla JavaScript for logic.
- State Management: All data stored in a JavaScript variable array. NO usage of
localStorageorsessionStorage. - Sandbox Safety: Use custom modal components for deletions or warnings. Avoid
alert(),confirm(), orprompt(). - Responsive Design: Mobile-responsive flex/grid layout.
Core Features
- Dynamic Inventory Table: A clear table showing columns for: Piece ID/Name, Shape, Dimensions (W x H), Glass Color, and Action (Remove).
- Real-Time Summary Dashboard: A top-level component that shows:
- Total pieces counted.
- Distribution by glass color.
- Quick summary statistics.
- Input Form: A structured form with validation to add pieces. Include inputs for Label, Shape, Height, Width, and Color.
- Print/Export View: A CSS
@media printrule to ensure the list is clean and readable if the user needs a hard copy for their workbench.
UI/UX Design
- Aesthetic: Clean, minimalist light mode. Use high-contrast grays for text, soft whites/light grays for backgrounds, and a professional accent color (e.g., #2563eb - Cobalt Blue) for primary actions.
- Typography: Sans-serif, modern font stack (Inter or system-ui).
- Spacing: Generous padding (16px to 24px) for cards, with subtle shadow effects for a premium SaaS feel.
- Transitions: All UI interactions (adding/removing rows) should have a 200ms opacity/height transition.
Color Palette
- Background: #f9fafb
- Surface/Cards: #ffffff
- Primary Action: #2563eb
- Danger (Remove): #dc2626
- Text: #111827 (Main), #4b5563 (Secondary)
- Borders: #e5e7eb
Developer Directives
- NO PERSISTENCE: Explicitly include code comments clarifying that data clears on refresh. Inform the user in the UI about this limitation.
- MODAL UI: If the user deletes a piece, trigger a small custom HTML-based modal rather than a browser popup.
- MOBILE-FIRST: Use stacked layouts on mobile and side-by-side forms on desktop screens.
- CLEAN CODE: Separate logic (JS) from view (HTML) within the single file. Keep styles in a
<style>block. - PERFORMANCE: Use event delegation for the delete buttons in the table to minimize memory footprint.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is the Free Stained Glass Geometric Pattern Piece Calculator?
This application is a streamlined digital utility designed specifically for stained glass artists and hobbyists to manage their project component lists. It allows you to systematically input, categorize, and count individual pieces of glass for any geometric design, ensuring that your cutting lists are accurate and organized before you begin your project. By providing a centralized interface to track piece dimensions, glass types, and quantities, the tool eliminates the need for manual tallying on paper patterns. It is built to serve as a reliable digital assistant during the design and preparation phases of your stained glass work.
How do I add and manage glass pieces in this tool?
To add a piece, simply navigate to the input section and specify the dimensions, shape, and glass color or texture identifier for your piece. Once you click the 'Add Piece' button, the application will automatically append your item to the master inventory list displayed in the table below, updating your total piece count in real-time. If you need to make adjustments, you can remove individual entries using the 'Delete' action associated with each row. The application calculates the aggregate statistics dynamically, giving you an instant summary of total piece counts and categories without needing to reload or refresh the page.
Does this tool save my project data?
For security and privacy reasons, this application operates entirely in-memory using JavaScript state management. It does not utilize local storage, cookies, or any external database, meaning that your data exists only for the duration of your current browser session. Because the application does not store information persistently, please ensure you have documented your final list or printed the page before closing your browser tab. This design choice ensures complete privacy, as your project data is never transmitted to a server or cached on your device.
Can I use this tool on my tablet or phone?
Yes, the application is designed with a mobile-first approach, ensuring that all input fields, lists, and summary dashboards are easily accessible on small screens. The layout utilizes a responsive grid system that automatically adapts to your device, making it convenient to use while standing at your workbench. Whether you are designing at a desktop computer or working directly in your studio with a tablet, the touch-friendly interface ensures you can quickly track your progress without any friction. The design maintains high legibility and button sizing, regardless of your screen size.
