Our design document can be found Here (https://tigerredraw.azurewebsites.net/).
- Tigar Cyr, '20, Project Lead, Backend Developer
- Daniel Chae '20, Fullstack Developer
- Kesin Ryan Dehejia '20, Frontend Developer
- Chris Chu '19, Frontend Developer
Redraw (https://predraw.herokuapp.com/) is a website built for Princeton undergraduate students and is equipped with an intuitive, fast, and powerful way of planning for Room Draw. The system allows students to find specific dorm rooms that would be the best fit for their campus life the following year.
A highly interactive GUI enhances the experience while providing detailed information about each of the rooms in every dorm building. The data available to the student body from the Housing Department’s website is conveniently formatted and conveyed to the users.
There are two ways of using the application. First, narrow down the rooms by searching on the top search bar. Upon using this search bar, search results will be displayed on the left, below the expandable favorites bar. The second way of navigating is simply clicking. Clicking a building by default leads to the ground floor floor plan. All floor plans are interactive and rooms can be clicked to display information on the bottom right. If the user wishes to add the room to the favorites list, then simply click the heart button. The user can switch to different floors by clicking the floor buttons (if they exist).
Install Python 3.x and pip for Python 3.x. Install pipenv from Brew
brew install pipenvDownload the dependencies from Pipfile
pipenv installFor developing, make sure you have a copy of node_modules. Install npm
npm installRun on the terminal (opens up localhost:3000)
npm startRun on the terminal (this command is for Python 3.x, make sure to run Python 3.x, which is compatible with Django 2.0)
./manage.py runserverOpen up localhost:8000
To get a production build after making changes to the front-end,
npm run buildThis updates the 'build/' directory in the project 'root'.
This project was bootstrapped with Create React App. There is a ReactJS frontend running with a Django backend, deployed through Heroku
The back-end uses the Django framework hosted on Heroku with a Postgres database. This section will help you interact with the database and web serving components of the system.
Redraw uses a Heroku Postgres database, managed through the Django ORM. This section will help you set up the database to run on a local machine and manage it with Django commands.
The database schema is managed and documented through a Lucidchart diagram.
The links between each box in the diagram represent the relationships between the tables. The crow's feet represent "many" and the single line represents "one". For example, the relationship between User id's and Profile user_id's is "one-to-one" while the relationship between Floors and Buildings is "many-to-one".
The regions in blue are automatically generated by Django and shouldn't be messed with. The regions in red exist in the database schema, but are untested, because they are not used in version 1.0.
To edit the database schema access the Lucidchart directly.
See Heroku's page for postgres installation instructions.
Troubleshooting:
Occasionally postgres will have trouble connecting to Django and pgAdmin when it's first installed. If this happens (Django will give you some error about not finding the database server or a port already in use), then try restarting postgres or uninstall/reinstall-ing it.
Important:
Django knows how to log into the database based on settings in settings.py:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'postgres',
'HOST': 'localhost',
'USER': 'postgres',
'PASSWORD': 'Redraw255',
'PORT': '5432',
'CONN_MAX_AGE': 600,
}
}
These are the setting Django uses to run the database while testing locally. On the Heroku Server, it has more secure authentication. We have it set up to log into the account "postgres" on your machine with the password "Redraw255", so when postgres asks you to setup your account (it should during installation) make sure to use these credentials.
The big benefit of this postgres distribution is that it comes with pgAdmin 4, which is super nice for looking at the database directly. It has a lot of features, but we're only using a few, so let's walk through all you need to know to get started:
When you open up pgAdmin, you'll see an expandable dropdown on the left.
Expand out the "Servers" dropdown on the left, and double-click on "PostgreSQL 10" (there should be a red x indicating you're not yet connected). pgAdmin will then prompt you to log in. Type in "Redraw255", and you should be fine. Now you can expand out the tree structure until you can see the tables themselves:
Click on one of the table to select it. Then go to the tools menu and open up the query tool:
Now you can start typing in SQL queries. Just make sure you end them with a semicolon and use the lightining bolt button to execute them.
Django has lots of built in tools and abstractions that make database management fairly simple and intuitive for a python developer. For more info, see the django docs. We keep our models in RedrawApp/models.py.
To set up the database schema, first run
python manage.py makemigrations
This will have django compare your local database to what you describe in models.py and generate a patch or "migration" to update your database's structure. Then run
python manage.py migrate
to apply this migration.
To populate the database, run
python manage.py load_data
This is a custom command written for Redraw that resets and reloads Room, Floor, Builiding, and Draw data. Note: it does not reset Django's auto-increment counters.
Redraw follows standard Django procedure. Requests go through urls.py and either redirect to CAS, send a template back, or trigger an API call from api.py.
The data preprocessing systems are meant to be run only when loading and updating otherwise static data and is thus never meant to be run by a production server. I will repeat, this is not server code, and is meant to be run independently from the server in a different environment. As such it has a different set of dependencies:
- Unix tools
- Python 2.7
- Numpy
- OpenCV
- pytesseract
- PIL
- Tesseract OCR
On Mac or Linux, you already have Unix tools. On Windows, we suggest WSL to get a full Linux distribution.
While the server code is written in Python 3.6, the data pre-processing is written in Python 2.7 for compatibility with external libraries. We recommend having Python 3 as your main Python and using a Python virtual environment (e.g. with virtualenv, conda, or pipenv) to run the Python 2 code.
Numpy is a standard scientific library for python and a dependency for OpenCV. It comes built-in with some python distributions, but if you are using vanilla python, you can install it via pip:
python -m pip install --user numpy
We use OpenCV (3.2.0) for much of the image processing. It can either be built from source for C++ and/or CUDA support or simply installed with pip:
pip install opencv-python==3.2.0
Finally, we use Tesseract OCR for text recognition. The system is tested with Tesseract 3.05, installed with the Windows installer available at Tesseract at UB Mannheim. If you are on a different platform or want to try out a newer version, see the Tesseract Wiki.
To use Tesseract with Python, install the pytesseract binding and its dependency, PIL:
pip install Pillow
pip install pytesseract
Redraw has a pipeline for cleaning and collating "How Rooms Drew" (HRD) data from past years and the current year's available rooms list. This starts from plain text files and uses a mix of Unix tools and Python to merge data from HRD files and the polygons directory into AVAIL18.json.
There is a fair amount of branching and merging going on here, and it gets fairly complex. For cleanliness and ease of use, we have consolidated all the necessary code into a single script called preprocess.sh, so to update data to be loaded into the database, simply run
bash preprocess.sh
from within the data directory. See preprocess.sh for more details.
A normal workflow is to add/update data, preprocess all data, and load into a database:
# find some more polygons or years of data
cd Redraw/data
bash preprocess.sh
cd ..
python3 manage.py load_data
The floorplans analysis and image processing scripts, located in the scripts directory, are used to clean, read, and beautify the floorplans. Each of these use glob to support batch jobs, so they accept regular expressions for groups of file names.
To run the floorplans analysis, run
python scripts/findrooms.py <image filename(s)> [options]
The supported options are:
* -p (preprocessed): use a preprocessed image that has already been thresholded, trimmed, and inverted
* -v (verbose): output extra debugging outputs at the cost of speed
* -time: time the program
To preprocess images themselves:
python scripts/prep.py <image filename(s)> [-trim]
The trim option tells the preprocessor to crop the image down to shrinkwrap it around any marks left by the preprocessor.
To add padding back to images and restore them to the standard size for floorplans for reading (10200X6600) run:
python scripts/resize.py <image filename(s)>
Finally, to color images, run:
python scripts/color.py <image filename(s)>
To make any changes to what the front-end looks like, simply change the src/App.js file. To make any style changes, apply changes to src/styling/App.css. The App.js file is a single-page application that handles all the rendering of the React components. It has been written and maintained in a single page in order to have all components under one location.
In order to make the front-end work, fontawesome, react-vis, react-spinners, image mapper, material_ui, react_icons, react-final-form, and react-center packages were used. A special acknowledgement for open source! :)
Maintenance of the site will be handled by the creators until graduation. Upon our graduation, then we anticipate passing the repository to a student interested in maintaining the site. Another possible route could be to pass this project on as a TigerApps app, which was the original intent of the creators of the repository.