Implement Fritzing based SVG version of Arduino Uno breadboard

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "doc/img/fritzing"]
+	path = doc/img/fritzing
+	url = https://github.com/fritzing/fritzing-parts.git

Tools/dipper

@@ -16,6 +16,10 @@ $CIRCRADIUS     = 0.035*DPI
 $LABELWIDTH     = 70
 $FUNCTIONWIDTH  = 100
 $TITLE          = nil
+$BOARD          = nil
+$BOARDWIDTH     = 0
+$BOARDHEIGHT    = 0
+$BOARDROTATION  = 0
 
 PIN   = Array.new
 LABEL = Hash.new {|hash,key| hash[key] = [0, key, '']}
@@ -31,6 +35,24 @@ ARGF.each_line do |line|
     $TITLE = $1
     next
   end
+  if line =~ /^\s*%image\s+(.*\S)\s+(\S+)\s+(\S+)\s+(\S+)/
+    $BOARD         = $1
+    $BOARDWIDTH    = $2
+    $BOARDHEIGHT   = $3
+    $BOARDROTATION = $4
+    if $BOARDROTATION=="0"
+      $PACKWIDTH   = $BOARDWIDTH.to_f
+      $PACKHEIGHT  = $BOARDHEIGHT.to_f
+    elsif $BOARDROTATION=="90"
+      $PACKHEIGHT   = $BOARDWIDTH.to_f
+      $PACKWIDTH  = $BOARDHEIGHT.to_f
+    end
+    $FUNCTIONWIDTH = 65
+    $LABELWIDTH    = 0
+    $PINWIDTH      = 0
+    $PINPITCH      = 14.4
+    next
+  end
   if line =~ /^\s*%color\s+(.*?\S)\s+(\S+)\s+(\S+)/
     COLOR[$1] = [$2, $3]
     next
@@ -39,29 +61,38 @@ ARGF.each_line do |line|
     line     = $1
     function = $2
   end
-  if line =~ /^\s*(\d+)\s+(.*\S)/
+  if line =~ /^\s*(-?\d+)\s+(.*\S)/
     pinNo    = $1.to_i
     label    = $2
-  elsif line =~ /^\s*(\d+)/
+  elsif line =~ /^\s*(-?\d+\.\d*)\s+(.*\S)/
+    pinNo    = $1.to_f
+    label    = $2
+  elsif line =~ /^\s*(-?\d+\.\d*)/
+    pinNo    = $1.to_f
+  elsif line =~ /^\s*(-?\d+)/
     pinNo    = $1.to_i
   elsif line =~ /^\s*(.*\S)/
     label    = $1
   end
   pin = nil
   if !label.nil?
     pin = LABEL[label]
-    if pin[0] > 0
+    if pin[0] != 0
       pinNo = pin[0]
     else
       pin[0] = pinNo
     end
-    while pinNo-1 > PIN.size
-      PIN << [PIN.size+1, 'NC', '']
-    end
-    if pinNo > PIN.size
-      PIN << pin
+    if $BOARD
+      PIN << pin unless PIN.include?(pin)
+    else
+      while pinNo-1 > PIN.size
+        PIN << [PIN.size+1, 'NC', '']
+      end
+      if pinNo > PIN.size
+        PIN << pin
+      end
     end
-  else
+  elsif !$BOARD
     while pinNo > PIN.size
       PIN << [PIN.size+1, 'NC', '']
     end
@@ -77,34 +108,39 @@ end
 # Generate SVG
 #
 ROWS       = PIN.size / 2
-PACKLEFT   = $FUNCTIONWIDTH+$LABELWIDTH+$PINWIDTH
+LABELPAD   = 5
+PACKLEFT   = $FUNCTIONWIDTH+$LABELWIDTH+$PINWIDTH+LABELPAD
 FUNHALF    = $FUNCTIONWIDTH / 2
 PACKRIGHT  = PACKLEFT+$PACKWIDTH-2.0*$PINWIDTH
 PACKTOP    = 5
-PACKHEIGHT = (ROWS-1)*$PINPITCH+2.0*$PACKEXCESS+$PINHEIGHT
-TOTALWIDTH = 2*($FUNCTIONWIDTH+$LABELWIDTH)+$PACKWIDTH
+PACKHEIGHT = $BOARD ? $PACKHEIGHT.to_f : (ROWS-1)*$PINPITCH+2.0*$PACKEXCESS+$PINHEIGHT
+TOTALWIDTH = 2*($FUNCTIONWIDTH+$LABELWIDTH+LABELPAD)+$PACKWIDTH
 TOTALHEIGHT= 2*PACKTOP+PACKHEIGHT
 PINNOPAD   = 3
 PINNOBASE  = -4
 LABELBASE  = -1.5
-LABELPAD   = 5
 FUNBASE    = 0
-FUNBOXTOP  = 5
-FUNBOXHEIGHT  = $PINHEIGHT+FUNBOXTOP+5
+FUNBOXTOP  = $BOARD ? -2 : 5
+FUNBOXHEIGHT  = $BOARD ? 13 : $PINHEIGHT+FUNBOXTOP+5
 FUNBOXROUND   = 3
 
 $PINDESC = ''
 PIN.each do |pin|
   row  = pin[0]-1
   left = true
-  if row >= ROWS
+  if $BOARD
+    if row < 0
+      row  = -2.0-row
+      left = false
+    end
+  elsif row >= ROWS
     row = PIN.size-row-1
     left= false
   end
   top  = PACKTOP+$PACKEXCESS+row*$PINPITCH
   base = top+$PINHEIGHT
   if left
-    $PINDESC += <<END_PIN
+    $PINDESC += <<END_PIN unless $BOARD
   <rect class="pin" x="#{PACKLEFT-$PINWIDTH}" y="#{top}" width="#{$PINWIDTH}" height="#{$PINHEIGHT}"/>
   <text class="label" x="#{PACKLEFT-$PINWIDTH-LABELPAD}" y="#{base+LABELBASE}" text-anchor="end">
     #{pin[1]}
@@ -125,7 +161,7 @@ END_PIN
 END_FUNCTION
     end
   else
-    $PINDESC += <<END_PIN
+    $PINDESC += <<END_PIN unless $BOARD
   <rect class="pin" x="#{PACKRIGHT}" y="#{top}" width="#{$PINWIDTH}" height="#{$PINHEIGHT}"/>
   <text class="pinno" x="#{PACKRIGHT-PINNOPAD}" y="#{base+PINNOBASE}" text-anchor="end">
     #{pin[0]}
@@ -136,7 +172,7 @@ END_FUNCTION
 END_PIN
     if pin[2] != ''
       $PINDESC += <<END_FUNCTION
-  <rect class="funbox" x="#{PACKRIGHT+$PINWIDTH+$LABELWIDTH}" y="#{top-FUNBOXTOP}"
+  <rect class="funbox" x="#{PACKRIGHT+$PINWIDTH+$LABELWIDTH+LABELPAD}" y="#{top-FUNBOXTOP}"
         width="#{$FUNCTIONWIDTH}" height="#{FUNBOXHEIGHT}" rx="#{FUNBOXROUND}"
         style="fill:#{COLOR[pin[2]][0]}"/>
   <text class="function" x="#{PACKRIGHT+$PINWIDTH+$LABELWIDTH+LABELPAD+FUNHALF}" y="#{base+LABELBASE}"
@@ -157,24 +193,58 @@ else
   </text>
 END_TITLE
 end
-print <<END_SVG
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 #{TOTALWIDTH} #{TOTALHEIGHT}">
+
+if $BOARD
+  $FONTS = <<END_BOARD_FONTS
+     .function { font-family:"Helvetica"; font-size:13px; text-anchor:middle }
+END_BOARD_FONTS
+else
+  $FONTS = <<END_IC_FONTS
+     .pinno    { font-family:"Courier"; font-size:12px }
+     .label    { font-family:"Helvetica"; font-size:18px }
+     .function { font-family:"Helvetica"; font-size:18px; text-anchor:middle }
+     .title    { font-family:"Helvetica-Bold"; font-size:20px; text-anchor:middle; writing-mode:tb; alignment-baseline:central }
+END_IC_FONTS
+end
+
+print <<END_SVG_HEADER
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 #{TOTALWIDTH} #{TOTALHEIGHT}">
   <defs>
   <style type="text/css"><![CDATA[
      .ic       { fill:#909090; stroke:#000000; stroke-width:2.0 }
      .notch    { fill:#a0a0a0; stroke:#000000; stroke-width:1.0 }
      .pin      { fill:#d0d0d0; stroke:#000000; stroke-width:1.0 }
-     .pinno    { font-family:"Courier"; font-size:12px }
-     .label    { font-family:"Helvetica"; font-size:18px }
-     .funbox   { stroke:black }
-     .function { font-family:"Helvetica"; font-size:18px; text-anchor:middle }
-     .title    { font-family:"Helvetica-Bold"; font-size:20px; text-anchor:middle; writing-mode:tb; alignment-baseline:central }
+#{$FONTS}     .funbox   { stroke:black }
      ]]>
   </style>
   </defs>
+END_SVG_HEADER
+
+if $BOARD
+  boardx = $FUNCTIONWIDTH+LABELPAD
+  boardy = PACKTOP
+  trans  = ""
+  if $BOARDROTATION=="90"
+    boardy -= $BOARDHEIGHT.to_f
+    trans   = <<END_ROT_90
+    transform="rotate(90, #{boardx}, #{PACKTOP})"
+END_ROT_90
+  end
+  print <<END_SVG_BOARD
+  <image xlink:href="#{$BOARD}"
+      x="#{boardx}" y="#{boardy}" width="#{$BOARDWIDTH}" height="#{$BOARDHEIGHT}" #{trans}/>
+END_SVG_BOARD
+else
+  print <<END_SVG_IC
   <rect class="ic" x="#{PACKLEFT}" y="#{PACKTOP}" width="#{PACKRIGHT-PACKLEFT}" height="#{PACKHEIGHT}"/>
   <path class="notch" d="M#{PACKLEFT+$PACKWIDTH*0.5-$PINWIDTH-$CIRCRADIUS},#{PACKTOP} a#{$CIRCRADIUS},#{$CIRCRADIUS} 0 0,0 #{2*$CIRCRADIUS},0"/>
+END_SVG_IC
+end
+
+print <<END_SVG_BODY
   #{$TITLE}
   #{$PINDESC}
 </svg>
-END_SVG
+END_SVG_BODY

Tools/updateTargets

@@ -1,7 +1,7 @@
 #!/usr/bin/ruby
 
 NAME = {
-  'arduino' => 'Arduino',
+  'uno' => 'Arduino Uno',
   'micro'   => 'Arduino Leonardo / Micro',
   'digispark'=> 'Digispark',
   'icsp'    => 'ICSP Header'

doc/Connection.html

@@ -29,8 +29,8 @@ <h2>Target Connection Diagrams</h2>
     <option value="hvpp">HVPP</option>
   </select>
   <strong>Programmer:</strong><select name="programmer" onchange="selectProgrammer()">
-    <option value="arduino">Standard Arduino</option>
-    <option value="micro">Leonardo / Micro</option>
+    <option value="uno">Arduino Uno</option>
+    <option value="micro">Arduino Leonardo / Micro</option>
   </select>
   <span style="float:right">
   <strong>Target:</strong><select name="target" onchange="selectTarget()">
@@ -42,12 +42,12 @@ <h2>Target Connection Diagrams</h2>
 <div class=conn style="float:left">
 <p class=conn>Programmer</p>
 <p style="height:5mm"></p>
-<img name="programmerDiagram" src="" onerror="imageFallback(this)">
+<object id="programmerDiagram" type="image/svg+xml" data=""></object>
 </div>
 <div class=conn>
 <p class=conn>Target</p>
 <p style="height:5mm"></p>
-<img name="targetDiagram" src="" onerror="imageFallback(this)">
+<object id="targetDiagram" type="image/svg+xml" data=""></object>
 </div>
 
 <p style="clear:both; height:5mm"></p>
@@ -56,8 +56,8 @@ <h2>Target Connection Diagrams</h2>
 <h4 class=mcu>Arduino Uno/Diecimila/Duemilanove</h4>
 
 <div class=conn>
-	<p class=conn>ISP</p>
-	<img src="img/arduino_isp.svg">
+  <p class=conn>ISP</p>
+  <object type="image/svg+xml" data="img/uno_isp.svg"></object>
 </div>
 
 <p>An Arduino can be used to reprogram another Arduino.</p>