Update Quantizer note positions.

res/Quantizer.svg

@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="45"
    height="380"
    viewBox="0 0 45 380"
    version="1.1"
-   id="svg93"
-   sodipodi:docname="QNT.svg"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+   id="svg91"
+   sodipodi:docname="Quantizer.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
   <metadata
-     id="metadata97">
+     id="metadata95">
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -34,21 +34,22 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     id="namedview95"
+     inkscape:window-width="1600"
+     inkscape:window-height="882"
+     id="namedview93"
      showgrid="false"
-     inkscape:zoom="1.7566021"
-     inkscape:cx="-194.12266"
-     inkscape:cy="194.26707"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
+     inkscape:zoom="2.9110525"
+     inkscape:cx="53.245346"
+     inkscape:cy="134.31568"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
-     inkscape:current-layer="ae78a0be-9002-435a-8d16-aab01d8766c8" />
+     inkscape:current-layer="a25efd1d-a885-4bac-a53e-4d8304a6454b"
+     inkscape:pagecheckerboard="0" />
   <defs
      id="defs7">
     <linearGradient
-       id="b1997fce-60ec-4a7c-8ab0-95fd4bfc83d1"
+       id="a5fe35b8-2a0b-471b-b722-4d58f9c99033"
        x1="22.5"
        x2="22.5"
        y2="380"
@@ -64,17 +65,17 @@
     </linearGradient>
   </defs>
   <g
-     id="b27b1ab7-3b64-4405-a924-b15369712d38"
+     id="af75473a-6024-4792-b7ec-01a109e39b0d"
      data-name="FND BG">
     <rect
        x="0.00001"
        width="44.99997"
        height="380"
-       id="rect9"
-       fill="url(#b1997fce-60ec-4a7c-8ab0-95fd4bfc83d1)" />
+       fill="url(#a5fe35b8-2a0b-471b-b722-4d58f9c99033)"
+       id="rect9" />
   </g>
   <g
-     id="fbb375c5-8d23-4a7e-8ca6-87e4865cda1f"
+     id="e5fd58d1-7c06-4a76-a01a-7e0b353314b6"
      data-name="FND GRAPH">
     <g
        id="g20">
@@ -148,108 +149,109 @@
     </g>
   </g>
   <g
-     id="ac7f55b3-2f7c-43bb-ac8f-29cf24141823"
+     id="fe6faec3-92c4-47c6-acc4-3d3222392d65"
      data-name="FND TXT">
     <g
        id="g43">
       <path
          d="M11.13867,212.773v-.0166a2.9937,2.9937,0,0,1,3.06348-3.02149,2.96607,2.96607,0,0,1,3.04687,3.00489v.0166a2.994,2.994,0,0,1-3.06347,3.02148A2.96578,2.96578,0,0,1,11.13867,212.773Zm5.03321,0v-.0166a2.00151,2.00151,0,0,0-1.98633-2.07813,1.9739,1.9739,0,0,0-1.96973,2.06153v.0166a1.99441,1.99441,0,0,0,1.98633,2.06982A1.96687,1.96687,0,0,0,16.17188,212.773Z"
-         id="path35"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path35" />
       <path
          d="M18.67871,210.35254a.50992.50992,0,0,1,.51758-.51758h3.40527a.46753.46753,0,1,1,0,.93506H19.70508v1.59424h2.52148a.46729.46729,0,0,1,0,.93457H19.70508v1.91162a.5132.5132,0,0,1-1.02637,0Z"
-         id="path37"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path37" />
       <path
          d="M24.06348,215.02686a.4836.4836,0,0,1-.2002-.39258.49747.49747,0,0,1,.78516-.38379,2.53169,2.53169,0,0,0,1.63574.60107c.63379,0,1.03516-.30078,1.03516-.73486v-.0166c0-.417-.23438-.64258-1.31934-.89307-1.24316-.30029-1.94434-.66748-1.94434-1.74414v-.01709a1.78734,1.78734,0,0,1,1.99512-1.69434,3.21488,3.21488,0,0,1,1.85254.543.46214.46214,0,0,1,.22559.40869.4778.4778,0,0,1-.48438.47559.50044.50044,0,0,1-.26758-.07471,2.42357,2.42357,0,0,0-1.34375-.44238c-.60058,0-.95117.30859-.95117.69238v.01709c0,.45069.26758.65088,1.39356.918,1.23535.3003,1.87011.74268,1.87011,1.71094v.0166c0,1.09375-.85937,1.74463-2.08691,1.74463A3.63978,3.63978,0,0,1,24.06348,215.02686Z"
-         id="path39"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path39" />
       <path
          d="M31.12891,210.78662H29.71a.47583.47583,0,0,1,0-.95166H33.5918a.47592.47592,0,0,1,0,.95166H32.16406v4.42383a.51765.51765,0,0,1-1.03515,0Z"
-         id="path41"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path41" />
     </g>
     <g
        id="g51">
       <path
          d="M8.7627,23.93262v-.02539a4.5294,4.5294,0,0,1,4.667-4.5293,4.48775,4.48775,0,0,1,4.64258,4.50439v.02491a4.493,4.493,0,0,1-.77637,2.51513l.376.313a.94463.94463,0,0,1,.35058.72559.90258.90258,0,0,1-1.53906.65039l-.47559-.42529a4.77326,4.77326,0,0,1-2.60254.75048A4.48735,4.48735,0,0,1,8.7627,23.93262Zm4.55468.98828a.9081.9081,0,0,1,.90137-.91358.88627.88627,0,0,1,.6377.26319l.96386.86328a3.08468,3.08468,0,0,0,.23731-1.20117v-.02539a2.661,2.661,0,0,0-2.65235-2.75244,2.61944,2.61944,0,0,0-2.62793,2.72753v.02491a2.66144,2.66144,0,0,0,2.65235,2.75293,2.633,2.633,0,0,0,1.15136-.2378l-.91308-.77588A.94536.94536,0,0,1,13.31738,24.9209Z"
-         id="path45"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path45" />
       <path
          d="M19.99707,20.44141a.95618.95618,0,0,1,.96387-.96338h.20019a1.19454,1.19454,0,0,1,1.001.563l3.71582,4.87988V20.40381a.95069.95069,0,1,1,1.90137,0v6.96924a.95577.95577,0,0,1-.96289.96386h-.0625a1.19372,1.19372,0,0,1-1.001-.56347l-3.85449-5.05469v4.69189a.95069.95069,0,1,1-1.90137,0Z"
-         id="path47"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path47" />
       <path
          d="M31.87891,21.30469H30.02734a.88819.88819,0,1,1,0-1.77637h5.62989a.88819.88819,0,1,1,0,1.77637H33.80566v6.09375a.96338.96338,0,1,1-1.92675,0Z"
-         id="path49"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path49" />
     </g>
     <g
        id="g63">
       <path
          d="M12.67676,269.64941l-1.65918-3.90234a.46.46,0,0,1-.04785-.19629.41032.41032,0,0,1,.41992-.40625.43585.43585,0,0,1,.42676.29785l1.36914,3.42139,1.38867-3.44873a.42844.42844,0,0,1,.39941-.27051.403.403,0,0,1,.41309.39942.4766.4766,0,0,1-.04.17626l-1.667,3.9292a.49633.49633,0,0,1-.48047.33887h-.04785A.49521.49521,0,0,1,12.67676,269.64941Z"
-         id="path53"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path53" />
       <path
          d="M15.37012,270.34766l2.7705-5.67774a.32317.32317,0,0,1,.61719.12207.52312.52312,0,0,1-.03418.1626l-2.77734,5.67725a.31.31,0,0,1-.292.18994.32288.32288,0,0,1-.3252-.312A.379.379,0,0,1,15.37012,270.34766Z"
-         id="path55"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path55" />
       <path
          d="M19.12988,267.563v-.01367a2.47973,2.47973,0,0,1,4.959-.01319v.01319a2.47974,2.47974,0,0,1-4.959.01367Zm4.085,0v-.01367a1.625,1.625,0,0,0-1.6123-1.687,1.60263,1.60263,0,0,0-1.59961,1.67383v.01319a1.61938,1.61938,0,0,0,1.61328,1.68017A1.59649,1.59649,0,0,0,23.21484,267.563Z"
-         id="path57"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path57" />
       <path
          d="M25.06836,267.563v-.01367a2.4,2.4,0,0,1,2.44531-2.45264,2.48551,2.48551,0,0,1,1.626.53516.41566.41566,0,0,1,.16308.332.41658.41658,0,0,1-.66406.32519,1.72287,1.72287,0,0,0-1.13086-.42676,1.59634,1.59634,0,0,0-1.56543,1.67383v.01319a1.59794,1.59794,0,0,0,1.56543,1.68017,1.69973,1.69973,0,0,0,1.18555-.4541.379.379,0,0,1,.25-.09473.397.397,0,0,1,.39355.38623.402.402,0,0,1-.13574.29834,2.42437,2.42437,0,0,1-1.7207.63672A2.38545,2.38545,0,0,1,25.06836,267.563Z"
-         id="path59"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path59" />
       <path
          d="M31.6875,265.95068H30.53516a.38623.38623,0,0,1,0-.77246h3.15039a.38628.38628,0,0,1,0,.77246H32.52734V269.541a.42.42,0,0,1-.83984,0Z"
-         id="path61"
-         fill="#1f1f1f" />
+         fill="#1f1f1f"
+         id="path61" />
     </g>
     <g
        id="g71">
       <path
          d="M15.01367,316.55127v-.01367a2.52165,2.52165,0,0,1,5.041-.01319v.01319a2.52166,2.52166,0,0,1-5.041.01367Zm3.9502,0v-.01367a1.44037,1.44037,0,0,0-1.43653-1.49024,1.41838,1.41838,0,0,0-1.42285,1.477v.01319a1.44137,1.44137,0,0,0,1.43653,1.49072A1.41866,1.41866,0,0,0,18.96387,316.55127Z"
-         id="path65"
-         fill="#f0f0f0" />
+         fill="#f0f0f0"
+         id="path65" />
       <path
          d="M21.13281,316.87646v-2.229a.522.522,0,0,1,1.044,0v2.20215c0,.772.38574,1.17187,1.02246,1.17187s1.02344-.38623,1.02344-1.13818v-2.23584a.52148.52148,0,1,1,1.043,0v2.19531a1.90873,1.90873,0,0,1-2.08007,2.14063A1.88222,1.88222,0,0,1,21.13281,316.87646Z"
-         id="path67"
-         fill="#f0f0f0" />
+         fill="#f0f0f0"
+         id="path67" />
       <path
          d="M27.61816,315.12842H26.61523a.481.481,0,0,1,0-.96192h3.04883a.481.481,0,1,1,0,.96192H28.66113v3.29931a.52149.52149,0,1,1-1.043,0Z"
-         id="path69"
-         fill="#f0f0f0" />
+         fill="#f0f0f0"
+         id="path69" />
     </g>
   </g>
   <g
-     id="ae78a0be-9002-435a-8d16-aab01d8766c8"
+     id="a25efd1d-a885-4bac-a53e-4d8304a6454b"
      data-name="components"
+     inkscape:groupmode="layer"
      style="display:none">
     <circle
-       id="b2739e24-f417-4df4-a9f8-cdbe19ace283"
+       id="a3bd355e-fa03-4f84-ae2d-c23adfc1363c"
        data-name="Out#PJ301MPort"
        cx="22.500031"
        cy="334"
        r="5"
        style="fill:#0000ff" />
     <circle
-       id="a9e77c26-f166-4ddb-a631-364adfe82d63"
+       id="a274b06f-438a-4f74-a279-942c657bef87"
        data-name="In#PJ301MPort"
        cx="22.500031"
        cy="286"
        r="5"
        style="fill:#00ff00" />
     <circle
-       id="a1acdc35-1ba5-4217-8497-8b9cf9407127"
+       id="bcb95ec9-85b5-4af7-a3d5-9a910027b2e0"
        data-name="Ofst#RoundBlackKnob"
        cx="22.500031"
        cy="237.84641"
        r="5"
        style="fill:#ff0000" />
     <rect
-       id="b0a70248-e957-45fd-837d-5ca00dc0fda8"
+       id="aa7bf0db-876c-4b4b-a204-9c48f1388612"
        data-name="Screen"
        y="38.5"
        width="45"
@@ -257,104 +259,101 @@
        transform="rotate(180,22.5,121)"
        x="0"
        style="fill:#ffff00" />
-    <g
-       id="g90">
-      <rect
-         id="bb1f76cc-0ec5-4591-ac4b-8c4850f170c6"
-         data-name="C"
-         x="6.6198301"
-         y="178.759"
-         width="31.69611"
-         height="16.6665"
-         style="fill:#ffb600" />
-      <rect
-         id="a309d77b-9de4-4845-8197-da9c8902c7c3"
-         data-name="D"
-         x="6.6198301"
-         y="153.66995"
-         width="31.69611"
-         height="22.938681"
-         style="fill:#ffb600" />
-      <rect
-         id="bebe602a-6bce-4622-9d84-0337738759b8"
-         data-name="E"
-         x="6.6198301"
-         y="134.85307"
-         width="31.69611"
-         height="16.6665"
-         style="fill:#ffb600" />
-      <rect
-         id="b943579b-cd8b-4f70-ac03-706e312960af"
-         data-name="F"
-         x="6.6198301"
-         y="116.03619"
-         width="31.69611"
-         height="16.6665"
-         style="fill:#ffb600" />
-      <rect
-         id="b4fae68f-0098-4499-a644-c6b690fded41"
-         data-name="G"
-         x="6.6198301"
-         y="90.947128"
-         width="31.69611"
-         height="22.938681"
-         style="fill:#ffb600" />
-      <rect
-         id="b98eb30e-7437-48fc-a946-e09dfe7b3dc0"
-         data-name="A"
-         x="6.6198301"
-         y="65.85807"
-         width="31.69611"
-         height="22.93832"
-         style="fill:#ffb600" />
-      <rect
-         id="ec3225d3-e6d1-427d-ac27-6e6b320ea27e"
-         data-name="B"
-         x="6.6198301"
-         y="47.04084"
-         width="31.69611"
-         height="16.6665"
-         style="fill:#ffb600" />
-      <rect
-         id="e28daa2d-a30c-470d-93f6-fa35a8370c6b"
-         data-name="Cs"
-         x="6.6198101"
-         y="172.48688"
-         width="24.30311"
-         height="10.39409"
-         style="fill:#ffb600" />
-      <rect
-         id="b98a18d3-246c-40d5-afcd-992d63349460"
-         data-name="Ds"
-         x="6.6198101"
-         y="147.39769"
-         width="24.30311"
-         height="10.39409"
-         style="fill:#ffb600" />
-      <rect
-         id="e709c29a-c8c8-4667-b66e-3df16efb8b09"
-         data-name="Fs"
-         x="6.6198101"
-         y="109.76393"
-         width="24.30311"
-         height="10.39409"
-         style="fill:#ffb600" />
-      <rect
-         id="ad5e43a6-6aa1-4284-8788-a1f560e6c14d"
-         data-name="Gs"
-         x="6.6198101"
-         y="84.674759"
-         width="24.30311"
-         height="10.39409"
-         style="fill:#ffb600" />
-      <rect
-         id="f4ddab95-6723-4b80-8827-a44bbd6abe91"
-         data-name="As"
-         x="6.6198101"
-         y="59.58559"
-         width="24.30311"
-         height="10.39409"
-         style="fill:#ffb600" />
-    </g>
+    <rect
+       id="ab5b74e5-e31e-48ee-82a1-6b0e4bf46452"
+       data-name="C"
+       x="6.6198301"
+       y="178.759"
+       width="31.69611"
+       height="16.6665"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="b160d7e9-e5f0-49e2-bb97-387fcb006dd5"
+       data-name="D"
+       x="6.6198301"
+       y="153.66995"
+       width="31.69611"
+       height="22.938681"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="a80d896b-2e8f-4f28-a25f-c53c0e09d90a"
+       data-name="E"
+       x="6.6198301"
+       y="134.85307"
+       width="31.69611"
+       height="16.6665"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="ba3da03a-de99-49e0-bf99-14b26cbb534a"
+       data-name="F"
+       x="6.6198301"
+       y="116.03619"
+       width="31.69611"
+       height="16.6665"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="b1472799-7f59-45ff-9390-c637df18a0a8"
+       data-name="G"
+       x="6.6198301"
+       y="90.947128"
+       width="31.69611"
+       height="22.938681"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="b94b4250-4c4a-441e-8433-eda50032e7fd"
+       data-name="A"
+       x="6.6198301"
+       y="65.85807"
+       width="31.69611"
+       height="22.93832"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="a80fb461-d9b0-459e-b821-070fcccec6a4"
+       data-name="B"
+       x="6.6198301"
+       y="47.04084"
+       width="31.69611"
+       height="16.6665"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="b86ad795-356b-4584-8e66-8295a3e7968b"
+       data-name="Cs"
+       x="6.6198101"
+       y="172.48688"
+       width="24.30311"
+       height="10.39409"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="a8e6ed2b-69c8-4e2e-9bc2-2bb6778bbc02"
+       data-name="Ds"
+       x="6.6198101"
+       y="147.39769"
+       width="24.30311"
+       height="10.39409"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="f17cafe6-504c-48f8-a11f-dd062c4148b6"
+       data-name="Fs"
+       x="6.6198101"
+       y="109.76393"
+       width="24.30311"
+       height="10.39409"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="bece2663-2606-4497-b79d-c07aa275bfe6"
+       data-name="Gs"
+       x="6.6198101"
+       y="84.674759"
+       width="24.30311"
+       height="10.39409"
+       style="fill:#ffff00;fill-opacity:1" />
+    <rect
+       id="e0237453-e530-4899-8b84-1002021a44d8"
+       data-name="As"
+       x="6.6198101"
+       y="59.58559"
+       width="24.30311"
+       height="10.39409"
+       style="fill:#ffff00;fill-opacity:1" />
   </g>
 </svg>

src/Quantizer.cpp

@@ -132,14 +132,15 @@ struct QuantizerButton : OpaqueWidget {
 		if (layer != 1)
 			return;
 
-		const float margin = mm2px(1.5);
 		Rect r = box.zeroPos();
+		const float margin = mm2px(1.0);
+		Rect rMargin = r.grow(Vec(margin, margin));
+
 		nvgBeginPath(args.vg);
-		nvgRect(args.vg, RECT_ARGS(r));
+		nvgRect(args.vg, RECT_ARGS(rMargin));
 		nvgFillColor(args.vg, nvgRGB(0x12, 0x12, 0x12));
 		nvgFill(args.vg);
 
-		r = r.shrink(Vec(margin, margin / 2));
 		nvgBeginPath(args.vg);
 		nvgRect(args.vg, RECT_ARGS(r));
 		if (module ? module->playingNotes[note] : (note == 0)) {
@@ -177,28 +178,51 @@ struct QuantizerButton : OpaqueWidget {
 
 struct QuantizerDisplay : LedDisplay {
 	void setModule(Quantizer* module) {
+		std::vector<Vec> noteAbsPositions = {
+			mm2px(Vec(2.242, 60.54)),
+			mm2px(Vec(2.242, 58.416)),
+			mm2px(Vec(2.242, 52.043)),
+			mm2px(Vec(2.242, 49.919)),
+			mm2px(Vec(2.242, 45.67)),
+			mm2px(Vec(2.242, 39.298)),
+			mm2px(Vec(2.242, 37.173)),
+			mm2px(Vec(2.242, 30.801)),
+			mm2px(Vec(2.242, 28.677)),
+			mm2px(Vec(2.242, 22.304)),
+			mm2px(Vec(2.242, 20.18)),
+			mm2px(Vec(2.242, 15.931)),
+		};
+		std::vector<Vec> noteSizes = {
+			mm2px(Vec(10.734, 5.644)),
+			mm2px(Vec(8.231, 3.52)),
+			mm2px(Vec(10.734, 7.769)),
+			mm2px(Vec(8.231, 3.52)),
+			mm2px(Vec(10.734, 5.644)),
+			mm2px(Vec(10.734, 5.644)),
+			mm2px(Vec(8.231, 3.52)),
+			mm2px(Vec(10.734, 7.769)),
+			mm2px(Vec(8.231, 3.52)),
+			mm2px(Vec(10.734, 7.768)),
+			mm2px(Vec(8.231, 3.52)),
+			mm2px(Vec(10.734, 5.644)),
+		};
+
 		// White notes
 		static const std::vector<int> whiteNotes = {0, 2, 4, 5, 7, 9, 11};
-		for (size_t i = 0; i < whiteNotes.size(); i++) {
-			int note = whiteNotes[i];
+		for (int note : whiteNotes) {
 			QuantizerButton* quantizerButton = new QuantizerButton();
-			quantizerButton->box.pos = Vec(0, i * box.size.y / 7);
-			quantizerButton->box.size = Vec(box.size.x, box.size.y / 7);
+			quantizerButton->box.pos = noteAbsPositions[note] - box.pos;
+			quantizerButton->box.size = noteSizes[note];
 			quantizerButton->module = module;
 			quantizerButton->note = note;
 			addChild(quantizerButton);
 		}
 		// Black notes
 		static const std::vector<int> blackNotes = {1, 3, 6, 8, 10};
-		static const std::vector<float> blackPos = {1, 2, 4, 5, 6};
-		for (size_t i = 0; i < blackNotes.size(); i++) {
-			int note = blackNotes[i];
-			float height = box.size.y * 0.1f;
-			float width = box.size.x * 0.6f;
-			float pos = blackPos[i] / 7.f * box.size.y - height / 2;
+		for (int note : blackNotes) {
 			QuantizerButton* quantizerButton = new QuantizerButton();
-			quantizerButton->box.pos = Vec(0, pos);
-			quantizerButton->box.size = Vec(width, height);
+			quantizerButton->box.pos = noteAbsPositions[note] - box.pos;
+			quantizerButton->box.size = noteSizes[note];
 			quantizerButton->module = module;
 			quantizerButton->note = note;
 			addChild(quantizerButton);