add interactive 3d models

_includes/default_head_tags.html

@@ -27,6 +27,7 @@
 {% endif %}
 
 <link rel="stylesheet" href="/assets/css/styles.css">
+<script type="module" src="/assets/js/model-viewer.js"></script>
 <script src="/assets/js/index.js"></script>
 
 

_posts/2023-06-21-my_first_PCB.md

@@ -1,41 +1,67 @@
 ---
 title: My first PCB!
-excerpt: 
+excerpt: |
+    I've had a longstanding ambition to get a PCB manufactured but I've always put it off. Lately I had a need for a little adapter board to break out these 1.27mm spaced pins to 2.54mm pins that would fit into a breadboard. Feeling like it was a simple enough board I finally decided to fire up KiCad and give it a go.   <model-viewer alt="An interactive 3D render of a PCB with 2.54mm headers on one side to fit a breadboard and 1.27 inch headers on the other." src="/assets/blog/PCB/model/pcb.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="/assets/blog/PCB/model/poster.webp" interaction-prompt="none" shadow-intensity="1" shadow-softness="1" exposure="0.5" camera-orbit="196.6deg 59.73deg 0.1m" field-of-view="30deg" auto-rotate> </model-viewer>
 layout: post
-image: /assets/blog/PCB/horizontal.png
-alt: A 3D render of a simple PCB.
 ---
 I made my first PCB!
 
-I've had a longstanding ambition to get a PCB manufacured but I've always put it off. Lately I had a need for a little adapter board to break out these 1.27mm spaced pins to 2.54mm pins that would fit into a breadboard. Feeling like it was a simple enough board I finally decided to fire up KiCad and give it a go.  
-I got this [round lcd breakout board](https://thepihut.com/products/waveshare-rp2040-1-28-ips-lcd-board-with-accelerometer-gyroscope).
+<figure>
+<model-viewer alt="An interactive 3D render of a PCB with 2.54mm headers on one side to fit a breadboard and 1.27 inch headers on the other." src="/assets/blog/PCB/model/pcb.glb" ar ar-modes="webxr scene-viewer quick-look" interaction-prompt="none" camera-controls poster="/assets/blog/PCB/model/poster.webp" shadow-intensity="1" shadow-softness="1" exposure="0.5" camera-orbit="196.6deg 59.73deg 0.1m" field-of-view="30deg" auto-rotate> </model-viewer>
+<figcaption>
+A little interactive model that you can spin around. You can make these nice 3D renders by exporting from KiCAD as WRL, importing into blender and then exporting as glb.
+</figcaption>
+</figure>
 
+I've had a longstanding ambition to get a PCB manufactured but I've always put it off. Lately I had a need for a little adapter board to break out these 1.27mm spaced pins to 2.54mm pins that would fit into a breadboard. Feeling like it was a simple enough board I finally decided to fire up KiCad and give it a go.  
+
+The 1.27mm headers in question are on the back of this cute [round lcd breakout board](https://thepihut.com/products/waveshare-rp2040-1-28-ips-lcd-board-with-accelerometer-gyroscope). 
+
+<figure>
+<img style="height:300px;" src="/assets/blog/PCB/display_board.webp"/>
+<figcaption>
+Those headers are much too small to manually push wires into for prototyping.
+</figcaption>
+</figure>
+
+So I fired up KiCAD and got to work, I had used it a couple time before but had never gotten as far as turning it into a real PCB. Well that changes today!
 
 <figure>
 <img src="/assets/blog/PCB/board.svg"/>
 <figcaption>
-The layout.
+The board layout prior to sending it off to be manufactured.
 </figcaption>
 </figure>
 
-
-<figure>
-<img src="/assets/blog/PCB/horizontal.png"/>
-<figcaption>
-The 3D render!
-</figcaption>
-</figure>
+I used this [excellent KiCAD plugin](https://github.com/Bouni/kicad-jlcpcb-tools) to generate the necessary gerber files that I could upload directly to JLPCB. *Other fast cheap PCB manufactures exist, as you will know if you've ever watched an electronics themed youtube video. PCB manufacturers are to electronics YouTubers as mattresses peddlers are to podcasts.*
 
 <figure>
 <img src="/assets/blog/PCB/real.jpeg"/>
 <figcaption>
-They arrived!
+They arrived! Those traces looks very narrow but they're mostly signalling lines. The power rail is doubled up on the connector and ground goes through the ground pour so it should be fine.
 </figcaption>
 </figure>
 
+After getting the boards I soldering one up. Soldering the 1.27" header was surprisingly difficult to do without causing bridges. And those bridges were tough to remove once there. It didn't help that I had run out off desoldering braid. Anyway I eventually got all the pins connected without overheating and delaminating the board.
+
+
 <figure>
 <img src="/assets/blog/PCB/breadboard.jpeg"/>
 <figcaption>
-And this is what they're actually for!
+It all looks fine but there are actually four distinct ways you can solder the headers and connect the LCD, I chose wrong.
 </figcaption>
-</figure>
+</figure>
+
+Next I realised that I had made the obvious error: I put the 1.27" and 2.54" headers on the wrong sides from where the should go. The board isn't reversible so that means the pin assignments are all wrong. By some miracle, the ground pins do have mirror symmetry so at least the ground plane is still the ground plane.
+
+I had thought about trying to squeeze the pin assignments onto the silkscreen, thankfully I didn't because this soldering mistake would have made those completely wrong. 
+
+I cloned the KiCAD file and swapped all the pin assignments around. Giving me this handy little cheat sheet. 
+
+
+<figure>
+<img style="height:400px;" src="/assets/blog/PCB/cheatsheet.png"/>
+<figcaption>
+I just screenshot'd the KiCAD viewport and inverted the colours to get this. I printed it out on A4 and it makes a handle little notepad.
+</figcaption>
+</figure>

_posts/2024-02-16-toothbrush-holder.md

@@ -1,21 +1,22 @@
 ---
 title: Toothbrush Shelf
-excerpt: It can be hard to find genuine everyday uses of 3D printing, but after a while you do find some.
+excerpt: |
+    It can be hard to find genuine everyday uses of 3D printing, but after a while you do find some. <model-viewer alt="An interactive 3D render of a small 3D printed shelf to hold a toothbrush near the bathroom shaver socket without the cables being messy" src="/assets/blog/toothbrush_shelf/model/toothbrush_shelf.glb" ar ar-modes="webxr scene-viewer quick-look" poster="/assets/blog/toothbrush_shelf/model/poster.webp" camera-controls shadow-intensity="1.38" shadow-softness="2" exposure="0.8" auto-rotate camera-orbit="-35deg 78.72deg 411.2m" field-of-view="30deg" interaction-prompt="none"> </model-viewer>
 layout: post
-image: /assets/blog/toothbrush_shelf/spin.gif
-alt: A render of a 3D printed shelf sitting above a shaver outlet, it spins slowly. 
 ---
 
-<figure>
-<img src="/assets/blog/toothbrush_shelf/spin.gif"/>
-<figcaption>
-</figcaption>
+It can be hard to find genuine everyday uses of 3D printing, but after a while you do find some! I made this little shelf to tidy up the wires to our devices in the bathroom. The wires are now hidden, coiled up, inside the shelf.
 
 <figure>
-<img src="/assets/blog/toothbrush_shelf/crop.jpeg"/>
+<model-viewer alt="An interactive 3D render of a small 3D printed shelf to hold a toothbrush near the bathroom shaver socket without the cables being messy" src="/assets/blog/toothbrush_shelf/model/toothbrush_shelf.glb" ar ar-modes="webxr scene-viewer quick-look" poster="/assets/blog/toothbrush_shelf/model/poster.webp" camera-controls shadow-intensity="1.38" shadow-softness="2" exposure="0.8" auto-rotate camera-orbit="-35deg 78.72deg 411.2m" field-of-view="30deg" interaction-prompt="none"> </model-viewer>
+<figcaption>
+A little 3D model that you can pan and zoom on. Or even use AR on your phone.
+</figcaption>
+</figure>
+
+<figure>
+<img style="height:500px;" src="/assets/blog/toothbrush_shelf/crop.jpeg"/>
 <figcaption>
 </figcaption>
 </figure>
 
-
-

_sass/main.scss

@@ -125,4 +125,12 @@ div.highlight {
             overflow-x: auto;
             overflow-y: hidden;
         }
-}
+}
+
+// For the 3D model viewer
+model-viewer {
+    width: 100%;
+    height: 300px;
+  }
+
+  

blog.html

@@ -7,7 +7,7 @@ permalink: /blog/
 <article class="h-entry">
     <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
     <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
-    <summary class="p-summary">{{ post.excerpt | remove: '<p>' | remove: '</p>' }}</summary>
+    <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
     <figure class="blogroll"><img class="u-photo" src = "{{post.image}}"></figure>
 </article>
 {% endfor %}