Commit 15079327 authored by vertighel's avatar vertighel
Browse files

refactor: widget_onoff to input-group, webcam layout, vmbpy local whl 



- widget_onoff: converted from d-flex to input-group+span.status-container
- widget_standard/shutter/render_info: added font-monospace to var badges
- ui-core: simplified applyVarStatusStyles (remove class overrides)
- webcam_panel: restructured layout to match original (figure/figcaption/hgroup)
- control_panel: removed dead camera_windowing macro
- synoptic_panel: converted Jinja comment to HTML comment
- pyproject.toml: vmbpy from local whl (lib/), version 0.5.1
- .gitignore: unblock lib/ to track vmbpy whl

Co-Authored-By: default avatarClaude Sonnet 4.6 <noreply@anthropic.com>
parent 0493fcc2

.gitignore

+1 −1
Original line number Diff line number Diff line
@@ -26,7 +26,7 @@ dist/ 
downloads/

eggs/

.eggs/

lib/

#lib/

lib64/

parts/

sdist/

lib/vmbpy-1.2.1-py3-none-manylinux_2_27_x86_64.whl

0 → 100644
+2.65 MiB

File added.

No diff preview for this file type.

View file

noctua/web/pages/macros/control_panel.html

+0 −54
Original line number Diff line number Diff line
@@ -197,57 +197,3 @@ 
</div>

{% endmacro %}



{% macro camera_windowing(label, fields) %}

{% set safe_id = label | replace(' ', '-') | lower %}

<!-- <div class="card mb-3"> -->

<!--   <div class="card-body"> -->

    

<!--     <\!-- Header: Widget title and global telemetry readout -\-> -->

<!--     <h6 class="card-title text-info d-flex justify-content-between align-items-center mb-3"> -->

<!--       Camera Framing -->

<!--       <span class="badge bg-secondary font-monospace" data-status="camera-snapshot-state" data-status-suffix="-snapshot-state">N/A</span> -->

<!--     </h6> -->

    

<!--         <\!-- Rebuilt by applyMode() in control.js when mode changes -\-> -->

<!--         <div class="btn-group btn-group-sm w-100 mb-3" id="framing-presets" role="group"></div> -->



<!--         <\!-- Telemetry Panel: standard layout automatically updated by status-stream.js -\-> -->

<!--         <div class="row g-2 pt-2 font-monospace small"> -->



<!--             <div class="col-6 text-success d-flex justify-content-between pe-2"> -->

<!--                 <span class="text-muted">Start X:</span> -->

<!--                 <var class="fw-bold" data-status="camera-settings-xystart-0" data-status-suffix="-settings-xystart-0">0</var> -->

<!--             </div> -->



<!--             <div class="col-6 text-success d-flex justify-content-between ps-2 border-start border-secondary border-opacity-25"> -->

<!--                 <span class="text-muted">Start Y:</span> -->

<!--                 <var class="fw-bold" data-status="camera-settings-xystart-1" data-status-suffix="-settings-xystart-1">0</var> -->

<!--             </div> -->



<!--             <div class="col-6 text-success d-flex justify-content-between pe-2"> -->

<!--                 <span class="text-muted">End X:</span> -->

<!--                 <var class="fw-bold" data-status="camera-settings-xyend-0" data-status-suffix="-settings-xyend-0">4145</var> -->

<!--             </div> -->



<!--             <div class="col-6 text-success d-flex justify-content-between ps-2 border-start border-secondary border-opacity-25"> -->

<!--                 <span class="text-muted">End Y:</span> -->

<!--                 <var class="fw-bold" data-status="camera-settings-xyend-1" data-status-suffix="-settings-xyend-1">4126</var> -->

<!--             </div> -->



<!--             <div class="col-6 text-success d-flex justify-content-between pe-2"> -->

<!--                 <span class="text-muted">Width:</span> -->

<!--                 <var class="fw-bold" data-status="camera-settings-size-0" data-status-suffix="-settings-size-0">N/A</var> -->

<!--             </div> -->



<!--             <div class="col-6 text-success d-flex justify-content-between ps-2 border-start border-secondary border-opacity-25"> -->

<!--                 <span class="text-muted">Height:</span> -->

<!--                 <var class="fw-bold" data-status="camera-settings-size-1" data-status-suffix="-settings-size-1">N/A</var> -->

<!--             </div> -->



<!--         </div> -->



<!--     </div> -->

<!-- </div> -->



{% endmacro %}

noctua/web/pages/macros/synoptic_panel.html

+4 −2
Original line number Diff line number Diff line 
{#

<!--



    synoptic_panel.html

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

    Reusable synoptic SVG panel.

    Pages that include this macro must add to their scripts block:

      <script>window.SYNOPTIC_SVG_URL = "{{ url_for('web.static', filename='img/synoptic.svg') }}";</script>

      <script type="module" src="{{ url_for('web.static', filename='js/synoptic.js') }}"></script>

#}



      -->

      

{% macro synoptic_panel() %}

<div class="bg-black rounded d-flex justify-content-center align-items-start p-2">

noctua/web/pages/macros/webcam_panel.html

+56 −45
Original line number Diff line number Diff line 
{#

    webcam_panel.html

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

    Reusable webcam panel: snapshot image, Light/Lamp toggles, PTZ controls.

    Pages that include this macro must load webcam.js in their scripts block.

#}



<!-- webcam_panel.html -->

<!-- ----------------- -->

<!-- Reusable webcam panel: snapshot image, Light/Lamp toggles, PTZ controls. -->

<!-- Pages that include this macro must load webcam.js in their scripts block. -->



{% from "macros/widgets.html" import widget_onoff, widget_standard %}



{% macro webcam_panel() %}

<div class="card mb-3" id="webcam-card" data-subsystem="webcam">

<div id="webcam-card" data-subsystem="webcam">



    <div class="position-relative text-center" style="min-height: 200px;">

        <img id="webcam-snapshot" class="img-fluid w-100 object-fit-contain"

             style="max-height: 350px;" alt="Waiting for webcam..." src="">

    </div>

    <figure class="card">

        <img id="webcam-snapshot" class="card-img-top" alt="Waiting for webcam..." src="">



    <div class="card-body">

        <figcaption class="card-body">

          <hgroup class="row">

            <h5 class="col-md card-title">Dome Webcam</h5>



        <div class="d-flex gap-3 align-items-center mb-3">

              <div class="col-md-3">

                {{ widget_onoff('Light', 'dome-light',     '/dome/light')     }}

            {{ widget_onoff('Lamp',  'telescope-lamp',  '/telescope/lamp')  }}

              </div>

              

        <aside class="row align-items-end g-2 mt-1">

          <div class="col-md-4 d-flex">

            <label class="col-form-label">Move</label>

              <div class="col-md-3">

                {{ widget_onoff('Lamp',  'telescope-lamp', '/telescope/lamp') }}

              </div>

            

          </hgroup>

          

            {{ widget_standard({

            'label': "Webcam",

            'buttons': [

              {'label': "Reset",    'endpoint': "/webcam/position", 'val': [15, 180], 'method': "PUT"},

              {'label': "Look top", 'endpoint': "/webcam/position", 'val': [55, 170], 'method': "PUT"}

            ]}) }}

              



            <aside class="row mt-2">

              <label for="webcam-position" class="col-md-2 col-form-label">Move</label>

              

              <div class="col-md">

                <div class="input-group input-group-sm">

            <input id="webcam-position" class="form-control" type="number"

                   value="20" style="max-width: 70px;">

                  <input id="webcam-position" class="col-md form-control bg-black"

                         type="number" value="20">

                    <span class="input-group-text">°</span>

            <button type="button" class="btn btn-secondary btn-webcam-move"

                    <button type="button" class="col-md btn btn-secondary btn-webcam-move"

                            data-sign="+1" data-mode="0" title="Up">↑</button>

            <button type="button" class="btn btn-secondary btn-webcam-move"

                    <button type="button" class="col-md btn btn-secondary btn-webcam-move"

                            data-sign="-1" data-mode="0" title="Down">↓</button>

            <button type="button" class="btn btn-secondary btn-webcam-move"

                    <button type="button" class="col-md btn btn-secondary btn-webcam-move"

                            data-sign="-1" data-mode="1" title="Left">←</button>

            <button type="button" class="btn btn-secondary btn-webcam-move"

                    <button type="button" class="col-md btn btn-secondary btn-webcam-move"

                            data-sign="+1" data-mode="1" title="Right">→</button>

                </div>

              </div>

              

                

            </aside>



        <div class="col">

            {{ widget_standard({'buttons': [

                {'label': "Reset",    'endpoint': "/webcam/position", 'val': [15, 180], 'method': "PUT"},

                {'label': "Look top", 'endpoint': "/webcam/position", 'val': [55, 170], 'method': "PUT"}

            ]}) }}

        </div>

        </figcaption>

    </figure>



</div>

</div>

{% endmacro %}