From df10fba5459ff3219f6509a0d98cd4de5eeb347b Mon Sep 17 00:00:00 2001 From: Oaken Date: Fri, 9 Oct 2026 18:53:28 +0100 Subject: [PATCH] Knobs North theme adjustments and fixes --- macropad_gui/app.py | 39 +++++++++++++++++++++++++++------- macropad_gui/padview.py | 46 +++++++++++++++++++++-------------------- macropad_gui/themes.py | 18 +++++++++------- macropad_gui/vectors.py | 2 ++ 4 files changed, 69 insertions(+), 36 deletions(-) diff --git a/macropad_gui/app.py b/macropad_gui/app.py index 422f212..df230b9 100644 --- a/macropad_gui/app.py +++ b/macropad_gui/app.py @@ -36,9 +36,9 @@ def _status(t): """The footer's device line and its last message.""" if t.mono_status: return (f'QLabel[role="status"] {{ color: {t.ink}; ' - f'font-family: "{t.mono_font}"; font-size: 12px; }}\n' + f'font-family: "{t.mono_font}"; font-size: 12px; font-weight: 850;}}\n' f'QLabel[role="message"] {{ font-family: "{t.mono_font}"; ' - f'font-size: 12px; font-weight: 600; }}') + f'font-size: 12px; font-weight: 850; }}') return f'QLabel[role="status"] {{ color: {t.ink_dim}; }}' @@ -47,8 +47,8 @@ def _primary(t, tint): if t.outline_primary: return f""" QPushButton[role="primary"] {{ background: {t.board}; color: {t.accent}; - border: 1px solid {t.accent}; border-radius: {t.button_radius}px; - font-weight: 600; padding: 8px 16px; }} + border: 2px solid {t.accent}; border-radius: {t.button_radius}px; + font-weight: 600; padding: 2px 5px; }} QPushButton[role="primary"]:hover {{ background: {tint(t.board, t.accent, 0.12)}; }} QPushButton[role="primary"]:disabled {{ color: {tint(t.window, t.ink_dim, 0.7)}; border-color: {tint(t.window, t.line, 0.7)}; }}""" @@ -65,8 +65,8 @@ def _flat(t): if t.pill_buttons: return f""" QPushButton[role="flat"] {{ background: {t.board}; color: {t.ink}; - border: 1px solid {t.ink_dim}; border-radius: {t.button_radius}px; - padding: 6px 14px; }} + border: 2px solid {t.ink_dim}; border-radius: {t.button_radius}px; + padding: 2px 5px; }} QPushButton[role="flat"]:hover {{ border-color: {t.ink}; }} QPushButton[role="flat"]:disabled {{ color: {t.ink_dim}; border-color: {t.line}; }}""" return f""" @@ -120,6 +120,30 @@ QComboBox {{ background: {t.field}; border: 1px solid {t.line}; border-radius: 4 QMenu {{ background: {t.field}; border: 1px solid {t.line}; padding: 4px; }} QMenu::item {{ padding: 6px 18px; }} QMenu::item:selected {{ background: {tint(t.field, t.accent, 0.25)}; }} + +QScrollBar:vertical {{ + background: #00000000; + width: 12px; + margin: 0px 0px; +}} +QScrollBar::handle:vertical {{ + background: {t.hatch}; + border-radius: 6px; + margin: 3px 0px; +}} +QScrollBar::add-line:vertical {{ + background: #00000000; + height: 0px; + subcontrol-position: bottom; + subcontrol-origin: margin; +}} +QScrollBar::sub-line:vertical {{ + background: #00000000; + height: 0px; + subcontrol-position: top; + subcontrol-origin: margin; +}} + """ @@ -215,7 +239,7 @@ class Inspector(QWidget): def __init__(self): super().__init__() self.setFixedWidth(INSPECTOR_W) - self.setFixedHeight(800) + #self.setFixedHeight(800) # This initial fix to stop window resizing caused issues with the new implementation of scroll bars. -Oaken self.control = None self._loading = False self.editing_layout = False @@ -319,6 +343,7 @@ class Inspector(QWidget): ml.addWidget(b, r, col) np_ = _label("Pressing or turning it will do nothing. Handy for a key " "you keep hitting by accident.", "dim", wrap=True) + # action page ap = QWidget() al = QVBoxLayout(ap) al.setContentsMargins(0, 0, 0, 0) diff --git a/macropad_gui/padview.py b/macropad_gui/padview.py index 3f4a809..55cb95c 100644 --- a/macropad_gui/padview.py +++ b/macropad_gui/padview.py @@ -768,23 +768,26 @@ class PadView(QWidget): """A filled tile with an asterisk on it, for a knob row.""" box = QRectF(at.x() - size / 2, at.y() - size / 2, size, size) self._flag_shape(p, box, THEME.badge_glyph or "*", QColor(TAPE), - QColor(THEME.accent_text)) + QColor(THEME.accent_text), glow=True) - def _corner_flag(self, p, rect, glyph, fill, pen_colour, italic=False): + def _corner_flag(self, p, rect, glyph, fill, pen_colour, italic=False, glow=False): """ The tab tucked into a key's top right corner: square, with only the inner corner rounded, so it reads as folded into the tile. """ size = min(BADGE, rect.width() * 0.26) - box = QRectF(rect.right() - size - KEY_R * 0.35, - rect.top() + KEY_R * 0.18, size, size) - self._flag_shape(p, box, glyph, fill, pen_colour, italic) + posOffset = 0.05 # Slightly offset from the edges for DPI scaling edge cases, despite now being drawn between the button background and border. -Oaken + box = QRectF(rect.right() - size - KEY_R * posOffset, + rect.top() + KEY_R * posOffset, size, size) + self._flag_shape(p, box, glyph, fill, pen_colour, italic, glow) - def _flag_shape(self, p, box, glyph, fill, pen_colour, italic=False): + def _flag_shape(self, p, box, glyph, fill, pen_colour, italic=False, glow=False): p.save() r = box.width() * 0.28 # square against the tile's own corner, rounded on the two inner ones - path = self._corner_path(box, tl=r, tr=0.0, br=r, bl=0.0) + path = self._corner_path(box, tl=0.0, tr=r, br=0.0, bl=r) # I screwed up the figma file, the rect is rotated -90deg. Opposite corners need to be rounded. -Oaken + if glow: + self._glow(p, path, TAPE) p.setPen(Qt.NoPen) p.setBrush(fill) p.drawPath(path) @@ -795,8 +798,8 @@ class PadView(QWidget): p.setFont(f) p.setPen(pen_colour) # the asterisk sits high in the em box; nudge it back to the middle - lift = box.height() * (0.18 if glyph == "*" else 0.0) - p.drawText(box.translated(0, lift), Qt.AlignCenter, glyph) + #lift = box.height() * (0.18 if glyph == "*" else 0.0) # This is no longer needed after fixing the corner rounding. -Oaken + p.drawText(box.translated(0, 0), Qt.AlignCenter, glyph) p.restore() def _paint_key(self, p, key, rect): @@ -808,8 +811,17 @@ class PadView(QWidget): p.fillPath(path, self._well_brush(rect)) if unknown: self._unknown_fill(p, path, rect, key) - if key == self.current or look.pending: + if key == self.current: # if key == self.current or look.pending: self._glow(p, path, TAPE) + if look.pending: # Move this so it draws after the button background, but before the border is drawn. -Oaken + if THEME.badge == "star": + self._corner_flag(p, rect, THEME.badge_glyph or "*", + QColor(TAPE), QColor(THEME.accent_text), glow=True) + else: + self._tape(p, QPointF(rect.right() - 7, rect.top() + 7)) + elif unknown and THEME.query_badge: + self._corner_flag(p, rect, "?", QColor(THEME.hatch), INK_DIM, + italic=True) self._stroke(p, path, self._outline_pen(key, look.known or look.pending), key) f = QFont(self.mono) @@ -847,16 +859,6 @@ class PadView(QWidget): p.drawText(body, Qt.AlignCenter | Qt.TextWordWrap, self._fit(text, f, body)) - if look.pending: - if THEME.badge == "star": - self._corner_flag(p, rect, THEME.badge_glyph or "*", - QColor(TAPE), QColor(THEME.accent_text)) - else: - self._tape(p, QPointF(rect.right() - 7, rect.top() + 7)) - elif unknown and THEME.query_badge: - self._corner_flag(p, rect, "?", QColor(THEME.hatch), INK_DIM, - italic=True) - def _paint_turn_icon(self, p, centre, clockwise, colour): r = 5.5 box = QRectF(centre.x() - r, centre.y() - r, 2 * r, 2 * r) @@ -1022,8 +1024,8 @@ class PadView(QWidget): p.setBrush(glow) p.drawPath(path) - colour = (QColor(TAPE) if (look.pending or is_cur) - else (INK if look.known and not look.quiet else INK_DIM)) + colour = (QColor(TAPE) if is_cur + else (INK if look.known or look.pending and not look.quiet else INK_DIM)) # Set pending text to white to differentiate between selected and pending. -Oaken icon_c = QPointF(rect.left() + RULE_X / 2, rect.center().y()) if act == "push": p.setPen(Qt.NoPen) diff --git a/macropad_gui/themes.py b/macropad_gui/themes.py index 23bdab4..98d4ae5 100644 --- a/macropad_gui/themes.py +++ b/macropad_gui/themes.py @@ -149,8 +149,10 @@ LATTE = Theme( # Designed in Figma by a member of the community. The palette is Silkscreen's # own window and board with a hotter orange and neutral rather than warm greys, # so what makes it its own theme is mostly the drawing switches below. -# Scale factor from the Figma file: its key tile is 291.67 units, ours is 96. -_F = 96.0 / 291.67 + +# :D -Oaken + +_F = 96.0 / 291.67 # Scale factor from the Figma file: its key tile is 291.67 units, ours is 96. KNOBS_NORTH = Theme( "knobs-north", "Knobs North", True, @@ -160,9 +162,9 @@ KNOBS_NORTH = Theme( badge="star", badge_glyph="*", legend_box=True, query_badge=True, byte_prefix=True, byte_ink="#505050", # tile and knob gradients, both #202326 falling to #131619 in the file - well="#131619", glow=3.2, knob_art="figma", + well="#131619", glow=35 * _F, knob_art="figma", # "glow" value here was set way too low, making it not visible. Fixed. -Oaken font="Harmattan", mono_font="JetBrains Mono NL", ui_font="Harmattan", - button_radius=7, pill_buttons=True, outline_primary=True, ui_pt=15, + button_radius=7, pill_buttons=True, outline_primary=True, ui_pt=18, # ui_pt=15 was a little small, bumping slightly to 18pt. -Oaken title_pt=28, mono_status=True, metrics=Metrics( key=96.0, @@ -172,16 +174,18 @@ KNOBS_NORTH = Theme( row_h=75.0 * _F, row_gap=40.0 * _F, row_sep=2.0 * _F, dial_w=512.0 * _F, legend_radius=15.0 * _F, rule_x=73.0 * _F, label_x=94.0 * _F, - byte_pt=24.0 * _F, label_pt=40.0 * _F, + byte_pt=24.0 * _F, label_pt=55.0 * _F, row_pt=40.0 * _F, row_byte_pt=20.0 * _F, badge=64.29 * _F, # The design sets line height to exactly the type size; Qt's is # looser, so the band is taller than the design's 100/300 while # staying centred on the same line. - label_band=(38 / 300, 0.18, 37 / 300, 0.18), + + # Values changed to allow 2 lines to render per key with increased font size. Elipsis will show on second line instead of a third line. -Oaken + label_band=(38 / 300, 0.10, 37 / 300, 0.01), # label_band=(38 / 300, 0.18, 37 / 300, 0.18) <-- old byte_inset=(19 / 300, 10 / 300)), notes=("Designed in Figma by a member of the community.", - "Knobs along the top. Use Rotate view if the drawing is sideways.")) + "Knobs along the top. North. Or east if you rotate...")) # Small tweak -Oaken # --------------------------------------------------------------- palettes # diff --git a/macropad_gui/vectors.py b/macropad_gui/vectors.py index b6bb0c1..bdd52ea 100644 --- a/macropad_gui/vectors.py +++ b/macropad_gui/vectors.py @@ -5,6 +5,8 @@ centre, so the shape survives any scaling. The clockwise arc is this same outline mirrored in x. """ +# :D -Oaken + KNOB_ARC = ( ("M", (-0.48235, -1.28433)), ("C", (-0.47805, -1.30123, -0.49448, -1.31592, -0.51064, -1.30935)),