ZIKUU Mini – Admin DashboardをSwiftで再実装する

Swift版 AppKit相当のフレームワークができたので、これまでReactフロントエンド / FastAPIバックエンドとして実装していた ZIKUU Mini用のAdmin Dashboardを Swift で書き換えることにしました。

まずはシステム情報を取得して表示する画面から着手。

比較のために React / FastAPI版の画面です。

Swiftで再実装したものがこれ。

MetricGaugeViewというViewのサブクラスを作って再利用可能にしました。

コードはこんな感じ。

 // ~/workspace/AdminDashboard/Sources/AdminDashboard/MetricGaugeView.swift

import Application
import Core

/// A circular utilization gauge for percentage metrics.
final class MetricGaugeView: View {

    var value: Double? {
        didSet {
            setNeedsDisplay()
        }
    }

    var trackColor = GraphicsColor(
        red: 0.87,
        green: 0.89,
        blue: 0.91
    ) {
        didSet {
            setNeedsDisplay()
        }
    }

    var progressColor = GraphicsColor(
        red: 0.25,
        green: 0.49,
        blue: 0.81
    ) {
        didSet {
            setNeedsDisplay()
        }
    }

    var lineWidth: Float = 10 {
        didSet {
            setNeedsDisplay()
        }
    }

    override init(frame: Rect) {
        value = nil
        super.init(frame: frame)
    }

    override init() {
        value = nil
        super.init()
    }

    override func draw(
        _ dirtyRect: Rect,
        in context: GraphicsContext
    ) {
        let bounds = self.bounds

        let diameter = min(
            bounds.size.width,
            bounds.size.height
        )

        guard diameter > 0 else {
            return
        }

        let strokeWidth = min(
            max(1, lineWidth),
            diameter / 4
        )

        let radius = (diameter - strokeWidth) / 2 - 2

        guard radius > 0 else {
            return
        }

        let center = Point(
            x: bounds.midX,
            y: bounds.midY
        )

        context.saveGraphicsState()
        defer {
            context.restoreGraphicsState()
        }

        context.setLineWidth(strokeWidth)
        context.setLineCapStyle(.round)

        // MARK: Background Track

        let track = BezierPath()

        track.appendArc(
            center: center,
            radius: radius,
            startAngle: -90,
            endAngle: 270
        )

        context.setStrokeColor(trackColor)
        context.stroke(track)


        guard let value, value.isFinite else {
            return
        }

        let percentage = min(
            100,
            max(0, value)
        )

        guard percentage > 0 else {
            return
        }

        let startAngle: Float = -90

        let endAngle = startAngle
            + Float(percentage / 100) * 360

        let progress = BezierPath()

        progress.appendArc(
            center: center,
            radius: radius,
            startAngle: startAngle,
            endAngle: endAngle
        )

        context.setStrokeColor(progressColor)
        context.stroke(progress)
    }
}

Swiftで書き直したバックエンドのAPIサーバーに、デスクトップアプリからアクセス構成にしています。

定期的にサーバーにポーリングする関係で、別のスレッドでAPIサーバーにアクセスするようにしました。そのため、フレームワークのApplicationのrunLoopの中で、スレッド処理をするように拡張しました。
早速、フレームワーク側を練ることができました。