Scarriffle/onyx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blitz blendet zwischen zwei fertigen Fassungen über

Browse Source 
Deine Idee war die bessere. Eine helle Fläche mit dunklem Rand ließ sich aus
einem einzelnen Symbol nur nachbauen, indem dasselbe Zeichen zweimal in
verschiedener Größe übereinander gezeichnet wurde — und die
Größenverhältnisse sahen nie stimmig aus, wie man an den drei Anläufen
sieht. Zwei fertige Fassungen ineinander zu blenden ist der geradere Weg:
gezeichnet wird genau das, was in der Datei steht.

Erst die dunkle voll deckend, dann die helle mit steigender Deckkraft
darüber. Zeichnete man beide anteilig, schiene dazwischen der Hintergrund
durch und der Blitz wirkte blass.

Ohne eigenen Rand bekommt der Blitz den vollen Innenraum des Akkus statt
Innenraum minus Rand — er ist damit wieder etwas größer, bleibt aber
innerhalb des Rahmens. Der Test hält die neue Grenze fest.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-08-13 14:20:06 +02:00
parent 80b083259e
commit c990ea558b
6 changed files with 94 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
Packages/OnyxKit/Sources/MetricsProvider/BatteryGlyph.swift
View File

@@ -68,16 +68,22 @@ public enum BatteryGlyph {
return (filled, empty)
}
/// Der Blitz als eigene Vorlage.
/// Der Blitz in zwei Fassungen, hell und dunkel.
///
/// SF Symbols' `bolt.fill` ist eine massive Fläche; die mitgelieferte
/// Kontur trifft die Form besser und bringt schon einen kräftigen Strich
/// mit. Fehlt die Datei, bleibt das Systemsymbol.
public static let chargingGlyph: NSImage? = {
guard let url = Bundle.main.url(forResource: "thunder", withExtension: "svg")
/// **Warum zwei Dateien statt einer eingefärbten:** eine helle Fläche mit
/// dunklem Rand ließ sich aus einem einzelnen Symbol nur nachbauen, indem
/// dasselbe Zeichen zweimal in verschiedener Größe übereinander gezeichnet
/// wurde — und die Größenverhältnisse sahen nie stimmig aus. Zwei fertige
/// Fassungen ineinander zu blenden ist der geradere Weg: gezeichnet wird
/// genau das, was in der Datei steht.
public static let boltLight: NSImage? = load("bolt-light")
public static let boltDark: NSImage? = load("bolt-dark")
private static func load(_ name: String) -> NSImage? {
guard let url = Bundle.main.url(forResource: name, withExtension: "svg")
else { return nil }
return NSImage(contentsOf: url)
}()
}
/// Wie dick der Rand um das Zeichen ist.
public static let outlineWidth: CGFloat = 1
@@ -95,12 +101,11 @@ public enum BatteryGlyph {
/// der Außenhöhe ausgeht, landet bei einem Blitz, der den ganzen Akku
/// ausfüllt und an den Rahmen stößt.
public static func glyphHeight(for indicator: Indicator, in height: CGFloat) -> CGFloat {
let inner = height - 2 * fillInset
let usable = max(inner - 2 * outlineWidth, 1)
let inner = max(height - 2 * fillInset, 1)
switch indicator {
// Das Pausenzeichen ist von Haus aus höher gebaut als der Blitz.
case .paused: return usable * 0.8
default: return usable
case .paused: return inner * 0.8
default: return inner
}
}
@@ -206,25 +211,20 @@ public enum BatteryGlyph {
return
}
// Der Blitz: mit dunklem Rand, und fadend.
// Der Blitz blendet zwischen den beiden Fassungen über.
//
// Der Rand ist immer die Gegenfarbe zum Blitz selbst. Damit bleibt er
// in **jedem** Moment des Fadens lesbar: über der hellen Füllung trägt
// ihn der Rand, über dem leeren Teil der Blitz.
// Erst die dunkle voll deckend, dann die helle mit steigender
// Deckkraft darüber. So ist das Zeichen in jedem Moment vollständig
// gedeckt — zeichnete man beide anteilig, schiene dazwischen der
// Hintergrund durch und der Blitz wirkte blass.
let whiteness = boltWhiteness(phase: fadePhase)
let inverseColor = NSColor(white: 1 - whiteness, alpha: 1)
let boltColor = NSColor(white: whiteness, alpha: 1)
if let custom = chargingGlyph {
MenuBarText.drawTemplate(custom, color: inverseColor, in: outlineRect(glyphRect))
MenuBarText.drawTemplate(custom, color: boltColor, in: glyphRect)
if let dark = boltDark, let light = boltLight {
dark.draw(in: glyphRect, from: .zero, operation: .sourceOver, fraction: 1)
light.draw(in: glyphRect, from: .zero, operation: .sourceOver,
fraction: whiteness)
return
}
if let outline = tint(glyph, with: inverseColor) {
outline.draw(in: outlineRect(glyphRect), from: .zero,
operation: .sourceOver, fraction: 1)
}
if let filled = tint(glyph, with: boltColor) {
if let filled = tint(glyph, with: NSColor(white: whiteness, alpha: 1)) {
filled.draw(in: glyphRect, from: .zero, operation: .sourceOver, fraction: 1)
}
}
@@ -285,12 +285,7 @@ public struct BatteryGlyphView: View {
let phase = context.date.timeIntervalSinceReferenceDate
/ BatteryGlyph.fadeDuration
let whiteness = BatteryGlyph.boltWhiteness(phase: phase)
ZStack {
bolt(name: name, side: size + 2 * BatteryGlyph.outlineWidth)
.foregroundStyle(Color(white: 1 - whiteness))
bolt(name: name, side: size)
.foregroundStyle(Color(white: whiteness))
}
bolt(side: size, whiteness: whiteness)
}
} else {
Image(systemName: name)
@@ -308,17 +303,20 @@ public struct BatteryGlyphView: View {
.frame(width: width, height: height)
}
/// Dieselbe Vorlage wie in der Menüleiste, sonst das Systemsymbol.
/// Dieselben zwei Fassungen wie in der Menüleiste, ineinander geblendet.
@ViewBuilder
private func bolt(name: String, side: CGFloat) -> some View {
if let custom = BatteryGlyph.chargingGlyph {
Image(nsImage: custom)
.renderingMode(.template)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: side, height: side)
private func bolt(side: CGFloat, whiteness: Double) -> some View {
if let dark = BatteryGlyph.boltDark, let light = BatteryGlyph.boltLight {
ZStack {
Image(nsImage: dark).resizable().aspectRatio(contentMode: .fit)
Image(nsImage: light).resizable().aspectRatio(contentMode: .fit)
.opacity(whiteness)
}
.frame(width: side, height: side)
} else {
Image(systemName: name).font(.system(size: side))
Image(systemName: "bolt.fill")
.font(.system(size: side))
.foregroundStyle(Color(white: whiteness))
}
}