Introduction

ProGUI Overview

ProGUI is a high-performance, lightweight, cross-platform Graphical User Interface (GUI) framework designed for PureBasic. Built on top of modern hardware-accelerated rendering backends (Direct2D for Windows and Cairo for Linux) – ProGUI provides developers with the tools to create stunning, responsive, and highly customizable applications with a tiny footprint (858KB DLL).

By stepping away from the limitations of standard OS-drawn controls, ProGUI introduces a flexible, modern paradigm familiar to web developers, featuring Flexbox and CSS Grid layout engines, CSS-like skinning with cascading states, fluid animations, and high-quality 2D vector graphics without the need for an expensive, resource hungry Web browser based engine.

Key Features

1. Modern Window & Widget Management

At the core of ProGUI is a highly flexible object system consisting of Windows and Widgets.

• Custom Borderless Windows: Create fully customized, borderless windows featuring drop-shadows (using native DWM on Windows), transparency, and custom title bars that perfectly match your application’s theme.
• Standard & OS Widgets: Build interfaces using lightweight, ProGUI-rendered standard widgets, or seamlessly integrate native OS controls (like CreateOsWidget or CreateWebView for WebView2 integration).
• Widget Hierarchy: Build complex UI trees where widgets can act as standalone elements or as containers driven by layout engines.

2. Advanced Layout Engines

Say goodbye to manual pixel-perfect coordinate math. ProGUI handles responsive scaling through advanced web-standard layout engines:

• Flexbox Layout (#PG_Layout_Type_Flex): Dynamically arrange widgets in rows or columns, wrapping elements, and distributing free space (using Justify and AlignItems).
• CSS Grid Layout (#PG_Layout_Type_Grid): Define sophisticated 2-dimensional grid templates with absolute control over columns, rows, gap sizes, and widget spanning (e.g., WidgetSetColumnSpan).
• Basic Layout: Standard absolute positioning (x, y, Width, Height) when strict manual placement is needed.

3. CSS-Style Skinning & Theming

Separate your application’s logic from its appearance using a powerful CSS-like skinning engine:

• Classes and IDs: Style elements globally by class (e.g., WidgetSetClass(widget, "genericButton")) or target individual elements by Name/ID (e.g., WidgetSetName(widget, "mySpecialButton") mapping to the #mySpecialButton rule in the skin).
• Dynamic States: Define styles for interactive states such as "hover", "active", or custom states, and easily transition between them using WidgetSetSkinState().
• Rich Properties: Utilize advanced styling properties, including linear/radial gradients, border-radius, inset/outset box-shadows, typography (font-weight, text-align), and external image tiling/stretching.
• Live Reloading: Load external CSS stylesheets (LoadSkin()) or dynamically define rules at runtime using SkinSetValue().

4. Smooth Animation & Transitions

ProGUI boasts a built-in animation framework synchronized with display refresh rates:

• Property Transitions: Animate UI changes effortlessly by defining transitions in your skin (e.g., transition: background-color 0.3s ease-out-bounce).
• Custom Animations: Use StartAnimation() and StopAnimation() to trigger time-based loops.
• Easing Functions: Access a massive library of easing functions including Transition_Linear, Transition_Ease, Transition_Elastic, Transition_Bounce, and custom Transition_CubicBezier to give natural momentum and weight to UI elements.

5. Hardware-Accelerated 2D Graphics API

Render custom graphics directly inside drawing event handlers using a fully-featured vector API:

• Shape Primitives & Paths: Draw lines, boxes, rounded boxes, ellipses, and complex geometry paths (PathMoveTo, PathAddCurve, PathAddArc).
• Brushes & Strokes: Fill shapes using solid colors, image patterns, or multi-stop gradients (CreateBrushGradientLinear, CreateBrushGradientRadial). Control stroke thickness, dashes, corner joins, and miter limits.
• Layers & Masking: Push drawing layers (BeginLayer) to apply complex alpha masks or group opacities, and utilize pixel-perfect clipping regions (BeginClipBox, BeginClipPath).

6. Event-Driven Architecture

A robust, non-blocking callback system routes user inputs and rendering routines reliably:

• Interactive Handlers: Use AddEventHandler() to attach user-defined procedures to #PG_Event_MouseLeftButtonDown, #PG_Event_MouseMove, #PG_Event_Action, etc.
• Draw Dispatching: ProGUI handles optimized repainting. You hook into #PG_Event_Draw to inject custom drawing logic exactly when and where a widget needs an update.

7. Per-Monitor DPI Awareness

ProGUI is engineered for high-resolution displays out of the box. Device Independent Pixels (DIPs) are used for all coordinates and sizing. When a window moves between monitors with different scaling factors (e.g., 100% to 150%), ProGUI triggers #PG_Event_DPI and automatically handles crisp sub-pixel scaling for layout, graphics, text, and shadows.

Where to go next?

To get started with ProGUI, explore the specific modules in this documentation:

• Window Management: Learn how to spawn and manage application windows.
• Layout Management: Learn how to construct responsive UI designs using Flex and Grid.
• Widgets: Start building interfaces, configuring states, and wrapping controls.
• Skinning: Dive into the CSS-like syntax for styling your interface.
• Graphics: Discover how to draw custom shapes, text, and images.
• Events: Hook up the logic and make your interface interactive.