add new projects layout and remove unpkg links

_drafts/outlines.md

@@ -4,13 +4,13 @@ excerpt: |
     
 
 head: |
-    <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
+    <script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
 
     <script type="importmap">
     {
         "imports": {
-        "three": "https://unpkg.com/three@0.156.1/build/three.module.js",
+        "three": "/node_modules/three/build/three.module.min.js",
-        "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/"
+        "three/addons/": "/node_modules/three/examples/jsm/",
         }
     }
     </script>

_drafts/three_js.md

@@ -4,7 +4,7 @@ excerpt: |
     
 
 head: |
-    <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
+    <script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
 
     <script type="importmap">
     {

_includes/default_head_tags.html

@@ -95,6 +95,12 @@ Stay a while, poke around, there might be some easter eggs to be found.`,
 <!-- RSS feed -->
 {% feed_meta %}
 
+{% if layout.head %}
+{{ layout.head }}
+{% endif %} 
+
 {% if page.head %}
 {{ page.head }}
-{% endif %} 
+{% endif %} 
+
+

_layouts/project.html

@@ -0,0 +1,18 @@
+---
+layout: post
+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>
+---
+
+{{ content }}

_projects/bathroom_shelf.md

@@ -1,6 +1,6 @@
 ---
 title:  Bathroom Shelf
-layout: post
+layout: project
 excerpt: A little modification to an IKEA thingy.
 permalink: /projects/bathroom_shelf
 assets: /assets/projects/bathroom_shelf
@@ -12,24 +12,14 @@ img:
 social_image: /assets/projects/bathroom_shelf/thumbnail.png
 model: /assets/projects/bathroom_shelf/models/ikea.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 = "/assets/projects/bathroom_shelf/models/ikea.glb" zoom=845>
+{% include mastodon_post.html post_id = "111822564173512216" %}
+
+<outline-model-viewer model = "/assets/projects/bathroom_shelf/models/ikea.glb">
     <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
     <p class="has-wc">Loading model...</p>
 </outline-model-viewer>
 
-{% include mastodon_post.html post_id = "111822564173512216" %}
+
 
 <img src="/assets/projects/bathroom_shelf/test.jpeg" alt="test">

_projects/bike_lights.md

@@ -1,6 +1,6 @@
 ---
 title:  Bike Lights
-layout: post
+layout: project
 excerpt: Making a custom 3W dynamo light for a bike.
 permalink: /projects/bike_lights
 assets: /assets/projects/bike_lights
@@ -12,18 +12,6 @@ img:
 social_image: /assets/projects/bike_lights/thumbnail.png
 model: /assets/projects/bike_lights/model
 
-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 = "/assets/projects/bike_lights/models/bigger.glb" camera='{"position":[-7.434,5.128,-6.379],"rotation":[-2.464,-0.7373,-2.646],"zoom":303.06369033128976,"target":[0,0,0]}'>
     <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">

_projects/ceramics.md

@@ -1,6 +1,6 @@
 ---
 title:  Ceramics
-layout: post
+layout: project
 excerpt: Ongoing explorations in making pots!
 permalink: /projects/ceramics
 assets: /assets/projects/ceramics
@@ -10,5 +10,14 @@ img:
     class: invertable
 
 social_image: /assets/projects/ceramics/thumbnail.png
-model: 
+model: /assets/projects/ceramics/scan.glb
----
+---
+<!-- <outline-model-viewer model = "{{page.model}}">
+    <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer> -->
+
+<outline-model-viewer model = "/assets/projects/ceramics/scan_2.glb" materials=keep outlines=false camera='{"position":[-5.155,2.5,-9.456],"rotation":[-2.883,-0.4851,-3.019],"zoom":268,"target":[0,0,0]}'>
+    <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>

_projects/helmet_lights.md

@@ -1,6 +1,6 @@
 ---
 title:  Helmet Lights
-layout: post
+layout: project
 excerpt: A few different custom mounts to attach lights to bike helmets.
 permalink: /projects/helmet_lights
 assets: /assets/projects/helmet_lights
@@ -12,18 +12,6 @@ img:
 social_image: /assets/projects/helmet_lights/thumbnail.png
 models: /assets/projects/helmet_lights/models
 
-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.models}}/model.glb" camera='{"position":[6.039,6.456,-6.641],"rotation":[-2.37,0.5778,2.654],"zoom":309.7389923355519,"target":[0,0,0]}'>

_projects/lamps.md

@@ -1,6 +1,6 @@
 ---
 title:  Lamps
-layout: post
+layout: project
 excerpt: 3D Printed Lamp Shades
 permalink: /projects/lamps
 assets: /assets/projects/lamps

_projects/lasercut_stool.md

@@ -1,6 +1,6 @@
 ---
 title:  Lasercut Stool
-layout: post
+layout: project
 excerpt: A lasercut hexagonal wooden stool.
 permalink: /projects/lasercut_stool
 assets: /assets/projects/lasercut_stool
@@ -12,18 +12,6 @@ img:
 # 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":[7.699,4.641,6.436],"rotation":[-0.6243,0.7663,0.4633],"zoom":229.77238881409951,"target":[0,0,0]}'>
     <img class="outline-model-poster no-wc" src = "{{page.img.src}}">

_projects/lego_adapters.md

@@ -1,6 +1,6 @@
 ---
 title:  3D Printed Lego Motor Adapters
-layout: post
+layout: project
 excerpt: Adapters to use common components with lego technic.
 permalink: /projects/lego_adapters
 assets: /assets/projects/lego_adapters

_projects/projector_mount.md

@@ -1,6 +1,6 @@
 ---
 title:  Projector Shelf Mount
-layout: post
+layout: project
 excerpt: A mount for a projector underneath a shelf with a tilt swivel joint.
 permalink: /projects/projector_mount
 assets: /assets/projects/projector_mount

_projects/toothbrush_shelf.md

@@ -1,6 +1,6 @@
 ---
 title:  Toothbrush Shelf
-layout: post
+layout: project
 excerpt: A shelf to put your toothbrush charger on.
 permalink: /projects/toothbrush_shelf
 assets: /assets/projects/toothbrush_shelf
@@ -12,18 +12,7 @@ img:
 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":[7.699,4.641,6.436],"rotation":[-0.6243,0.7663,0.4633],"zoom":229,"target":[0.0,0,0]}'>
     <img class="outline-model-poster no-wc" src = "{{page.img.src}}">

_projects/usbc_power_station.md

@@ -1,6 +1,6 @@
 ---
 title:  USB-C Power Book
-layout: post
+layout: project
 excerpt: An ongoing quest to fix a problem I don't have.
 permalink: /projects/usbc_charging_station
 assets: /assets/projects/usbc_power_supply
@@ -14,22 +14,9 @@ social_image: /assets/projects/usbc_power_supply/thumbnail.png
 model: /assets/projects/usbc_power_supply/usb-c_psu.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>
     <script type="module" src="/assets/js/kicanvas.js"></script>
-
+    <script src="/assets/blog/micropython/micropython.min.mjs" type="module"></script>
-     <script src="/assets/blog/micropython/micropython.min.mjs" type="module"></script>
+    <script src="/assets/blog/micropython/cm6.bundle.min.js"></script>
-
-     <script src="/assets/blog/micropython/cm6.bundle.min.js"></script>
     <script src="/assets/blog/micropython/simulator.js" type = "module"></script>
 
 ---

_projects/vector_magnet.md

@@ -1,6 +1,6 @@
 ---
 title:  Vector Magnet
-layout: post
+layout: project
 excerpt: Make your magnetic fields all 3D like.
 permalink: /projects/vector_magnet
 assets: /assets/projects/vector_magnet
@@ -11,18 +11,6 @@ img:
 
 social_image: /assets/projects/vector_magnet/thumbnail.png
 
-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 = "/assets/blog/vector_magnet/vector_magnet.glb" zoom=500 camera='{"position":[3.118,3.203,10.1],"rotation":[-0.3104,0.2858,0.0902],"zoom":428.68750000000136,"target":[0,0,0]}'>
     <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
@@ -35,13 +23,11 @@ Check out a little interactive model of the magnetometer below. The device has t
 
 Here's a cutaway view of the interior.
 
-<outline-model-viewer model = "/assets/blog/vector_magnet/vector_magnet_section.glb" spin=false camera='{"position":[-3.069,3.172,10.17],"rotation":[-0.3052,-0.2811,-0.08718],"zoom":2860.0091628398345,"target":[0.007077,-0.02863,0.01116]}' true-color=true>
+<outline-model-viewer model = "/assets/blog/vector_magnet/vector_magnet_section.glb" spin=false camera='{"position":[-3.069,3.172,10.17],"rotation":[-0.3052,-0.2811,-0.08718],"zoom":2860.0091628398345,"target":[0.007077,-0.02863,0.01116]}' materials=flat>
     <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
     <p class="has-wc">Loading model...</p>
 </outline-model-viewer>
 
-I should add some color to this but roughly you have:
-
 **AFM Tip**: The atomic force microscope tip (dark blue) with a nano-diamond attached to the very tip. We want to figure out which was the axis the NV defect in this nano-diamond is pointing. To do that we need to expose it to different directions of magnetic field while also blasting it with light and radio waves.
 
 **PCB coil** For the radio wave blasting we have a single turn coil made on a PCB (green). I haven't cut the coil away so that you can see it's whole shape. We'll pump RF power into this tuned to the electronic transitions in the NV defect that we want to probe.

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

@@ -71,7 +71,7 @@ const serialiseCamera = (camera, controls) => {
   });
 };
 
-class OutlineModelViewer extends HTMLElement {
+export class OutlineModelViewer extends HTMLElement {
   constructor() {
     super();
     this.isVisible = true; // Track visibility
@@ -210,16 +210,13 @@ class OutlineModelViewer extends HTMLElement {
       // Modify the materials to support surface coloring
       scene.traverse((node) => {
         if (node.type == "Mesh") {
+          // Add surface ID attribute to the geometry
           const colorsTypedArray = surfaceFinder.getSurfaceIdAttribute(node);
           node.geometry.setAttribute(
             "color",
             new THREE.BufferAttribute(colorsTypedArray, 4)
           );
 
-          let material_params = this.getAttribute("true-color")
-            ? { color: node.material.color }
-            : { emissive: model_color };
-
           if (node.name.includes("track") || node.name.includes("zone")) {
             //set to a copper colour
             // #c87533
@@ -235,7 +232,20 @@ class OutlineModelViewer extends HTMLElement {
             node.position.y += 0.00002;
           }
           // override materials
-          node.material = new THREE.MeshStandardMaterial(material_params);
+          const material_mode = this.getAttribute("materials") || "outlines";
+          if (material_mode === "outlines") {
+            node.material = new THREE.MeshStandardMaterial({
+              emissive: model_color,
+            });
+          } else if (material_mode === "flat") {
+            node.material = new THREE.MeshStandardMaterial({
+              color: node.material.color,
+            });
+          } else if (material_mode === "keep") {
+            // Do nothing, leave the material as set in the GLTF file
+          } else {
+            throw new Error("Invalid material mode");
+          }
         }
       });
 
@@ -282,27 +292,10 @@ class OutlineModelViewer extends HTMLElement {
               this.intersectedObject.currentHex
             );
           }
-          // Store the current hex color and set highlight color
-          this.intersectedObject = object;
-          this.intersectedObject.currentHex =
-            this.intersectedObject.material.emissive.getHex();
 
-          // Adjust the emissive color based on current brightness
-          const currentColor = new THREE.Color(
-            this.intersectedObject.material.emissive.getHex()
-          );
-          adjustColor(currentColor, 0.2); // Lighten or darken based on brightness
-          this.intersectedObject.material.emissive.set(currentColor);
-
-          // Print the name of the intersected object
-          //   params.selectedObject = object.name || "(unnamed object)";
           shadow.querySelector("#clicked-item").innerText = object.name;
         }
       } else if (this.intersectedObject) {
-        // Reset the color if the mouse is no longer hovering over any object
-        this.intersectedObject.material.emissive.setHex(
-          this.intersectedObject.currentHex
-        );
         this.intersectedObject = null;
         params.selectedObject = "";
       }
@@ -369,13 +362,15 @@ class OutlineModelViewer extends HTMLElement {
     gui.close();
 
     const uniforms = customOutline.fsQuad.material.uniforms;
+    uniforms.debugVisualize.value =
+      this.getAttribute("outlines") === "false" ? 2 : 0;
+
     const params = {
       selectedObject: "None",
       spin: controls.autoRotate,
-      mode: { Mode: 0 },
+      mode: uniforms.debugVisualize.value,
       //   depthBias: uniforms.multiplierParameters.value.x,
       //   depthMult: uniforms.multiplierParameters.value.y,
-      //   FXAA_resolution: 0.5,
       printCamera: () => console.log(serialiseCamera(camera, controls)),
     };
 
@@ -404,13 +399,6 @@ class OutlineModelViewer extends HTMLElement {
     //   uniforms.multiplierParameters.value.y = value;
     // });
 
-    // gui.add(params, "FXAA_resolution", 0.0, 2).onChange((value) => {
-    //   effectFXAA.uniforms["resolution"].value.set(
-    //     value / canvas_rect.width,
-    //     value / canvas_rect.height
-    //   );
-    // });
-
     // Toggle fullscreen mode
     const shadow = this.shadow;
     const canvas_height = canvas.style.height;
@@ -539,3 +527,5 @@ class OutlineModelViewer extends HTMLElement {
 }
 
 customElements.define("outline-model-viewer", OutlineModelViewer);
+
+export default OutlineModelViewer;

package.json

@@ -1,13 +1,13 @@
 {
   "dependencies": {
     "@idotj/mastodon-embed-timeline": "^4.4.2",
-    "es-module-shims": "^1.8.1",
+    "es-module-shims": "^1.10.0",
-    "lil-gui": "^0.19.1",
+    "lil-gui": "^0.19.2",
     "mathjax": "^3.2.2",
     "svgo": "^3.3.2",
-    "three": "^0.158.0"
+    "three": "^0.169.0"
   },
   "devDependencies": {
-    "@divriots/jampack": "^0.23.3"
+    "@divriots/jampack": "^0.30.0"
   }
 }

run.sh

@@ -1,5 +1,6 @@
 #!/usr/bin/env bash
 bundle install
+npm outdated
 echo Open http://0.0.0.0:4000
 # bundle exec jekyll serve --draft --future --live --incremental
 bundle exec jekyll serve --live --incremental --livereload --future --host 0.0.0.0