Wire Harness Designer - public/index.html

by adom

Design wire harnesses in the browser and export a professional, print-ready PDF assembly drawing. Pick connectors, wire gauge, colour and stripe, sleeving, and connector-to-connector lengths; get a live fishbone diagram with a wire schedule and title block. Click any wire or connector in the drawing to edit it. Save and reload the whole harness as JSON.

Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity

master

History Download

noah Publish 1.0.0 a09b9ee 2mo ago

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Wire Harness Designer</title>
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="stylesheet" href="app.css?v=DEV">
</head>
<body>
  <div id="app">
    <!-- 44px header: brand | subject | actions -->
    <header class="appbar">
      <div class="brand" id="brandZone">
        <svg class="brand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <rect x="2.5" y="8.5" width="5" height="7" rx="1"/>
          <rect x="16.5" y="4" width="5" height="6" rx="1"/>
          <rect x="16.5" y="14" width="5" height="6" rx="1"/>
          <path d="M7.5 11 H11.5 C13 11 13 7 14.5 7 H16.5"/>
          <path d="M7.5 13 H11.5 C13 13 13 17 14.5 17 H16.5"/>
        </svg>
        <span class="brand-name">Wire Harness Designer</span>
        <span class="brand-dot">&middot;</span>
        <span class="brand-sub">Adom</span>
      </div>

      <div class="vsep"></div>

      <div class="subject">
        <span class="subject-name" id="subjectName">Untitled Harness</span>
        <span class="subject-meta" id="subjectMeta"></span>
      </div>

      <div class="actions">
        <button class="btn" id="btnMobileEdit" data-tip="Switch between the editor and the drawing (small screens)">Edit</button>
        <button class="btn" id="btnNew" data-tip="Start a new, empty harness">New</button>
        <button class="btn" id="btnSample" data-tip="Load the built-in sample harness">Sample</button>
        <button class="btn" id="btnLoad" data-tip="Open a harness from a .json file you saved earlier">Load</button>
        <button class="btn" id="btnSave" data-tip="Save this harness as a .json file you can reopen or share">Save JSON</button>
        <button class="btn btn-primary" id="btnPdf" data-tip="Generate a professional, print-ready PDF drawing">Export PDF</button>
      </div>
    </header>

    <div class="body" id="body">
      <aside class="editor" id="editor" aria-label="Harness editor"></aside>

      <main class="preview" id="preview" aria-label="Drawing preview">
        <div class="preview-toolbar">
          <div class="pv-left">
            <span class="pv-label">DRAWING</span>
            <span class="pv-page" id="pvPage"></span>
          </div>
          <div class="pv-right">
            <button class="iconbtn" id="pvPrev" data-tip="Previous sheet">&#8249;</button>
            <button class="iconbtn" id="pvNext" data-tip="Next sheet">&#8250;</button>
            <span class="pv-gap"></span>
            <button class="iconbtn" id="zoomOut" data-tip="Zoom out">&minus;</button>
            <button class="iconbtn" id="zoomFit" data-tip="Fit the sheet to the window">Fit</button>
            <button class="iconbtn" id="zoomIn" data-tip="Zoom in">+</button>
          </div>
        </div>
        <div class="sheet-scroll" id="sheetScroll">
          <div class="sheet-wrap" id="sheetWrap"></div>
        </div>
      </main>
    </div>

    <footer class="statusbar" id="statusbar">
      <span id="statCounts">&nbsp;</span>
      <span class="status-hint" id="statHint">Ready</span>
    </footer>
  </div>

  <div id="toast-host" aria-live="polite"></div>
  <div id="tooltip" role="tooltip"></div>
  <input type="file" id="fileInput" accept="application/json,.json" hidden>

  <script src="vendor/jspdf.umd.min.js"></script>
  <script src="harness-layout.js?v=DEV"></script>
  <script src="render-svg.js?v=DEV"></script>
  <script src="render-pdf.js?v=DEV"></script>
  <script src="app.js?v=DEV"></script>
</body>
</html>