Add multi-printer dual-pane dashboard support#365
Open
Conversation
Implements 1-pane ↔ 2-pane switchable layout for simultaneous monitoring
of up to 2 printers on a 1920×1080 display, with per-printer color
coding, connection settings modal, and auto-connect restoration.
Key changes:
- dashboard_data.js: add connections[], activeLayout, paneAssignment to appSettings
- 3dp_monitor.html: global menu bar (48px fixed), dual-pane structure, p1-/p2- ID prefixes
- 3dp_monitor.css: 960px-responsive layout, 2-pane flex, --printer-color CSS vars
- 3dp_dashboard_init.js: export getPaneEl(id, paneIndex), full paneIndex support
- dashboard_chart.js: chartStateMap (Map keyed by canvas element) for multi-instance graphs
- dashboard_camera_ctrl.js: cameraStateMap per host, paneIndex-aware stream start/stop
- dashboard_stage_preview.js: paneIndex param on all preview functions
- dashboard_connection.js: updateConnectionUI/updatePrinterListUI pane-aware (p${n}- prefix)
- dashboard_conn_settings.js: new ConnSettingsModal class (<dialog>-based CRUD UI)
- dashboard_layout_manager.js: new setLayout/restoreLayout/assignPrinterToPane/showLayoutSelectDialog
- 3dp_dashboard_main.js: global menu bar events, pane-2 init, connections[] auto-connect
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…domProps ID prefix
- 3dp_dashboard_main.js: fix outside-click handler using menuBtn.contains() instead of
e.target !== menuBtn, preventing dropdown from closing immediately after open
- dashboard_stage_preview.js:79: fix querySelector using single-quotes instead of
backticks, causing literal '#p${paneIndex}-' string instead of template expansion
- dashboard_printmanager.js: add paneIndex param to initHistoryTabs(), use p${n}- prefix
for tab/panel IDs; guard against null elements with early return
- 3dp_dashboard_init.js: pass paneIndex to printManager.initHistoryTabs(paneIndex)
- dashboard_ui.js: domProps getElementById falls back through p1-/p2- prefixed IDs
before bare ID, fixing 'element not found' warnings for bedTempSlider etc.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Module-top-level getElementById calls (tab-received, log, notification-history, etc.) ran before DOM was ready and used bare IDs that no longer exist (now p1-/p2- prefixed). - Add _getEl(id) helper: tries p1-/p2- prefix then falls back to bare id - Convert module-level const refs to let, resolved lazily via _resolveLogEls() - Call _resolveLogEls() at start of initUIEventHandlers() - Fix adjustPrintCurrentCardPosition() to use _getEl() for graph-current-wrapper, print-current-card, print-history-card Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…itle-bar UI Problem: title-bar contained destination-input, auto-connect-toggle, camera-toggle-title which drove the old connection flow. These conflicted with the new connections[] system. Changes: - dashboard_conn_settings.js: add autoCamera checkbox to each connection entry (saved as conn.autoCamera flag in connections[]); add autoCamera:false to new entries - dashboard_connection.js: handleSocketOpen now checks connections[].autoCamera for the connecting host instead of global appSettings.cameraToggle (falls back to cameraToggle for backwards compat) - 3dp_dashboard_init.js: remove event bindings for destination-input, connect-button, auto-connect-toggle, camera-toggle-title; remove wsDest-based auto-connect on load (now handled by _autoConnectAll() in 3dp_dashboard_main.js) - 3dp_monitor.html (pane-1 & pane-2): remove destination-input, auto-connect-toggle, camera-toggle-title; keep destination-display, connection-status, connect/disconnect buttons (used by updateConnectionUI) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
#dashboard-rootにlayout-preset1/layout-preset2クラスを付け外しchartStateMap（キャンバス要素キー）、cameraStateMap（ホストキー）でグラフ・カメラをマルチインスタンス化。各ペインにp1-/p2-ID接頭辞を付与しgetPaneEl(id, paneIndex)で解決ConnSettingsModal（<dialog>ベース）でプリンタ名・色・IP・WSポート・CAMポート・自動接続を CRUD 管理。connections[]をappSettingsに永続化.printer-paneに--printer-color/--printer-color-faintCSS 変数を適用し、カードタイトルバーとカード背景をペイン別に色分けconnections[]のautoConnect: trueエントリへ 200ms 間隔で順次connectWs()を呼び出し変更ファイル (11ファイル、+3216/-607行)
dashboard_data.jsconnections[],activeLayout,paneAssignment追加3dp_monitor.html3dp_monitor.css3dp_dashboard_init.jsgetPaneEl()export、全getElementByIdをpaneIndex対応に置換dashboard_chart.jschartStateMap（Map）でcanvas別マルチインスタンス化dashboard_camera_ctrl.jscameraStateMapでホスト別マルチインスタンス化dashboard_stage_preview.jspaneIndex引数追加dashboard_connection.jsupdateConnectionUI/updatePrinterListUIペイン対応dashboard_conn_settings.jsConnSettingsModalクラスdashboard_layout_manager.jssetLayout/restoreLayout/assignPrinterToPane/showLayoutSelectDialog3dp_dashboard_main.jsconnections[]自動接続Test plan
start.bat→http://localhost:8000/3dp_monitor.htmlで既存1ペイン機能（接続・温度グラフ・カメラ・ログ）が正常動作すること🤖 Generated with Claude Code