gearpatch/guide.html at main · ksd6700/gearpatch · GitHub

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!doctype html>
<html lang="en">
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VCMP9NLXW3"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-VCMP9NLXW3");
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="google-adsense-account" content="ca-pub-5475971647967700" />
    <link rel="icon" href="./assets/favicon.ico" sizes="any" />
    <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" />
    <link rel="manifest" href="./site.webmanifest" />
    <title>How to Use GearPatch | Signal Flow Diagram Guide</title>
    <meta
      name="description"
      content="Learn how to use GearPatch to create live signal flow diagrams, edit cable labels and connector shapes, show signal direction, and export venue-ready documents."
    />
    <meta name="robots" content="index,follow" />
    <meta name="theme-color" content="#f5f5f1" />
    <link rel="canonical" href="https://gearpatch.datafruits.fm/guide.html" />
    <meta property="og:site_name" content="GearPatch" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="How to Use GearPatch | Signal Flow Diagram Guide" />
    <meta
      property="og:description"
      content="A practical guide to GearPatch, including gear library choices, cable labels, connector shapes, signal direction, exports, and live setup use cases."
    />
    <meta property="og:url" content="https://gearpatch.datafruits.fm/guide.html" />
    <meta property="og:image" content="https://gearpatch.datafruits.fm/assets/og-gearpatch.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="How to Use GearPatch | Signal Flow Diagram Guide" />
    <meta
      name="twitter:description"
      content="Learn how to create readable live signal flow diagrams and venue-ready exports with GearPatch."
    />
    <meta name="twitter:image" content="https://gearpatch.datafruits.fm/assets/og-gearpatch.png" />
    <link rel="stylesheet" href="./pages.css?v=20260523b" />
    <script
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5475971647967700"
      crossorigin="anonymous"
    ></script>
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "TechArticle",
        "headline": "How to Use GearPatch",
        "description": "Learn how to use GearPatch to create live signal flow diagrams, edit cable labels and connector shapes, show signal direction, and export venue-ready documents.",
        "url": "https://gearpatch.datafruits.fm/guide.html",
        "image": "https://gearpatch.datafruits.fm/assets/og-gearpatch.png",
        "about": ["signal flow diagrams", "live sound", "DJ setup", "stage plot", "audio connectors"],
        "isPartOf": {
          "@type": "WebSite",
          "name": "GearPatch",
          "url": "https://gearpatch.datafruits.fm/"
        }
      }
    </script>
  </head>
  <body>
    <main class="page-shell">
      <header class="page-header">
        <a class="brand-link" href="./landing.html" aria-label="GearPatch home">
          <span class="brand-mark">GP</span>
          <span>
            <span class="brand-title">GearPatch</span>
            <span class="brand-subtitle">Stage-ready signal flow diagrams</span>
          </span>
        </a>
        <nav class="page-nav" aria-label="Site navigation">
          <a href="./landing.html">Home</a>
          <a href="./index.html">Open App</a>
          <a href="./privacy.html">Privacy Policy</a>
        </nav>
      </header>

      <section class="hero">
        <p class="eyebrow">Guide</p>
        <h1>Turn a live rig into a diagram people can actually use.</h1>
        <p class="lead">
          GearPatch is a local-first diagram tool for musicians, DJs, live sound teams, and studio setups.
          It helps you place gear, draw cables, describe terminals, show signal direction, and export a clean document for venue handoffs or rehearsal planning.
        </p>
      </section>

      <div class="content-grid">
        <section class="content-section">
          <h2>How to use GearPatch</h2>
          <p>
            Start by choosing gear from the Library on the left side of the app. Each item is added to the canvas as a movable gear card.
            You can drag cards around the infinite grid, use the zoom controls, pan across a large setup, and click the minimap to jump around the diagram.
          </p>
          <p>
            Move the pointer close to a gear card and small connection dots appear on its edges. Drag from one of those dots to another piece of gear to create a cable.
            GearPatch automatically places the cable endpoints on the closest sensible edges, so you do not have to manually define every input and output before drawing.
          </p>
          <p>
            Select a cable to edit its details in the Inspector. You can set the terminal label at each end, connector shape, male or female end, signal direction, line style, cable color, and whether the line should be solid, dashed, or doubled for stereo pairs.
          </p>
          <h3>Saving and exporting</h3>
          <p>
            Your work is autosaved in the browser. Use the File menu to start a new document or load a saved JSON file.
            Use the Export menu to download JSON for future editing, PNG or SVG for image use, or PDF when you need to send a printable sheet to a venue.
          </p>
        </section>

        <section class="content-section">
          <h2>The Library</h2>
          <p>
            The Library groups common live and studio gear by role. Instruments & Players includes microphones, synthesizers, keyboards, drum machines, guitars, basses, turntables, and CDJs.
            Controllers & System includes laptop computers and MIDI controllers. Audio Interfaces & Mixers includes interfaces and mixers.
            Effects includes effectors and pedalboards, while Amps & Speakers includes guitar amps, bass amps, power amps, speakers, and combo amps.
          </p>
          <p>
            Each gear card has a Name and a Label. Use Name for the specific item or stage role, such as “Nord Lead,” “DX7,” “CDJ 1,” or “Vocal Mic.”
            Use Label for the broad category, such as “Synth,” “CDJ,” “Microphone,” or “Mixer.” This keeps diagrams readable for people who do not know every piece of gear by model number.
          </p>
          <p>
            Icons can be changed later in the Inspector. The goal is not to draw every device photorealistically; the goal is to make the signal path understandable at a glance.
            If the Library does not include the exact object you need, start with the closest category and rename it.
          </p>
        </section>

        <section class="content-section">
          <h2>Cables, terminals, and connector shapes</h2>
          <p>
            GearPatch stores terminal information on the cable, not on the gear object. That keeps setup fast: instead of building a full port map for every device, you describe only the connections that matter for the document you are preparing.
            Terminal badges can say things like “Audio out,” “Line in 1,” “Phone out,” “MIDI in,” “USB out,” or any custom label.
          </p>
          <p>
            Connector shapes include XLR, TS, TRS, 3.5mm TS, 3.5mm TRS, 3.5mm TRRS, RCA, USB-C, USB-A, USB-B, Micro USB, LAN, HDMI, MIDI, SpeakON, and Custom.
            You can also choose male or female for each end, so a label such as “XLR M” or “RCA F” can reveal adapter needs before anyone starts wiring the stage.
          </p>
          <p>
            Line style is useful when a setup contains multiple kinds of signals. Use a black solid line for ordinary audio, a blue or green line for digital links, a dashed line for special paths, and a double line for stereo or paired connections.
            Signal direction adds an arrow in the middle of the cable, making it easier to see what sends audio or data and what receives it.
          </p>
        </section>

        <section class="content-section">
          <h2>Use cases</h2>
          <ul>
            <li>Send a live house a stage-ready signal flow before show day.</li>
            <li>Document CDJs, turntables, DJ mixers, interfaces, and stereo returns for a DJ set.</li>
            <li>Explain an electronic live rig with synths, samplers, drum machines, MIDI controllers, and laptop audio.</li>
            <li>Prepare band handoffs that show vocal mics, DI boxes, guitar amps, bass amps, monitor wedges, and returns.</li>
            <li>Find missing cables, adapters, DI boxes, and connector gender mismatches before rehearsal or load-in.</li>
            <li>Share the same diagram with performers, venue staff, streaming teams, support members, and production managers.</li>
          </ul>
          <p>
            GearPatch is not meant to replace a full CAD system. It is meant to make the important live information visible quickly:
            what is connected, where the signal goes, which connector is expected, and what the venue needs to prepare.
          </p>
        </section>
      </div>

      <footer class="page-footer">
        <p>GearPatch is a local-first web tool. Diagrams stay in your browser unless you export or share them yourself.</p>
      </footer>
    </main>
  </body>
</html>