From 328a44ddf71e00bb019a57b5dc43deefc5abb8d9 Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Wed, 12 Jan 2022 15:03:52 -0600 Subject: [PATCH] feat(hx711): add hx711 load cell amp * Adds HX711 Issue #101 * Changes from PR comments * Fixes more `Hx711Element` case to `HX711Element` * Adds Load sensors and Gauge Pressure sensors to board HX711 board * Updates HX711 so it resizes when different sensors are active * HX711 Element, removes unused code and makes width and height not user selectable. * HX711 Element changes text to not be selectable. * HX711 Element, Removes more unused code * HX711 Element, changed default type to 50kg * HX711 Element changes width/height to number * HX711 Element, extracts sensor type to function with default. Co-authored-by: Chris Wilson <> --- src/hx711-element.stories.ts | 19 ++ src/hx711-element.ts | 423 +++++++++++++++++++++++++++++++++++ src/index.ts | 1 + src/react-types.ts | 2 + 4 files changed, 445 insertions(+) create mode 100644 src/hx711-element.stories.ts create mode 100644 src/hx711-element.ts diff --git a/src/hx711-element.stories.ts b/src/hx711-element.stories.ts new file mode 100644 index 0000000..67ce085 --- /dev/null +++ b/src/hx711-element.stories.ts @@ -0,0 +1,19 @@ +import { html } from 'lit'; +import './hx711-element'; + +export default { + title: 'HX711', + component: 'wokwi-hx711', +}; + +const Template = ({ width, height, type = '50kg' }) => + html``; + +export const loadCell50kg = Template.bind({}); +loadCell50kg.args = { type: '50kg', width: 580, height: 430 }; + +export const loadCell5kg = Template.bind({}); +loadCell5kg.args = { type: '5kg', width: 507, height: 269 }; + +export const gaugePressure = Template.bind({}); +gaugePressure.args = { type: 'gauge', width: 509, height: 200 }; diff --git a/src/hx711-element.ts b/src/hx711-element.ts new file mode 100644 index 0000000..70b407e --- /dev/null +++ b/src/hx711-element.ts @@ -0,0 +1,423 @@ +import { html, LitElement, svg } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { ElementPin, GND, VCC } from './pin'; + +@customElement('wokwi-hx711') +export class HX711Element extends LitElement { + @property() type: '5kg' | '50kg' | 'gauge' | undefined; + + readonly pinInfo: ElementPin[] = [ + { name: 'VCC', y: 53, x: 7, number: 1, signals: [VCC()] }, + { name: 'DT', y: 35, x: 7, number: 2, signals: [] }, + { name: 'SCK', y: 44, x: 7, number: 3, signals: [] }, + { name: 'GND', y: 25.5, x: 7, number: 4, signals: [GND()] }, + ]; + + get dimension() { + switch (this.type) { + case '50kg': + return { width: 580, height: 430 }; + case '5kg': + return { width: 507, height: 269 }; + case 'gauge': + return { width: 509, height: 200 }; + default: + return { width: 580, height: 430 }; + } + } + + renderSensor() { + switch (this.type) { + case 'gauge': + return svg` + + + + + + + + + + + GP + + `; + case '5kg': + return svg` + + + + + + + + + + 5kg + + `; + case '50kg': + default: + return svg` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + A- + E- + E+ + A+ + + `; + } + } + + render() { + const { width, height } = this.dimension; + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GND + DT + SCK + VCC + E- + E+ + B- + B+ + A- + A+ + Load Cell Amp + HX711 + + + + + + + + + + + + + + + + + + + + + + + + + HX711 + + + + ${this.renderSensor()} + + + `; + } +} diff --git a/src/index.ts b/src/index.ts index 5e95a65..11b4a8f 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 { HX711Element } from './hx711-element'; diff --git a/src/react-types.ts b/src/react-types.ts index 4d9314a..d01088b 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 { HX711Element } from './hx711-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-hx711': WokwiElement; } } }