StillHammer
959a2e4101
🎯 **PRODUCTION-READY UI ARCHITECTURE** - Data-agnostic IUI interface with type-safe enums for performance - Revolutionary hybrid sizing: percentage targets + absolute pixel constraints - Hierarchical windowing: Parent → Dock → Split → Tab → Window structure - Complete ImGuiUI implementation with all DataType content renderers 🔧 **DEVELOPMENT INFRASTRUCTURE** - AddressSanitizer + GDB debugging workflow for instant crash detection - Cross-platform pipeline: Linux development → Windows .exe automation - Debug mode default with comprehensive sanitizer coverage 📊 **TECHNICAL ACHIEVEMENTS** - Fixed JSON type mixing and buffer overflow crashes with precise debugging - Mathematical hybrid sizing formula: clamp(percentage_target, min_px, max_px) - Professional layout system: economic topbar + companies panel + strategic map - Interactive callback system with request/response architecture 🚀 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
47 lines
1.7 KiB
Markdown
47 lines
1.7 KiB
Markdown
# 🎯 **Hybrid Sizing System - Revolutionary UI Layout**
|
|
|
|
## Overview
|
|
|
|
The **Hybrid Sizing System** is a breakthrough UI layout approach that combines **responsive percentage targets** with **absolute pixel constraints** to achieve both flexible responsive design and guaranteed usability.
|
|
|
|
## 💡 **Core Concept**
|
|
|
|
Traditional UI systems force you to choose:
|
|
- **Percentages**: Responsive but can become unusable (too small/large)
|
|
- **Pixels**: Fixed size but not responsive
|
|
|
|
**Hybrid System**: Target percentages, respect absolute constraints.
|
|
|
|
## 📐 **Mathematical Formula**
|
|
|
|
```cpp
|
|
float final_size = clamp(percentage_target, absolute_min, absolute_max);
|
|
```
|
|
|
|
Where:
|
|
- `percentage_target = (percentage / 100.0f) * parent_size`
|
|
- `absolute_min` = minimum usable size in pixels
|
|
- `absolute_max` = maximum reasonable size in pixels
|
|
|
|
## 🎯 **Example in Action**
|
|
|
|
### Configuration
|
|
```json
|
|
{
|
|
"size": {"width": "20%"}, // Target 20% of parent
|
|
"min_size": {"width": 250}, // Never smaller than 250px
|
|
"max_size": {"width": 400} // Never larger than 400px
|
|
}
|
|
```
|
|
|
|
### Results Across Screen Sizes
|
|
|
|
| Screen Width | 20% Target | Constraints | **Final Size** | Status |
|
|
|-------------|-----------|-------------|----------------|--------|
|
|
| 1000px | 200px | 250-400px | **250px** | ⚖️ Clamped to minimum |
|
|
| 1400px | 280px | 250-400px | **280px** | ✅ Percentage achieved |
|
|
| 1800px | 360px | 250-400px | **360px** | ✅ Percentage achieved |
|
|
| 2500px | 500px | 250-400px | **400px** | ⚖️ Clamped to maximum |
|
|
|
|
This hybrid system represents a **fundamental advancement** in UI layout technology.
|