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`
+
+
+ `;
+ }
+}
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;
}
}
}