Add user-configurable colors for transcription display
- Add color settings (user_color, text_color, background_color) to config - Add color picker buttons in Settings dialog with alpha support for backgrounds - Update local web display to use configurable colors - Send per-user colors with transcriptions to multi-user server - Update Node.js server to apply per-user colors on display page - Improve server landing page: replace tech details with display options reference - Bump version to 1.3.2 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,10 +4,10 @@ from PySide6.QtWidgets import (
|
||||
QDialog, QVBoxLayout, QHBoxLayout, QFormLayout,
|
||||
QLabel, QLineEdit, QComboBox, QCheckBox, QSlider,
|
||||
QPushButton, QMessageBox, QGroupBox, QScrollArea, QWidget,
|
||||
QFileDialog
|
||||
QFileDialog, QColorDialog
|
||||
)
|
||||
from PySide6.QtCore import Qt
|
||||
from PySide6.QtGui import QScreen, QFontDatabase
|
||||
from PySide6.QtGui import QScreen, QFontDatabase, QColor
|
||||
from typing import Callable, List, Tuple
|
||||
|
||||
|
||||
@@ -388,6 +388,53 @@ class SettingsDialog(QDialog):
|
||||
)
|
||||
display_layout.addRow("Fade After (seconds):", self.fade_seconds_input)
|
||||
|
||||
# Color settings
|
||||
color_label = QLabel("Color Settings")
|
||||
color_label.setStyleSheet("font-weight: bold; margin-top: 10px;")
|
||||
display_layout.addRow("", color_label)
|
||||
|
||||
# User name color picker
|
||||
user_color_layout = QHBoxLayout()
|
||||
self.user_color_button = QPushButton()
|
||||
self.user_color_button.setFixedSize(100, 30)
|
||||
self.user_color_button.setCursor(Qt.PointingHandCursor)
|
||||
self.user_color_button.setToolTip("Click to change user name color")
|
||||
self.user_color_button.clicked.connect(self._pick_user_color)
|
||||
user_color_layout.addWidget(self.user_color_button)
|
||||
self.user_color_hex = QLabel("#4CAF50")
|
||||
self.user_color_hex.setStyleSheet("font-family: monospace;")
|
||||
user_color_layout.addWidget(self.user_color_hex)
|
||||
user_color_layout.addStretch()
|
||||
display_layout.addRow("User Name Color:", user_color_layout)
|
||||
|
||||
# Text color picker
|
||||
text_color_layout = QHBoxLayout()
|
||||
self.text_color_button = QPushButton()
|
||||
self.text_color_button.setFixedSize(100, 30)
|
||||
self.text_color_button.setCursor(Qt.PointingHandCursor)
|
||||
self.text_color_button.setToolTip("Click to change text color")
|
||||
self.text_color_button.clicked.connect(self._pick_text_color)
|
||||
text_color_layout.addWidget(self.text_color_button)
|
||||
self.text_color_hex = QLabel("#FFFFFF")
|
||||
self.text_color_hex.setStyleSheet("font-family: monospace;")
|
||||
text_color_layout.addWidget(self.text_color_hex)
|
||||
text_color_layout.addStretch()
|
||||
display_layout.addRow("Text Color:", text_color_layout)
|
||||
|
||||
# Background color picker
|
||||
bg_color_layout = QHBoxLayout()
|
||||
self.bg_color_button = QPushButton()
|
||||
self.bg_color_button.setFixedSize(100, 30)
|
||||
self.bg_color_button.setCursor(Qt.PointingHandCursor)
|
||||
self.bg_color_button.setToolTip("Click to change background color (with transparency)")
|
||||
self.bg_color_button.clicked.connect(self._pick_background_color)
|
||||
bg_color_layout.addWidget(self.bg_color_button)
|
||||
self.bg_color_hex = QLabel("#000000B3")
|
||||
self.bg_color_hex.setStyleSheet("font-family: monospace;")
|
||||
bg_color_layout.addWidget(self.bg_color_hex)
|
||||
bg_color_layout.addStretch()
|
||||
display_layout.addRow("Background Color:", bg_color_layout)
|
||||
|
||||
display_group.setLayout(display_layout)
|
||||
content_layout.addWidget(display_group)
|
||||
|
||||
@@ -577,6 +624,64 @@ class SettingsDialog(QDialog):
|
||||
if file_path:
|
||||
self.display_custom_font_input.setText(file_path)
|
||||
|
||||
def _update_color_button_style(self, button: QPushButton, color_hex: str):
|
||||
"""Update a color button's background to show the selected color."""
|
||||
# Handle colors with alpha (8-char hex)
|
||||
if len(color_hex) == 9: # #RRGGBBAA
|
||||
# For display, we just show the color (alpha is visible through the button style)
|
||||
rgb = color_hex[:7]
|
||||
alpha_hex = color_hex[7:9]
|
||||
alpha = int(alpha_hex, 16) / 255
|
||||
button.setStyleSheet(
|
||||
f"background-color: {rgb}; "
|
||||
f"border: 2px solid #888; "
|
||||
f"border-radius: 4px; "
|
||||
f"opacity: {alpha};"
|
||||
)
|
||||
else:
|
||||
button.setStyleSheet(
|
||||
f"background-color: {color_hex}; "
|
||||
f"border: 2px solid #888; "
|
||||
f"border-radius: 4px;"
|
||||
)
|
||||
|
||||
def _pick_user_color(self):
|
||||
"""Open color dialog for user name color."""
|
||||
current_color = QColor(self.user_color_hex.text())
|
||||
color = QColorDialog.getColor(current_color, self, "Select User Name Color")
|
||||
if color.isValid():
|
||||
hex_color = color.name()
|
||||
self.user_color_hex.setText(hex_color)
|
||||
self._update_color_button_style(self.user_color_button, hex_color)
|
||||
|
||||
def _pick_text_color(self):
|
||||
"""Open color dialog for text color."""
|
||||
current_color = QColor(self.text_color_hex.text())
|
||||
color = QColorDialog.getColor(current_color, self, "Select Text Color")
|
||||
if color.isValid():
|
||||
hex_color = color.name()
|
||||
self.text_color_hex.setText(hex_color)
|
||||
self._update_color_button_style(self.text_color_button, hex_color)
|
||||
|
||||
def _pick_background_color(self):
|
||||
"""Open color dialog for background color (with alpha support)."""
|
||||
current_hex = self.bg_color_hex.text()
|
||||
current_color = QColor(current_hex[:7] if len(current_hex) > 7 else current_hex)
|
||||
if len(current_hex) == 9:
|
||||
current_color.setAlpha(int(current_hex[7:9], 16))
|
||||
|
||||
color = QColorDialog.getColor(
|
||||
current_color,
|
||||
self,
|
||||
"Select Background Color",
|
||||
QColorDialog.ShowAlphaChannel
|
||||
)
|
||||
if color.isValid():
|
||||
# Include alpha in hex format: #RRGGBBAA
|
||||
hex_color = f"{color.name()}{color.alpha():02X}"
|
||||
self.bg_color_hex.setText(hex_color)
|
||||
self._update_color_button_style(self.bg_color_button, hex_color)
|
||||
|
||||
def _load_current_settings(self):
|
||||
"""Load current settings from config."""
|
||||
# User settings
|
||||
@@ -649,6 +754,19 @@ class SettingsDialog(QDialog):
|
||||
self.font_size_input.setText(str(self.config.get('display.font_size', 12)))
|
||||
self.fade_seconds_input.setText(str(self.config.get('display.fade_after_seconds', 10)))
|
||||
|
||||
# Color settings
|
||||
user_color = self.config.get('display.user_color', '#4CAF50')
|
||||
self.user_color_hex.setText(user_color)
|
||||
self._update_color_button_style(self.user_color_button, user_color)
|
||||
|
||||
text_color = self.config.get('display.text_color', '#FFFFFF')
|
||||
self.text_color_hex.setText(text_color)
|
||||
self._update_color_button_style(self.text_color_button, text_color)
|
||||
|
||||
bg_color = self.config.get('display.background_color', '#000000B3')
|
||||
self.bg_color_hex.setText(bg_color)
|
||||
self._update_color_button_style(self.bg_color_button, bg_color)
|
||||
|
||||
# Server sync settings
|
||||
self.server_enabled_check.setChecked(self.config.get('server_sync.enabled', False))
|
||||
self.server_url_input.setText(self.config.get('server_sync.url', ''))
|
||||
@@ -716,6 +834,11 @@ class SettingsDialog(QDialog):
|
||||
fade_seconds = int(self.fade_seconds_input.text())
|
||||
self.config.set('display.fade_after_seconds', fade_seconds)
|
||||
|
||||
# Color settings
|
||||
self.config.set('display.user_color', self.user_color_hex.text())
|
||||
self.config.set('display.text_color', self.text_color_hex.text())
|
||||
self.config.set('display.background_color', self.bg_color_hex.text())
|
||||
|
||||
# Server sync settings
|
||||
self.config.set('server_sync.enabled', self.server_enabled_check.isChecked())
|
||||
self.config.set('server_sync.url', self.server_url_input.text())
|
||||
|
||||
Reference in New Issue
Block a user