dev

{#

    sections/mode_panels.html

    -------------------------

    Per-mode framing + observation panels for the control page.

    Each macro is a self-contained form. control.js shows/hides the active panel.

    Expose buttons collect form values and POST to /api/sequencer/run via control.js.

#}

{% macro imaging_panel() %}

<div id="mode-panel-imaging" class="mode-panel" data-subsystem="camera">

    <div class="card mb-3">

        <div class="card-body">

            <h6 class="card-title text-info mb-3">Imaging — Framing</h6>

            <div class="btn-group btn-group-sm w-100 mb-3">

                <button class="btn btn-outline-primary btn-universal"

                        data-method="PUT" data-url="/camera/frame/full">Full</button>

                <button class="btn btn-outline-primary btn-universal"

                        data-method="PUT" data-url="/camera/frame/half">Half</button>

                <button class="btn btn-outline-primary btn-universal"

                        data-method="PUT" data-url="/camera/frame/small">Small</button>

            </div>

            <div class="row g-1 small font-monospace text-success">

                <div class="col-6">X: <var data-status="camera-settings-xystart-0">—</var> → <var data-status="camera-settings-xyend-0">—</var></div>

                <div class="col-6">Y: <var data-status="camera-settings-xystart-1">—</var> → <var data-status="camera-settings-xyend-1">—</var></div>

            </div>

        </div>

    </div>

    <div class="card mb-3">

        <div class="card-body">

            <h6 class="card-title text-info mb-3">Imaging — Observe</h6>

            <form id="form-imaging" autocomplete="off">

                <div class="row g-2 mb-2">

                    <div class="col-4">

                        <label class="small text-muted">Type</label>

                        <select class="form-select form-select-sm bg-black" name="frametype">

                            <option value="Light">Light</option>

                            <option value="Bias">Bias</option>

                            <option value="Flat">Flat</option>

                            <option value="Dark">Dark</option>

                        </select>

                    </div>

                    <div class="col-4">

                        <label class="small text-muted">Filter</label>

                        <select class="form-select form-select-sm bg-black" name="filter">

                            <option value="SDSS u">SDSS u</option>

                            <option value="SDSS g">SDSS g</option>

                            <option value="SDSS r">SDSS r</option>

                            <option value="SDSS i">SDSS i</option>

                            <option value="SDSS z">SDSS z</option>

                            <option value="SDSS y">SDSS y</option>

                            <option value="FREE">Free</option>

                        </select>

                    </div>

                    <div class="col-4">

                        <label class="small text-muted">Binning</label>

                        <select class="form-select form-select-sm bg-black" name="binning">

                            <option value="1">1×1</option>

                            <option value="2">2×2</option>

                            <option value="3">3×3</option>

                        </select>

                    </div>

                </div>

                <div class="row g-2 mb-2">

                    <div class="col-6">

                        <label class="small text-muted">Exptime (s)</label>

                        <input type="number" class="form-control form-control-sm bg-black"

                               name="exptime" value="10.0" min="0" step="0.1">

                    </div>

                    <div class="col-6">

                        <label class="small text-muted">Repeat (#)</label>

                        <input type="number" class="form-control form-control-sm bg-black"

                               name="repeat" value="1" min="1" max="300">

                    </div>

                    <div class="col-12">

                        <label class="small text-muted">Object</label>

                        <input type="text" class="form-control form-control-sm bg-black"

                               name="object" value="Test">

                    </div>

                </div>

                <div class="d-flex gap-2 align-items-center bg-black bg-opacity-25 p-2 rounded mb-3">

                    <div class="form-check form-switch mb-0">

                        <input class="form-check-input" type="checkbox"

                               id="imaging-recenter" name="recenter">

                        <label class="form-check-label small text-muted" for="imaging-recenter">

                            Recenter (scicam)

                        </label>

                    </div>

                    <div class="form-check form-switch mb-0 ms-3">

                        <input class="form-check-input" type="checkbox"

                               id="imaging-dome" name="domeslewing" checked>

                        <label class="form-check-label small text-muted" for="imaging-dome">

                            Dome slewing

                        </label>

                    </div>

                    <div class="input-group input-group-sm ms-auto" style="max-width: 100px;">

                        <input type="number" class="form-control bg-black text-info border-secondary"

                               name="box" value="300">

                        <span class="input-group-text bg-dark border-secondary small">px</span>

                    </div>

                </div>

                <div class="input-group">

                    <button class="btn btn-primary flex-fill" type="button"

                            id="btn-imaging-expose">Expose</button>

                    <button class="btn btn-danger btn-universal" type="button"

                            data-method="DELETE" data-url="/sequencer/run">Stop</button>

                </div>

            </form>

            <div class="row g-1 mt-2 small font-monospace">

                <div class="col-4 text-success">state: <var data-status="camera-snapshot-state">—</var></div>

                <div class="col-4 text-success">filter: <var data-status="camera-filter">—</var></div>

                <div class="col-4 text-success">T: <var data-status="camera-settings-temperature">—</var>°C</div>

            </div>

        </div>

    </div>

</div>

{% endmacro %}

{% macro spectro_panel() %}

<div id="mode-panel-spectro" class="mode-panel d-none" data-subsystem="camera2">

    <div class="card mb-3">

        <div class="card-body">

            <h6 class="card-title text-info mb-3">Spectro — Framing</h6>

            <div class="btn-group btn-group-sm w-100 mb-3">

                <button class="btn btn-outline-primary btn-universal"

                        data-method="PUT" data-url="/camera2/frame/full">Full</button>

                <button class="btn btn-outline-primary btn-universal"

                        data-method="PUT" data-url="/camera2/frame/half">Half</button>

                <button class="btn btn-outline-primary btn-universal"

                        data-method="PUT" data-url="/camera2/frame/small">Small</button>

            </div>

            <div class="row g-1 small font-monospace text-success">

                <div class="col-6">X: <var data-status="camera2-settings-xystart-0">—</var> → <var data-status="camera2-settings-xyend-0">—</var></div>

                <div class="col-6">Y: <var data-status="camera2-settings-xystart-1">—</var> → <var data-status="camera2-settings-xyend-1">—</var></div>

            </div>

        </div>

    </div>

    <div class="card mb-3">

        <div class="card-body">

            <h6 class="card-title text-info mb-3">Spectro — Observe</h6>

            <form id="form-spectro" autocomplete="off">

                <div class="row g-2 mb-2">

                    <div class="col-6">

                        <label class="small text-muted">Type</label>

                        <select class="form-select form-select-sm bg-black" name="frametype">

                            <option value="Light">Light</option>

                            <option value="Bias">Bias</option>

                            <option value="Flat">Flat</option>

                            <option value="Dark">Dark</option>

                        </select>

                    </div>

                    <div class="col-6">

                        <label class="small text-muted">Binning</label>

                        <select class="form-select form-select-sm bg-black" name="binning">

                            <option value="1">1×1</option>

                            <option value="2">2×2</option>

                        </select>

                    </div>

                </div>

                <div class="row g-2 mb-2">

                    <div class="col-6">

                        <label class="small text-muted">Exptime (s)</label>

                        <input type="number" class="form-control form-control-sm bg-black"

                               name="exptime" value="10.0" min="0" step="0.1">

                    </div>

                    <div class="col-6">

                        <label class="small text-muted">Repeat (#)</label>

                        <input type="number" class="form-control form-control-sm bg-black"

                               name="repeat" value="1" min="1" max="300">

                    </div>

                    <div class="col-12">

                        <label class="small text-muted">Object</label>

                        <input type="text" class="form-control form-control-sm bg-black"

                               name="object" value="Test">

                    </div>

                </div>

                <div class="d-flex gap-2 align-items-center bg-black bg-opacity-25 p-2 rounded mb-3">

                    <div class="form-check form-switch mb-0">

                        <input class="form-check-input" type="checkbox"

                               id="spectro-dome" name="domeslewing">

                        <label class="form-check-label small text-muted" for="spectro-dome">

                            Dome slewing

                        </label>

                    </div>

                </div>

                <div class="input-group">

                    <button class="btn btn-primary flex-fill" type="button"

                            id="btn-spectro-expose">Expose</button>

                    <button class="btn btn-danger btn-universal" type="button"

                            data-method="DELETE" data-url="/sequencer/run">Stop</button>

                </div>

            </form>

            <div class="row g-1 mt-2 small font-monospace">

                <div class="col-6 text-success">state: <var data-status="camera2-snapshot-state">—</var></div>

                <div class="col-6 text-success">T: <var data-status="camera2-settings-temperature">—</var>°C</div>

            </div>

        </div>

    </div>

</div>

{% endmacro %}

{% macro echelle_panel() %}

<div id="mode-panel-echelle" class="mode-panel d-none">

    <div class="card mb-3">

        <div class="card-body text-center py-5">

            <p class="text-muted mb-1">Échelle</p>

            <small class="text-secondary">Not yet implemented.</small>

        </div>

    </div>

</div>

{% endmacro %}