Add Arduino Nano Element

[urish]

The board needs to include at least the male pin headers, the Mini-USB connector, 4 LEDs (TX, RX, Power, L), the microcontroller itself, and the ICSP programmer pins (can be seen on the right side of the board). Nice to have elements: reset button (which should also emit reset-press/reset-release events, similar to the pushbutton element.

As a reference, check out the implementation of the Arduino Uno Element. You can reuse most of the part, especially the pattern for drawing the pin headers, USB/power jacks, LEDs, and the ICSP programmer pins.

Reference images:

License: CC0

License: CC-BY-SA

Mechanical drawings:

[sutaburosu]

@urish I'm a total noob to Node, Typescript, SVG, graphic design and webdev in general. I learned a huge amount from your tutorial videos and yesterday's commit adding the Mega. There's no rush for this, right? I think I can do this, but it will take me a while. I may need help later getting the reset button to work.

My only progress so far is this pattern for unsoldered pins. Good enough?

import { svg } from 'lit-element';

export const pinsPlatedThroughHolePattern = svg`
  <defs>
    <filter id="solderPlate" style="color-interpolation-filters:sRGB;">
      <feTurbulence result="r0" type="fractalNoise" baseFrequency="1" numOctaves="3"/>
      <feComposite  result="r1" in="r0" in2="SourceGraphic" operator="arithmetic"
        k1="0.6" k2="0.6" k3="1.2" k4="0.25"/>
      <feBlend      result="r2" in="r1" in2="SourceGraphic" mode="luminosity"/>
      <feComposite  result="r3" in="r2" in2="SourceGraphic" operator="in"/>
    </filter>
  </defs>
  <pattern id="pins-pth" width="2.54" height="2.54" patternUnits="userSpaceOnUse">
    <circle r="0.750" cx="1.27" cy="1.27" style="fill:#323232; filter:url(#solderPlate)"/>
    <circle r="0.375" cx="1.27" cy="1.27" style="fill:#ffffff"/>
  </pattern>
  <pattern id="pins-gold-pth" width="2.54" height="2.54" patternUnits="userSpaceOnUse">
    <circle r="0.750" cx="1.27" cy="1.27" style="fill:#484800; filter:url(#solderPlate)"/>
    <circle r="0.375" cx="1.27" cy="1.27" style="fill:#ffffff"/>
  </pattern>
`;