เขียนแบบตู้ไฟเป็น SVG ให้ช่างเอาไม้บรรทัดวัดจากกระดาษได้จริง

พอดีมีงานตู้ไฟของลูกค้าที่ผมต้องส่งแบบให้ช่างเอาไปประกอบ ตอนแรกผม generate แบบออกมาจาก HTML เป็น SVG แล้วส่งไฟล์ให้ดู ได้กลับมาประโยคเดียวสั้นๆ ว่าแบบมันไม่ได้สัดส่วนจริง เพี้ยนจากสเกล

ตอนนั้นผมยังคิดว่าคงเพี้ยนนิดหน่อย จนกลับไปวัดของตัวเองแล้วถึงรู้ว่ามันไม่ใช่เพี้ยนนิดหน่อย มันเพี้ยนคนละสเกลกันในแผ่นเดียว

ของเดิมผิดตรงไหน: วาดสามวิว ได้สามสเกล

ตัวแรกที่ผมทำ ผมแยกแต่ละวิวเป็น <svg> ของตัวเอง วิวหน้าปิดฝาอันหนึ่ง วิวเปิดบานอันหนึ่ง วิวด้านข้างอีกอันหนึ่ง แล้วจับทั้งสามอันวางเรียงกันในกล่อง flex ให้ดูสวยๆ

ปัญหาคือพอแต่ละ SVG มี viewBox ของตัวเอง แล้วกล่องที่ครอบมันมีความกว้างไม่เท่ากัน เบราว์เซอร์จะย่อขยายแต่ละอันด้วยตัวคูณคนละตัว บนจอมันดูเป็นแบบที่สมบูรณ์ดีมาก แต่ความจริงคือวิวหน้ากับวิวข้างอยู่คนละสเกลกันตั้งแต่แรก เอาไม้บรรทัดทาบเทียบกันไม่ได้เลย

หนักกว่านั้นคือตัวเลขที่ผมใช้วาด ผมวาดกล่องเบรกเกอร์เป็น 150 x 250 เพราะมัน "ดูพอดี" ในขณะที่ป้ายกำกับข้างกล่องเขียนขนาดจากแคตตาล็อกไว้ถูกต้องแล้วว่า 140 x 257 คือแบบมันบอกความจริงด้วยตัวหนังสือ แต่โกหกด้วยรูป

กติกาเดียวที่แก้ได้ทั้งหมด: SVG เดียว viewBox เดียว 1 หน่วย = 1 มม.

ผมรื้อใหม่ทั้งแผ่น เหลือ <svg> ตัวเดียวต่อหนึ่งแผ่นกระดาษ ทุกวิวอยู่ในระบบพิกัดเดียวกัน และหนึ่งหน่วยใน viewBox คือหนึ่งมิลลิเมตรของจริง ไม่มี transform scale ที่ geometry ไม่มี SVG ซ้อน SVG ที่เหลือเป็น translate ล้วนๆ สำหรับย้ายวิวไปวางตำแหน่งใหม่

พอตั้งกติกานี้ ตัวเลขในไฟล์กับตัวเลขในใบเสนอของผู้ผลิตเป็นเลขตัวเดียวกัน อ่านโค้ดแล้วรู้เลยว่าตู้กว้างเท่าไหร่

<svg class="ga" viewBox="0 0 3350 2450">
  <!-- ตู้ W1000 x H1600 -->
  <rect x="150" y="200" width="1000" height="1600" class="out"/>
  <!-- แบ่งบาน 700 (เบรกเกอร์) + 300 (มิเตอร์) -->
  <line x1="850" y1="200" x2="850" y2="1800" class="part"/>
  <!-- หน้าปัดมิเตอร์ 96x96 / สวิตช์เลือก 64x64 -->
  <rect x="952" y="380" width="96" height="96" class="mtr"/>
  <rect x="968" y="820" width="64" height="64" class="mtr"/>
  <!-- ขาตั้งเหล็กกล่อง 2 นิ้ว สูง 400 -->
  <rect x="250" y="1800" width="70" height="400" class="leg"/>
</svg>

ความหนาเส้นก็คิดเป็นมิลลิเมตรของจริงเหมือนกัน ผมยัดทุกอย่างไว้ใน <style> ข้างใน <defs> แล้วใช้ชื่อคลาสแทนเลเยอร์ของงานเขียนแบบ สีในแบบไม่ได้มีไว้สวย มันมีความหมาย คือแดงสงวนไว้ให้เส้นบอกระยะเท่านั้น เส้นประเทาคือช่องสำรองที่ยังไม่ใส่อุปกรณ์

.out   { fill:#fbfcfe; stroke:#161b22; stroke-width:6 }   /* 6 มม.จริง = 0.6 มม.บนกระดาษ */
.innercv{ fill:#f2f4f8; stroke:#5a6470; stroke-width:4 }
.dev   { fill:#fbeee6; stroke:#b5411b; stroke-width:4 }
.devs  { fill:#eef1f5; stroke:#7a828f; stroke-width:4; stroke-dasharray:13 8 }
.dim   { stroke:#c0392b; stroke-width:2.4 }               /* เส้นบอกระยะ */
.ext   { stroke:#c0392b; stroke-width:1.6; stroke-dasharray:6 5 }
.dimt  { font:700 27px Sarabun; fill:#c0392b }            /* 27 มม.จริง = 2.7 มม.บนกระดาษ */

ขนาดที่เอามาเป็นสมอ ต้องเป็นขนาด outline จากแคตตาล็อก

ตรงนี้คือหัวใจของเล่มนี้ครับ ตัวเลขทุกตัวที่ผมวาด ผมเอามาจากเอกสารผู้ผลิตหรือจากขนาดที่สั่งทำจริง ไม่มีตัวไหนมาจากการกะด้วยตา

• ตู้ตั้งพื้น W1000 x H1600 x D400 มม. บานแบ่ง 700 กับ 300 มีขาเหล็กกล่อง 2 นิ้วยกสูงอีก 400 หลังคากันฝนยื่นออกมา 45
• เพลทติดอุปกรณ์ 620 x 1510 มม. หนา 2.0 มม. กำหนดจุด (0,0) ไว้ที่มุมบนซ้ายของเพลท แล้วบอกพิกัดรูทุกรูเทียบจากจุดนั้นจุดเดียว
• เมน MCCB 140 x 257 · ลูกย่อยตัวใหญ่ 105 x 165 · ลูกย่อยตัวเล็ก 75 x 130 ทุกเฟรม · CT วงแหวน 78 x 78 สามตัว
• หน้าปัดมิเตอร์บานประตูเป็นบานพับขนาด 96 x 96 แต่รูที่เจาะจริงคือ 92 x 92 เผื่อขอบกินไว้ข้างละ 2 มม. ส่วนสวิตช์เลือกและหลอดสัญญาณเจาะ 22 มม.

เรื่องรูที่ต้องเจาะ ผมยังกันโซนห้ามเจาะไว้ด้วย คือช่องเดินบัสบาร์ลงมาที่ x 140-240 กับ 375-475 ห้ามมีรูใดๆ ในแถบนั้น เพราะถ้าช่างเจาะไปแล้วค่อยรู้ ต้องเปลี่ยนเพลททั้งแผ่น

ที่สำคัญไม่แพ้กันคือผมพิมพ์ตารางพิกัดรูแนบไปในแผ่นเดียวกันด้วย ช่างที่อยากวัดจากกระดาษก็วัดได้ ช่างที่อยากป้อนพิกัดเข้าเครื่องก็อ่านตารางเอา ไม่ต้องเลือกให้เขา

<tr><td>MAIN</td><td>MCCB 3P 350A</td><td>240</td><td>110</td><td>140 x 257</td></tr>
<tr><td>1</td><td>MCCB 3P 150A</td><td>15</td><td>630</td><td>105 x 165</td></tr>
<tr><td>2</td><td>MCCB 3P 100A</td><td>30</td><td>825</td><td>75 x 130</td></tr>

เส้นบอกระยะต้องประกอบเอง ไม่มีของสำเร็จให้ใช้

SVG ไม่มี dimension object แบบโปรแกรมเขียนแบบ ผมเลยต้องประกอบเอง คือหัวลูกศรสองตัวเป็น marker เส้นบอกระยะหนึ่งเส้น แล้วเส้นช่วยบางๆ แบบประอีกสองเส้นลากจากขอบชิ้นงานออกมา

<defs>
  <marker id="ah"  markerWidth="9" markerHeight="9" refX="8" refY="3" orient="auto">
    <path d="M0,0 L8,3 L0,6 z" fill="#c0392b"/></marker>
  <marker id="ah2" markerWidth="9" markerHeight="9" refX="1" refY="3" orient="auto">
    <path d="M8,0 L0,3 L8,6 z" fill="#c0392b"/></marker>
</defs>

<line x1="300" y1="245" x2="920" y2="245" class="dim"
      marker-start="url(#ah2)" marker-end="url(#ah)"/>
<line x1="300" y1="238" x2="300" y2="300" class="ext"/>
<line x1="920" y1="238" x2="920" y2="300" class="ext"/>
<text x="610" y="232" text-anchor="middle" class="dimt">620</text>

markerWidth ไม่ได้เป็นมิลลิเมตรนะครับ มันผูกกับ stroke-width ตามค่า markerUnits เริ่มต้น หัวลูกศรเลยเป็นสิ่งเดียวในแบบที่ผมตั้งใจไม่ให้เป็นมิติจริง เพราะถ้าปล่อยให้มันเป็นมิลลิเมตรด้วย หัวลูกศรบนแบบ 1:10 จะเล็กจนหายไป

ระยะแนวตั้งผมหมุนตัวหนังสือรอบจุดยึดของตัวเอง แล้วไล่โซ่ระยะออกไปทีละเลน เลนละ 60 หน่วย คือ 6 มม. บนกระดาษ ซึ่งพอดีกับตัวเลขสองหลักไม่ชนกัน

<line x1="115" y1="300" x2="115" y2="1125" class="dim"
      marker-start="url(#ah2)" marker-end="url(#ah)"/>
<text x="105" y="712" class="dimt" transform="rotate(90 105 712)">825</text>
<line x1="55" y1="300" x2="55" y2="1285" class="dim"
      marker-start="url(#ah2)" marker-end="url(#ah)"/>
<text x="45" y="792" class="dimt" transform="rotate(90 45 792)">985</text>

ทุกโซ่ออกจากเส้นฐานเดียวกันหมด คือขอบบนซ้ายของเพลท ไม่ไล่ระยะต่อกันเป็นทอดๆ เพราะการไล่ต่อกันแปลว่าค่าคลาดเคลื่อนสะสมไปเรื่อยๆ ช่างเจาะรูสุดท้ายเยื้องแล้วไม่รู้ว่ามาจากรูไหน

แถบสเกลบนกระดาษ คือสัญญาที่ตรวจได้ด้วยไม้บรรทัด

สิ่งที่ผมคิดว่าคุ้มที่สุดในแผ่นแบบ คือแถบสเกลตรงมุมล่าง มันคือสี่เหลี่ยมดำสลับขาวห้าก้อน ก้อนละ 100 มม. ของจริง รวมเป็น 500 มม. ซึ่งบนกระดาษที่สเกลถูกต้องต้องวัดได้ 50 มม. พอดี

<g transform="translate(150,2380)">
  <rect x="0"   y="0" width="100" height="24" fill="#161b22"/>
  <rect x="100" y="0" width="100" height="24" fill="#fff" stroke="#161b22" stroke-width="2"/>
  <rect x="200" y="0" width="100" height="24" fill="#161b22"/>
  <rect x="300" y="0" width="100" height="24" fill="#fff" stroke="#161b22" stroke-width="2"/>
  <rect x="400" y="0" width="100" height="24" fill="#161b22"/>
  <text x="0" y="56" class="t2s">0</text>
  <text x="500" y="56" text-anchor="middle" class="t2s">500 mm</text>
  <text x="560" y="18" class="t2s">แถบนี้ = 500 มม.จริง = 50 มม.บนกระดาษ (สเกล 1:10)</text>
</g>

เหตุผลที่ต้องมี ไม่ใช่เพราะผมไม่เชื่อโค้ดตัวเอง แต่เพราะไม่มีอะไรใน CSS ห้ามคนกดติ๊ก Fit to page ได้ ต่อให้ผมล็อกความกว้างเป็นมิลลิเมตรไว้ดีแค่ไหน คนที่ปลายทางกดย่อให้พอดีหน้ากระดาษครั้งเดียว แบบก็ผิดสเกลทันทีโดยไม่มีคำเตือน

ที่แผ่นนี้เนื้อหาเกินหน้าอยู่รอบหนึ่ง ผมไล่ลดความสูง viewBox จาก 2720 ลง 2600 แล้วลงมาจบที่ 2450 โดยไม่แตะความกว้างเลยสักครั้ง เพราะความกว้างคือตัวที่กำหนดสเกล ส่วนความสูงเป็นแค่เรื่องว่าจะใส่ของอะไรลงในแผ่นได้บ้าง

ตรวจด้วยพิกเซล แต่ห้ามวาดด้วยพิกเซล

พอแก้เสร็จ ผมกลับไปใช้วิธีวัดจากพิกเซลอีกครั้ง แต่คราวนี้เปลี่ยนหน้าที่มันจาก "แหล่งที่มาของตัวเลข" เป็น "เครื่องมือตรวจสอบ" คือ render แผ่นแบบเป็นภาพ แล้วไล่หา connected component ตามสีเส้น เอา bounding box มาลบความหนาเส้นออก แล้วหารด้วยพิกเซลต่อมิลลิเมตร เทียบกับเลขในแคตตาล็อก

PXMM = 636 / 800.0        # วัดจากขอบตู้ในภาพที่ render ออกมา

def row(name, box, stroke, ref):
    x, y, w, h = box
    W = (w - stroke * PXMM) / PXMM     # ลบความหนาเส้นออกก่อน
    H = (h - stroke * PXMM) / PXMM
    print('%-28s %-10s %-14s %s' % (name, '%dx%d' % (w, h),
                                    '%.0f x %.0f' % (W, H), ref))

for b in mains[:1]:
    row('MAIN MCCB (กรอบน้ำเงิน)', b, 5, '140 x 257')

ผลที่ได้ตรงตามแคตตาล็อกทุกตัว และตัวเลขที่ผมชอบที่สุดคืออัตราส่วนรวมของตัวตู้ วัดได้ 1274 / 636 = 2.003 เทียบกับ 1600/800 = 2.000 คลาดไป 0.15% ซึ่งอธิบายได้หมดว่ามาจากความหนาเส้น ไม่ได้มาจากเรขาคณิตผิด

กับดักที่เหลือ และแบบสองแผ่นที่เลื่อนกัน 50 มม.

สองเรื่องที่ผมยังไม่ได้แก้ในไฟล์ และเป็นบทเรียนที่ควรพูดถึงมากกว่าปิดไว้

เรื่องแรก แผ่นตู้ย่อยที่ผมทำเพิ่มทีหลัง ผมเขียนป้ายไว้ว่าสเกล 1:5 แต่ความกว้างที่ล็อกตอนพิมพ์กับขนาด viewBox หารกันแล้วได้ประมาณ 1:6 คือป้ายกับของจริงไม่ตรงกัน และแผ่นนั้นไม่มีแถบสเกล เลยไม่มีอะไรจับผิดให้เห็น นี่คือเหตุผลที่แถบสเกลต้องมีทุกแผ่น ไม่ใช่มีเฉพาะแผ่นหลัก

เรื่องที่สอง แบบประกอบกับแบบเจาะเพลทของผม วางตำแหน่งหน้าปัดมิเตอร์บนบานประตูไม่ตรงกันอยู่ 50 มม. แผ่นหนึ่งจัดกลางบาน อีกแผ่นชิดไปทางหนึ่ง ทั้งที่เป็นของชิ้นเดียวกัน ช่างที่เจาะจะทำตามแผ่นเจาะเพลท ส่วนคนที่ดูภาพรวมจะเห็นอีกแบบ แล้วจะมาเถียงกันหน้างาน

สรุปเป็นขั้นตอนที่ผมใช้ซ้ำทุกงาน

1. รวบรวมขนาดจริงจากแคตตาล็อกและใบสั่งทำให้ครบก่อน ห้ามเริ่มวาดด้วยเลขที่กะเอา
2. วาง SVG เดียวต่อหนึ่งแผ่น viewBox เป็นมิลลิเมตร ทุกวิวอยู่ในระบบพิกัดเดียวกัน
3. ล็อกความกว้างตอนพิมพ์เป็นหน่วยมิลลิเมตร ให้ตัวคูณลงตัวสวยๆ อย่าง 0.1 สำหรับ 1:10
4. วางแถบสเกลทุกแผ่น พร้อมข้อความบอกว่าต้องวัดได้กี่มิลลิเมตร
5. พิมพ์จริงหนึ่งแผ่น เอาไม้บรรทัดทาบ ก่อนส่งให้ช่าง
6. render เป็นภาพแล้ววัดกลับด้วยสคริปต์ เทียบกับตารางพิกัด ไม่ใช่เทียบกับสายตา

ส่วนตัวผมคิดว่าสิ่งที่งานนี้สอนผมจริงๆ ไม่ใช่เรื่อง SVG ครับ มันคือเรื่องที่ว่าแบบวิศวกรรมกับภาพประกอบสวยๆ มันคนละสิ่งกัน ภาพประกอบผิดสัดส่วนแล้วไม่มีใครเดือดร้อน แต่แบบที่ช่างเอาไปประกอบ ถ้าผิด 10 มม. ที่ตำแหน่งรูเจาะ ค่าเสียหายคือเพลททั้งแผ่นกับเวลาช่างอีกครึ่งวัน และคนที่โดนถามว่าทำไมไม่ตรงคือคนเขียนแบบ

ใครทำแบบส่งช่างด้วย HTML อยู่ ลองเอากติกา 1 หน่วย = 1 มม. กับแถบสเกลไปใส่ดูได้ตามสะดวกครับ สองอย่างนี้ใช้เวลาเพิ่มไม่ถึงสิบนาทีต่อแผ่น แต่มันเปลี่ยนแบบจาก "รูปที่ดูเหมือนแบบ" ให้กลายเป็นแบบที่ตรวจสอบได้จริง ตรงไหนผมอธิบายตกหล่นหรือพิมพ์ผิด เดี๋ยวกลับมาแก้เพิ่มให้ภายหลังครับ