Lumina

Pixel Perfect

Een moderne macOS app die websites in een transparant venster toont, zodat designers deze over designs kunnen leggen om font sizes, marges en paddings te controleren.

Features

• Transparant Browser Venster: Websites weergeven in een transparant venster dat over andere apps kan liggen
• Transparantie Slider: Transparantie aanpassen in stappen van 10%
• Viewport Presets: Voorgedefinieerde formaten (iPhone, iPad, Desktop) en custom sizes
• Design Tools:
  • Ruler Tool: Pixel-perfect meten met drag-to-measure functionaliteit
  • Grid Overlay: Aanpasbaar grid overlay voor alignment
  • Screenshot Tool: Screenshots maken en opslaan
• URL Bar: Met autocomplete gebaseerd op history en bookmarks
• Bookmarks & History: Opslaan en beheren van favoriete websites
• Zoom Functionaliteit: Zoom in/out met keyboard shortcuts
• Always-on-Top: Venster altijd bovenop houden

Keyboard Shortcuts

• Cmd + N: Nieuw venster
• Cmd + W: Sluit venster
• Cmd + R: Reload pagina
• Cmd + +: Zoom in
• Cmd + -: Zoom out
• Cmd + 0: Reset zoom
• Cmd + R: Toggle ruler
• Cmd + G: Toggle grid
• Cmd + S: Screenshot

Project Setup

Vereisten

• macOS 12.0 of hoger
• Xcode 14.0 of hoger
• Swift 5.7 of hoger

Installatie

1. Open Xcode

2. Maak een nieuw project:

   • Kies "macOS" > "App"
   • Kies "SwiftUI" als interface
   • Geef het project een naam (bijv. "Lumina")
   • Kies een locatie om het project op te slaan

3. Vervang de gegenereerde bestanden met de bestanden uit deze repository:

   • Kopieer alle bestanden uit de Helium/ directory naar je Xcode project
   • Zorg ervoor dat de directory structuur behouden blijft:

     YourProject/
     ├── LuminaApp.swift
     ├── Views/
     │   ├── BrowserWindow.swift
     │   ├── BrowserView.swift
     │   ├── ControlsPanel.swift
     │   ├── URLBar.swift
     │   ├── ToolsPanel.swift
     │   └── WindowAccessor.swift
     ├── Models/
     │   ├── ViewportSize.swift
     │   ├── Bookmark.swift
     │   └── HistoryItem.swift
     ├── Managers/
     │   ├── WindowManager.swift
     │   ├── BookmarkManager.swift
     │   ├── HistoryManager.swift
     │   └── TransparencyController.swift
     ├── Tools/
     │   ├── RulerTool.swift
     │   ├── GridOverlay.swift
     │   └── ScreenshotTool.swift
     └── Presets/
         └── ViewportPresets.swift
     

4. Configureer het project:

   • Zet de minimum deployment target op macOS 12.0
   • Zorg ervoor dat "App Sandbox" uitgeschakeld is (of pas de entitlements aan)
   • Stel de Bundle Identifier in

5. Build en run het project

Gebruik

1. Start de app
2. Voer een URL in de URL bar in
3. Pas de transparantie aan met de slider
4. Kies een viewport size uit de presets
5. Gebruik de design tools (ruler, grid) om je design te controleren
6. Maak screenshots indien nodig

Project Structuur

Helium/
├── HeliumApp.swift              # Main app entry point
├── Views/
│   ├── BrowserWindow.swift      # Main window container
│   ├── BrowserView.swift        # WKWebView wrapper
│   ├── ControlsPanel.swift      # Control panel UI
│   ├── URLBar.swift             # URL input with autocomplete
│   ├── ToolsPanel.swift         # Design tools panel
│   └── WindowAccessor.swift     # Helper for window access
├── Models/
│   ├── ViewportSize.swift       # Viewport size model
│   ├── Bookmark.swift           # Bookmark model
│   └── HistoryItem.swift        # History item model
├── Managers/
│   ├── WindowManager.swift      # Window management
│   ├── BookmarkManager.swift    # Bookmark persistence
│   ├── HistoryManager.swift     # History persistence
│   └── TransparencyController.swift
├── Tools/
│   ├── RulerTool.swift          # Ruler overlay
│   ├── GridOverlay.swift        # Grid overlay
│   └── ScreenshotTool.swift     # Screenshot functionality
└── Presets/
    └── ViewportPresets.swift    # Predefined viewport sizes

Technische Details

• Framework: SwiftUI + AppKit
• Web Engine: WebKit (WKWebView)
• Data Persistence: UserDefaults (JSON encoding)
• Window Management: NSWindow met transparantie en level configuratie

Over Lumina

Lumina is geïnspireerd op de originele Helium app (2015-2016) maar volledig opnieuw gebouwd met moderne SwiftUI technologie en uitgebreide design tools voor pixel-perfect web design.

Licentie

Dit project is open source en vrij te gebruiken.