2D & 3D Floor plan generator. The end goal is to take user constraints as input, and produce a 2D floorplan as output with options to tweak. 3D visualization will also be provided. The frontend is being developed in React, and the backend is in Django, which will be carrying our AI Model.
FrontEnd and BackEnd of the project are both dockerized into 2 different images.Both of them are uploaded on a public repository on Dockerhub.
Pull the docker images using the following commands:
docker pull muddassirlateef/smarchitect_01:frontend
docker pull muddassirlateef/smarchitect_01:backend
And run them using :
docker run -d -p 3000:3000 --name Smarchitect_frontend muddassirlateef/smarchitect_01:frontend
docker run -d -p 8000:8000 --name Smarchitect_backend muddassirlateef/smarchitect_01:backend
Pull the code from Github, open it in the IDE of your choice, navigate to the base folder "Smarchitect"
To run the frontend, you must have NodeJS Installed and up to date Once the Repository has been pulled, Run the following commands:
cd frontend
npm install
npm start
To run the Django backend, all the necessary library code lines are included in the repo, as well as the database credentials. However, following libraries need to be installed in order to run the backend server. You must have Python version 3.9.x in order to avoid issues with the backend.To install and run the backend , use the following commands:
cd backend
pip install django
pip install dnspython
pip install djongo
pip install pymongo==3.12.2
pip install djangorestframework
pip install django-cors-headers
pip install certifi
python manage.py makimigrations api
python manage.py migrate api
python manage.py runserver
Frontend: ReactJS
Backend: Django
Database: MongoDB
3DConversion: WebGL (Made through Unity)
Along with that we used KonvaJS library for the drawing canvas and used reactwebgl for loading the webgl package for 3d Conversion.
By default we have included a demo mongodb cluster for testing this application. You can login using the following credentials
Admin:123456
This module allows the user to get an AI generated floor plan provided land constraints and room connections.
For this simple click on the 'New Map' Button on the top bar and then enter the land constraints in the given input form at the left of the page.
Constraints Info:
- Plot X Dimension : Width of the land in inches
- Plot Y Dimension : Length of the land in inches
- [room type] Count: No of rooms of that specific type needed in the house.
- Convered Area: Percentage of area that is covered in the house.
After filling this from click on 'Draw Nodes' to generate room nodes.
This step allows you to specify which rooms should be connected in the generated map.Hence allowing more degree of control over the generated map. For this simply single click on both nodes that you want to join. You can also drag the nodes for better visualization. You must make a fully connected graph. After you are done with the connections click on 'Generate Map'
This steps allows you to have a greate degree of control over the proportions and percentage area of each type of rooms.There are some default values which were carefully selected after consulting Architects. But for better control you are allowed to change these if you like.
Parameter Info:
- roomProportion: It allows you to set if the room should be more rectangular or more square like. Values near 1 try to make it as square like as possible.
- roomPercentageArea: It allows you to set the percentage area, which the room should cover on the whole floor plan.
After creating the plans using AI you are redirected to the editor with the generated floor Plans.Here at the tops you can select from 5 different types of floor plans. There are also a bunch of utilities and tools which are explained in detail below.
Note: You can choose to skip the whole AI floor plan generation process to manually draw your own maps by simply using the provided tools. or you can create plan using AI and still modify them in the editor.
Zoom Tool This tools alows you to visualize the floor plan at a certain zoom. Even in zoomed in mode you can see other parts of floor plan by simply dragging the surface of canvas.
Asset Tool These sets of tools allow you to add different floor plan objects.
It includes :
Door Tool
Wall Tool
Window Tool
Stairs Tool
Transform Each asset has a transform which allows the object to be rotated or scaled.
Guiding Lines This utiltiy draws guiding lines along the selected and affected objects to make object placement easier.
Automatic Object Snapping This utility snaps two objects together when they are sufficiently close .
Automatic Join Detection This utility allows you to detect join between two objects. Join are fundamental for floor plan generation as they are used for detecting rooms, storing and retrieving floorplans. They are also used for 3D visualization of floor plan.
Automatic Angle Snapping This utiltiy allows the object to snap to a specific subsets of angles to make rotation easier.
Attribute Window This utiltiy allows you to view properties of the selected object. It includes x and y coordinates of the object,its Length(Height), Thickness(Width) and angle.
The above tools and utilites together allow to modify the map seamlessly.
To visualize the floor plan in unity , just click on the "Visualize in 3D" button.
You can then rotate the floor plan by dragging mouse on the unity window. Clicking otuside the window closes the 3D visualization.
This gif is smaller in dimensions due to size limitations.
You can name the floor plan using the Save floor Plan section and then save it by clicking on 'Save' button.
You can then also retrieve the saved floor plans by first selecting the "My maps" option. Then viewing these floor plans by clicking on the view button of required floor plan.
