Diagramme rechnen mit der vollen Länge, eigene Symbole für CPU und GPU
Frisch gestartet hat der Verlauf fünf Messwerte statt sechzig. Gerechnet wurde aber „Breite geteilt durch Anzahl" — also war jeder Balken ein Fünftel breit, und mit jedem weiteren wurden sie schmaler. Das Diagramm sah nach einem Ausschlag aus und bedeutete nichts. Jetzt kommt die Schrittweite aus der vollen Länge. Fehlende Werte bleiben als freie Fläche links stehen; der Verlauf wächst nach links weg, wie bei jedem Zeitdiagramm. Das steckte an **drei** Stellen, alle mit derselben Rechnung: dem Balkendiagramm im Netzwerk-Popover, der Sparkline in den Kacheln und der Linie in den Menüleisten-Modulen. Die gemeinsame Rechnung liegt jetzt in `GraphLayout` und ist geprüft, statt dreimal danebenzugehen. Nebenbei: die Fläche unter der Sparkline begann am linken Rand statt am ersten Messwert — ein Keil über die ganze Breite, wo noch nichts gemessen war. CPU und GPU bekommen eigene Symbole aus chip.svg und graphic-card.svg. SF Symbols hat für beides nur denselben Chip, und „cpu" neben „cpu.fill" ist kein Unterschied, den man in der Menüleiste erkennt. Die Beschriftung unter den Ringen klebte am Rand und sah aus, als gehörte sie noch hinein — sechs Punkte Abstand statt zwei. Und die Popover für CPU und GPU tragen jetzt einen Titel: bei drei gleich aussehenden Ringen sieht man sonst nicht, vor welchem man steht. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
@@ -222,6 +222,10 @@ final class MetricStatusView: NSView, WidthReporting {
|
||||
if metric == .battery {
|
||||
drawBattery(color: color,
|
||||
at: NSPoint(x: 0, y: bounds.midY - BatteryGlyph.size.height / 2))
|
||||
} else if let image = Self.customGlyphs[metric] {
|
||||
MenuBarText.drawTemplate(image, color: color,
|
||||
in: NSRect(x: 0, y: bounds.midY - 6.5,
|
||||
width: glyph, height: 13))
|
||||
} else {
|
||||
MenuBarText.drawSymbol(currentSymbol, color: color,
|
||||
in: NSRect(x: 0, y: bounds.midY - 6.5,
|
||||
@@ -246,6 +250,19 @@ final class MetricStatusView: NSView, WidthReporting {
|
||||
MenuBarText.draw(text, color: color, in: rect ?? bounds)
|
||||
}
|
||||
|
||||
/// Eigene Vorlagen für CPU und GPU — SF Symbols hat für beides nur den
|
||||
/// gleichen Chip, und „cpu" neben „cpu.fill" ist kein Unterschied, den man
|
||||
/// in der Menüleiste erkennt.
|
||||
private static let customGlyphs: [MetricKind: NSImage] = {
|
||||
var glyphs: [MetricKind: NSImage] = [:]
|
||||
for (metric, name) in [(MetricKind.cpu, "chip"), (.gpu, "graphic-card")] {
|
||||
guard let url = Bundle.main.url(forResource: name, withExtension: "svg"),
|
||||
let image = NSImage(contentsOf: url) else { continue }
|
||||
glyphs[metric] = image
|
||||
}
|
||||
return glyphs
|
||||
}()
|
||||
|
||||
private func drawSymbol(color: NSColor) {
|
||||
if metric == .battery {
|
||||
drawBattery(color: color,
|
||||
@@ -254,6 +271,12 @@ final class MetricStatusView: NSView, WidthReporting {
|
||||
return
|
||||
}
|
||||
let side: CGFloat = 15
|
||||
let rect = NSRect(x: bounds.midX - side / 2, y: bounds.midY - side / 2,
|
||||
width: side, height: side)
|
||||
if let glyph = Self.customGlyphs[metric] {
|
||||
MenuBarText.drawTemplate(glyph, color: color, in: rect)
|
||||
return
|
||||
}
|
||||
let width = MenuBarText.symbolWidth(currentSymbol, height: side)
|
||||
MenuBarText.drawSymbol(currentSymbol, color: color,
|
||||
in: NSRect(x: bounds.midX - width / 2,
|
||||
@@ -299,8 +322,10 @@ final class MetricStatusView: NSView, WidthReporting {
|
||||
/// Wie breit das Glyph ist. Der Akku wird selbst gezeichnet und hat eigene
|
||||
/// Maße; alles andere ist ein SF-Symbol.
|
||||
private var symbolSlot: CGFloat {
|
||||
metric == .battery ? BatteryGlyph.size.width
|
||||
: MenuBarText.symbolWidth(currentSymbol, height: 13)
|
||||
if metric == .battery { return BatteryGlyph.size.width }
|
||||
// Eigene Vorlagen sind quadratisch; ihre Breite folgt der Höhe.
|
||||
if Self.customGlyphs[metric] != nil { return 13 }
|
||||
return MenuBarText.symbolWidth(currentSymbol, height: 13)
|
||||
}
|
||||
|
||||
/// Das Symbol zum **Zustand**, nicht zur Metrik.
|
||||
@@ -316,14 +341,21 @@ final class MetricStatusView: NSView, WidthReporting {
|
||||
}
|
||||
|
||||
private func drawGraph(color: NSColor, in rect: NSRect) {
|
||||
guard history.count > 1, let context = NSGraphicsContext.current?.cgContext else { return }
|
||||
let step = rect.width / CGFloat(history.count - 1)
|
||||
guard let context = NSGraphicsContext.current?.cgContext else { return }
|
||||
// Die Schrittweite kommt aus der vollen Länge des Verlaufs, nicht aus
|
||||
// der Anzahl vorhandener Werte: frisch gestartet sind es zwei statt
|
||||
// sechzig, und daraus gerechnet spannte sich der Weg über die ganze
|
||||
// Breite.
|
||||
let xs = GraphLayout.positions(count: history.count,
|
||||
capacity: MetricsModel.historyLength, in: rect)
|
||||
guard !xs.isEmpty else { return }
|
||||
|
||||
context.setStrokeColor(color.withAlphaComponent(0.85).cgColor)
|
||||
context.setLineWidth(1)
|
||||
context.setLineJoin(.round)
|
||||
for (index, value) in history.enumerated() {
|
||||
let point = CGPoint(x: rect.minX + CGFloat(index) * step,
|
||||
for (index, x) in xs.enumerated() {
|
||||
let value = history[history.count - xs.count + index]
|
||||
let point = CGPoint(x: x,
|
||||
y: rect.minY + rect.height * CGFloat(min(max(value, 0), 1)))
|
||||
index == 0 ? context.move(to: point) : context.addLine(to: point)
|
||||
}
|
||||
|
||||
@@ -13,6 +13,11 @@ struct MetricPopoverContent: View {
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
// Ein Titel oben: bei drei gleich aussehenden Ringen sieht man
|
||||
// sonst nicht, ob man vor dem CPU- oder dem GPU-Popover steht.
|
||||
Text(String(localized: .init(metric.localizationKey), bundle: .module))
|
||||
.font(.headline)
|
||||
|
||||
switch metric {
|
||||
case .cpu, .gpu: ProcessorDetail(model: model, metric: metric)
|
||||
case .memory: MemoryDetail(snapshot: model.snapshot)
|
||||
@@ -64,7 +69,9 @@ private struct Dial: View {
|
||||
var tint: Color = .accentColor
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 2) {
|
||||
// Sechs Punkte Abstand statt zwei: die Beschriftung klebte am Ring und
|
||||
// sah aus, als gehörte sie noch hinein.
|
||||
VStack(spacing: 6) {
|
||||
ZStack {
|
||||
Circle().stroke(.quaternary, lineWidth: 5)
|
||||
Circle()
|
||||
@@ -76,6 +83,7 @@ private struct Dial: View {
|
||||
.frame(width: 62, height: 62)
|
||||
Text(caption).font(.caption2).foregroundStyle(.secondary)
|
||||
}
|
||||
.padding(.bottom, 2)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import SwiftUI
|
||||
import OnyxDesign
|
||||
import OnyxWidgetKit
|
||||
import OnyxMenuBar
|
||||
|
||||
/// Ein Widget je Hardwaregröße. Alle teilen sich dasselbe Modell und damit
|
||||
/// dieselbe Messschleife.
|
||||
@@ -137,21 +138,31 @@ private struct WideMetric: View {
|
||||
public struct Sparkline: View {
|
||||
let values: [Double]
|
||||
let tint: Color
|
||||
/// Wie viele Werte der Verlauf fasst — die Schrittweite hängt daran, nicht
|
||||
/// an der Anzahl der bisher vorhandenen.
|
||||
let capacity: Int
|
||||
|
||||
public init(values: [Double], tint: Color) {
|
||||
public init(values: [Double], tint: Color, capacity: Int = MetricsModel.historyLength) {
|
||||
self.values = values
|
||||
self.tint = tint
|
||||
self.capacity = capacity
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
GeometryReader { geometry in
|
||||
let points = Array(values.suffix(MetricsModel.historyLength))
|
||||
let points = Array(values.suffix(capacity))
|
||||
if points.count > 1 {
|
||||
let size = geometry.size
|
||||
let step = size.width / CGFloat(points.count - 1)
|
||||
let coordinates = points.enumerated().map { index, value in
|
||||
CGPoint(x: CGFloat(index) * step,
|
||||
y: size.height * (1 - CGFloat(min(max(value, 0), 1))))
|
||||
// Die Schrittweite kommt aus der **vollen** Länge des Verlaufs,
|
||||
// nicht aus der Anzahl vorhandener Werte. Frisch gestartet sind
|
||||
// es zwei statt sechzig; daraus gerechnet spannte sich der Weg
|
||||
// zwischen ihnen über die ganze Breite — ein riesiger Zickzack,
|
||||
// der nach viel Bewegung aussah und nichts bedeutete.
|
||||
let xs = GraphLayout.positions(count: points.count,
|
||||
capacity: capacity,
|
||||
in: CGRect(origin: .zero, size: size))
|
||||
let coordinates = zip(xs, points).map { x, value in
|
||||
CGPoint(x: x, y: size.height * (1 - CGFloat(min(max(value, 0), 1))))
|
||||
}
|
||||
|
||||
let line = Path { path in
|
||||
@@ -162,10 +173,15 @@ public struct Sparkline: View {
|
||||
|
||||
// Dieselbe Kurve, unten geschlossen — die Fläche darunter gibt
|
||||
// dem Verlauf Gewicht, ohne dass eine zweite Linie nötig wäre.
|
||||
// Die Fläche beginnt am ersten Messwert, nicht am linken Rand:
|
||||
// sonst zieht sich bei wenigen Werten ein Keil über die ganze
|
||||
// Breite, obwohl dort noch nichts gemessen wurde.
|
||||
let area = Path { path in
|
||||
path.move(to: CGPoint(x: 0, y: size.height))
|
||||
guard let first = coordinates.first, let last = coordinates.last
|
||||
else { return }
|
||||
path.move(to: CGPoint(x: first.x, y: size.height))
|
||||
coordinates.forEach { path.addLine(to: $0) }
|
||||
path.addLine(to: CGPoint(x: size.width, y: size.height))
|
||||
path.addLine(to: CGPoint(x: last.x, y: size.height))
|
||||
path.closeSubpath()
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user