@@ -881,6 +1021,114 @@
}
});
+ // Settings panel handlers
+ const settingsButton = document.getElementById('settingsButton');
+ const settingsPanel = document.getElementById('settingsPanel');
+ const settingsOverlay = document.getElementById('settingsOverlay');
+ const pointSizeInput = document.getElementById('pointSize');
+ const meshColorInput = document.getElementById('meshColor');
+ const edgeWidthInput = document.getElementById('edgeWidth');
+ const representationSettings = document.getElementById('representationSettings');
+ const parallelProjectionInput = document.getElementById('parallelProjectionSetting');
+ const applySettingsButton = document.getElementById('applySettings');
+ const cancelSettingsButton = document.getElementById('cancelSettings');
+
+ // Store current settings
+ let currentPointSize = 3;
+ let currentMeshColor = '#ffffff';
+ let currentEdgeWidth = 1;
+ let currentRepresentation = 2; // 2 = Surface
+ let currentParallelProjection = false;
+
+ // Open settings panel
+ settingsButton.addEventListener('click', () => {
+ // Update inputs with current values
+ pointSizeInput.value = currentPointSize;
+ meshColorInput.value = currentMeshColor;
+ edgeWidthInput.value = currentEdgeWidth;
+ representationSettings.value = currentRepresentation.toString();
+ parallelProjectionInput.checked = currentParallelProjection;
+
+ settingsPanel.classList.add('visible');
+ settingsOverlay.classList.add('visible');
+ });
+
+ // Close settings panel
+ function closeSettingsPanel() {
+ settingsPanel.classList.remove('visible');
+ settingsOverlay.classList.remove('visible');
+ }
+
+ // Close on overlay click
+ settingsOverlay.addEventListener('click', closeSettingsPanel);
+
+ // Cancel button
+ cancelSettingsButton.addEventListener('click', closeSettingsPanel);
+
+ // Apply settings
+ applySettingsButton.addEventListener('click', () => {
+ const newPointSize = parseFloat(pointSizeInput.value);
+ const newColor = meshColorInput.value;
+ const newEdgeWidth = parseFloat(edgeWidthInput.value);
+ const newRepresentation = parseInt(representationSettings.value);
+ const newParallelProjection = parallelProjectionInput.checked;
+
+ console.log('[GeomPack VTK Dual Viewer] Applying settings - Point Size:', newPointSize, 'Color:', newColor, 'Edge Width:', newEdgeWidth, 'Representation:', newRepresentation, 'Parallel:', newParallelProjection);
+
+ // Convert hex color to RGB (0-1 range)
+ const r = parseInt(newColor.substr(1, 2), 16) / 255;
+ const g = parseInt(newColor.substr(3, 2), 16) / 255;
+ const b = parseInt(newColor.substr(5, 2), 16) / 255;
+
+ // Apply settings to actors
+ if (viewerLayout === 'side_by_side') {
+ // Apply to both actors in side-by-side mode
+ const leftProperty = leftActor.getProperty();
+ const rightProperty = rightActor.getProperty();
+
+ leftProperty.setPointSize(newPointSize);
+ leftProperty.setColor(r, g, b);
+ leftProperty.setLineWidth(newEdgeWidth);
+ leftProperty.setRepresentation(newRepresentation);
+
+ rightProperty.setPointSize(newPointSize);
+ rightProperty.setColor(r, g, b);
+ rightProperty.setLineWidth(newEdgeWidth);
+ rightProperty.setRepresentation(newRepresentation);
+
+ // Apply parallel projection to both cameras
+ leftRenderer.getActiveCamera().setParallelProjection(newParallelProjection);
+ rightRenderer.getActiveCamera().setParallelProjection(newParallelProjection);
+
+ leftRenderWindow.render();
+ rightRenderWindow.render();
+ } else {
+ // Apply to single actor in overlay mode
+ const property = singleActor.getProperty();
+ property.setPointSize(newPointSize);
+ property.setColor(r, g, b);
+ property.setLineWidth(newEdgeWidth);
+ property.setRepresentation(newRepresentation);
+
+ // Apply parallel projection to camera
+ singleRenderer.getActiveCamera().setParallelProjection(newParallelProjection);
+
+ singleRenderWindow.render();
+ }
+
+ // Update stored settings
+ currentPointSize = newPointSize;
+ currentMeshColor = newColor;
+ currentEdgeWidth = newEdgeWidth;
+ currentRepresentation = newRepresentation;
+ currentParallelProjection = newParallelProjection;
+
+ console.log('[GeomPack VTK Dual Viewer] Settings applied - RGB:', [r, g, b], 'Point Size:', newPointSize, 'Line Width:', newEdgeWidth, 'Representation:', newRepresentation, 'Parallel:', newParallelProjection);
+
+ // Close panel
+ closeSettingsPanel();
+ });
+
// Event handlers
document.getElementById('showEdges').addEventListener('change', (e) => {
const edgeViz = e.target.checked;
@@ -895,19 +1143,6 @@
}
});
- document.getElementById('parallelProjection').addEventListener('change', (e) => {
- const parallel = e.target.checked;
- if (viewerLayout === 'side_by_side') {
- leftRenderer.getActiveCamera().setParallelProjection(parallel);
- rightRenderer.getActiveCamera().setParallelProjection(parallel);
- leftRenderWindow.render();
- rightRenderWindow.render();
- } else {
- singleRenderer.getActiveCamera().setParallelProjection(parallel);
- singleRenderWindow.render();
- }
- });
-
document.getElementById('resetCamera').addEventListener('click', () => {
if (!combinedBounds) return;
diff --git a/web/viewer_dual_textured.html b/web/viewer_dual_textured.html
new file mode 100644
index 00000000..71bb7ff1
--- /dev/null
+++ b/web/viewer_dual_textured.html
@@ -0,0 +1,1406 @@
+
+
+
+
+
GeomPack VTK.js Dual Textured Mesh Viewer
+
+
+
+
+
+
+
+
+
+
+
Ready to load meshes
+
+
+
+
+
Appearance Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+