Create simple debug panel

Nibriboard/ClientFiles/BoardWindow.js

@@ -69,7 +69,11 @@ class BoardWindow extends EventEmitter
 				return canvas.height * 1/this.zoomLevel
 			},	
 			// The zoom level of the viewport. 1 = normal.
-			zoomLevel: 1
+			zoomLevel: 1,
+			
+			toString() {
+				return `${+this.width.toFixed(2)}x${+this.height.toFixed(2)} @ (${+this.x.toFixed(2)}, ${+this.y.toFixed(2)}) @ ${+this.zoomLevel.toFixed(2)}`
+			}
 		};
 		
 		// The current grid size
@@ -82,7 +86,10 @@ class BoardWindow extends EventEmitter
 		this.context = canvas.getContext("2d");
 		
 		// Grab a reference to the sidebar and wrap it in an Interface class instance
-		this.interface = new Interface(document.getElementById("sidebar"));
+		this.interface = new Interface(
+			document.getElementById("sidebar"),
+			document.getElementById("debuginfo")
+		);
 		
 		// Create a map to store information about other clients in
 		this.otherClients = new Map();
@@ -210,7 +217,7 @@ class BoardWindow extends EventEmitter
 	 */
 	update()
 	{
-		
+		this.interface.updateDebugInfo(this);
 	}
 	
 	/**

Nibriboard/ClientFiles/Interface.js

@@ -4,11 +4,12 @@ window.EventEmitter = require("event-emitter-es6");
 
 class Interface extends EventEmitter
 {
-	constructor(inSidebar)
+	constructor(inSidebar, inDebugDisplay)
 	{
 		super();
 		
 		this.sidebar = inSidebar;
+		this.debugDisplay = inDebugDisplay;
 		
 		this.brushIndicator = this.sidebar.querySelector(".brush-indicator");
 		
@@ -190,7 +191,10 @@ class Interface extends EventEmitter
 		this.sidebar.querySelector(".name").innerHTML = newName;
 	}
 	
-	
+	updateDebugInfo(boardWindow)
+	{
+		this.debugDisplay.querySelector("#debug-viewport").value = boardWindow.viewport;
+	}
 }
 
 export default Interface;

Nibriboard/ClientFiles/Nibri.css

@@ -114,6 +114,19 @@ hr
     border: 0.2em dashed hsl(219, 87%, 54%);
 }
 
+
+/**************************************/
+
+#debuginfo
+{
+    position: absolute;
+    bottom: 0; right: 0;
+    padding: 0.5em;
+    
+    z-index: 5000;
+}
+
+
 .fps
 {
     top: 0.2em !important; right: 0.2em !important;

Nibriboard/ClientFiles/index.html

@@ -41,6 +41,10 @@
 				<span class="palette-colour" style="background-color: pink;"></span>
 				<span class="palette-colour" style="background-color: saddlebrown;"></span>
 			</div>
+		</aside>
+		
+		<aside id="debuginfo">
+			<label>Viewport:</label> <output id="debug-viewport">?</output>
 			
 		</aside>