Merge branch 'dev' into location-finder (finally)

docs/create-basic-floor-plans.md

@@ -17,48 +17,88 @@ After choosing a building to work on, let us select a floor plan from these [QuA
 ## 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.
 
+Now with the correct pdf open, we want to work towards an end goal of a floorplan svg with an approximate width of 3200px (taken from DCC floorplan to keep sizing and wall strokes in the app similar so that the floors don't look too different). To achieve this we will need to do some scaling, but this can be done either at the end of the floorplan or at the beginning. You have the option of scaling the image down first so that it is easier to work with and then scale it up, or you have the option of keeping the image the same size and scaling it up, or you can scale up immediately and then not have to worry about it later. I suggest trying out different methods for different floorplans and see what works best for you.
+
+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
 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)
+![](.embed/create-basic-floor-plans-4.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.
+Any room that is labeled with an id we will capture in the floor plan (stay away from capturing staircases). Use the pen tool (hold `Ctrl` to create 90 degree angles), 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)
+![](.embed/create-basic-floor-plans-5.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)
+![](.embed/create-basic-floor-plans-6.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.
+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 `_` (or if you are adding a room that needs a name instead of a room #, like the health center, write the name with `-`'s instead of spaces preceded by a `_`, like `_Health-Center`). FYI, just renaming the label (by double clicking the name and renaming it to `_308` 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).
+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). Also, some floors in non-academic buildings that are unused for the average student (like the first floor of academy hall) can be simplified (especially if there are a lot of random office buildings). You can do this by utilizing the unexcavated ids to gray out that area, but make sure to leave empty space for hallways.
 
-![](.embed/create-basic-floor-plans-4.png)
+![](.embed/create-basic-floor-plans-7.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).
+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).
 
-![](.embed/create-basic-floor-plans-5.png)
+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).
 
-## 4. Export SVG and Clean it up
+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
 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`.
+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).
 
-![](.embed/create-basic-floor-plans-6.png)
+![](.embed/create-basic-floor-plans-10.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)
+![](.embed/create-basic-floor-plans-11.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:
+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). 
 
-![](.embed/create-basic-floor-plans-8.png)
+Also, SVGs are layered, so make sure your path with the `floor` id is the top one. Here's the before and after (note: the after did not reorder the `floor` id path, but do in yours!) that should look similar to what you do:
+
+![](.embed/create-basic-floor-plans-12.png)
+
+![](.embed/create-basic-floor-plans-13.png)
 
-![](.embed/create-basic-floor-plans-9.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). 

src/components/home/MapItem.vue

@@ -464,7 +464,7 @@ export default {
   left: 50%;
   top: 50%;
   will-change: transform;
-  transform: translate(-50%, -50%) scale(1) scaleX(1) scaleY(1) rotate(0) skew(0deg, 0deg);
+  transform: translate(-1.5vw, -4.95vh) scale(1) scaleX(1) scaleY(1) rotate(0) skew(0deg, 0deg);
   justify-content: center;
   align-items: center;
   transition: 800ms ease all;

src/components/home/PopUpItem.vue

@@ -18,7 +18,9 @@ import Tag from 'primevue/tag';
                     <!-- <img :src="`../../assets/photos/${global.bldg}.jpg`" id="photo"> -->
                     <span>{{ getBldg().meta.name }}</span>
                 </div>
-                <p id="busy"><b>{{ interpretHeat() }}</b> ({{ getBldg().meta.heat }}%)</p>
+                <p id="heat" v-if="interpretHeat()"><b style="color:var(--heatColor);">{{ interpretHeat() }}</b> (~{{ Math.trunc(getBldg().meta.heat.toFixed(2)*100) }}%)</p>
+                <p id="heat" v-else><b>N/A</b></p>
+                <p id="flow" v-if="interpretFlow()">+ {{ interpretFlow() }} (~{{ Math.trunc(getBldg().meta.flow.toFixed(2)*100) }}%)&emsp;</p>
                 <p id="time" ref="mySpan">{{ getRealTime(global.time) }}</p>
                 <span v-if="getHist()"> 
                     <img src="../../assets/icons/info.svg" height="20" width="20" />

src/views/Home.vue

@@ -34,6 +34,18 @@ export default {
       switch: 0,
       bldgSVG: "",
       label: '',
+      mouseX: 0,
+      mouseY: 0,
+      initMouseX: 0,
+      initMouseY: 0,
+      clicked: false,
+      buildingSelected: false,
+      totalDisplacementX: 0,
+      curMoveX: 0,
+      totalDisplacementY: 0,
+      curMoveY: 0,
+      maxX: 750,
+      maxY: 300,
     }
   },
   watch: {
@@ -64,9 +76,19 @@ export default {
   mounted() {
     // addEventListeners allow the file to call a function when 
     // an action occurs
+    window.addEventListener("mousemove", (window) => {
+      this.mouseX = window.clientX;
+      this.mouseY = window.clientY;
+      this.moveScreen()
+    })
     mask.addEventListener("click", this.buildingDeselect)
+    window.addEventListener("mouseup", () => {this.clicked = false, this.totalDisplacementX += this.curMoveX,  this.totalDisplacementY += this.curMoveY, this.moveInBounds()})
+    window.addEventListener("mousedown", this.getInitMouse)
     window.addEventListener("mousemove", this.nameTagMove)
-
+    Array.from(document.getElementsByClassName("nav-btn")).forEach((btn) => {
+      btn.addEventListener("mouseover", () => { this.nameTagAppear(btn) })
+      btn.addEventListener("mouseleave", () => {this.nameTagDisappear})
+    })
     for (const b of buildings.children) {
       b.addEventListener("mouseover", () => { this.nameTagAppear(b) })
       b.addEventListener("mouseleave", this.nameTagDisappear)
@@ -104,6 +126,52 @@ export default {
       //   if (!(o.id in this.global.data)) console.log(o.id)
       // }
     },
+    moveInBounds() {
+      if (!this.buildingSelected) {
+        if (this.totalDisplacementX > this.maxX) {
+          this.totalDisplacementX = this.maxX
+        } else if (this.totalDisplacementX < -this.maxX) {
+          this.totalDisplacementX = -this.maxX
+        }
+        if (this.totalDisplacementY > this.maxY) {
+          this.totalDisplacementY = this.maxY
+        } else if (this.totalDisplacementY < -this.maxY) {
+          this.totalDisplacementY = -this.maxY
+        }
+        var xPos = -1.5*window.innerWidth/100 - this.totalDisplacementX
+        var yPos = -4.95*window.innerHeight/100 - this.totalDisplacementY
+        mapBox.style.transition = "800ms ease all"
+        mapBox.style.transform = `scale(1) translate(${xPos}px, ${yPos}px)`
+    }
+    },
+    moveScreen(c) {
+      if (!this.buildingSelected && this.clicked) {
+        this.curMoveX =  this.initMouseX - this.mouseX 
+        this.curMoveY = this.initMouseY - this.mouseY
+        var xPos = -1.5*window.innerWidth/100 - (this.totalDisplacementX + this.curMoveX)
+        var yPos = -4.95*window.innerHeight/100 - (this.totalDisplacementY + this.curMoveY)
+        var pushbackScale = 10
+        if (this.curMoveX + this.totalDisplacementX > this.maxX) {
+          xPos = -1.5*window.innerWidth/100 - (this.maxX + pushbackScale*Math.sqrt(this.totalDisplacementX + this.curMoveX-this.maxX))
+        } else if (this.curMoveX + this.totalDisplacementX < -this.maxX) {
+          xPos = -1.5*window.innerWidth/100 + (this.maxX + pushbackScale*Math.sqrt(-this.totalDisplacementX - this.curMoveX-this.maxX))
+        }
+        if (this.curMoveY + this.totalDisplacementY > this.maxY) {
+          var yPos = -4.95*window.innerHeight/100 - (this.maxY + pushbackScale*Math.sqrt(this.totalDisplacementY + this.curMoveY-this.maxY))
+        } else if (this.curMoveY + this.totalDisplacementY < -this.maxY) {
+          var yPos = -4.95*window.innerHeight/100 + (this.maxY + pushbackScale*Math.sqrt(-this.totalDisplacementY - this.curMoveY-this.maxY))
+        }
+        mapBox.style.transition = "0ms ease all"
+        mapBox.style.transform = `scale(1) translate(${xPos}px, ${yPos}px)`
+      }
+    },
+    getInitMouse() {
+      this.initMouseX = this.mouseX
+      this.initMouseY = this.mouseY
+      this.curMoveX = 0
+      this.curMoveY = 0
+      this.clicked = true
+    },
     // Make the name tag pop up
     nameTagAppear(b) {
       // Only show nametag on unselected buildings
@@ -144,18 +212,25 @@ export default {
     },
     // On selection of a building (when clicked on)
     buildingSelect(b) {
-      if (!this.global.bldg) {
+      if (this.global.data && !this.bldgSVG) {
+        this.buildingSelected = true
         // this.$router.push({ name: 'home', params: { bldg } });
         let bBox = b.getBoundingClientRect()
-        let boxCenterX = bBox.x + bBox.width / 2
-        let boxCenterY = bBox.y + bBox.height / 2
+        let boxCenterX = bBox.x + this.totalDisplacementX + bBox.width / 2
+        let boxCenterY = bBox.y + this.totalDisplacementY + bBox.height / 2
 
         this.bldgSVG = b
         this.global.bldg = b.id
         this.ntVisible = 0 // hide nametag when building selected
 
         mask.style.opacity = 0.65
         mask.style.pointerEvents = "inherit"
+        mapBox.style.transition = "800ms ease all"
+        console.log(window.innerWidth / 2 - boxCenterX + this.totalDisplacementX);
+        console.log(window.innerHeight / 2 - boxCenterY - 50);
+        console.log(boxCenterX, boxCenterY);
+        console.log(this.totalDisplacementX, this.totalDisplacementY)
+
         mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2 - boxCenterX}px, ${window.innerHeight / 2 - boxCenterY - 50}px)`
         // Bring the popup to 0,0
         popup.style.transition = "transform .5s"
@@ -166,9 +241,10 @@ export default {
     // On deselection of a building (when clicked off)
     buildingDeselect() {
       try {
+        this.buildingSelected = false
         this.bldgSVG = ""
         this.global.bldg = ""
-        mapBox.style.transform = "scale(1) translate(-50%, -50%)"
+        this.moveInBounds()
         mask.style.pointerEvents = "none"
         mask.style.opacity = 0
         popup.style.transition = "transform .5s"