add zoom button; update README

Author: sebastian-goeldi

README.md

@@ -1,6 +1,6 @@
 # kweb 0.1.1
 
-KLayout Web Viewer ![demo](https://i.imgur.com/HPvePvX.png)
+KLayout Web Viewer ![demo](docs/_static/kweb.png)
 
 Based on https://github.com/klayoutmatthias/canvas2canvas
 
@@ -26,11 +26,14 @@ Install the necessary dependecies
 
 `make install`
 
+## Set a folder for kweb to use when looking for gds files
+
+`export KWEB_FILESLOCATION=/path/to/folder/with/file.gds`
 
 ## Run
 
 `cd src/kweb`
 
 `make run`
 
-Copy the link http://127.0.0.1:8000/gds/wg to your browser to open the waveguide example
+Copy the link http://127.0.0.1:8000/gds/file.gds (or http://localhost:8000/gds/file.gds also works) to your browser to open the waveguide example

docs/_static/kweb.png

@@ -191,12 +191,20 @@ function showMenu(modes, annotations) {
 
   let clearRulers = document.createElement("button");
   clearRulers.textContent = "Clear Rulers";
-  clearRulers.className = "btn btn-primary";
+  clearRulers.className = "col-auto btn btn-primary me-2";
   clearRulers.setAttribute("type", "button");
   clearRulers.onclick = function() {
     socket.send(JSON.stringify({ msg: "clear-annotations" }));
   };
   menuElement.appendChild(clearRulers);
+  let zoomFit= document.createElement("button");
+  zoomFit.textContent = "Zoom Fit";
+  zoomFit.className = "col-auto btn btn-primary";
+  zoomFit.setAttribute("type", "button");
+  zoomFit.onclick = function() {
+    socket.send(JSON.stringify({ msg: "zoom-f" }));
+  };
+  menuElement.appendChild(zoomFit);
 
   let index = 0;
 

kweb.png

@@ -17,7 +17,7 @@
           <canvas class="rounded shadow canvas-container h-100 w-100" id="layout_canvas"></canvas>
           <div class="position-absolute top-0 start-1 p-4 d-flex" id="floating-buttons">
             <div id="modes" class="me-4"></div>
-            <div id="menu"></div>
+            <div id="menu" class = "row"></div>
           </div>
         </div>
         <div id="rightpanel" role="tablist" class="col-2 rounded shadow bg-default py-2">
@@ -34,7 +34,7 @@
               <div id="layer-buttons">
                 <div class="form-check form-switch ps-2">
                   <input class="form-check-input ms-0 ps-0" type="checkbox" role="switch" id="layerEmptySwitch" checked>
-                  <label class="form-check-label" for="layerEmptySwitch">Hide Empty Layers</label>
+                  <label class="form-check-label ps-2" for="layerEmptySwitch">Hide Empty Layers</label>
                 </div>
               </div>
             </div>