add pinInfo getter to elements

src/arduino-uno-element.ts

@@ -1,5 +1,6 @@
 import { customElement, html, LitElement, property, svg } from 'lit-element';
 import { pinsFemalePattern } from './patterns/pins-female';
+import { analog, ElementPin, i2c, spi, usart } from './pin';
 
 @customElement('wokwi-arduino-uno')
 export class ArduinoUnoElement extends LitElement {
@@ -8,6 +9,40 @@ export class ArduinoUnoElement extends LitElement {
   @property() ledTX = false;
   @property() ledPower = false;
 
+  readonly pinInfo: ElementPin[] = [
+    { name: 'A5.2', x: 87, y: 9, signals: [analog(5), i2c('SCL')] },
+    { name: 'A4.2', x: 97, y: 9, signals: [analog(4), i2c('SDA')] },
+    { name: 'AREF', x: 106, y: 9, signals: [] },
+    { name: 'GND.1', x: 115.5, y: 9, signals: [{ type: 'power', signal: 'GND' }] },
+    { name: '13', x: 125, y: 9, signals: [spi('SCK')] },
+    { name: '12', x: 134.5, y: 9, signals: [spi('MISO')] },
+    { name: '11', x: 144, y: 9, signals: [spi('MOSI'), { type: 'pwm' }] },
+    { name: '10', x: 153.5, y: 9, signals: [spi('SS'), { type: 'pwm' }] },
+    { name: '9', x: 163, y: 9, signals: [{ type: 'pwm' }] },
+    { name: '8', x: 173, y: 9, signals: [] },
+    { name: '7', x: 189, y: 9, signals: [] },
+    { name: '6', x: 198.5, y: 9, signals: [{ type: 'pwm' }] },
+    { name: '5', x: 208, y: 9, signals: [{ type: 'pwm' }] },
+    { name: '4', x: 217.5, y: 9, signals: [] },
+    { name: '3', x: 227, y: 9, signals: [{ type: 'pwm' }] },
+    { name: '2', x: 236.5, y: 9, signals: [] },
+    { name: '1', x: 246, y: 9, signals: [usart('TX')] },
+    { name: '0', x: 255.5, y: 9, signals: [usart('RX')] },
+    { name: 'IOREF', x: 131, y: 191.5, signals: [] },
+    { name: 'RESET', x: 140.5, y: 191.5, signals: [] },
+    { name: '3.3V', x: 150, y: 191.5, signals: [{ type: 'power', signal: 'VCC', voltage: 3.3 }] },
+    { name: '5V', x: 160, y: 191.5, signals: [{ type: 'power', signal: 'VCC', voltage: 5 }] },
+    { name: 'GND.2', x: 169.5, y: 191.5, signals: [{ type: 'power', signal: 'GND' }] },
+    { name: 'GND.3', x: 179, y: 191.5, signals: [{ type: 'power', signal: 'GND' }] },
+    { name: 'VIN', x: 188.5, y: 191.5, signals: [{ type: 'power', signal: 'VCC' }] },
+    { name: 'A0', x: 208, y: 191.5, signals: [analog(0)] },
+    { name: 'A1', x: 217.5, y: 191.5, signals: [analog(1)] },
+    { name: 'A2', x: 227, y: 191.5, signals: [analog(2)] },
+    { name: 'A3', x: 236.5, y: 191.5, signals: [analog(3)] },
+    { name: 'A4', x: 246, y: 191.5, signals: [analog(4), i2c('SCL')] },
+    { name: 'A5', x: 255.5, y: 191.5, signals: [analog(5), i2c('SDA')] },
+  ];
+
   render() {
     const { ledPower, led13, ledRX, ledTX } = this;
     return html`

src/led-element.ts

@@ -1,4 +1,5 @@
 import { css, customElement, html, LitElement, property } from 'lit-element';
+import { ElementPin } from './pin';
 
 const lightColors: { [key: string]: string } = {
   red: '#ff8080',
@@ -17,6 +18,11 @@ export class LEDElement extends LitElement {
   @property() lightColor: string | null = null;
   @property() label = '';
 
+  readonly pinInfo: ElementPin[] = [
+    { name: 'A', x: 24, y: 42, signals: [], description: 'Anode' },
+    { name: 'C', x: 16, y: 42, signals: [], description: 'Cathode' },
+  ];
+
   static get styles() {
     return css`
       :host {

src/pin.ts

@@ -0,0 +1,72 @@
+export type PinSignalInfo =
+  | {
+      type: 'i2c';
+      signal: 'SDA' | 'SCL';
+      bus: number;
+    }
+  | {
+      type: 'spi';
+      signal: 'SCK' | 'MOSI' | 'MISO' | 'SS';
+      bus: number;
+    }
+  | {
+      type: 'usart';
+      signal: 'RX' | 'TX';
+      bus: number;
+    }
+  | {
+      type: 'power';
+      signal: 'GND' | 'VCC';
+      voltage?: number;
+    }
+  | {
+      type: 'pwm';
+    }
+  | {
+      type: 'analog';
+      channel?: number;
+    };
+
+export interface ElementPin {
+  /**
+   * A name that uniquely identifies the pin, e.g. `GND` or `VCC`.
+   * Pins that are connected internally must have the same name prefix, followed by a single dot,
+   * and a unique suffix (e.g. `GND.1` and `GND.2`).
+   */
+  name: string;
+
+  /** The x-coordinate of the pin, relative to the element's origin */
+  x: number;
+
+  /** The y-coordinate of the pin, relative to the element's origin */
+  y: number;
+
+  /** The signals for this pin. Leave empty for generic pins without a designated signals. **/
+  signals: PinSignalInfo[];
+
+  /**
+   * Optional pin description
+   */
+  description?: string;
+}
+
+/** Helper function for creating PinSignalInfo objects */
+export const analog = (channel: number): PinSignalInfo => ({ type: 'analog', channel });
+
+export const i2c = (signal: 'SCL' | 'SDA', bus = 0): PinSignalInfo => ({
+  type: 'i2c',
+  signal,
+  bus,
+});
+
+export const spi = (signal: 'SCK' | 'MOSI' | 'MISO' | 'SS', bus = 0): PinSignalInfo => ({
+  type: 'spi',
+  signal,
+  bus,
+});
+
+export const usart = (signal: 'RX' | 'TX', bus = 0): PinSignalInfo => ({
+  type: 'usart',
+  signal,
+  bus,
+});

src/pushbutton-element.ts

@@ -1,4 +1,5 @@
 import { css, customElement, html, LitElement, property } from 'lit-element';
+import { ElementPin } from './pin';
 
 const SPACE_KEY = 32;
 
@@ -7,6 +8,13 @@ export class PushbuttonElement extends LitElement {
   @property() color = 'red';
   @property() pressed = false;
 
+  readonly pinInfo: ElementPin[] = [
+    { name: '1.l', x: 2, y: 9, signals: [] },
+    { name: '2.l', x: 2, y: 36, signals: [] },
+    { name: '1.r', x: 65, y: 36, signals: [] },
+    { name: '2.r', x: 65, y: 9, signals: [] },
+  ];
+
   static get styles() {
     return css`
       button {

src/ssd1306-element.ts

@@ -1,5 +1,6 @@
 // Reference: https://cdn-learn.adafruit.com/assets/assets/000/036/494/original/lcds___displays_fabprint.png?1476374574
 import { customElement, html, LitElement, property, SVGTemplateResult } from 'lit-element';
+import { ElementPin, i2c } from './pin';
 
 type CanvasContext = CanvasRenderingContext2D | null | undefined;
 @customElement('wokwi-ssd1306')
@@ -19,6 +20,17 @@ export class SSD1306Element extends LitElement {
   private canvas: HTMLCanvasElement | null | undefined = void 0;
   private ctx: CanvasContext = null;
 
+  readonly pinInfo: ElementPin[] = [
+    { name: 'DATA', x: 36.5, y: 12.5, signals: [i2c('SDA')] },
+    { name: 'CLK', x: 45.5, y: 12.5, signals: [i2c('SCL')] },
+    { name: 'DC', x: 54.5, y: 12.5, signals: [] },
+    { name: 'RST', x: 64.5, y: 12.5, signals: [] },
+    { name: 'CS', x: 74.5, y: 12.5, signals: [] },
+    { name: '3V3', x: 83.5, y: 12.5, signals: [{ type: 'power', signal: 'VCC', voltage: 3.3 }] },
+    { name: 'VIN', x: 93.5, y: 12.5, signals: [{ type: 'power', signal: 'VCC' }] },
+    { name: 'GND', x: 103.5, y: 12, signals: [{ type: 'power', signal: 'GND' }] },
+  ];
+
   constructor() {
     super();
     this.imageData = new ImageData(this.screenWidth, this.screenHeight);