Knobs North theme adjustments and fixes

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;
+              border: 2px solid {t.accent}; border-radius: {t.button_radius}px;
-              font-weight: 600; padding: 8px 16px; }}
+              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;
+              border: 2px solid {t.ink_dim}; border-radius: {t.button_radius}px;
-              padding: 6px 14px; }}
+              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)

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,
+        posOffset = 0.05 # Slightly offset from the edges for DPI scaling edge cases, despite now being drawn between the button background and border. -Oaken
-                     rect.top() + KEY_R * 0.18, size, size)
+        box = QRectF(rect.right() - size - KEY_R * posOffset,
-        self._flag_shape(p, box, glyph, fill, pen_colour, italic)
+                     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)
+        #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, lift), Qt.AlignCenter, glyph)
+        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)
+        colour = (QColor(TAPE) if is_cur
-                  else (INK if look.known and not look.quiet else INK_DIM))
+                  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)

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
 #

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)),