Room Wall Painting Application

WallPainting.md

Room Wall Painting Application

Objective:

Develop a web-based application using JavaScript technologies that allows users to virtually paint walls of an uploaded room image using polygons. The application should provide an eraser feature to remove painted portions, ensuring precision in areas like windows.

Features:

1. Image Upload:

   • Provide an option for users to upload an image of a room.
   • The uploaded image should be displayed on the application interface for further processing.

2. Polygon Painting Tool:

   • Allow users to draw polygons on the uploaded image to represent areas they wish to paint.
   • Once a polygon is drawn, provide a color picker tool for users to select the desired paint color.
   • Apply the selected color to the drawn polygon, effectively showing how the wall would look with that color.

3. Eraser Polygon Feature:

   • Allow users to draw eraser polygons over areas where they want to remove the paint.
   • This feature is especially useful for areas like windows, where the paint should not be applied.
   • The eraser polygon should remove the paint only within its boundaries, allowing for precise corrections.

4. Interactive UI:

   • The user interface should be intuitive and user-friendly.
   • Zoom in and out features for better precision while drawing polygons.
   • Undo and redo options for user actions.

Technologies to Consider:

• Frontend: React or any other JS Technologies.
• Libraries/Frameworks:
  • Fabric.js for 2D drawing on canvas.
  • Color Picker for color selection.

Steps to Implement:

1. Set up a basic web application structure with HTML, CSS, and JS.
2. Implement the image upload functionality and display the uploaded image on the canvas.
3. Implement the polygon drawing tool and color picker for painting.
4. Develop the eraser polygon feature to remove painted areas.

Deliverables:

• Source code of the application.
• A live demo of the application for testing purposes.