Adds HX711 Issue #101

[yepher]

This adds the HX711 for Issue #101

The issue mentions it is for gauge pressure sensor but this is also used for load cells and strain gauges so I made it generic.

[yepher]

I believe I have all the changes requested in the PR now.

[urish]

Thanks! One more suggestion:

Right now, it looks a little empty, so I thought what we could use the space for.

How about adding "HX711" as a silk screen print on the board itself?

Perhaps also Load Cell Amp, borrowing from:

Then, we still have the question of the unpopulated pins that connect to the load cells. I think it'll make most sense for now to draw the load cells connected directly to them. WDYT?

[yepher]

Its empty look is why I originally put some traces :) I will add to the Silkscreen as suggested.

I will add the 50kg Load Cells to the drawing

[yepher]

Added the sensors as requested and fixed text and updated silk screen.

[urish]

Two more requests:

1. sensorType - let's make the values "5kg", "10kg" and "gauge". less margin for errors (e.g. uppercase vs lowercase). Also, let's make the type of the property more specific than string, e.g. as in the servo element: https://github.com/wokwi/wokwi-elements/blob/9790133c7ac9a2f77eb66a2beb2aa26ceadd1937/src/servo-element.ts#L16

2. The story is using the old format. It still works, but Storybook may deprecate it at some point. You can find examples of the new format in the Stepper motor element story file (or any element added within the last ~6 months)

[yepher]

Added requested changes for resizing view and using newer storyboard format.

[yepher]

Made the requested changes.

[urish]

Thank you!

I did some quick integration test with Wokwi. The only thing that came up - what do we do when the type is invalid? e.g.

Right now, the element gets the dimensions of the 50kg sensor, but no sensor is drawn. How about always falling back to the 50kg type if there's no valid type value?

[yepher]

Oops, I meant to always fall back to 50kg

[urish]

As far as I can see, the last change only sets the default for storybook, but an invalid value for "type" passed to the element would still result in an empty space.

One way to resolve this in a nice way would be to add a renderSensor() method that will return the relevant svg code based on the value of type, with a "default" fallback case. Something along the lines of:

renderSensor() {
  switch (this.type) {
     case '5kg':  return svg`<tags here>`;
     case 'guage': return svg`<tags here>`;
     case '50kg':
     default: return svg`<tags here>`;
  }
}

Then, in render, you can just replace the whole section with ${this.renderSensor()}

I hope this explanation makes sense

[urish]

Hooray!