add tracer pics to openchrono. make additional photos section collapsible.

input/projects/openchrono.md

@@ -4,7 +4,7 @@ parent: projects
 git: https://git.xythobuz.de/thomas/OpenChrono
 github: https://github.com/xythobuz/OpenChrono
 date: 2022-06-26
-update: 2022-06-29
+update: 2022-07-01
 comments: true
 ---
 
@@ -246,6 +246,8 @@ Other thread profiles can be added easily.
 
 If you don't need to customize anything you can also get pre-rendered STL files from [Printables](https://www.printables.com/model/232238-openchrono-airsoft-chronograph-and-tracer) or [Thingiverse](https://www.thingiverse.com/thing:5419855).
 
+### Left Half
+
 Print the parts, remove supports and do some sanding as needed.
 Then put in the heat-melt inserts.
 I recommend using a spare thick soldering iron tip.
@@ -321,6 +323,22 @@ lightgallery([
 ])
 %-->
 
+### Tracer Option
+
+If you want to build the left half with the UV LED tracer option included I recommend using the existing ground connections of the IR LEDs and phototransistors.
+That way you only need to run two additional wires.
+I placed the 30Ω resistor on the underside of the Arduino, shielding it with some heat-shrink tubing.
+
+<!--%
+lightgallery([
+    [ "img/chrono_tracer_1.jpg", "Tracer option, unfinished wiring" ],
+    [ "img/chrono_tracer_2.jpg", "Resistor below Arduino" ],
+    [ "img/chrono_tracer_3.jpg", "Completed UV tracer wiring" ],
+])
+%-->
+
+### Right Half
+
 Next we're going to prepare the right half.
 
 **Beware:** If you use the TP4056 LiPo charger board, they normally come with the charge current set to 1A with a 1.2kΩ resistor on position R3.
@@ -625,8 +643,8 @@ OpenChrono is licensed under the [GNU General Public License](https://www.gnu.or
 ## More Pictures
 <a class="anchor" name="more_pictures"></a>
 
-Here are some more photographs I didn't use above.
-
+<div class="collapse">Some more photographs I didn't use above.</div>
+<div class="collapsecontent">
 <!--%
 lightgallery([
     [ "img/OpenChrono_bb.png", "AA 'Breadboard' wiring plan" ],
@@ -659,3 +677,4 @@ lightgallery([
     [ "img/chrono_m11_measurement_26.jpg", "" ],
 ])
 %-->
+</div>

page.html

@@ -224,17 +224,37 @@ else:
         });
     </script>
     <script>
+        var coll = document.getElementsByClassName("collapse");
+        var i;
+        for (i = 0; i < coll.length; i++) {
+            coll[i].addEventListener("click", function() {
+                this.classList.toggle("collapseactive");
+                var content = this.nextElementSibling;
+                if (content.style.maxHeight) {
+                    content.style.maxHeight = null;
+
+                    setTimeout(function() {
+                        content.style.borderWidth = null;
+                    }, 800);
+                } else {
+                    content.style.maxHeight = content.scrollHeight + "px";
+                    content.style.borderWidth = "2px";
+                }
+            });
+        }
+    </script>
+    <script>
         (function(f, a, t, h, o, m){
             a[h]=a[h]||function(){
                 (a[h].q=a[h].q||[]).push(arguments)
-        	};
-			o=f.createElement('script'),
-			m=f.getElementsByTagName('script')[0];
-			o.async=1; o.src=t; o.id='fathom-script';
-			m.parentNode.insertBefore(o,m)
-		})(document, window, '//stats.xythobuz.de/tracker.js', 'fathom');
-		fathom('set', 'siteId', 'APYRK');
-		fathom('trackPageview');
-	</script>
+            };
+            o=f.createElement('script'),
+            m=f.getElementsByTagName('script')[0];
+            o.async=1; o.src=t; o.id='fathom-script';
+            m.parentNode.insertBefore(o,m)
+        })(document, window, '//stats.xythobuz.de/tracker.js', 'fathom');
+        fathom('set', 'siteId', 'APYRK');
+        fathom('trackPageview');
+    </script>
 </body>
 </html>

static/css/style.css

@@ -203,9 +203,36 @@ span.font-small {
     cursor: zoom-in;
 }
 
+.collapse {
+    cursor: pointer;
+    padding: 15px;
+}
+
+.collapse:after {
+    content: '\002B';
+    font-weight: bold;
+    float: right;
+    margin-left: 5px;
+}
+
+.collapseactive:after {
+    content: "\2212";
+}
+
+.collapsecontent {
+    padding: 0;
+    margin: 15px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.8s ease-out;
+    border-width: 0px;
+    border-style: solid;
+    border-radius: 10px;
+}
+
 /* colors */
 
-body, #nav {
+body, #nav, .collapsecontent {
     background-color: #FFFFFF;
 }
 
@@ -233,11 +260,11 @@ hr {
     color: #32CD32;
 }
 
-table, th, td, pre, .border, .releasecard, #index-avatar {
+table, th, td, pre, .border, .releasecard, #index-avatar, .collapsecontent {
     border-color: #32CD32;
 }
 
-.releasecard {
+.releasecard, .collapse {
     background-color: #C0C0C0;
 }
 
@@ -250,9 +277,13 @@ table, th, td, pre, .border, .releasecard, #index-avatar {
     margin-left: 1em;
 }
 
+.collapseactive, .collapse:hover {
+    background-color: #999999;
+}
+
 /* dark mode */
 @media (prefers-color-scheme: dark) {
-    body, #nav {
+    body, #nav, .collapsecontent {
         background-color: #111111;
     }
 
@@ -268,7 +299,7 @@ table, th, td, pre, .border, .releasecard, #index-avatar {
         color: #BA55D3;
     }
 
-    .releasecard {
+    .releasecard, .collapse {
         background-color: #232323;
     }
 
@@ -311,4 +342,8 @@ table, th, td, pre, .border, .releasecard, #index-avatar {
     .commento-name, .commento-permalink, [id^=commento-comment-text] p {
         color: #FFFFFF !important;
     }
+
+    .collapseactive, .collapse:hover {
+        background-color: #424242;
+    }
 }