Skip to content

Commit e8fa4fd

Browse files
mbreiserclaude
andcommitted
docs: update quickstart guide for v0.6 features
Cover v2 protocol, plugins (backlight + camera), rig path, command card editor, table view, multi-lane timeline view, and the Add Command workflow. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 1de2948 commit e8fa4fd

1 file changed

Lines changed: 89 additions & 47 deletions

File tree

experiment_designer_quickstart.html

Lines changed: 89 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -219,29 +219,32 @@ <h1>Experiment Designer Quick Start</h1>
219219

220220
<h2>Interface overview</h2>
221221

222-
<div class="layout-diagram"><span class="hl">Top bar</span>: &larr; Back | Experiment Designer | [Import YAML] [Export YAML]
223-
&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
224-
<span class="hl">Left panel</span> &#9474; <span class="hl">Right panel</span>
222+
<div class="layout-diagram"><span class="hl">Top bar</span>: &larr; Back | Experiment Designer [Quick Start] [Import YAML] [<span class="hl">Export YAML</span>]
223+
&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
224+
<span class="hl">Left panel</span> &#9474; <span class="hl">Right panel</span>: [VISUAL] [TABLE] [TIMELINE]
225225
&#9474;
226-
Experiment &#9474; Condition / Phase Editor
227-
Arena Config &#9474; (appears when you click a
228-
Structure &#9474; block on the timeline)
226+
Experiment &#9474; Visual: Command card editor
227+
Arena + Rig &#9474; Table: Spreadsheet view
228+
Structure &#9474; Timeline: Multi-lane SVG
229229
Phases &#9474;
230-
&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
230+
Plugins &#9474; (select a block on the timeline
231+
&#9474; to populate the editor)
232+
&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
231233
<span class="hl">Timeline</span>: [+ Add] | summary [&#8722;] [+] [Fit]
232234
<span class="hl">PRE</span> &#9474; <span class="hl">Cond 1</span> &#9474; <span class="hl">ITI</span> &#9474; <span class="hl">Cond 2</span> &#9474; <span class="hl">ITI</span> &#9474; <span class="hl">Cond 3</span> &#9474; <span class="hl">POST</span>
233235
0s 5s 10s 15s 20s 25s</div>
234236

235237
<p>The page has three zones:</p>
236238
<ul class="key-list">
237-
<li><strong>Left panel</strong> &mdash; experiment settings, arena choice, repetitions, phase toggles</li>
238-
<li><strong>Right panel</strong> &mdash; editor for whichever block you click on the timeline</li>
239-
<li><strong>Bottom timeline</strong> &mdash; your experiment sequence. Green = conditions, gray = phases (PRE/POST), dark = inter-trial intervals (ITI)</li>
239+
<li><strong>Left panel</strong> &mdash; experiment settings, arena + rig path, repetitions, phase toggles, plugin checkboxes</li>
240+
<li><strong>Right panel</strong> &mdash; three tabs for editing the selected condition or phase:
241+
<strong>Visual</strong> (command cards), <strong>Table</strong> (spreadsheet), <strong>Timeline</strong> (multi-lane SVG)</li>
242+
<li><strong>Bottom timeline</strong> &mdash; your experiment sequence. Green = conditions, gray = phases (PRE/POST), dark = inter-trial intervals (ITI). Click any block to edit it.</li>
240243
</ul>
241244

242245
<h2>Walkthrough: create an optomotor protocol</h2>
243246

244-
<p>We will build a simple experiment with 3 stimulus conditions, 3 repetitions, randomized, with inter-trial intervals.</p>
247+
<p>We will build an experiment with 3 stimulus conditions, backlight and camera plugins, 3 repetitions, randomized, with inter-trial intervals.</p>
245248

246249
<div class="step">
247250
<span class="step-number">1</span>
@@ -253,17 +256,17 @@ <h2>Walkthrough: create an optomotor protocol</h2>
253256

254257
<div class="step">
255258
<span class="step-number">2</span>
256-
<p><strong>Choose arena configuration</strong> (left panel, Arena section)</p>
259+
<p><strong>Choose arena and set rig path</strong> (left panel, Arena section)</p>
257260
<p>Select <code>G4.1 (2&times;12) - 360&deg;</code> from the dropdown.</p>
258-
<p class="hint">The summary below the dropdown confirms: G4.1 &mdash; 2 rows &times; 12 cols</p>
261+
<p>Rig Path: <code>./configs/rigs/my_rig.yaml</code></p>
262+
<p class="hint">The arena dropdown sets the visual preview. The rig path is written to the v2 YAML for MATLAB to resolve the full hardware configuration.</p>
259263
</div>
260264

261265
<div class="step">
262266
<span class="step-number">3</span>
263267
<p><strong>Set repetitions and randomization</strong> (left panel, Structure section)</p>
264268
<p>Repetitions: <code>3</code></p>
265269
<p>Check <strong>Randomize order</strong></p>
266-
<p class="hint">The summary bar on the timeline updates to show total trials and duration.</p>
267270
</div>
268271

269272
<div class="step">
@@ -275,70 +278,93 @@ <h2>Walkthrough: create an optomotor protocol</h2>
275278

276279
<div class="step">
277280
<span class="step-number">5</span>
278-
<p><strong>Edit the first condition</strong> (right panel)</p>
279-
<p>The first condition is auto-selected on page load. In the right panel:</p>
280-
<p>Condition ID: <code>rightward_grating</code></p>
281-
<p>Pattern File: <code>pat0002_rightward_grating.pat</code></p>
282-
<p>Duration: <code>5</code> seconds</p>
283-
<p>Mode: <code>Constant Rate</code>, Frame Rate: <code>60</code></p>
284-
<p class="hint">The timeline block updates in real time as you type.</p>
281+
<p><strong>Enable plugins</strong> (left panel, Plugins section &mdash; scroll down)</p>
282+
<p>Check <strong>LED Backlight</strong> &mdash; config card expands with Serial Port field</p>
283+
<p>Check <strong>BIAS Camera</strong> &mdash; config card expands with Video Format and Frame Rate</p>
284+
<p class="hint">Enabling plugins makes their commands available in the "Add Command" dropdown when editing conditions.</p>
285285
</div>
286286

287287
<div class="step">
288288
<span class="step-number">6</span>
289-
<p><strong>Add a second condition</strong></p>
290-
<p>Click <strong>+ Add Condition</strong> in the timeline toolbar. A new green block appears and is auto-selected.</p>
291-
<p>Condition ID: <code>leftward_grating</code></p>
292-
<p>Pattern File: <code>pat0003_leftward_grating.pat</code></p>
293-
<p>Duration: <code>5</code>, Frame Rate: <code>60</code></p>
289+
<p><strong>Edit the first condition</strong> (right panel, Visual tab)</p>
290+
<p>Click the first green condition block on the bottom timeline. The Visual tab shows command cards.</p>
291+
<p>Set the Condition ID: <code>rightward_grating</code></p>
292+
<p>In the <strong>trialParams</strong> card: Pattern: <code>pat0002_rightward_grating.pat</code>, Duration: <code>5</code>, Mode: <code>Constant Rate</code>, Frame Rate: <code>60</code></p>
293+
<p class="hint">The timeline block updates in real time as you type.</p>
294294
</div>
295295

296296
<div class="step">
297297
<span class="step-number">7</span>
298-
<p><strong>Add a dark control condition</strong></p>
299-
<p>Click <strong>+ Add Condition</strong> again.</p>
300-
<p>Condition ID: <code>dark_control</code></p>
301-
<p>Leave <strong>Pattern File empty</strong> &mdash; this generates an <code>allOff</code> command in the YAML</p>
302-
<p>Duration: <code>3</code> seconds</p>
298+
<p><strong>Add plugin commands to the condition</strong></p>
299+
<p>Use the <strong>+ Add Command...</strong> dropdown at the bottom of the card list:</p>
300+
<p>Select <code>Get Timestamp</code> from the BIAS Camera group &mdash; a blue plugin card appears</p>
301+
<p>Select <code>Wait</code> &mdash; a gray wait card appears (set duration to <code>3</code>)</p>
302+
<p>Select <code>Set IR LED Power</code> from the LED Backlight group &mdash; set power to <code>50</code></p>
303+
<p class="hint">Commands execute sequentially. trialParams fires the arena controller autonomously; plugin and wait commands run during the display period.</p>
303304
</div>
304305

305306
<div class="step">
306307
<span class="step-number">8</span>
307-
<p><strong>Configure the pretrial phase</strong></p>
308-
<p>Click the gray <strong>PRE</strong> block on the timeline.</p>
309-
<p>Pattern File: <code>pat0001_test_grid.pat</code></p>
310-
<p>Duration: <code>2</code>, Wait After: <code>0.5</code></p>
308+
<p><strong>Add more conditions</strong></p>
309+
<p>Click <strong>+ Add Condition</strong> in the timeline toolbar. Repeat for a third.</p>
310+
<p>Set IDs like <code>leftward_grating</code> and <code>dark_control</code>. For the dark control, leave Pattern empty to generate an <code>allOff</code> command.</p>
311311
</div>
312312

313313
<div class="step">
314314
<span class="step-number">9</span>
315-
<p><strong>Configure the inter-trial interval</strong></p>
316-
<p>Click any dark <strong>ITI</strong> block on the timeline.</p>
317-
<p>Pattern File: <code>pat0004_uniform_gray.pat</code></p>
318-
<p>Duration: <code>2</code>, Wait After: <code>0.5</code></p>
315+
<p><strong>Configure phases</strong></p>
316+
<p>Click the gray <strong>PRE</strong> block. The phase editor shows command cards just like conditions.</p>
317+
<p>The default is <code>allOff</code> + <code>wait 0.5s</code>. Use the Add Command dropdown to add plugin commands (e.g., <code>Start Recording</code> from BIAS Camera).</p>
319318
</div>
320319

321320
<div class="step">
322321
<span class="step-number">10</span>
323-
<p><strong>Reorder conditions (optional)</strong></p>
324-
<p>Drag any green condition block and drop it onto another to swap positions.</p>
322+
<p><strong>Review in Table view</strong></p>
323+
<p>Click the <strong>TABLE</strong> tab to see all commands across all sections as a spreadsheet.</p>
324+
<p>Collapsible sections show Pretrial, each Condition, Intertrial, and Posttrial with their command lists.</p>
325+
<p class="hint">Type badges are color-coded: green = controller, gray = wait, blue = plugin.</p>
325326
</div>
326327

327328
<div class="step">
328329
<span class="step-number">11</span>
330+
<p><strong>Visualize with Timeline view</strong></p>
331+
<p>Click the <strong>TIMELINE</strong> tab, then click a condition on the bottom timeline.</p>
332+
<p>The SVG shows concurrent lanes: controller bar (green), plugin markers (blue dots), and wait bars (gray).</p>
333+
<p class="hint">This shows how trialParams runs autonomously while plugin commands execute at their sequential time positions. Hover over elements for tooltips.</p>
334+
</div>
335+
336+
<div class="step">
337+
<span class="step-number">12</span>
329338
<p><strong>Export your protocol</strong></p>
330339
<p>Click <strong>Export YAML</strong> (or press <code>Ctrl+E</code>). A <code>.yaml</code> file downloads.</p>
331-
<p class="hint">The file is a valid protocol v1 YAML ready for MATLAB execution.</p>
340+
<p class="hint">The file is a valid protocol v2 YAML with rig reference, plugins, and multi-command conditions &mdash; ready for MATLAB execution.</p>
332341
</div>
333342

334343
<h2>Importing an existing protocol</h2>
335344

336-
<p>Click <strong>Import YAML</strong> in the top bar and select any protocol v1 <code>.yaml</code> file. The editor populates with all settings, conditions, and phases from the file. You can then modify and re-export.</p>
345+
<p>Click <strong>Import YAML</strong> in the top bar and select any v2 protocol <code>.yaml</code> file. The editor populates with all settings, conditions, plugins, and phases. You can modify and re-export.</p>
337346

338347
<div class="tip-box">
339-
<strong>Try it now:</strong> Download the example file <a href="examples/simple_optomotor_protocol.yaml">simple_optomotor_protocol.yaml</a> and import it into the designer to see the walkthrough above pre-filled.
348+
<strong>Try it:</strong> Import one of the example protocols from the maDisplayTools repository, such as <code>full_experiment_test.yaml</code> (9 conditions with camera + backlight plugins) to see a fully populated experiment.
340349
</div>
341350

351+
<h2>Editor tabs</h2>
352+
353+
<h3>Visual tab</h3>
354+
<p>The default editor. Each command is a color-coded card with inline editable fields. Cards have colored left borders: <strong style="color: #00e676;">green</strong> = controller, <strong style="color: #8b949e;">gray</strong> = wait, <strong style="color: #4dabf7;">blue</strong> = plugin. Use the <code>+ Add Command...</code> dropdown to add new commands. Click <strong>&times;</strong> to delete a command.</p>
355+
356+
<h3>Table tab</h3>
357+
<p>Shows the entire experiment as a spreadsheet with collapsible sections. Each row is one command with columns for Type, Target (plugin name), Command, Duration, Mode, Frame Rate, and Pattern/Params. Click section headers to collapse/expand.</p>
358+
359+
<h3>Timeline tab</h3>
360+
<p>SVG multi-lane visualization of the selected condition. Shows how commands execute concurrently:</p>
361+
<ul class="key-list">
362+
<li><strong>Controller lane</strong> &mdash; green bar spanning the trialParams duration</li>
363+
<li><strong>Plugin lanes</strong> &mdash; blue circle markers at each plugin command's execution time</li>
364+
<li><strong>Waits row</strong> &mdash; gray bars showing pause durations</li>
365+
</ul>
366+
<p class="hint">Key insight: <code>trialParams</code> fires the arena controller which runs autonomously for its duration. Wait commands advance the clock. Plugin commands fire at the current clock position without advancing it.</p>
367+
342368
<h2>Timeline controls</h2>
343369

344370
<ul class="key-list">
@@ -358,19 +384,35 @@ <h2>Keyboard shortcuts</h2>
358384

359385
<h2>Key concepts</h2>
360386

387+
<h3>Protocol v2</h3>
388+
<p>The designer exports <strong>YAML protocol v2</strong>. Key differences from v1: a <code>rig:</code> reference replaces inline <code>arena_info:</code>, a <code>plugins:</code> section defines hardware plugins, and conditions use <strong>command arrays</strong> (multiple commands per condition, not just one trialParams).</p>
389+
361390
<h3>Conditions vs. Trials</h3>
362-
<p>You define <strong>conditions</strong> (unique stimulus configurations). The experiment runs each condition &times; repetitions, optionally in random order. The actual sequence of <strong>trials</strong> is shown in the summary bar.</p>
391+
<p>You define <strong>conditions</strong> (unique stimulus + plugin configurations). The experiment runs each condition &times; repetitions, optionally in random order. The actual sequence of <strong>trials</strong> is shown in the summary bar.</p>
392+
393+
<h3>Commands</h3>
394+
<p>Each condition and phase contains a sequence of <strong>commands</strong>:</p>
395+
<ul class="key-list">
396+
<li><strong>controller</strong> &mdash; arena commands: <code>trialParams</code> (display pattern), <code>allOn</code>, <code>allOff</code>, <code>stopDisplay</code></li>
397+
<li><strong>wait</strong> &mdash; pause execution for a specified duration</li>
398+
<li><strong>plugin</strong> &mdash; send a command to an enabled plugin (e.g., <code>camera.getTimestamp</code>, <code>backlight.setRedLEDPower</code>)</li>
399+
</ul>
400+
401+
<h3>Plugins</h3>
402+
<p><strong>LED Backlight</strong> (LEDControllerPlugin): control IR and visible LEDs behind arena panels. Commands: setIRLEDPower, setRedLEDPower, setGreenLEDPower, setBlueLEDPower, turnOnLED, turnOffLED, setVisibleBacklightsOff.</p>
403+
<p><strong>BIAS Camera</strong> (BiasPlugin): video recording and timestamps. Commands: startRecording, stopRecording, startPreview, stopCapture, getTimestamp, disconnect.</p>
404+
<p class="hint">Enable plugins in the left panel to make their commands available in the Add Command dropdown.</p>
363405

364406
<h3>Phases</h3>
365-
<p><strong>Pretrial</strong> runs once before all trials. <strong>Intertrial</strong> runs between every trial. <strong>Posttrial</strong> runs once after all trials complete. Each phase has one pattern command + an optional wait.</p>
407+
<p><strong>Pretrial</strong> runs once before all trials. <strong>Intertrial</strong> runs between every trial. <strong>Posttrial</strong> runs once after all trials complete. Each phase can contain any combination of controller, wait, and plugin commands.</p>
366408

367409
<h3>Modes</h3>
368410
<p><strong>Constant Rate</strong> (mode 2): pattern plays at a fixed frame rate. Set <code>Frame Rate</code> in fps.</p>
369411
<p><strong>Closed-Loop</strong> (mode 4): pattern responds to analog input. Set <code>Gain</code> value.</p>
370412
<p>The irrelevant parameter is automatically dimmed and disabled.</p>
371413

372414
<h3>Empty pattern = allOff</h3>
373-
<p>If you leave the Pattern File field empty for a condition, the YAML export generates an <code>allOff</code> controller command. This is useful for dark control conditions.</p>
415+
<p>If you leave the Pattern File field empty for a trialParams command, the condition exports with an <code>allOff</code> controller command. This is useful for dark control conditions.</p>
374416

375417
<footer>
376418
<p><a href="experiment_designer.html">Experiment Designer</a> | <a href="index.html">PanelDisplayTools</a> | <a href="https://github.com/reiserlab/webDisplayTools" target="_blank">GitHub</a></p>

0 commit comments

Comments
 (0)