Skip to content

Commit

Permalink
Merge pull request #62 from Vacansee/floorplans
Browse files Browse the repository at this point in the history 
Floorplans Updates
  • Loading branch information
@paulbruzzi
paulbruzzi authored Apr 18, 2024
2 parents 114fd34 + 0a0f7b0 commit 2fe84c2
Show file tree
Hide file tree
Showing 86 changed files with 3,643 additions and 1,564 deletions.
1,348 changes: 674 additions & 674 deletions LICENSE
View file

Large diffs are not rendered by default.

110 changes: 55 additions & 55 deletions docs/create-advanced-floor-plans.md
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
# Creating Floor Plans
We will be turning the floor plans into Scalable Vector Graphics (SVG) to allow for user interaction, css styling, and scalability. Before we create a floor plan, let us download one of the following programs:

**Free**
- [GIMP](https://www.gimp.org/)
- [Inkscape](https://inkscape.org/)

**Purchase**
- [Affinity Designer](https://affinity.serif.com/en-us/designer/)
- [Adobe Illustrator](https://helpx.adobe.com/illustrator/get-started.html)

For this tutorial, we will use Affinity Designer, but similar vector capabilities are provided in all programs listed.

## 1. Obtain the floor plan
After choosing a building to work on, let us select a floor plan from these [QuACS PDFs](https://github.com/quacs/quacs-data/tree/5330bf53a2a553acfaee0ed7d03067b707464ce4/floor_plans). When choosing a floor, start with one that has the largest perimeter. By starting with the largest one, the following floors you create will be easier to align. It is best practice that one person finishes a whole building for design consistency.

## 2. Open the image
Launch your program, click on **'File'** from the menu, then select **'Open'**. Navigate to the location where your floor plan pdf is saved, select it, and click Open.

## 3. Resize the canvas
It is good practice to keep the canvas small for easier use. The largest dimension of height or width can be between 100 to 500 pixels. To change the canvas size, click on **'File'** from the topbar, then select **'Document Setup'**. In my example, I will choose 300 x 200.

![](.embed/create-advanced-floor-plans-1.png)

As seen, my image is too large for the dimension. First we need to select all our floor plan elements. I can either click on the screen and drag a select square over the entire picture, or click on the layers menu, and press `CTRL`+`A`. Once selected, I `SHIFT`+click a corner maintain the aspect ratio and shrink the image down.

![](.embed/create-advanced-floor-plans-2.png)

Center the image for sake of neatness.

## 4. Trace the outer walls
Let us create a semi-transparent rectangle in blue so we can find where we are working.

![](.embed/create-advanced-floor-plans-3.png)

If you double-click on the original floor plan, your program will detect that it should be considered for alignment. Let us go back and select our blue rectange again to align it to the floor plan.

![](.embed/create-advanced-floor-plans-4.png)

As seen in the photo, there is a red and green alignment bar to suggest it snapped. Now resize the rest of the rectangle to be aligned.

![](.embed/create-advanced-floor-plans-5.png)

Let us copy `CTRL`+`C` and paste `CTRL`+`V` our rectangle and align it the next wall.

![](.embed/create-advanced-floor-plans-6.png)

As you can see, the wall we created is slightly too large. That is intential, as it does not change our ability in interpretting the map, and makes viewing the map easier on the eyes. When we have many thicknesses, it distracts the user from their primary objective of finding paths/rooms. Let us use this same thickness for the entire border.

![](.embed/create-advanced-floor-plans-7.png)

Now we have completed lining the walls. Note that we did not cover door entrances. Let us group all our work by `SHIFT`+clicking the bottom curve in our layers list and the top curve of our layers list. Right click your selection and press group. Feel free to name your grouping.

## 5. Creating inner walls
To be completed
# Creating Floor Plans
We will be turning the floor plans into Scalable Vector Graphics (SVG) to allow for user interaction, css styling, and scalability. Before we create a floor plan, let us download one of the following programs:

**Free**
- [GIMP](https://www.gimp.org/)
- [Inkscape](https://inkscape.org/)

**Purchase**
- [Affinity Designer](https://affinity.serif.com/en-us/designer/)
- [Adobe Illustrator](https://helpx.adobe.com/illustrator/get-started.html)

For this tutorial, we will use Affinity Designer, but similar vector capabilities are provided in all programs listed.

## 1. Obtain the floor plan
After choosing a building to work on, let us select a floor plan from these [QuACS PDFs](https://github.com/quacs/quacs-data/tree/5330bf53a2a553acfaee0ed7d03067b707464ce4/floor_plans). When choosing a floor, start with one that has the largest perimeter. By starting with the largest one, the following floors you create will be easier to align. It is best practice that one person finishes a whole building for design consistency.

## 2. Open the image
Launch your program, click on **'File'** from the menu, then select **'Open'**. Navigate to the location where your floor plan pdf is saved, select it, and click Open.

## 3. Resize the canvas
It is good practice to keep the canvas small for easier use. The largest dimension of height or width can be between 100 to 500 pixels. To change the canvas size, click on **'File'** from the topbar, then select **'Document Setup'**. In my example, I will choose 300 x 200.

![](.embed/create-advanced-floor-plans-1.png)

As seen, my image is too large for the dimension. First we need to select all our floor plan elements. I can either click on the screen and drag a select square over the entire picture, or click on the layers menu, and press `CTRL`+`A`. Once selected, I `SHIFT`+click a corner maintain the aspect ratio and shrink the image down.

![](.embed/create-advanced-floor-plans-2.png)

Center the image for sake of neatness.

## 4. Trace the outer walls
Let us create a semi-transparent rectangle in blue so we can find where we are working.

![](.embed/create-advanced-floor-plans-3.png)

If you double-click on the original floor plan, your program will detect that it should be considered for alignment. Let us go back and select our blue rectange again to align it to the floor plan.

![](.embed/create-advanced-floor-plans-4.png)

As seen in the photo, there is a red and green alignment bar to suggest it snapped. Now resize the rest of the rectangle to be aligned.

![](.embed/create-advanced-floor-plans-5.png)

Let us copy `CTRL`+`C` and paste `CTRL`+`V` our rectangle and align it the next wall.

![](.embed/create-advanced-floor-plans-6.png)

As you can see, the wall we created is slightly too large. That is intential, as it does not change our ability in interpretting the map, and makes viewing the map easier on the eyes. When we have many thicknesses, it distracts the user from their primary objective of finding paths/rooms. Let us use this same thickness for the entire border.

![](.embed/create-advanced-floor-plans-7.png)

Now we have completed lining the walls. Note that we did not cover door entrances. Let us group all our work by `SHIFT`+clicking the bottom curve in our layers list and the top curve of our layers list. Right click your selection and press group. Feel free to name your grouping.

## 5. Creating inner walls
To be completed
31 changes: 7 additions & 24 deletions docs/create-basic-floor-plans.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,15 @@ Now with the correct pdf open, we want to work towards an end goal of a floorpla

In order to scale the pdf or end svg, you will need to:
1. Go to `File` -> `Document Properties`. Press the chain looking icon next to the width/height to lock the scale to evenly enlargen it. Then increase the width dimension to the appropriate size to scale the document (note: this scales the document and not the contents of the document --> onto step 2)

![](.embed/create-basic-floor-plans-1.png)

2. Press `Ctrl-A` to select all svg elements, then with the cursor tool, hold `Ctrl`, grab the bottom right arrow, and scale evenly to the bottom right of the document size. You may want to play around with positioning of your contents in the document frame, as it seems a bit of empty space is good for displaying the svg in the app (otherwise a part of the svg may be cut off --> you will need to test out your svg in the app after completion and it may need some tweaking). A DCC floorplan silhouette example is shown below to help gauge spacing.

![](.embed/create-basic-floor-plans-2.png)

Here's an example of the DCC floorplan silhouette with a white background for the document (note: the floor and rooms are both black so they blend in with each other; the colors in the previous photo do not match what the colors mean in this photo, and the outer floor that is in white and the background that is transparent in the previous photo are black and white respectively in this image):

![](.embed/create-basic-floor-plans-3.png)

## 3. Trace inner rooms and outer floor
Expand All @@ -52,34 +56,13 @@ Some rooms don't have numbers but are essential in the foundation of the buildin
Tracing the outer floor is the VERY LAST step in the process of creating a floorplan after tracing all the inner rooms. To create the outer floor, you want to follow the path of the outermost inner rooms (tracing along their outer edge) while keeping in mind the shape of the building. Make sure to rename the `id` tag to `floor` and try to capture the parts of the floor that have valid rooms in them (eg. some parts of a floor can be left out if they dont connect rooms).

Here's the first pittsburgh floor as an example next to the pdf floorplan from quacs. Notice how the outer floor encompasses all of the inner rooms but does not add extra gaps or walkways outside of the building, except for the defining arch of the building at the top for the lounge. The key to capturing the best outer floor and floorplan as a whole is to capture the essence of the building while making it neat and simple (definitely easier said then done, but look at other svgs along with their actual quacs floorplan for inspiration!).

![](.embed/create-basic-floor-plans-8.png)
![](.embed/create-basic-floor-plans-9.png)

Lastly, make sure to open the XML Editor again and delete every attribute from each of the paths except for `id` and `d` (this gets rid of the coloring and extra attributes).

After you have created the rooms you will see that some of the shapes are wacky looking and the spacing might be bigger than it should be. So change the shapes slightly to make it look more nice/clean when it gets put on the website as smoothness looks a lot better than weird accuracy.
![](.embed/create-basic-floor-plans-14.png)
![](.embed/create-basic-floor-plans-15.png)


## 4. Resize the SVG

You would think that you are done at this point but not yet, this floorplan will currently work, however it is a lot smaller than other floorplans on the website and that makes the line width on the edges look a lot bigger than they should be. To fix this we need to increase the size of all of the rooms that we just created, here is how we do this.

First we want to center the drawing, to do this go into document properties.
![](.embed/create-basic-floor-plans-16.png)

Then resize to fit the current size of your svg. This will adjust the entire canvas to just hold your objects.
![](.embed/create-basic-floor-plans-17.png)

Next we want to increase the size, the best way to do this is to click on the lock width/height button next to the width and height and then add 1000~ units to the width to to make it bigger, press enter and then it should scale both the width and height by that amount.
![](.embed/create-basic-floor-plans-18.png)

Then select all your objects and while pressing control (to keep width/height ratio) increase the size to try to match the new size, then resize again to fit it correctly and then you are done with this step.
![](.embed/create-basic-floor-plans-19.png)


## 5. Export SVG and Clean it up
## 4. Export SVG and Clean it up
Once finished with the floor plan, make sure to delete the first layer with the pdf to leave the paths we created. Right click on the layer with our paths, click `Convert to group`, then right click again and click `Ungroup` to get rid of the outer shell and leave just our paths.

Then, press `Shift + Ctrl + E` or `File -> Export`, make sure it is exported as an SVG, and rename it as `abbrev#` where the abbreviation is established in `data\convert.py`. Before clicking `Export`, make sure your size/scale is correct (see `Step 2: Open the image` for more info).
Expand All @@ -101,4 +84,4 @@ Also, SVGs are layered, so make sure your path with the `floor` id is the top on
![](.embed/create-basic-floor-plans-13.png)

## 5. Check!
Perhaps the most important step of the process is to check your work. If you put the svg in the correct folder (`src\assets\floors`) then you should be able to see your floor when you run the app, click on your building, and navigate to the correct floor. If your svg looks funky or if the placement on the screen is off, make the appropriate changes before you ask others to review it! One common issue is the placement of the svg when you load it in the app (the floor svg could look cut off or way too big when you first open the building). This most likely has to do with the background document frame you are working with (take a look at the scaling notes in `Step 2: Open the image` and don't be afraid to leave some space outside of the floorplan itself to aid in viewing in the app).
Perhaps the most important step of the process is to check your work. If you put the svg in the correct folder (`src\assets\floors`) then you should be able to see your floor when you run the app, click on your building, and navigate to the correct floor. If your svg looks funky or if the placement on the screen is off, make the appropriate changes before you ask others to review it! One common issue is the placement of the svg when you load it in the app (the floor svg could look cut off or way too big when you first open the building). This most likely has to do with the background document frame you are working with (take a look at the scaling notes in `Step 2: Open the image` and don't be afraid to leave some space outside of the floorplan itself to aid in viewing in the app).
66 changes: 33 additions & 33 deletions docs/dev-setup.md
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@

## Developer setup (Linux)
1. Install pnpm with `curl -fsSL https://get.pnpm.io/install.sh | sh -`. If necessary, install using [alternative methods](https://pnpm.io/installation#on-posix-systems).
2. Choose an appropriate place to clone the project and `cd` into it. For example, `mkdir ~/proj && cd ~/proj`
3. `git clone https://github.com/Vacansee/app` and `cd` into `app`
4. `pnpm install` to install dependencies

5. Done!
To view your changes, run `pnpm dev`. A local server will spin up using Vite at `localhost:<port>/app/`. The URL will be printed to the console.

## Debugging
It can be helpful to change the current time or date in order to evaluate edge cases or work with more active occasions.
To fix time at a particular date and hour, substitute each of the 3 lines which update time in `main.js` with the commented one below them.

If you want to watch time advance, use the `add()` or `subtract()` Moment.js methods on the lines in `main.js` which update time like so:

```
Moment.tz('America/New_York').subtract(5, 'hours').format('e:HHmm')
```

Also, any errors and console logs can be viewed in the `F12` Devtools menu in your browser preview.

## Codebase introduction
For the Fall '23 RCOS class, the new team that led development on the project met with the original developer to gain an overview of the codebase. That video can be found [here](https://drive.google.com/file/d/1N-sEflGNpD0a7PdGBSsbbGNePsH7WFmB/view?usp=sharing).

## Getting started on an issue
Once the project is cloned and you have found an issue that you want to work on ([for the frontend app](https://github.com/Vacansee/app/issues) or [for the backend data processing](https://github.com/Vacansee/data/issues)), you will then create a branch off of the dev branch (in app) or the main branch (in data) by either:

1. adding a branch on github, running `git fetch` and then running `git checkout -b branch_name` in your terminal
2. or by running the command `git checkout -b branch_name` while on the correct branch and then running `git push --set-upstream origin branch_name` in your terminal when you are ready to push your changes

The `branch_name` should be of the form `issue#-short-description` (e.g. 22-make-map-zoomable).


## Developer setup (Linux)
1. Install pnpm with `curl -fsSL https://get.pnpm.io/install.sh | sh -`. If necessary, install using [alternative methods](https://pnpm.io/installation#on-posix-systems).
2. Choose an appropriate place to clone the project and `cd` into it. For example, `mkdir ~/proj && cd ~/proj`
3. `git clone https://github.com/Vacansee/app` and `cd` into `app`
4. `pnpm install` to install dependencies

5. Done!
To view your changes, run `pnpm dev`. A local server will spin up using Vite at `localhost:<port>/app/`. The URL will be printed to the console.

## Debugging
It can be helpful to change the current time or date in order to evaluate edge cases or work with more active occasions.
To fix time at a particular date and hour, substitute each of the 3 lines which update time in `main.js` with the commented one below them.

If you want to watch time advance, use the `add()` or `subtract()` Moment.js methods on the lines in `main.js` which update time like so:

```
Moment.tz('America/New_York').subtract(5, 'hours').format('e:HHmm')
```

Also, any errors and console logs can be viewed in the `F12` Devtools menu in your browser preview.

## Codebase introduction
For the Fall '23 RCOS class, the new team that led development on the project met with the original developer to gain an overview of the codebase. That video can be found [here](https://drive.google.com/file/d/1N-sEflGNpD0a7PdGBSsbbGNePsH7WFmB/view?usp=sharing).

## Getting started on an issue
Once the project is cloned and you have found an issue that you want to work on ([for the frontend app](https://github.com/Vacansee/app/issues) or [for the backend data processing](https://github.com/Vacansee/data/issues)), you will then create a branch off of the dev branch (in app) or the main branch (in data) by either:

1. adding a branch on github, running `git fetch` and then running `git checkout -b branch_name` in your terminal
2. or by running the command `git checkout -b branch_name` while on the correct branch and then running `git push --set-upstream origin branch_name` in your terminal when you are ready to push your changes

The `branch_name` should be of the form `issue#-short-description` (e.g. 22-make-map-zoomable).

Once finished with your changes, you will add your files (`git add whatever-file`, or simply `git add .` if you want to commit all changed files) that you changed and commit your changes (`git commit -m "commit message"`) to your new branch. A good practice to adopt is to continuously run `git status` to see what branch you're on, what files you have staged to commit, and what files are untracked.
Loading

0 comments on commit 2fe84c2

Please sign in to comment.