melexisio/help.html at android · melexis/melexisio · 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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Melexis.IO - Help</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Montserrat font from Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
  <!-- Bootstrap 5 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <style>
    :root {
      --mlx-blue: #00ADEF;
      font-size: 14px; /* base font size */
      --mlx-dark: #232A34;
      --mlx-bg: #1A2027;
      --mlx-panel: #232A34;
      --mlx-panel-border: #2D3742;
      --mlx-muted: #A9B8C9;
      --mlx-white: #fff;
    }
    body {
      font-family: 'Montserrat', Arial, 'Helvetica Neue', sans-serif;
      background: var(--mlx-bg);
      color: var(--mlx-white);
      margin: 0;
      line-height: 1.7;
    }
    #header {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .75rem 1rem;
      border-bottom: 1px solid var(--mlx-panel-border);
      background: var(--mlx-panel);
    }
    #header .banner {
      display: block;
      max-height: 72px;
      height: auto;
      width: auto;
    }
    .container {
      max-width: 820px;
      margin: 0 auto;
      padding: 2rem 1rem;
    }
    .help-panel {
      background: var(--mlx-panel);
      border: 1px solid var(--mlx-panel-border);
      border-radius: 1rem;
      padding: 1.7rem 1.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
    }
    .back-link {
      color: var(--mlx-muted);
      text-decoration: none;
      font-size: 0.98rem;
      display: inline-block;
      margin-bottom: 1rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      transition: color 0.2s;
    }
    .back-link:hover {
      color: var(--mlx-blue);
      text-decoration: underline;
    }
    h1 {
      color: var(--mlx-blue);
      font-size: 2.6rem;
      font-weight: 700;
      margin-bottom: 2.2rem;
      text-align: center;
      letter-spacing: -0.01em;
    }
    h2 {
      color: var(--mlx-blue);
      font-size: 1.45rem;
      font-weight: 600;
      margin-top: 2.2rem;
      margin-bottom: 1.1rem;
      border-bottom: 1px solid var(--mlx-panel-border);
      padding-bottom: 0.5rem;
      letter-spacing: 0.01em;
    }
    h3 {
      color: var(--mlx-white);
      font-size: 1.15rem;
      font-weight: 600;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      letter-spacing: 0.01em;
    }
    .muted {
      color: var(--mlx-muted);
      font-size: 0.97rem;
    }
    ul, ol { padding-left: 1.5rem; }
    li { margin-bottom: 0.5rem; }
    code {
      background: #232A34;
      color: #00ADEF;
      padding: 0.18rem 0.38rem;
      border-radius: 0.25rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.98em;
    }
    .kbd {
      background: #232A34;
      color: var(--mlx-blue);
      padding: 0.18rem 0.5rem;
      border-radius: 0.25rem;
      border: 1px solid var(--mlx-panel-border);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.97em;
    }
    .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
      margin: 1rem 0;
    }
    .feature-item {
      background: #232A34;
      border: 1px solid var(--mlx-panel-border);
      border-radius: 0.5rem;
      padding: 1rem;
    }
    .feature-item h4 {
      color: var(--mlx-blue);
      margin-top: 0;
      margin-bottom: 0.75rem;
      font-size: 1.1rem;
    }
    .warning {
      background: rgba(255, 193, 7, 0.09);
      border: 1px solid #ffe082;
      border-radius: 0.5rem;
      padding: 1rem;
      margin: 1rem 0;
    }
    .warning h4 {
      color: #ffc107;
      margin-top: 0;
      margin-bottom: 0.5rem;
    }
    /* Buttons and links */
    a.btn, button.btn {
      font-family: 'Montserrat', Arial, 'Helvetica Neue', sans-serif;
      font-weight: 600;
      border-radius: 2rem;
      letter-spacing: 0.01em;
      transition: background 0.2s, color 0.2s;
    }
    a.btn-primary, .btn-primary {
      background: var(--mlx-blue);
      border-color: var(--mlx-blue);
      color: #fff;
    }
    a.btn-primary:hover, .btn-primary:hover {
      background: #008ec1;
      border-color: #008ec1;
      color: #fff;
    }
    /* Responsive tweaks */
    @media (max-width: 600px) {
      .container { padding: 1.2rem 0.3rem; }
      .help-panel { padding: 1.1rem 0.5rem; }
      h1 { font-size: 2rem; }
      h2 { font-size: 1.1rem; }
    }
  </style>
</head>
<body>
  <header id="header" role="banner">
    <img src="media/banner.png" alt="Melexis.IO" class="banner" />
  </header>
  <div class="container">
    <a href="index.html" class="back-link">← Back to app</a>

    <h1>Melexis.IO User Guide</h1>

    <div class="help-panel">
      <h2>Overview & Requirements</h2>
  <p>Melexis.IO is a browser-based serial terminal application for communicating with Melexis devices. It provides comprehensive terminal functionality and an IR imaging viewer.</p>

      <h3>System Requirements</h3>
      <ul>
        <li><strong>Browser:</strong> Chrome or Edge desktop (Web Serial API support required)</li>
        <li><strong>Connection:</strong> HTTPS or localhost (required for Web Serial access)</li>
        <li><strong>Port Access:</strong> Only one application can hold a serial port at a time</li>
        <li><strong>Permissions:</strong> Serial port access permission will be requested when connecting</li>
      </ul>
    </div>

    <div class="help-panel">
      <h2>Related pages</h2>
      <ul>
        <li><a href="firmware.html">Firmware update</a> — Step-by-step guide to flash the device (includes HEX download link).</li>
        <li><a href="build.html">Build firmware</a> — Sources overview and STM32CubeIDE build instructions.</li>
      </ul>
    </div>

    <div class="help-panel">
      <h2>Quick Start</h2>
      <ol>
        <li>Open the app in Chrome/Edge over HTTPS or localhost</li>
        <li>Click <strong>"Connect…"</strong> button</li>
        <li>Select your device from the serial port list</li>
        <li>Grant permission when prompted</li>
        <li>Start sending commands or explore the various tabs</li>
        <li>Use <strong>"Disconnect"</strong> when finished</li>
      </ol>
    </div>

    <div class="help-panel">
      <h2>Tabs & Features</h2>

      <div class="feature-list">
        <div class="feature-item">
          <h4>Terminal</h4>
          <ul>
            <li>Send/receive text commands</li>
            <li>Command history with <span class="kbd">↑</span>/<span class="kbd">↓</span> navigation</li>
            <li>Local echo toggle</li>
            <li>Auto-scroll option</li>
            <li>Clear and Save log functions</li>
            <li>Quick command buttons (ID, INFO, Log, Help, Reset)</li>
            <li>Log/Help commands: <code>:SYST:LOG</code> and <code>:SYST:HELP</code></li>
            <li>Reset behavior: waits for <code>*RESET*</code> then <code>(OK)&gt;</code>, disconnects, waits ~5s, and reconnects to the same device</li>
          </ul>
        </div>

        <div class="feature-item">
          <h4>Settings</h4>
          <ul>
            <li>Serial connection parameters (baud, data bits, parity, stop bits, flow control)</li>
            <li>Input options (EOL, local echo, enter sends, auto-scroll)</li>
            <li>Export/import settings as JSON</li>
            <li>Reset to defaults</li>
            <li>EEPROM save/load (when connected)</li>
          </ul>
        </div>

        <div class="feature-item">
          <h4>IR Image</h4>
          <ul>
            <li>32×24 thermal imaging display</li>
            <li>Auto-scale or manual min/max range</li>
            <li>Scale options: x1, x2, x4 with bicubic interpolation</li>
            <li>Grid overlay and numeric values (x1 scale)</li>
            <li>Read single frame or continuous mode</li>
            <li>Save PNG images and export CSV data</li>
            <li>Video recording: capture WebM while Continuous is active</li>
            <li>Auto-scale ON: Min/Max inputs show computed values (disabled/read‑only); Auto-scale OFF: manual entries are used and preserved</li>
            <li>Hover does not pause updates in Continuous mode (no hover-to-pause behavior)</li>
          </ul>
        </div>

        <div class="feature-item">
          <h4>IR Chart</h4>
          <ul>
            <li>Real-time line chart of <strong>Min</strong>, <strong>Mean</strong>, and <strong>Max</strong> temperature per frame</li>
            <li>Buttons: Read (single frame) and Continuous (start/stop device stream); state is synchronized with IR Image tab</li>
            <li>Export CSV with columns: <code>time_ms,min,mean,max</code> — <em>time_ms</em> is the device timestamp; values are printed with 2 decimals</li>
            <li>Save image exports the chart canvas as PNG with a solid background and visible axes/grid</li>
            <li>Fixed chart height (~400 px); up to 300 points retained (older points dropped)</li>
            <li>Chart x-axis displays elapsed ms from the start of Continuous (for visuals only)</li>
            <li>No video controls on this tab</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="help-panel">
      <h2>History & Persistence</h2>

      <h3>Command History</h3>
      <ul>
        <li>Stored in browser cookies for this site</li>
        <li>Newest commands appear first</li>
        <li>Click history buttons to resend commands</li>
        <li>Navigate with <span class="kbd">↑</span>/<span class="kbd">↓</span> arrow keys in input field</li>
        <li>Clear history button available in sidebar</li>
      </ul>

      <h3>Settings Storage</h3>
      <ul>
        <li><strong>localStorage:</strong> Connection settings and input options</li>
        <li><strong>Export/Import:</strong> JSON bundle includes history, settings, IR parameters, and input options</li>
        <li><strong>Auto-restore:</strong> Settings automatically reload on page refresh</li>
      </ul>

      <h3>Export Bundle Contents</h3>
      <ul>
        <li>Command history array</li>
        <li>Serial connection settings</li>
        <li>IR configuration (auto-scale, min/max, scale)</li>
        <li>Input options (EOL, echo, enter sends, auto-scroll)</li>
        <li>Metadata (version, export timestamp)</li>
      </ul>
    </div>

    <div class="help-panel">
      <h2>Keyboard Shortcuts</h2>
      <ul>
        <li><span class="kbd">Enter</span> - Send command (when "Enter sends" is enabled)</li>
        <li><span class="kbd">↑</span> - Navigate to older command in history</li>
        <li><span class="kbd">↓</span> - Navigate to newer command in history</li>
        <li><span class="kbd">Tab</span> - Navigate between UI elements</li>
        <li><span class="kbd">Space</span> or <span class="kbd">Enter</span> - Activate focused buttons</li>
      </ul>
    </div>

    <div class="help-panel">
      <h2>Troubleshooting</h2>

      <div class="warning">
        <h4>Common Issues</h4>

        <h3>Port Not Shown</h3>
        <ul>
          <li>Ensure device is properly connected</li>
          <li>Check if another application is using the port</li>
          <li>Try unplugging and reconnecting the device</li>
          <li>Verify device drivers are installed</li>
        </ul>

        <h3>Failed to Connect</h3>
        <ul>
          <li>Grant permission when browser prompts</li>
          <li>Close other serial applications (Arduino IDE, etc.)</li>
          <li>Check serial port settings match device requirements</li>
          <li>Refresh page and try again</li>
        </ul>

        <h3>No Output</h3>
        <ul>
          <li>Verify correct baud rate and serial parameters</li>
          <li>Check EOL (End of Line) setting matches device expectations</li>
          <li>Try enabling local echo to see transmitted commands</li>
          <li>Send a simple command like <code>*IDN?</code> to test</li>
        </ul>

        <h3>Browser Support</h3>
        <ul>
          <li>Web Serial API requires Chrome 89+ or Edge 89+</li>
          <li>Firefox and Safari are not supported</li>
          <li>Mobile browsers do not support Web Serial API</li>
          <li>Ensure site is accessed via HTTPS or localhost</li>
        </ul>

        <h3>Permissions</h3>
        <ul>
          <li>Grant serial port access when prompted</li>
          <li>Check browser permission settings if blocked</li>
          <li>Clear site data and try again if permissions are corrupted</li>
        </ul>
      </div>
    </div>

    <div class="help-panel">
      <h2>Privacy & Storage</h2>
      <p class="muted">Your privacy and data security are important. Here's what the app stores:</p>

      <h3>Local Storage</h3>
      <ul>
        <li><strong>Command History:</strong> Stored in browser cookies, cleared with "Clear history" button</li>
        <li><strong>Settings:</strong> Connection and input preferences stored in localStorage</li>
        <li><strong>No Server Communication:</strong> All data remains on your device</li>
        <li><strong>No Telemetry:</strong> No usage data is collected or transmitted</li>
      </ul>

      <h3>Data Control</h3>
      <ul>
        <li>Export settings and history to JSON for backup</li>
        <li>Clear history manually via UI button</li>
        <li>Clear all data by clearing browser storage for this site</li>
        <li>Settings reset button restores defaults</li>
      </ul>
    </div>

    <div style="text-align: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--panel-border);">
      <a href="index.html" class="back-link">← Back to app</a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>