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.

[urish]

Thanks Chris!

What part is this design based on? It looks different than the part in #101, and there's another row of pins not present in the original one. I see you mentioned you made this one generic, how does that work?

Some notes regarding the visual style:

1. We use plain colors for the board itself (it looks like you used a gradient)
2. The holes should be transparent (they should actually be holes in the shape), so that it looks good on either light or dark background
3. We usually avoid drawing the on-board traces (to keep the SVG small). But if we do draw them, the contrast is lower (e.g. here)

Example of an existing part which uses a green board: https://elements.wokwi.com/?path=/story/franzininho--default

Other than that, I left some comments on directly on the code

[yepher]

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

[urish]

Shouldn't it be DOUT?

[yepher]

I copied the board from this one I have and use. it has DT but glad to make the DOUT

[urish]

Looking at google images, it's either DT or DAT. So we can keep DT - but let's make sure the name in pinInfo matches

[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:
   

   wokwi-elements/src/servo-element.ts

   Line 16 in 9790133

   @property() horn: 'single' | 'double' | 'cross' = 'single';

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.

[urish]

Thanks for all the changes. We're getting there!

[urish]

can be removed - there's no "angle" for the user to control

[urish]

Did you forget about this one?

[urish]

Please remove

[urish]

width/height shouldn't be provided by the user. Instead, they should be derived from the type.

One way to do this would be to introduce a getter, e.g.:

get dimensions() {
  switch (this.type) { 
    case '5kg': return {width: '58mm', height:'43mm'};
    ...
  }
}

Then, in render, you could do

 const { width, height } = this.dimensions

[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]

why not return width/height as numbers instead of strings? then you can remove the conversion to integer in render()

[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!