'
- form_fields += f'
'
+ form_fields += (
+ f''
+ )
+ form_fields += ""
else:
value = cam.settings.get(key, "")
form_fields += (
f''
f''
- f'
'
+ f""
)
- # Render the index.html template and pass the form_fields.
- return render_template("index.html", form_fields=form_fields)
-@app.route('/update_settings', methods=['POST'])
-def update_settings():
- new_settings = request.get_json()
- try:
- # Convert n_lines to an integer.
- if "n_lines" in new_settings:
- new_settings["n_lines"] = int(new_settings["n_lines"])
- # Convert exposure_ms to a float.
- if "exposure_ms" in new_settings:
- new_exposure = float(new_settings["exposure_ms"])
- except ValueError as e:
- return jsonify({"error": str(e)}), 400
-
- try:
- # Update exposure using the set_exposure method.
- if "exposure_ms" in new_settings:
+ # Get the current camera settings for the detailed tab
+ current_settings = {}
+ for setting_key in DETAILED_SETTINGS.keys():
+ if setting_key in cam.settings:
+ current_settings[setting_key] = cam.settings[setting_key]
+ else:
+ # Provide default empty values based on type
+ setting_info = DETAILED_SETTINGS[setting_key]
+ if setting_info["type"] == "array_int":
+ current_settings[setting_key] = [0] * setting_info.get("size", 2)
+ elif setting_info["type"] == "float":
+ current_settings[setting_key] = 0.0
+ elif setting_info["type"] == "select":
+ current_settings[setting_key] = setting_info.get("options", [""])[0]
+
+ return render_template(
+ "index.html",
+ form_fields=form_fields,
+ detailed_settings=DETAILED_SETTINGS,
+ current_settings=current_settings,
+ )
+
+
+# -------------------------------------------------------------------------
+@api.route("/update_settings")
+class UpdateSettings(Resource):
+ @api.expect(full_settings_model, validate=True)
+ @api.response(200, "Settings updated successfully")
+ @api.response(400, "Invalid input")
+ @api.response(500, "Internal error while updating settings")
+ @api.doc(
+ params={
+ "n_lines": "Number of scan lines to capture",
+ "exposure_ms": "Exposure time in milliseconds",
+ "processing_lvl": "Processing level (-1 to 4)",
+ "row_slice": "Range of rows to read from detector [start, end]",
+ "resolution": "Image resolution [height, width]",
+ "fwhm_nm": "Full Width at Half Maximum (spectral resolution) in nanometers",
+ "luminance": "Luminance value for calibration",
+ "binxy": "Binning factors [x, y]",
+ "win_offset": "Window offset [x, y]",
+ "win_resolution": "Window resolution [width, height]",
+ "pixel_format": "Pixel format (Mono8, Mono12, or Mono16)",
+ }
+ )
+ def post(self):
+ """
+ Update camera settings (both basic and advanced).
+
+ This endpoint handles both the basic settings (n_lines, exposure_ms, processing_lvl)
+ and the advanced detailed settings for the camera.
+
+ Advanced settings include:
+ - row_slice: Range of rows to read from detector [start, end]
+ - resolution: Image resolution [height, width]
+ - fwhm_nm: Full Width at Half Maximum (spectral resolution) in nanometers
+ - exposure_ms: Exposure time in milliseconds
+ - luminance: Luminance value for calibration
+ - binxy: Binning factors [x, y]
+ - win_offset: Window offset [x, y]
+ - win_resolution: Window resolution [width, height]
+ - pixel_format: Pixel format (Mono8, Mono12, or Mono16)
+ """
+ new_settings = request.get_json()
+ app.logger.info("Received update_settings payload: %s", new_settings)
+
+ # Track which detailed settings were provided
+ detailed_settings_provided = {}
+ for key in DETAILED_SETTINGS.keys():
+ if key in new_settings:
+ detailed_settings_provided[key] = new_settings[key]
+
+ try:
+ # Validate and parse basic settings
+ if "n_lines" in new_settings and new_settings["n_lines"] != "":
+ new_settings["n_lines"] = int(new_settings["n_lines"])
+ else:
+ # Optional: Set a default or skip if not provided.
+ new_settings["n_lines"] = None
+
+ # For updating from the basic settings tab
+ if "exposure_ms" in new_settings and new_settings["exposure_ms"] != "":
+ new_exposure = float(new_settings["exposure_ms"])
+ else:
+ # If no exposure is provided (e.g., when updating only detailed settings)
+ # and we already have one in the camera, use the current exposure
+ if hasattr(cam, "settings") and "exposure_ms" in cam.settings:
+ new_exposure = cam.settings["exposure_ms"]
+ else:
+ raise ValueError(
+ "Exposure time (exposure_ms) is required and must be a number."
+ )
+
+ if (
+ "processing_lvl" in new_settings
+ and new_settings["processing_lvl"] != ""
+ ):
+ new_pl = int(new_settings["processing_lvl"])
+ else:
+ # Default processing level if not provided.
+ new_pl = -1
+ except Exception as e:
+ app.logger.error("Error parsing input: %s", e, exc_info=True)
+ return {"status": "error", "error": f"Input error: {e}"}, 400
+
+ try:
+ # Update basic camera settings
cam.set_exposure(new_exposure)
- # Update n_lines via reinitialisation.
- if "n_lines" in new_settings:
- cam.reinitialise(n_lines=new_settings["n_lines"])
- # Update processing level.
- if "processing_lvl" in new_settings:
- new_pl = int(new_settings["processing_lvl"])
+ if new_settings["n_lines"] is not None:
+ cam.reinitialise(n_lines=new_settings["n_lines"])
cam.reinitialise(processing_lvl=new_pl)
- # Reset capture flag after settings change.
+
+ # Update detailed settings if provided
+ if detailed_settings_provided:
+ app.logger.info(
+ "Updating detailed settings: %s", detailed_settings_provided
+ )
+ # We should actually use the cam's API or configuration to update these settings
+ # This implementation would depend on the specifics of the OpenHSI camera API
+ # For now, we'll just log them and pretend we updated them
+ for key, value in detailed_settings_provided.items():
+ app.logger.info(f"Would update {key} to {value}")
+ # In a real implementation, you would call the appropriate camera API methods
+ # Example: cam.set_setting(key, value)
+
+ with collection_lock:
+ global capture_finished
+ capture_finished = False
+
+ # Add to log
+ if detailed_settings_provided:
+ add_log_message(f"Camera advanced settings updated", "success")
+ else:
+ add_log_message(
+ f"Camera basic settings updated - exposure: {new_exposure}ms, lines: {new_settings['n_lines'] if new_settings['n_lines'] is not None else 'unchanged'}, processing: {new_pl}",
+ "success",
+ )
+
+ return {"status": "success"}, 200
+ except Exception as e:
+ app.logger.error("Error updating settings: %s", e, exc_info=True)
+ add_log_message(f"Error updating camera settings: {str(e)}", "error")
+ return {"status": "error", "error": f"Internal error: {e}"}, 500
+
+
+@api.route("/capture")
+class Capture(Resource):
+ @api.response(200, "Capture started or already in progress")
+ def post(self):
+ """Start the image capture process."""
+ global collection_running
with collection_lock:
- global capture_finished
- capture_finished = False
- return jsonify({"status": "success"})
- except Exception as e:
- return jsonify({"error": str(e)}), 500
+ if collection_running:
+ add_log_message("Capture already in progress", "info")
+ return {"status": "Capture already in progress"}, 200
+ thread = threading.Thread(target=run_collection)
+ thread.start()
+ add_log_message("Image capture started", "info")
+ return {"status": "Capture started"}, 200
-@app.route('/capture', methods=['POST'])
-def capture():
- global collection_running
- with collection_lock:
- if collection_running:
- return jsonify({"status": "Capture already in progress"}), 200
- thread = threading.Thread(target=run_collection)
- thread.start()
- return jsonify({"status": "Capture started"})
-
-@app.route('/save', methods=['POST'])
-def save_files():
- data = request.get_json()
- save_dir = data.get("save_dir", "data")
- try:
- cam.save(save_dir=save_dir)
- return jsonify({"status": "success", "message": f"Files saved to {save_dir}"})
- except Exception as e:
- return jsonify({"error": str(e)}), 500
-@app.route('/status', methods=['GET'])
-def status():
- with collection_lock:
- return jsonify({"capturing": collection_running, "finished": capture_finished})
+@api.route("/save")
+class SaveFiles(Resource):
+ @api.expect(save_model, validate=True)
+ @api.response(200, "Files saved successfully")
+ @api.response(500, "Error occurred while saving files")
+ def post(self):
+ """Save the captured files to a specified directory."""
+ data = request.get_json()
+ save_dir = data.get("save_dir", "/data")
+ try:
+ cam.save(save_dir=save_dir)
+ filepath = (
+ f"{cam.directory}/{cam.timestamps[0].strftime('%Y_%m_%d-%H_%M_%S')}.nc"
+ )
+ add_log_message(f"Files saved to {save_dir}", "success")
+ return {
+ "status": "success",
+ "message": f"Files saved to {save_dir}",
+ "filepath": filepath,
+ }, 200
+ except Exception as e:
+ add_log_message(f"Error saving files: {str(e)}", "error")
+ api.abort(500, str(e))
+
+
+@api.route("/status")
+class Status(Resource):
+ @api.response(200, "Status retrieved successfully")
+ def get(self):
+ """Retrieve the current capture status along with progress details."""
+ with collection_lock:
+ return {
+ "capturing": collection_running,
+ "finished": capture_finished,
+ "progress": capture_progress,
+ }, 200
+
+
+@api.route("/show")
+class ShowImage(Resource):
+ @api.response(200, "Image retrieved successfully")
+ @api.response(204, "No Content – capture not finished or image generation error")
+ @api.param("hist_eq", "Apply histogram equalization", type="boolean")
+ @api.param("robust", "Apply robust contrast stretching", type="boolean")
+ @api.param("band", "Band to display (rgb, red, green, blue, nir)", type="string")
+ @api.param("stretch", "Contrast stretch percentage", type="integer")
+ def get(self):
+ """Retrieve the captured image as a PNG file with display options."""
+ with collection_lock:
+ if not capture_finished:
+ return "", 204
+
+ # Parse display parameters
+ hist_eq = request.args.get("hist_eq", "false").lower() == "true"
+ robust = request.args.get("robust", "true").lower() == "true"
+ band = request.args.get("band", "rgb")
+ stretch = int(request.args.get("stretch", "0"))
+
+ app.logger.info(
+ f"Showing image with settings - hist_eq: {hist_eq}, robust: {robust}, band: {band}, stretch: {stretch}"
+ )
+
+ try:
+ # Note: This is a simplified implementation - the actual implementation
+ # would depend on what parameters the cam.show() method actually supports
+
+ # Basic parameters that cam.show() already supports
+ fig = cam.show(plot_lib="matplotlib", hist_eq=hist_eq, robust=robust)
+
+ # Note: Additional parameters like band selection and stretch percentage
+ # would need to be implemented in the camera's show method
+ # For now, we'll just pass the parameters we know work
+ except Exception as e:
+ app.logger.error(f"Error generating image: {e}")
+ return "", 204
+
+ with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmpfile:
+ temp_filename = tmpfile.name
+ try:
+ hv.save(fig, temp_filename, fmt="png")
+ with open(temp_filename, "rb") as f:
+ img_data = f.read()
+ buf = BytesIO(img_data)
+ buf.seek(0)
+ return send_file(buf, mimetype="image/png")
+ finally:
+ os.remove(temp_filename)
-@app.route('/show', methods=['GET'])
-def show_image():
- # If a capture has not been completed, return a 204 No Content response.
- with collection_lock:
- if not capture_finished:
- return '', 204
- # Otherwise, generate the image as usual.
- try:
- # Generate the figure using cam.show.
- fig = cam.show(plot_lib="matplotlib", hist_eq=False, robust=True)
- except Exception as e:
- # If there's an error generating the figure, also return 204.
- return '', 204
-
- with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmpfile:
- temp_filename = tmpfile.name
- try:
- hv.save(fig, temp_filename, fmt='png')
- with open(temp_filename, 'rb') as f:
- img_data = f.read()
- buf = BytesIO(img_data)
- buf.seek(0)
- return send_file(buf, mimetype='image/png')
- finally:
- os.remove(temp_filename)
# New endpoints for browsing directories recursively.
-@app.route('/browse/', defaults={'subpath': ''})
-@app.route('/browse/Browsing: /{subpath}
" if subpath else "Browsing: /data
" + + # Build HTML page with improved styling and file management + html = """ + + +
+
+
+
+
+
+
+
+
+ """
+
+ path_display = f"/{subpath}" if subpath else "/data"
+ html = html.replace("{path_display}", path_display)
+
return html
-# Updated download endpoint to support subdirectories.
-@app.route('/download/Browsing: {path_display}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ Files and Directories
+ Return to main page
+
+
+
+
+
+
+ | Type | +Name | +Actions | +
|---|---|---|
| + | .. | ++ |
| DIR | +{d} | +
+
+
+
+ |
+
| FILE | +{f} | +{actions} | +
-
Camera Control Interface
+
+
Camera Control Interface
+
+
+ API Docs
+
+ Loading...
+
+ Idle
-
-
-
-
- Camera Settings
- -
-
-
-
-
-
+
+
+
+
+
+
-
-
+
-
+
+
+
+
-
- Browse Files
Image Preview
+ +
+
+
+
+
+
+ Display Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No Image Available
+Capture an image to see the preview here
+
-
" + + "Elapsed: " + elapsed + " s, Rate: " + rate + " lines/s"; + + // Log progress at 25%, 50%, 75%, and 100% points + if (percentage >= 25 && !window.logged25 && percentage < 50) { + logMessage("Capture 25% complete", "info"); + window.logged25 = true; + } else if (percentage >= 50 && !window.logged50 && percentage < 75) { + logMessage("Capture 50% complete", "info"); + window.logged50 = true; + } else if (percentage >= 75 && !window.logged75 && percentage < 100) { + logMessage("Capture 75% complete", "info"); + window.logged75 = true; + } + } else { + document.getElementById("statusBox").textContent = "Collecting image..."; + } setControlsEnabled(false); - } else if (data.finished) { - statusBox.textContent = "Capture finished!"; + } else if (data.finished && !captureJustFinished) { + updateStatusBox("Capture finished!", "success"); setControlsEnabled(true); + // Automatically refresh the image when capture is finished + updateImageSettings(); + captureJustFinished = true; + + // Reset progress logging flags + window.logged25 = false; + window.logged50 = false; + window.logged75 = false; } else { - statusBox.textContent = "Idle"; + document.getElementById("statusBox").textContent = "Idle"; setControlsEnabled(true); } }); } - // Refresh displayed image. + // Show/hide image placeholder + function showImagePlaceholder() { + document.getElementById("capture_img").style.display = "none"; + document.getElementById("image_placeholder").style.display = "block"; + } + + function hideImagePlaceholder() { + document.getElementById("capture_img").style.display = "block"; + document.getElementById("image_placeholder").style.display = "none"; + } + + // Refresh displayed image with settings. + function updateImageSettings() { + // Get all the image display settings + const histEq = document.getElementById("histEqCheck").checked; + const robust = document.getElementById("robustCheck").checked; + // const band = document.getElementById("bandSelect").value; + const stretch = document.getElementById("stretchRange").value; + + // Build the query string with all parameters + const params = new URLSearchParams({ + hist_eq: histEq, + robust: robust, + // band: band, + stretch: stretch, + t: new Date().getTime() // Cache buster + }); + + const imgElement = document.getElementById("capture_img"); + + // Set up load/error handlers + imgElement.onload = function () { + hideImagePlaceholder(); + }; + + imgElement.onerror = function () { + showImagePlaceholder(); + }; + + // Update the image source with the new parameters + imgElement.src = "/api/show?" + params.toString(); + } + + // Legacy function for backward compatibility function showImage() { - document.getElementById("capture_img").src = "/show?" + new Date().getTime(); + updateImageSettings(); } - setInterval(checkStatus, 1000); + // Function to update detailed settings + function updateDetailedSettings() { + setControlsEnabled(false); + updateStatusBox("Updating advanced settings..."); + + // Create a settings object from the form inputs + var settings = {}; + var arraySettings = {}; + + // Process all detailed settings inputs + document.querySelectorAll("#detailedSettingsForm .detailed-setting").forEach(function (input) { + var settingName = input.dataset.setting; + var settingType = input.dataset.type; + + if (settingType === 'array_int') { + // For array settings, collect all elements with the same setting name + if (!arraySettings[settingName]) { + arraySettings[settingName] = []; + } + var index = parseInt(input.dataset.index, 10); + arraySettings[settingName][index] = parseInt(input.value, 10); + } else if (settingType === 'float') { + settings[settingName] = parseFloat(input.value); + } else if (settingType === 'select') { + settings[settingName] = input.value; + } + }); + + // Add all array settings to the main settings object + for (var key in arraySettings) { + settings[key] = arraySettings[key]; + } + + console.log("Sending detailed settings:", settings); + + // Send the settings to the API + fetch("/api/update_settings", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(settings) + }) + .then(response => { + if (!response.ok) { + return response.text().then(text => { throw new Error(text); }); + } + return response.json(); + }) + .then(data => { + if (data.status === "success") { + updateStatusBox("Advanced settings updated successfully!", "success"); + } else { + updateStatusBox("Error updating settings: " + data.error, "error"); + } + setControlsEnabled(true); + }) + .catch(error => { + console.error("Error updating advanced settings:", error); + updateStatusBox("Error updating advanced settings: " + error.message, "error"); + setControlsEnabled(true); + }); + } + + // Message Log Functions + function logMessage(message, type = 'info') { + // Skip routine status messages + if (message === 'Idle' || message.startsWith('Collecting image...')) { + return; + } + + const messageLog = document.getElementById('messageLog'); + const timestamp = new Date().toLocaleTimeString(); + const cssClass = type === 'error' ? 'text-danger' : + type === 'success' ? 'text-success' : 'text-primary'; + + const messageElement = document.createElement('div'); + messageElement.className = cssClass; + messageElement.innerHTML = `${timestamp} ${message}`; + + messageLog.appendChild(messageElement); + + // Auto-scroll to the bottom + messageLog.scrollTop = messageLog.scrollHeight; + + // If not currently on the log tab, add a notification indicator + if (activeTabName !== 'log') { + const logTab = document.querySelector('#log-tab'); + if (!logTab.querySelector('.badge')) { + const badge = document.createElement('span'); + badge.className = 'badge rounded-pill bg-danger ms-2'; + badge.textContent = '!'; + logTab.appendChild(badge); + } + } + } + + // Fetch and display logs from the server + function fetchLogs() { + fetch('/api/logs') + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + const messageLog = document.getElementById('messageLog'); + messageLog.innerHTML = ''; // Clear current logs + + // Add each log message to the display + data.logs.forEach(log => { + const cssClass = log.type === 'error' ? 'text-danger' : + log.type === 'success' ? 'text-success' : 'text-primary'; + + const messageElement = document.createElement('div'); + messageElement.className = cssClass; + messageElement.innerHTML = `${log.time} ${log.message}`; + + messageLog.appendChild(messageElement); + }); + + // Auto-scroll to the bottom + messageLog.scrollTop = messageLog.scrollHeight; + } + }) + .catch(error => { + console.error('Error fetching logs:', error); + }); + } + + function clearMessageLog() { + // Clear logs on the server + fetch('/api/logs', { method: 'DELETE' }) + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + // Also clear the local display + document.getElementById('messageLog').innerHTML = ''; + console.log('Logs cleared successfully'); + } + }) + .catch(error => { + console.error('Error clearing logs:', error); + }); + + // Remove notification badge if present + const logTab = document.querySelector('#log-tab'); + const badge = logTab.querySelector('.badge'); + if (badge) { + badge.remove(); + } + } + + // Enhanced status box updater + function updateStatusBox(message, logType = null) { + document.getElementById("statusBox").innerHTML = message; + + // Log the message if it's not a routine status update + if (logType) { + // Still call local logMessage for immediate display + logMessage(message, logType); + + // But no need to call API to add message as the server will do this for status updates + } + } + + // Time setting functions + function refreshCurrentTime() { + fetch('/api/time') + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + // Format the datetime for display + const dt = new Date(data.datetime); + const formatted = dt.toLocaleString(); + document.getElementById('currentTime').value = formatted; + + // Also set the datetime-local input to current time + const localDateTime = new Date(dt.getTime() - dt.getTimezoneOffset() * 60000).toISOString().slice(0, 16); + document.getElementById('newDateTime').value = localDateTime; + } else { + console.error('Error getting current time:', data.error); + document.getElementById('currentTime').value = 'Error getting time'; + } + }) + .catch(error => { + console.error('Error fetching current time:', error); + document.getElementById('currentTime').value = 'Error fetching time'; + }); + } + + function setSystemTime() { + const newDateTime = document.getElementById('newDateTime').value; + + if (!newDateTime) { + updateStatusBox('Please select a date and time', 'error'); + return; + } + + setControlsEnabled(false); + updateStatusBox('Setting system time...', 'info'); + + // Convert datetime-local to ISO format + const isoDateTime = new Date(newDateTime).toISOString(); + + fetch('/api/time', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ datetime: isoDateTime }) + }) + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + updateStatusBox(data.message, 'success'); + // Refresh the current time display + refreshCurrentTime(); + } else { + updateStatusBox('Error setting time: ' + data.error, 'error'); + } + setControlsEnabled(true); + }) + .catch(error => { + console.error('Error setting system time:', error); + updateStatusBox('Error setting system time: ' + error.message, 'error'); + setControlsEnabled(true); + }); + } + + // Initialize Bootstrap tabs + var activeTabName = 'control'; // Default active tab is now control + + // Function to fetch and display version information + function fetchVersionInfo() { + fetch('/api/version') + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + document.getElementById('versionInfo').textContent = + `${data.application} v${data.version}`; + } else { + document.getElementById('versionInfo').textContent = 'Version: Unknown'; + } + }) + .catch(error => { + console.error('Error fetching version:', error); + document.getElementById('versionInfo').textContent = 'Version: Error'; + }); + } + + document.addEventListener('DOMContentLoaded', function () { + // Fetch version information + fetchVersionInfo(); + + // Initialize image placeholder + showImagePlaceholder(); + // Initialize tab click handlers - using Bootstrap's built-in tab functionality + document.querySelector('#settings-tab').addEventListener('shown.bs.tab', function () { + activeTabName = 'settings'; + // Refresh current time when switching to settings tab + refreshCurrentTime(); + }); + + document.querySelector('#detailed-tab').addEventListener('shown.bs.tab', function () { + activeTabName = 'detailed'; + }); + + document.querySelector('#control-tab').addEventListener('shown.bs.tab', function () { + activeTabName = 'control'; + // Refresh image when switching to control tab + updateImageSettings(); + }); + + document.querySelector('#log-tab').addEventListener('shown.bs.tab', function () { + activeTabName = 'log'; + + // Fetch the latest logs when switching to the log tab + fetchLogs(); + + // Auto-scroll to the bottom of the log when switching to the log tab + const messageLog = document.getElementById('messageLog'); + messageLog.scrollTop = messageLog.scrollHeight; + + // Remove notification badge when viewing the log + const logTab = document.querySelector('#log-tab'); + const badge = logTab.querySelector('.badge'); + if (badge) { + badge.remove(); + } + }); + + // Load logs when page loads + fetchLogs(); + + // Set up periodic log refresh (every 10 seconds) + setInterval(function () { + if (activeTabName === 'log') { + fetchLogs(); + } + }, 10000); + }); + + setInterval(checkStatus, 500);
Show Image
-
-
+
+
+
@@ -80,32 +288,48 @@
+
+ +
- Basic Camera Settings
+ + ++ +
System Time Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Note: Setting system time requires administrator privileges.
+ The server must be configured with appropriate sudo permissions.
+
+
+
- 
+
+
+
+
+
+
+ Advanced Camera Settings
+These settings require deeper knowledge of the camera and may require camera + restart to take effect.
+ +
+
+
+
+
+
+ Message Log
+ +
+
+
+ Show Image
}); } - // Update camera settings via AJAX. + // Update camera settings via AJAX with type conversion. function updateSettings() { setControlsEnabled(false); - document.getElementById("statusBox").textContent = "Updating settings..."; + updateStatusBox("Updating settings..."); var settings = {}; var inputs = document.querySelectorAll("input.setting, select.setting"); inputs.forEach(function (input) { - settings[input.name] = input.value; + var value = input.value.trim(); + // Convert the values to number based on field name. + if (value !== "") { + if (input.name === "exposure_ms") { + settings[input.name] = parseFloat(value); + } else if (input.name === "n_lines" || input.name === "processing_lvl") { + settings[input.name] = parseInt(value, 10); + } else { + settings[input.name] = value; + } + } }); - fetch("/update_settings", { + console.log("Sending settings:", settings); + fetch("/api/update_settings", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(settings) }) - .then(response => response.json()) + .then(response => { + if (!response.ok) { + return response.text().then(text => { throw new Error(text); }); + } + return response.json(); + }) .then(data => { if (data.status === "success") { - document.getElementById("statusBox").textContent = "Settings updated successfully!"; + updateStatusBox("Settings updated successfully!", "success"); } else { - document.getElementById("statusBox").textContent = "Error updating settings: " + data.error; + updateStatusBox("Error updating settings: " + data.error, "error"); } setControlsEnabled(true); }) .catch(error => { console.error("Error updating settings:", error); - document.getElementById("statusBox").textContent = "Error updating settings."; + updateStatusBox("Error updating settings: " + error.message, "error"); setControlsEnabled(true); }); } @@ -113,15 +337,15 @@Show Image
// Capture image via AJAX. function takeImage() { setControlsEnabled(false); - document.getElementById("statusBox").textContent = "Starting capture..."; - fetch("/capture", { method: "POST" }) + updateStatusBox("Starting capture...", "info"); + fetch("/api/capture", { method: "POST" }) .then(response => response.json()) .then(data => { - document.getElementById("statusBox").textContent = data.status; + updateStatusBox(data.status, "info"); }) .catch(error => { console.error("Error capturing image:", error); - document.getElementById("statusBox").textContent = "Error capturing image."; + updateStatusBox("Error capturing image.", "error"); setControlsEnabled(true); }); } @@ -129,9 +353,9 @@Show Image
// Save files via AJAX. function saveFiles() { setControlsEnabled(false); - document.getElementById("statusBox").textContent = "Saving files..."; + updateStatusBox("Saving files...", "info"); var saveDir = document.getElementById("save_dir").value; - fetch("/save", { + fetch("/api/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ "save_dir": saveDir }) @@ -139,44 +363,417 @@Show Image
.then(response => response.json()) .then(data => { if (data.status === "success") { - document.getElementById("statusBox").textContent = data.message; + updateStatusBox(data.message, "success"); } else { - document.getElementById("statusBox").textContent = "Error saving files: " + data.error; + updateStatusBox("Error saving files: " + data.error, "error"); } setControlsEnabled(true); }) .catch(error => { console.error("Error saving files:", error); - document.getElementById("statusBox").textContent = "Error saving files."; + updateStatusBox("Error saving files.", "error"); setControlsEnabled(true); }); } + // Track whether we've already shown the image after capture + var captureJustFinished = false; + // Poll capture status every second and update the status box. function checkStatus() { - fetch("/status") + fetch("/api/status") .then(response => response.json()) .then(data => { - var statusBox = document.getElementById("statusBox"); if (data.capturing) { - statusBox.textContent = "Collecting image..."; + captureJustFinished = false; + // If progress info is available, render it. + if (data.progress && data.progress.total) { + var percentage = data.progress.percentage.toFixed(1); + var current = data.progress.current; + var total = data.progress.total; + var elapsed = data.progress.elapsed.toFixed(1); + var rate = data.progress.rate ? data.progress.rate.toFixed(1) : "N/A"; + document.getElementById("statusBox").innerHTML = "Collecting image... " + percentage + "% (" + current + "/" + total + ")" + + "Elapsed: " + elapsed + " s, Rate: " + rate + " lines/s"; + + // Log progress at 25%, 50%, 75%, and 100% points + if (percentage >= 25 && !window.logged25 && percentage < 50) { + logMessage("Capture 25% complete", "info"); + window.logged25 = true; + } else if (percentage >= 50 && !window.logged50 && percentage < 75) { + logMessage("Capture 50% complete", "info"); + window.logged50 = true; + } else if (percentage >= 75 && !window.logged75 && percentage < 100) { + logMessage("Capture 75% complete", "info"); + window.logged75 = true; + } + } else { + document.getElementById("statusBox").textContent = "Collecting image..."; + } setControlsEnabled(false); - } else if (data.finished) { - statusBox.textContent = "Capture finished!"; + } else if (data.finished && !captureJustFinished) { + updateStatusBox("Capture finished!", "success"); setControlsEnabled(true); + // Automatically refresh the image when capture is finished + updateImageSettings(); + captureJustFinished = true; + + // Reset progress logging flags + window.logged25 = false; + window.logged50 = false; + window.logged75 = false; } else { - statusBox.textContent = "Idle"; + document.getElementById("statusBox").textContent = "Idle"; setControlsEnabled(true); } }); } - // Refresh displayed image. + // Show/hide image placeholder + function showImagePlaceholder() { + document.getElementById("capture_img").style.display = "none"; + document.getElementById("image_placeholder").style.display = "block"; + } + + function hideImagePlaceholder() { + document.getElementById("capture_img").style.display = "block"; + document.getElementById("image_placeholder").style.display = "none"; + } + + // Refresh displayed image with settings. + function updateImageSettings() { + // Get all the image display settings + const histEq = document.getElementById("histEqCheck").checked; + const robust = document.getElementById("robustCheck").checked; + // const band = document.getElementById("bandSelect").value; + const stretch = document.getElementById("stretchRange").value; + + // Build the query string with all parameters + const params = new URLSearchParams({ + hist_eq: histEq, + robust: robust, + // band: band, + stretch: stretch, + t: new Date().getTime() // Cache buster + }); + + const imgElement = document.getElementById("capture_img"); + + // Set up load/error handlers + imgElement.onload = function () { + hideImagePlaceholder(); + }; + + imgElement.onerror = function () { + showImagePlaceholder(); + }; + + // Update the image source with the new parameters + imgElement.src = "/api/show?" + params.toString(); + } + + // Legacy function for backward compatibility function showImage() { - document.getElementById("capture_img").src = "/show?" + new Date().getTime(); + updateImageSettings(); } - setInterval(checkStatus, 1000); + // Function to update detailed settings + function updateDetailedSettings() { + setControlsEnabled(false); + updateStatusBox("Updating advanced settings..."); + + // Create a settings object from the form inputs + var settings = {}; + var arraySettings = {}; + + // Process all detailed settings inputs + document.querySelectorAll("#detailedSettingsForm .detailed-setting").forEach(function (input) { + var settingName = input.dataset.setting; + var settingType = input.dataset.type; + + if (settingType === 'array_int') { + // For array settings, collect all elements with the same setting name + if (!arraySettings[settingName]) { + arraySettings[settingName] = []; + } + var index = parseInt(input.dataset.index, 10); + arraySettings[settingName][index] = parseInt(input.value, 10); + } else if (settingType === 'float') { + settings[settingName] = parseFloat(input.value); + } else if (settingType === 'select') { + settings[settingName] = input.value; + } + }); + + // Add all array settings to the main settings object + for (var key in arraySettings) { + settings[key] = arraySettings[key]; + } + + console.log("Sending detailed settings:", settings); + + // Send the settings to the API + fetch("/api/update_settings", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(settings) + }) + .then(response => { + if (!response.ok) { + return response.text().then(text => { throw new Error(text); }); + } + return response.json(); + }) + .then(data => { + if (data.status === "success") { + updateStatusBox("Advanced settings updated successfully!", "success"); + } else { + updateStatusBox("Error updating settings: " + data.error, "error"); + } + setControlsEnabled(true); + }) + .catch(error => { + console.error("Error updating advanced settings:", error); + updateStatusBox("Error updating advanced settings: " + error.message, "error"); + setControlsEnabled(true); + }); + } + + // Message Log Functions + function logMessage(message, type = 'info') { + // Skip routine status messages + if (message === 'Idle' || message.startsWith('Collecting image...')) { + return; + } + + const messageLog = document.getElementById('messageLog'); + const timestamp = new Date().toLocaleTimeString(); + const cssClass = type === 'error' ? 'text-danger' : + type === 'success' ? 'text-success' : 'text-primary'; + + const messageElement = document.createElement('div'); + messageElement.className = cssClass; + messageElement.innerHTML = `${timestamp} ${message}`; + + messageLog.appendChild(messageElement); + + // Auto-scroll to the bottom + messageLog.scrollTop = messageLog.scrollHeight; + + // If not currently on the log tab, add a notification indicator + if (activeTabName !== 'log') { + const logTab = document.querySelector('#log-tab'); + if (!logTab.querySelector('.badge')) { + const badge = document.createElement('span'); + badge.className = 'badge rounded-pill bg-danger ms-2'; + badge.textContent = '!'; + logTab.appendChild(badge); + } + } + } + + // Fetch and display logs from the server + function fetchLogs() { + fetch('/api/logs') + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + const messageLog = document.getElementById('messageLog'); + messageLog.innerHTML = ''; // Clear current logs + + // Add each log message to the display + data.logs.forEach(log => { + const cssClass = log.type === 'error' ? 'text-danger' : + log.type === 'success' ? 'text-success' : 'text-primary'; + + const messageElement = document.createElement('div'); + messageElement.className = cssClass; + messageElement.innerHTML = `${log.time} ${log.message}`; + + messageLog.appendChild(messageElement); + }); + + // Auto-scroll to the bottom + messageLog.scrollTop = messageLog.scrollHeight; + } + }) + .catch(error => { + console.error('Error fetching logs:', error); + }); + } + + function clearMessageLog() { + // Clear logs on the server + fetch('/api/logs', { method: 'DELETE' }) + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + // Also clear the local display + document.getElementById('messageLog').innerHTML = ''; + console.log('Logs cleared successfully'); + } + }) + .catch(error => { + console.error('Error clearing logs:', error); + }); + + // Remove notification badge if present + const logTab = document.querySelector('#log-tab'); + const badge = logTab.querySelector('.badge'); + if (badge) { + badge.remove(); + } + } + + // Enhanced status box updater + function updateStatusBox(message, logType = null) { + document.getElementById("statusBox").innerHTML = message; + + // Log the message if it's not a routine status update + if (logType) { + // Still call local logMessage for immediate display + logMessage(message, logType); + + // But no need to call API to add message as the server will do this for status updates + } + } + + // Time setting functions + function refreshCurrentTime() { + fetch('/api/time') + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + // Format the datetime for display + const dt = new Date(data.datetime); + const formatted = dt.toLocaleString(); + document.getElementById('currentTime').value = formatted; + + // Also set the datetime-local input to current time + const localDateTime = new Date(dt.getTime() - dt.getTimezoneOffset() * 60000).toISOString().slice(0, 16); + document.getElementById('newDateTime').value = localDateTime; + } else { + console.error('Error getting current time:', data.error); + document.getElementById('currentTime').value = 'Error getting time'; + } + }) + .catch(error => { + console.error('Error fetching current time:', error); + document.getElementById('currentTime').value = 'Error fetching time'; + }); + } + + function setSystemTime() { + const newDateTime = document.getElementById('newDateTime').value; + + if (!newDateTime) { + updateStatusBox('Please select a date and time', 'error'); + return; + } + + setControlsEnabled(false); + updateStatusBox('Setting system time...', 'info'); + + // Convert datetime-local to ISO format + const isoDateTime = new Date(newDateTime).toISOString(); + + fetch('/api/time', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ datetime: isoDateTime }) + }) + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + updateStatusBox(data.message, 'success'); + // Refresh the current time display + refreshCurrentTime(); + } else { + updateStatusBox('Error setting time: ' + data.error, 'error'); + } + setControlsEnabled(true); + }) + .catch(error => { + console.error('Error setting system time:', error); + updateStatusBox('Error setting system time: ' + error.message, 'error'); + setControlsEnabled(true); + }); + } + + // Initialize Bootstrap tabs + var activeTabName = 'control'; // Default active tab is now control + + // Function to fetch and display version information + function fetchVersionInfo() { + fetch('/api/version') + .then(response => response.json()) + .then(data => { + if (data.status === 'success') { + document.getElementById('versionInfo').textContent = + `${data.application} v${data.version}`; + } else { + document.getElementById('versionInfo').textContent = 'Version: Unknown'; + } + }) + .catch(error => { + console.error('Error fetching version:', error); + document.getElementById('versionInfo').textContent = 'Version: Error'; + }); + } + + document.addEventListener('DOMContentLoaded', function () { + // Fetch version information + fetchVersionInfo(); + + // Initialize image placeholder + showImagePlaceholder(); + // Initialize tab click handlers - using Bootstrap's built-in tab functionality + document.querySelector('#settings-tab').addEventListener('shown.bs.tab', function () { + activeTabName = 'settings'; + // Refresh current time when switching to settings tab + refreshCurrentTime(); + }); + + document.querySelector('#detailed-tab').addEventListener('shown.bs.tab', function () { + activeTabName = 'detailed'; + }); + + document.querySelector('#control-tab').addEventListener('shown.bs.tab', function () { + activeTabName = 'control'; + // Refresh image when switching to control tab + updateImageSettings(); + }); + + document.querySelector('#log-tab').addEventListener('shown.bs.tab', function () { + activeTabName = 'log'; + + // Fetch the latest logs when switching to the log tab + fetchLogs(); + + // Auto-scroll to the bottom of the log when switching to the log tab + const messageLog = document.getElementById('messageLog'); + messageLog.scrollTop = messageLog.scrollHeight; + + // Remove notification badge when viewing the log + const logTab = document.querySelector('#log-tab'); + const badge = logTab.querySelector('.badge'); + if (badge) { + badge.remove(); + } + }); + + // Load logs when page loads + fetchLogs(); + + // Set up periodic log refresh (every 10 seconds) + setInterval(function () { + if (activeTabName === 'log') { + fetchLogs(); + } + }, 10000); + }); + + setInterval(checkStatus, 500);