make svgs in docs interactive

.github/workflows/docs.yml

@@ -21,6 +21,9 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Checkout repo submodules
+        run: git submodule update --init
+
       - name: Install dependencies
         run: |
           sudo add-apt-repository --yes ppa:kicad/kicad-7.0-releases

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "docs/svg-pan-zoom"]
+	path = docs/svg-pan-zoom
+	url = https://github.com/bumbu/svg-pan-zoom

docs/generate_docs.sh

@@ -9,14 +9,20 @@ cp -r ../hardware/plot src
 
 echo "Generating plot includes"
 rm -rf src/inc_dispensy_sch.md
-for f in src/plot/dispensy_sch.svg/*.svg; do
+echo "<script src=\"js/svg-pan-zoom.js\" charset=\"UTF-8\"></script>" >> src/inc_dispensy_sch.md
+for f in `ls src/plot/dispensy_sch.svg/*.svg | sort -r`; do
     file=`echo $f | sed 's:src/:./:g'`
     name=`echo $f | sed 's:src/plot/dispensy_sch.svg/::g' | sed 's:.svg::g'`
+    echo $name
     echo "<h2>$name</h2>" >> src/inc_dispensy_sch.md
     echo "<div style=\"background-color: white;\">" >> src/inc_dispensy_sch.md
-    echo "<a href=\"$file\">" >> src/inc_dispensy_sch.md
-    echo "<img src=\"$file\" alt=\"Main-Board PCB layout as SVG\">" >> src/inc_dispensy_sch.md
-    echo "</a></div>" >> src/inc_dispensy_sch.md
+    echo "<embed type=\"image/svg+xml\" src=\"$file\" id=\"pz_$name\" style=\"width:100%;\"/>" >> src/inc_dispensy_sch.md
+    echo "<script>" >> src/inc_dispensy_sch.md
+    echo "document.getElementById('pz_$name').addEventListener('load', function(){" >> src/inc_dispensy_sch.md
+    echo "svgPanZoom(document.getElementById('pz_$name'), {controlIconsEnabled: true});" >> src/inc_dispensy_sch.md
+    echo "})" >> src/inc_dispensy_sch.md
+    echo "</script>" >> src/inc_dispensy_sch.md
+    echo "</div>" >> src/inc_dispensy_sch.md
     echo >> src/inc_dispensy_sch.md
 done
 

docs/src/js/svg-pan-zoom.js

@@ -0,0 +1 @@
+../../svg-pan-zoom/dist/svg-pan-zoom.js

docs/src/js/svg-pan-zoom.min.js

@@ -0,0 +1 @@
+../../svg-pan-zoom/dist/svg-pan-zoom.min.js

docs/src/main_board_pcb.md

@@ -4,8 +4,12 @@ This page shows the current version of the PCB layout as SVG graphics.
 
 You can also view the [Main-Board PCB layout as PDF](./plot/dispensy_pcb.pdf).
 
+<script src="js/svg-pan-zoom.js" charset="UTF-8"></script>
 <div style="background-color: white;">
-    <a href="./plot/dispensy_pcb.svg">
-        <img src="./plot/dispensy_pcb.svg" alt="Main-Board PCB layout as SVG">
-    </a>
+    <embed type="image/svg+xml" src="../plot/dispensy_pcb.svg" id="pz_dispensy" style="width:100%;"/>
+    <script>
+        document.getElementById('pz_dispensy').addEventListener('load', function(){
+            svgPanZoom(document.getElementById('pz_dispensy'), {controlIconsEnabled: true});
+        })
+    </script>
 </div>

docs/svg-pan-zoom

@@ -0,0 +1 @@
+Subproject commit 632c04b408854926087266022aff7557a363e1ba

hardware/dispensy.kicad_pro

@@ -501,15 +501,15 @@
     ],
     [
       "635c7f01-c861-45f9-bb15-e53673572e1d",
-      "External PSU"
+      "EXT_PSU"
     ],
     [
       "f8ce2893-59d6-4502-b3c7-412c7467c1ef",
-      "RP2040"
+      "PI"
     ],
     [
       "2c5a08e6-462b-42d7-a36a-f09062d79876",
-      "5V PSU"
+      "PI_PSU"
     ]
   ],
   "text_variables": {}

hardware/dispensy.kicad_sch

@@ -2102,7 +2102,7 @@
     (stroke (width 0.1524) (type solid))
     (fill (color 0 0 0 0.0000))
     (uuid 635c7f01-c861-45f9-bb15-e53673572e1d)
-    (property "Sheetname" "External PSU" (at 102.87 170.7384 0)
+    (property "Sheetname" "EXT_PSU" (at 102.87 170.7384 0)
       (effects (font (size 1.27 1.27)) (justify left bottom))
     )
     (property "Sheetfile" "psu_lm2576.kicad_sch" (at 102.87 177.1146 0)
@@ -2127,7 +2127,7 @@
     (stroke (width 0.1524) (type solid))
     (fill (color 0 0 0 0.0000))
     (uuid f8ce2893-59d6-4502-b3c7-412c7467c1ef)
-    (property "Sheetname" "RP2040" (at 106.68 42.4684 0)
+    (property "Sheetname" "PI" (at 106.68 42.4684 0)
       (effects (font (size 1.27 1.27)) (justify left bottom))
     )
     (property "Sheetfile" "pi.kicad_sch" (at 106.68 84.4046 0)

hardware/pi.kicad_sch

@@ -7888,7 +7888,7 @@
     (stroke (width 0.1524) (type solid))
     (fill (color 0 0 0 0.0000))
     (uuid 2c5a08e6-462b-42d7-a36a-f09062d79876)
-    (property "Sheetname" "5V PSU" (at 125.73 155.4984 0)
+    (property "Sheetname" "PI_PSU" (at 125.73 155.4984 0)
       (effects (font (size 1.27 1.27)) (justify left bottom))
     )
     (property "Sheetfile" "psu_lm2576.kicad_sch" (at 125.73 161.8746 0)