Web GUI — The Browser Face of Pytigon

Pytigon's web GUI is what users see when they open their browser. It's built on Bootstrap for responsive layouts, enhanced with custom Web Components for complex interactions, and powered by a lightweight JavaScript library that handles table rendering, form submission, and real-time updates.

The Technology Stack

Layer Technology Purpose
Structure HTML5 Page skeleton, generated from .ihtml templates
Style Bootstrap 5 + custom CSS Responsive grid, components, Pytigon themes
Interaction Custom JavaScript + jQuery AJAX, form handling, real-time updates
Components Web Components Reusable UI widgets (tables, trees, forms)
Real-time WebSockets (Django Channels) Live updates without polling

Page Structure

Every Pytigon web page follows this template hierarchy:

base.ihtml (Django base template)
  → theme/[device]_base.ihtml (device-specific chrome)
    → [app]/templates/[model]_list.ihtml (application content)

The Base Template

The base template provides: - HTML5 document structure with proper meta tags - Bootstrap CSS framework - Pytigon JavaScript library - Navigation menu (rendered by %% menu tag) - Breadcrumbs - User toolbar (login/logout, language switcher, notifications) - Content area (where application-specific templates render)

Device-Specific Themes

Templates adapt to the detected device at render time:

standard_web_browser = 1  →  desktop theme
standard_web_browser = 2  →  hybrid (embedded browser) theme

browser_type = 'tablet_standard'  →  tablet theme
browser_type = 'smartfon_standard' →  smartphone theme

The Frontend JavaScript Library

See Frontend script library for detailed documentation. Key capabilities:

  • Table component — Paginated, sortable, searchable tables with AJAX loading
  • Form handling — Validation, submission, file uploads with progress
  • Tree component — Hierarchical data with expand/collapse
  • WebSockets — Real-time table updates, notifications
  • Context menus — Right-click actions on table rows
  • Drag-and-drop — Reorder table rows, move items in trees
  • Modal dialogs — Confirmation dialogs, edit-in-modal

Web Components

See Components for detailed documentation. Pytigon's Web Components provide:

  • <ptig-table> — Full-featured data table
  • <ptig-form> — Dynamic form with validation
  • <ptig-tree> — Hierarchical tree view
  • <ptig-menu> — Navigation menu
  • <ptig-calendar> — Calendar/date picker
  • <ptig-chart> — Chart rendering (Plotly integration)

Bootstrap Integration

Pytigon uses Bootstrap 5 classes for layout and styling. The default theme includes:

  • btn-raised class — Material Design-inspired raised buttons
  • table-ptig class — Pytigon-styled data tables
  • Responsive grid — Full 12-column layout system
  • Card components — For grouping related content
  • Form floating labels — Modern form styling

Offline Support

Pytigon's web client supports offline mode when configured. The pyodide context variable is True when rendering in a Pyodide (Python-in-browser) environment, enabling client-side Python execution for offline data processing.

?: IntroducToWebGUI ?: IntroducToWebGUI