Make nicer settings tab

_posts/2023-10-20-first-marathon.md

@@ -10,3 +10,5 @@ alt: A scatter graph of run time vs run distance for all my runs on strava. Ther
 ---
 
 I ran the Amsterdam marathon! My first official race and the longest distance I've run in one go!
+
+<img src="/assets/blog/running/marathon.jpeg" alt="Me, running, with a face that says 'this is too far long to run', but both my feet are actually off the ground. (If that proves anything.)">

_projects/lasercut_stool.md

@@ -0,0 +1,31 @@
+---
+title:  Lasercut Stool
+layout: post
+excerpt: A lasercut hexagonal wooden stool.
+permalink: /projects/lasercut_stool
+
+img:
+    src: 
+    alt: A CAD model 
+    class: invertable
+
+social_image: /assets/projects/
+model: /assets/blog/weekend_builds_1/pot.glb
+
+head: |
+    <script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
+    <script type="importmap">
+    {
+        "imports": {
+        "three": "/node_modules/three/build/three.module.min.js",
+        "three/addons/": "/node_modules//three/examples/jsm/",
+        "lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
+        }
+    }
+    </script>
+    <script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
+---
+<outline-model-viewer model = "{{page.model}}" camera='{"position":[2.11,4.722,9.765],"rotation":[-0.4425,0.1813,0.08522],"zoom":471.1588632880538,"target":[0.1159,0.06564,-0.06329]}'>
+    <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>

_projects/toothbrush_shelf.md

@@ -10,5 +10,22 @@ img:
     class: invertable
 
 social_image: /assets/projects/toothbrush_shelf/thumbnail.png
----
+model: /assets/blog/toothbrush_shelf/model/toothbrush_shelf.glb
 
+head: |
+    <script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
+    <script type="importmap">
+    {
+        "imports": {
+        "three": "/node_modules/three/build/three.module.min.js",
+        "three/addons/": "/node_modules//three/examples/jsm/",
+        "lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
+        }
+    }
+    </script>
+    <script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
+---
+<outline-model-viewer model = "{{page.model}}" camera='{"position":[5.148,4.038,8.952],"rotation":[-0.4169,0.4809,0.2021],"zoom":1248.587161014231,"target":[0.03319,0.06938,-0.01135]}'>
+    <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>

assets/js/outline-model-viewer/index.js

@@ -35,9 +35,12 @@ const serialiseCamera = (camera, controls) => {
 
 const setupDebug = (container, customOutline, camera, controls) => {
   const gui = new GUI({
+    title: "Settings",
     container: container,
-    width: "100%",
+    injectStyles: false,
+    closeFolders: true,
   });
+  gui.close();
 
   const uniforms = customOutline.fsQuad.material.uniforms;
   const params = {
@@ -53,11 +56,11 @@ const setupDebug = (container, customOutline, camera, controls) => {
 
   gui
     .add(params.mode, "Mode", {
-      "Outlines": 0,
+      "Outlines + Shaded (default)": 0,
-      "Original scene": 2,
+      "Shaded": 2,
       "Depth buffer": 3,
-      "SurfaceID debug buffer": 4,
+      "SurfaceID buffer": 4,
-      "Outlines only": 5,
+      "Outlines": 5,
     })
     .onChange(function (value) {
       uniforms.debugVisualize.value = value;
@@ -81,7 +84,7 @@ class OutlineModelViewer extends HTMLElement {
   constructor() {
     super();
 
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.render();
 
     const model_path = this.getAttribute("model") ||  "/assets/projects/bike_lights/models/bigger.glb";
@@ -219,13 +222,12 @@ class OutlineModelViewer extends HTMLElement {
     }
     window.addEventListener("resize", onWindowResize, false);
 
-    if(this.hasAttribute("debug")) {
+
     setupDebug(
         this.shadow.querySelector("div#container"),
         customOutline,
         camera,
         controls);
-    }
 
   }
 
@@ -234,11 +236,8 @@ class OutlineModelViewer extends HTMLElement {
       <div id="container">
       <canvas class = "object-viewer"></canvas>
       </div>
-
+      <link rel="stylesheet" href="/node_modules/lil-gui/dist/lil-gui.min.css">
       <style>
-        details {
-          display: none;
-        }
 
         #container {
           width: 100%;
@@ -247,13 +246,40 @@ class OutlineModelViewer extends HTMLElement {
           flex-direction: column;
         }
 
+        .lil-gui.root {
+          width: 100%;
+          --background-color: var(--theme-bg-color);
+          --text-color: var(--theme-text-color);
+          --title-background-color: var(--theme-bg-color);
+          --title-text-color: var(--theme-text-color);
+          --widget-color: var(--theme-subtle-outline);
+          --hover-color: lightgrey;
+          --focus-color: lightgrey;
+          --number-color: #2cc9ff;
+          --string-color: #a2db3c;
+      }
+
+      .lil-gui button {
+        border: var(--theme-subtle-outline) 1px solid;
+      }
+
+        summary#settings {
+          border: none;
+          background: var(--theme-background);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 1em;
+          padding-bottom: 0.5em;
+          cursor: context-menu;
+        }
+
         canvas {
           width: 100%;
           height: 100%;
           border-radius: 0.25rem;
         }
       </style>
-      <link rel="stylesheet" href="/node_modules/lil-gui/dist/lil-gui.min.css">
     `;
   }
 }