Merge: doc changes

Left out of manual merge
Credit @mattsweet417

docs/create-floor-plans.md → docs/create-advanced-floor-plans.md

@@ -20,34 +20,34 @@ Launch your program, click on **'File'** from the menu, then select **'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.
 
-![image](https://github.com/Vacansee/app/assets/50114728/95997116-8526-4c12-83fe-aaefd0ccbd82)
+![](.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. 
 
-![image](https://github.com/Vacansee/app/assets/50114728/7a9a5cd1-9126-450e-9a20-b4d0bb3bf250)
+![](.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.
 
-![image](https://github.com/Vacansee/app/assets/50114728/a6080a9c-b788-4a93-ba3d-fdab25db2f95)
+![](.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.
 
-![image](https://github.com/Vacansee/app/assets/50114728/eb697570-66a8-4913-8d7c-41977a167863)
+![](.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. 
 
-![image](https://github.com/Vacansee/app/assets/50114728/c18c1106-f034-4d9b-9efe-e1ba21df1da5)
+![](.embed/create-advanced-floor-plans-5.png)
 
 Let us copy `CTRL`+`C` and paste `CTRL`+`V` our rectangle and align it the next wall.
 
-![image](https://github.com/Vacansee/app/assets/50114728/473e5bc2-541d-4ae8-9bbe-50e91f130db0)
+![](.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.
 
-![image](https://github.com/Vacansee/app/assets/50114728/908c1d76-9f71-42ee-8271-241565eb0110)
+![](.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.
 

docs/create-basic-floor-plans.md

@@ -0,0 +1,64 @@
+# 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 Inkscape, 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. Trace inner rooms and outer floor
+First, create a new layer to work on so that we are not directly editing the pdf layer (this will help us later when just exporting our traced floor).
+
+![](.embed/create-basic-floor-plans-1.png)
+
+Any room that is labeled with an id we will capture in the floor plan (stay away from capturing staircases). Use the pen tool with the paraxial line segment option selected (this will create 90 degree angles for square rooms; you can also hold `Ctrl` to do achieve this), zoom in on the first corner of a room and carefully select it.
+
+I suggest watching [this video](https://www.youtube.com/watch?v=ijZlMHJJ0F0&ab_channel=LogosByNick) if you have a unique wall that you cannot trace with just right angles (curved walls, etc).
+
+![](.embed/create-basic-floor-plans-2.png)
+
+Do the same with the second corner, and from there Inkscape should only make perpendicular lines to the one you created, making it easy to finish up the room by clicking on the other corners and then finally connecting it to the first one.
+
+![](.embed/create-basic-floor-plans-3.png)
+
+If your room is now filled in black from the path, you can easily change the color to make it stand out and change the opacity on the bottom left of the screen. Then, press `Shift + Ctrl + X` (or go to `Edit -> XML Editor`) and rename the `id` tag to the room number preceded by a `_`. FYI, just renaming the label (by double clicking the name and renaming it to `_room#` for example) will add a tag called `inkscape_label` and not actually change the `id` tag that we need.
+
+Some rooms don't have numbers but are essential in the foundation of the building or the shape of the floor. These rooms can be given the `id=unexcavated#` where `#` is replaced with an integer starting at 1 and increasing with every extra room of this kind (see `Sage1.svg` for example).
+
+![](.embed/create-basic-floor-plans-4.png)
+
+Tracing the outer floor is the same process as the inner floors. Make sure to trace the outer most wall and rename the `id` tag to `floor`. Also, 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).
+
+![](.embed/create-basic-floor-plans-5.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).
+
+## 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`.
+
+![](.embed/create-basic-floor-plans-6.png)
+
+Once exported, open this [SVG minimizer](https://svgomg.net/) to condense the svg and remove all of the redundant elements put in by Inkscape.
+
+Make sure to set the precision slider to 0, uncheck `Clean up ids` and to check `Prefer viewbox to width/height` and `Prettify markup`. The rest shouldn't really matter for our case.
+
+![](.embed/create-basic-floor-plans-7.png)
+
+Finally, download the resulting SVG, and move it to the `Vacansee\app\src\assets\floors` folder. We are not done cleaning it up yet, however. Now, open the svg in VS Code (or any code editor) and delete any parts of the svg that are not the paths or the svg tag. If the resulting svg does not look the same as before, you may have deleted an essential component (like a group tag if you didn't properly ungroup the paths before you exported). Here's the before and after that should look similar to what you do:
+
+![](.embed/create-basic-floor-plans-8.png)
+
+![](.embed/create-basic-floor-plans-9.png)

docs/dev-setup.md

@@ -20,3 +20,15 @@ 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.