Skip to content

UIux.md

Latest commit

 

History

History
48 lines (36 loc) · 3.27 KB

UIux.md

File metadata and controls

48 lines (36 loc) · 3.27 KB

Obfuscator UI/UX Guide

Colors

  • Primary background: RGB(31,25,66) (#1F1942) used for WindowBg, ChildBg, FrameBg, tabs and borders (Menu.cpp:78–90).
  • Accent A (pink): RGB(235,5,90) (#EB055A) used for check marks, slider grab, header text layer (Menu.cpp:83,123; Feature accents).
  • Accent B (violet): RGB(70,50,240) (#4632F0) used for active slider, header text layer, minimize button styling (Menu.cpp:85,124,156–163).
  • Neutral text: RGB(255,255,255) used for standard text (Header title base layer) (Menu.cpp:111,125).
  • Backdrop base: IM_COL32(51,51,51,60) and hover: IM_COL32(51,51,51,90) for subtle control rows (Menu.cpp:17; UIUtils.hpp:28–39,44–57).
  • Separator: thin rule in content area uses Hex(51,51,51,1.0f) (Menu.cpp:185–186).

Typography

  • Primary fonts: JosefinSans-Regular.ttf at 16 and JosefinSans-Bold.ttf at 18 (Menu.cpp:100–105).
  • Fallback: ImGui default font if files not present (Menu.cpp:102,104).
  • Usage: Bold for section headers and the animated program title; Regular for body labels and controls.

Animations

  • Header title: Retro dual-layer animation with phase-cycled 2D offsets on accent layers A/B under a white base. Phases swap every ~100ms (Menu.cpp:114–126).
  • Sidebar nav underline: Smooth ease-out growth on hover/selection, driven by easeOutCubic and per-item underline state (Menu.cpp:29–31,53–56).
  • Sidebar icon dot: Color morph from grey → red with clamped animated factor; transitions at dt*4 for responsiveness (Menu.cpp:35–39,40–48).
  • Sidebar expand/collapse: Animated child height using ease-out and expand state (dt*6) (Menu.cpp:205–213,206–208).
  • Feature checkbox color: Animated text color red ↔ green reflecting activation state (UIUtils.hpp:66–86).

Layout and Interactions

  • Top bar controls: _ (minimize) uses Accent B styling; X (close) uses Accent A. The top controls region is transparent to reveal the header animation (Menu.cpp:150–173).
  • Draggable caption area: 60px within client area (top_bar = 60) for frameless dragging; clicks on ImGui widgets are respected via mouse capture (GuiMain.cpp:138–159,146).
  • Hit-testing policy: When ImGui::GetIO().WantCaptureMouse is true, non-client hit-test returns HTCLIENT to allow ImGui to handle clicks; otherwise header area yields HTCAPTION for drag (GuiMain.cpp:148–155).
  • Input/Output fields: Thin separator line visually separates the two rows for clarity (Menu.cpp:183–186).

Design Tokens

  • Background: #1F1942
  • Accent A: #EB055A
  • Accent B: #4632F0
  • Neutral text: #FFFFFF
  • Backdrop base: rgba(51,51,51,0.24)
  • Backdrop hover: rgba(51,51,51,0.35)
  • Rounding: window 4.0, frame 3.0, grab 2.0 (Menu.cpp:74–76)
  • Spacing: window padding 0,0; item spacing 12,8; frame padding 10,6 (Menu.cpp:67–70)

Implementation Notes

  • Backdrop helpers: Use DrawBackdropForNextItem for compact control backdrops, DrawBackdropRowFull for full-width rows (UIUtils.hpp:28–39,44–57).
  • Feature labels block: Uses dark backdrop child with no scrollbar to keep rows visually grouped (Menu.cpp:269–281 and similar blocks in other sections).
  • Consistency: All new UI elements should prefer the primary background and accents A/B, and retain rounding/spacing values to match the existing visual language.