From 3487e28d8865557457f869a56602d3431220a877 Mon Sep 17 00:00:00 2001 From: Chris Wilson <> Date: Sun, 9 Jan 2022 19:00:58 -0600 Subject: [PATCH] Creates FTDI Element --- src/ftdi-element.stories.ts | 12 ++ src/ftdi-element.ts | 304 ++++++++++++++++++++++++++++++++++++ src/index.ts | 1 + src/react-types.ts | 2 + 4 files changed, 319 insertions(+) create mode 100644 src/ftdi-element.stories.ts create mode 100644 src/ftdi-element.ts diff --git a/src/ftdi-element.stories.ts b/src/ftdi-element.stories.ts new file mode 100644 index 0000000..4fe78e7 --- /dev/null +++ b/src/ftdi-element.stories.ts @@ -0,0 +1,12 @@ +import { html } from 'lit'; +import './ftdi-element'; + +export default { + title: 'FTDI', + component: 'wokwi-ftdi', +}; + +const Template = () => html``; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/src/ftdi-element.ts b/src/ftdi-element.ts new file mode 100644 index 0000000..fe2bf03 --- /dev/null +++ b/src/ftdi-element.ts @@ -0,0 +1,304 @@ +import { html, LitElement, svg } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { ElementPin, GND, VCC } from './pin'; + +@customElement('wokwi-ftdi') +export class FTDIElement extends LitElement { + readonly pinInfo: ElementPin[] = [ + { name: 'GND', y: 9, x: 9, number: 1, signals: [GND()] }, + { name: 'CTS', y: 18, x: 9, number: 2, signals: [] }, + { name: 'VCC', y: 27, x: 9, number: 3, signals: [VCC()] }, + { name: 'TX', y: 36, x: 9, number: 4, signals: [] }, + { name: 'TX', y: 45, x: 9, number: 5, signals: [] }, + { name: 'RTS', y: 55, x: 9, number: 6, signals: [] }, + ]; + + render() { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GND + CTS + VCC + TX + RX + RTS + GREEN + BLACK + + + FTDI Friend + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + =FTDI + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } +} diff --git a/src/index.ts b/src/index.ts index 5e95a65..127c1ae 100644 --- a/src/index.ts +++ b/src/index.ts @@ -48,3 +48,4 @@ export { LedBarGraphElement } from './led-bar-graph-element'; export { MicrosdCardElement } from './microsd-card-element'; export { DipSwitch8Element } from './dip-switch-8-element'; export { StepperMotorElement } from './stepper-motor-element'; +export { FTDIElement } from './ftdi-element'; diff --git a/src/react-types.ts b/src/react-types.ts index 4d9314a..2c8e18e 100644 --- a/src/react-types.ts +++ b/src/react-types.ts @@ -47,6 +47,7 @@ import { LedBarGraphElement } from './led-bar-graph-element'; import { MicrosdCardElement } from './microsd-card-element'; import { DipSwitch8Element } from './dip-switch-8-element'; import { StepperMotorElement } from './stepper-motor-element'; +import { FTDIElement } from './ftdi-element'; type WokwiElement = Partial & React.ClassAttributes; @@ -99,6 +100,7 @@ declare global { 'wokwi-microsd-card': WokwiElement; 'wokwi-dip-switch-8': WokwiElement; 'wokwi-stepper-motor': WokwiElement; + 'wokwi-ftdi': WokwiElement; } } }