fix: align pins position to grid

wokwi · Nov 24, 2022 · f73c8f8 · f73c8f8
1 parent 6f5b7fe
commit f73c8f8
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 32 deletions.
diff --git a/src/7segment-element.ts b/src/7segment-element.ts
@@ -134,7 +134,7 @@ export class SevenSegmentElement extends LitElement {
     const cols = Math.ceil(numPins / 2);
     return {
       startX: (12.55 * digits - cols * 2.54) / 2,
-      bottomY: this.pins === 'extend' ? 21 : 17,
+      bottomY: this.pins === 'extend' ? 21 : 18,
       cols,
     };
   }
@@ -191,7 +191,7 @@ export class SevenSegmentElement extends LitElement {
   render() {
     const { digits, colon, pins, yOffset } = this;
     const width = 12.55 * digits;
-    const height = pins === 'extend' ? 23 : 19;
+    const height = pins === 'extend' ? 23 : 22;
     const digitShapes = [];
     for (let i = 0; i < digits; i++) {
       digitShapes.push(this.renderDigit(3.5 + i * 12.7, i * 8));
@@ -211,7 +211,7 @@ export class SevenSegmentElement extends LitElement {
               : svg`<circle cx="1.27" cy="1" r=0.5 fill="#aaa" />`}
           </pattern>
         </defs>
-        <rect x="0" y="${yOffset}" width="${width}" height="19" />
+        <rect x="0" y="${yOffset}" width="${width}" height="20.5" />
         ${digitShapes}<!-- -->
         ${colon ? this.renderColon() : null}<!-- -->
         ${pins !== 'none' ? this.renderPins() : null}

diff --git a/src/buzzer-element.ts b/src/buzzer-element.ts
@@ -14,8 +14,8 @@ export class BuzzerElement extends LitElement {
   @property() hasSignal = false;
 
   readonly pinInfo: ElementPin[] = [
-    { name: '1', x: 30, y: 82, signals: [] },
-    { name: '2', x: 34, y: 82, signals: [] },
+    { name: '1', x: 27, y: 84, signals: [] },
+    { name: '2', x: 37, y: 84, signals: [] },
   ];
 
   static get styles() {
@@ -90,8 +90,8 @@ export class BuzzerElement extends LitElement {
           viewBox="0 0 17 20"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="m8 16.5v3.5" fill="none" stroke="#000" stroke-width=".5" />
-          <path d="m9 16.5v3.5" fill="#f00" stroke="#f00" stroke-width=".5" />
+          <path d="m7.23 16.5v3.5" fill="none" stroke="#000" stroke-width=".5" />
+          <path d="m9.77 16.5v3.5" fill="#f00" stroke="#f00" stroke-width=".5" />
           <g stroke="#000">
             <g>
               <ellipse cx="8.5" cy="8.5" rx="8.15" ry="8.15" fill="#1a1a1a" stroke-width=".7" />

diff --git a/src/neopixel-element.ts b/src/neopixel-element.ts
@@ -9,10 +9,10 @@ export class NeoPixelElement extends LitElement {
   @property() b = 0;
 
   readonly pinInfo: ElementPin[] = [
-    { name: 'VDD', y: 3.5, x: 0, number: 1, signals: [VCC()] },
-    { name: 'DOUT', y: 15.5, x: 0, number: 2, signals: [] },
-    { name: 'VSS', y: 15.5, x: 22, number: 3, signals: [{ type: 'power', signal: 'GND' }] },
-    { name: 'DIN', y: 3.5, x: 22, number: 4, signals: [GND()] },
+    { name: 'VDD', y: 3.5, x: 1, number: 1, signals: [VCC()] },
+    { name: 'DOUT', y: 14, x: 1, number: 2, signals: [] },
+    { name: 'VSS', y: 14, x: 21, number: 3, signals: [{ type: 'power', signal: 'GND' }] },
+    { name: 'DIN', y: 3.5, x: 21, number: 4, signals: [GND()] },
   ];
 
   render() {
@@ -49,10 +49,10 @@ export class NeoPixelElement extends LitElement {
           <feGaussianBlur stdDeviation="0.5" />
         </filter>
         <rect x=".33308" y="0" width="5" height="5" fill="${background}" />
-        <rect x=".016709" y=".4279" width=".35114" height=".9" fill="#eaeaea" />
-        <rect x="0" y="3.6518" width=".35114" height=".9" fill="#eaeaea" />
-        <rect x="5.312" y="3.6351" width=".35114" height=".9" fill="#eaeaea" />
-        <rect x="5.312" y=".3945" width=".35114" height=".9" fill="#eaeaea" />
+        <rect x="0" y=".5" width=".35" height=".9" fill="#c3c2c3" />
+        <rect x="0" y="3.1" width=".35" height=".9" fill="#c3c2c3" />
+        <rect x="5.3" y="3.1" width=".35" height=".9" fill="#c3c2c3" />
+        <rect x="5.3" y=".5" width=".35" height=".9" fill="#c3c2c3" />
         <circle cx="2.8331" cy="2.5" r="2.1" fill="#ddd" />
         <circle cx="2.8331" cy="2.5" r="1.7325" fill="#e6e6e6" />
         <g fill="#bfbfbf">

diff --git a/src/potentiometer-element.ts b/src/potentiometer-element.ts
@@ -26,8 +26,8 @@ export class PotentiometerElement extends LitElement {
 
   readonly pinInfo: ElementPin[] = [
     { name: 'GND', x: 29, y: 68.5, number: 1, signals: [{ type: 'power', signal: 'GND' }] },
-    { name: 'SIG', x: 37, y: 68.5, number: 2, signals: [analog(0)] },
-    { name: 'VCC', x: 44.75, y: 68.5, number: 3, signals: [{ type: 'power', signal: 'VCC' }] },
+    { name: 'SIG', x: 39, y: 68.5, number: 2, signals: [analog(0)] },
+    { name: 'VCC', x: 49, y: 68.5, number: 3, signals: [{ type: 'power', signal: 'VCC' }] },
   ];
 
   static get styles() {
@@ -126,19 +126,11 @@ export class PotentiometerElement extends LitElement {
           fill="#e4e8eb"
           stroke-width=".15"
         />
-        <rect
-          x="6.6"
-          y="17"
-          width="6.5"
-          height="2"
-          fill-opacity="0"
-          stroke="#fff"
-          stroke-width=".30"
-        />
+        <rect x="6" y="17" width="8" height="2" fill-opacity="0" stroke="#fff" stroke-width=".30" />
         <g stroke-width=".15">
           <text x="6.21" y="16.6">GND</text>
-          <text x="8.75" y="16.63">SIG</text>
-          <text x="11.25" y="16.59">VCC</text>
+          <text x="9.2" y="16.63">SIG</text>
+          <text x="11.5" y="16.59">VCC</text>
         </g>
         <g fill="#fff" stroke-width=".15">
           <ellipse cx="1.68" cy="1.81" rx=".99" ry=".96" />
@@ -148,8 +140,8 @@ export class PotentiometerElement extends LitElement {
         </g>
         <g fill="#b3b1b0" stroke-width=".15">
           <ellipse cx="7.68" cy="18" rx=".61" ry=".63" />
-          <ellipse cx="9.75" cy="18" rx=".61" ry=".63" />
-          <ellipse cx="11.87" cy="18" rx=".61" ry=".63" />
+          <ellipse cx="10.22" cy="18" rx=".61" ry=".63" />
+          <ellipse cx="12.76" cy="18" rx=".61" ry=".63" />
         </g>
         <ellipse cx="9.95" cy="8.06" rx="6.60" ry="6.58" fill="#c3c2c3" stroke-width=".15" />
         <rect id="rotating" x="10" y="2" width=".42" height="3.1" stroke-width=".15" />

diff --git a/src/slide-potentiometer-element.ts b/src/slide-potentiometer-element.ts
@@ -16,7 +16,7 @@ export class SlidePotentiometerElement extends LitElement {
   get pinInfo(): ElementPin[] {
     return [
       { name: 'VCC', x: 1, y: 43, number: 1, signals: [{ type: 'power', signal: 'VCC' }] },
-      { name: 'SIG', x: 1, y: 66.5, number: 2, signals: [analog(0)] },
+      { name: 'SIG', x: 1, y: 63, number: 2, signals: [analog(0)] },
       {
         name: 'GND',
         x: 93.6 + this.travelLength * mmToPix,
@@ -121,7 +121,7 @@ export class SlidePotentiometerElement extends LitElement {
         <g fill="#ccc">
           <rect x="0" y="11" width="5" height="0.75" />
           <rect x="${travelLength + 20}" y="11" width="5" height="0.75" />
-          <rect x="0" y="17.25" width="5" height="0.75" />
+          <rect x="0" y="16.25" width="5" height="0.75" />
         </g>
         <g transform="translate(5 5)">
           <!-- Body -->