Add query parameters to control canvas size

xiangzez · phemavax · commit 999393d8947a · 2024-07-05T13:57:37.000+05:30
diff --git a/aquarium-vr/aquarium-vr.html b/aquarium-vr/aquarium-vr.html
@@ -119,7 +119,9 @@
 <body>
 <div id="info"><a href="http://threedlibrary.googlecode.com" target="_blank">tdl.js</a> - aquarium</div>
 <div class="fpsContainer">
-  <div class="fps">fps: <span id="fps"></div>
+  <div class="fps">fps: <span id="fps"></span></div>
+  <div class="fps">canvas width: <span id="canvasWidth"></span></div>
+  <div class="fps">canvas height: <span id="canvasHeight"></span></div>
   <div id="topUI">
   <div>Number of Fish</div>
   <div class="clickable" id="setSettingChangeView">Change View</div>
diff --git a/aquarium-vr/aquarium-vr.js b/aquarium-vr/aquarium-vr.js
@@ -849,6 +849,17 @@ function initialize() {
   if (g_query.numFish) {
     g_numFish[0] = parseInt(g_query.numFish);
   }
+  if (g_query.canvasWidth) {
+    g.globals.width = parseInt(g_query.canvasWidth);
+  }
+  if (g_query.canvasHeight) {
+    g.globals.height = parseInt(g_query.canvasHeight);
+  }
+  if (g_query.fitWindow == "true") {
+    g.globals.fitWindow = true;
+  } else if (g_query.fitWindow == "false") {
+    g.globals.fitWindow = false;
+  }
 
   gl.enable(gl.DEPTH_TEST);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
@@ -1115,6 +1126,11 @@ function initialize() {
       tdl.log("new canvas height:", newHeight);
     }
     if (changed) {
+      var widthElem = document.getElementById("canvasWidth");
+      widthElem.innerHTML = canvas.width;
+      var heightElem = document.getElementById("canvasHeight");
+      heightElem.innerHTML = canvas.height;
+
       //tdl.log("drawingBufferDimensions:" + gl.drawingBufferWidth + ", " + gl.drawingBufferHeight);
       gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
     }
@@ -1214,6 +1230,10 @@ function initialize() {
       }
     }
 
+    if (g.globals.fitWindow) {
+      setCanvasSize(canvas, canvas.clientWidth, canvas.clientHeight);
+    }
+
     if (g.net.sync) {
       clock = now * g.globals.speed;
       eyeClock = now * g.globals.eyeSpeed;
@@ -1814,6 +1834,11 @@ function setupCountButtons() {
 }
 
 function initUIStuff() {
+  var widthElem = document.getElementById("canvasWidth");
+  widthElem.innerHTML = canvas.width;
+  var heightElem = document.getElementById("canvasHeight");
+  heightElem.innerHTML = canvas.height;
+
   setupCountButtons();
   var elem = document.getElementById("setSettingChangeView");
   elem.onclick = function() {
diff --git a/aquarium/README.html b/aquarium/README.html
@@ -34,9 +34,17 @@ <h2>Options</h2>
     <li>
         <h3>numFish</h3>
         <p>set the number of fish</p>
-        <pre>
-        <a href="aquarium.html?numFish=1234">https://webglsamples.github.io/aquarium/aquarium.html?numFish=1234</a>
-        </pre>
+        <pre><a href="aquarium.html?numFish=1234">https://webglsamples.github.io/aquarium/aquarium.html?numFish=1234</a></pre>
+    </li>
+    <li>
+        <h3>canvasWidth, canvasHeight</h3>
+        <p>set the canvas size, default value: 1024 * 1024</p>
+        <pre><a href="aquarium.html?canvasWidth=1920&canvasHeight=1080">https://webglsamples.github.io/aquarium/aquarium.html?canvasWidth=1920&canvasHeight=1080</a></pre>
+    </li>
+    <li>
+        <h3>fillWindow</h3>
+        <p>set the canvas size to always fit the window, default value: false</p>
+        <pre><a href="aquarium.html?fitWindow=true">https://webglsamples.github.io/aquarium/aquarium.html?fitWindow=true</a></pre>
     </li>
 </ul>
 <h2>Running across multiple machines</h2>
diff --git a/aquarium/aquarium-common.js b/aquarium/aquarium-common.js
@@ -147,8 +147,9 @@ var g = {
   globals: {
     fishSetting: 2,
     drawLasers: false,
-	width: 1024,
-	height: 1024
+    width: 1024,
+    height: 1024,
+    fitWindow: false
   },
   net: {
     timeout: 3000,
diff --git a/aquarium/aquarium.js b/aquarium/aquarium.js
@@ -966,6 +966,17 @@ function initialize() {
   if (g_query.numFish) {
     g_numFish[0] = parseInt(g_query.numFish);
   }
+  if (g_query.canvasWidth) {
+    g.globals.width = parseInt(g_query.canvasWidth);
+  }
+  if (g_query.canvasHeight) {
+    g.globals.height = parseInt(g_query.canvasHeight);
+  }
+  if (g_query.fitWindow == "true") {
+    g.globals.fitWindow = true;
+  } else if (g_query.fitWindow == "false") {
+    g.globals.fitWindow = false;
+  }
 
   gl.enable(gl.DEPTH_TEST);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
@@ -1243,6 +1254,11 @@ function initialize() {
       tdl.log("new canvas height:", newHeight);
     }
     if (changed) {
+      var widthElem = document.getElementById("canvasWidth");
+      widthElem.innerHTML = canvas.width;
+      var heightElem = document.getElementById("canvasHeight");
+      heightElem.innerHTML = canvas.height;
+
       //tdl.log("drawingBufferDimensions:" + gl.drawingBufferWidth + ", " + gl.drawingBufferHeight);
       gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
 
@@ -1347,6 +1363,10 @@ function initialize() {
       g_fishTable.length = 0;
     }
 
+    if (g.globals.fitWindow) {
+      setCanvasSize(canvas, canvas.clientWidth, canvas.clientHeight);
+    }
+
     if (g.net.sync) {
       clock = now * g.globals.speed;
       eyeClock = now * g.globals.eyeSpeed;
@@ -1829,6 +1849,11 @@ function setupCountButtons() {
 }
 
 function initUIStuff() {
+  var widthElem = document.getElementById("canvasWidth");
+  widthElem.innerHTML = canvas.width;
+  var heightElem = document.getElementById("canvasHeight");
+  heightElem.innerHTML = canvas.height;
+
   setupCountButtons();
   var elem = document.getElementById("setSettingChangeView");
   elem.onclick = function() {
