Welcome to the SignCast repository! This project aims to create a PDF drawing tool that helps installation teams design the installation of LED screens. The tool provides a user-friendly interface for configuring and downloading the installation diagram in PDF format.
🔴 View Live: Signcast.netlify.app
SignCast is a React-based application designed to simplify the installation process of LED screens by offering a digital tool that allows users to:
- Select equipment from a pre-defined database (CSV).
- Toggle between configurations (e.g., screen orientation, installation type).
- Generate and download installation diagrams in PDF format.
To get started with the development and run the project locally, follow these steps:
-
Node.js & npm: Ensure you have Node.js and npm installed.
- Install from Node.js official website.
-
Vite: This project uses Vite as the build tool for fast and efficient development.
- Vite is already included as a development dependency and doesn't require global installation.
-
Dependencies: This project uses various libraries and frameworks:
- React for building the UI.
- Tailwind CSS for styling.
- Fabric.js for drawing and generating PDF diagrams.
- Papaparse for handling Excel (.xlsx) data.
- zustand for state management.
-
Clone this repository:
git clone https://github.com/fifolio/signcast.git
-
Navigate into the project folder:
cd signcast -
Install the dependencies:
npm install
-
Run the development server:
npm run dev
The application will be available at
http://localhost:3000.
Below is a screenshot of the Control Panel interface, where users can manage settings, view data processing status, and access the uploaded Excel file for processing.
The application is divided into the following main folders:
- components/: Contains reusable UI components.
- common/: General components like the Navbar.
- controllers/: Handles major functional components like Configuration, Description, etc.
- details/: Displays the project information and equipment selection.
- fabric/: Includes the Fabric.tsx component for handling the diagram creation logic.
- ui/: Contains additional UI elements for the design.
- upload/: Handles file uploads, including Excel (.xlsx) file reading.
- helpers/: Utility functions like file handling.
- stores/: Zustand-based state management for user selections and configurations.
- public/: Static assets like images or files.
- src/: The main source directory for the React application.
- types/: TypeScript types for defining application state and props.
- Equipment Selection: Users can select from dropdowns (e.g., LED Screen, Mount Type, Media Player).
- Dynamic Drawing: Updates in real-time based on the selections, including screen orientation and installation type.
- PDF Export: The application generates a downloadable PDF with the installation diagram.
- Configuration Options: Users can adjust parameters like niche depth, screen size, and the distance from the floor to the screen center.
- src/components/fabric/Fabric.tsx: The main component responsible for drawing the diagram using Fabric.js.
- src/components/details/Notes.tsx: Displays user notes and project information.
- src/components/controllers/Configuration.tsx: Manages user configuration inputs for the screen and installation type.
Users can choose different equipment such as LED screens, media players, and mount types from a pre-loaded Excel (.xlsx) file. This data is used to populate dropdown menus in the UI.
- CSV Parsing: Uses the
Papaparselibrary to read Excel (.xlsx) data. - Dropdowns: Built using Radix UI components like
@radix-ui/react-select.
The Fabric.tsx component is the core of the drawing functionality. It leverages Fabric.js to render the LED screen diagram dynamically. Users can:
- Toggle screen orientation (horizontal or vertical).
- Adjust niche depth.
- View the power outlet location and other measurements.
Once the diagram is drawn and the user is satisfied with the configuration, they can download the drawing as a PDF.
- Uses
@react-pdf/rendererto generate and download the PDF.
The application allows the following configurations:
- Orientation: Toggle between horizontal and vertical screens.
- Installation Type: Choose between recessed (Niche) or flat wall installation.
- Distance from Floor: Input the distance from the floor to the center of the screen.
- Niche Depth: Automatically calculated or adjusted by the user.
- Excel (.xlsx) Data Loading: The equipment data is loaded from a Excel (.xlsx) file and parsed using Papaparse.
- User Selection: User interactions (e.g., dropdown selections) update the zustand store, which triggers a re-render of the UI and the Fabric.js canvas.
- Drawing Update: The Fabric.tsx component listens for state changes and updates the drawing in real-time.
- PDF Generation: Once the drawing is complete, users can generate a PDF using the configured settings.
For proper and successful loading of the Excel (.xlsx) file, make sure it includes the following header sections in each relevant sheet:
-
Screen MFR sheet:
- Screen MFR
- Make
- Screen Size
- Height
- Width
- Depth
-
Media Player MFR sheet:
- MFG. PART
- Make
- Height
- Width
- Depth
-
Mounts sheet:
- MFG. PART
- Brand
- Maximum Load (lbs)
-
Receptacle Box sheet:
- MFG. PART
The following is an example of the output PDF document generated by the system. This PDF contains all the necessary data processed from the Excel file and is formatted for easy review.
The current system is designed to handle core functionalities effectively. However, several enhancements could be implemented to improve its usability, reliability, and user experience. Below are some suggested features:
-
Handle Errors Gracefully
- Why? Error handling ensures the system can identify and respond to unexpected issues (e.g., invalid Excel formats, missing data, or failed file uploads) without crashing. This reduces frustration and improves overall reliability.
- How? Implement detailed error messages and validation checks during file upload and data processing. For example, when a user uploads an Excel file missing a required header, the system can display a clear message, such as "Missing Header: Screen MFR on Screen MFR sheet." This can be complemented with a guided troubleshooting wizard.
-
Add Event Notifications for Better UI/UX
- Why? Although I have included few notifications to track few actions, but adding more will keep users informed about the status of their actions (e.g., file upload progress, data processing success, or errors encountered). This improves the user experience by providing real-time feedback.
- How? Introduce a notification system (e.g., toast messages, progress bars, or pop-ups) to update users on actions like "File Uploaded Successfully," "PDF Generation Completed," or "Error Detected in Receptacle Box sheet." These notifications can also include actionable options (e.g., retrying uploads or downloading logs).
-
Add a Log-in Page for the Team
- Why? A log-in page adds an extra layer of security and allows team members to access the system with unique credentials. This also opens up possibilities for personalized dashboards, activity tracking, and user-specific settings.
- How? Implement a user authentication system using modern frameworks (e.g., OAuth or JWT). Provide admin privileges for supervisors to manage team members and control access to features like uploading files or downloading PDFs.
We use Git for version control and encourage everyone to contribute:
- Fork the repository to your own GitHub account.
- Clone the forked repository.
- Create a branch for your feature/bugfix.
- Make your changes and commit them.
- Push your changes and open a Pull Request.
If you have any questions or face issues, feel free to open an issue or ask for help in the repository discussions.
This project is licensed under the MIT License.
This tool was designed with installation teams in mind. It's focused on delivering a real-world solution that helps teams quickly configure and install LED screens.