dtourolle
1985163827
FormFieldText treats its origin as the control's top-left - size and in_object both measure down from it - but drew the label by calling Text.render at that origin, and Text anchors on the baseline. The label's glyphs therefore landed above the origin, outside the box the control claims, on top of whatever was there. In a stacked form that is the preceding field's input box, which is what example_10_forms.png showed: every label but the first crowding the box above it. The label is now offset down by its ascent, so it occupies the space the control accounts for. Height derives from the label's ink height rather than the nominal font size, which had also eaten into the 5px gap between label and box. LABEL_GAP names that gap and field_area_offset gives the distance from the origin to the top of the input box; render, handle_click and the height calculation now share it instead of each recomputing font_size + 5. Also recorded under S12: the broken process pool is not merely wasted work. It forks from a process that already has threads, and tests/layout/test_ereader_image_rendering.py hangs at interpreter exit roughly one run in four - every test passes, then the process never returns.
pyWebLayout Visual Documentation
This directory contains visual documentation for pyWebLayout, including animated GIF demonstrations of the EbookReader functionality and static example outputs showcasing various features.
Generated GIFs
1. Page Navigation (ereader_page_navigation.gif)
Demonstrates forward and backward page navigation through an EPUB book. Shows smooth transitions between pages using next_page() and previous_page() methods.
Features shown:
- Sequential page advancement
- Page-by-page content rendering
- Natural reading flow
2. Font Size Adjustment (ereader_font_size.gif)
Shows dynamic font size scaling from 0.8x to 1.4x and back. The reader maintains the current reading position even as the layout changes with different font sizes.
Features shown:
increase_font_size()/decrease_font_size()set_font_size(scale)with specific values- Position preservation across layout changes
- Text reflow with different sizes
3. Chapter Navigation (ereader_chapter_navigation.gif)
Demonstrates jumping between chapters in a book. Each chapter's first page is displayed, showing the ability to navigate non-linearly through the content.
Features shown:
jump_to_chapter(index)for index-based navigationjump_to_chapter(title)for title-based navigationget_chapters()to list available chapters- Quick access to any part of the book
4. Bookmarks & Positions (ereader_bookmarks.gif)
Illustrates the bookmark system: navigating to a position, saving it, navigating away, and then returning to the saved position.
Features shown:
save_position(name)to bookmark current locationload_position(name)to return to saved bookmark- Position stability across navigation
- Multiple bookmark support
Generating Your Own GIFs
To generate these animations with your own EPUB file:
cd examples
python generate_ereader_gifs.py path/to/your/book.epub ../docs/images/
This will create all four GIF animations in the specified output directory.
Script Options
python generate_ereader_gifs.py <epub_path> [output_dir]
epub_path: Path to your EPUB file (required)output_dir: Directory to save GIFs (default: current directory)
Customization
You can modify generate_ereader_gifs.py to adjust:
- Frame duration (
durationparameter increate_gif()) - Page dimensions (change
page_sizeinEbookReader) - Number of frames for each animation
- Font scale ranges
- Animation sequences
Technical Details
- Format: Animated GIF
- Page Size: 600x800 pixels
- Frame Rate: Variable (500-1000ms per frame)
- Loop: Infinite
- Book Used: Alice's Adventures in Wonderland (test.epub)
File Sizes
| GIF | Size | Frames | Duration per Frame |
|---|---|---|---|
ereader_page_navigation.gif |
~500 KB | 10 | 600ms |
ereader_font_size.gif |
~680 KB | 13 | 500ms |
ereader_chapter_navigation.gif |
~290 KB | 11 | 1000ms |
ereader_bookmarks.gif |
~500 KB | 17 | 600ms |
Example Outputs
Static PNG images generated by the example scripts, demonstrating various pyWebLayout features.
Example 01: Simple Page Rendering
File: example_01_page_rendering.png
Source: examples/01_simple_page_rendering.py
Demonstrates: Page styles, borders, padding, background colors
Example 06: Functional Elements
File: example_06_functional_elements.png
Source: examples/06_functional_elements_demo.py
Demonstrates: Buttons, form fields, interactive elements
Example 08: Pagination (NEW)
Files:
example_08_pagination_explicit.png(109 KB) - 5 pages with explicit PageBreaksexample_08_pagination_auto.png(87 KB) - 2 pages with automatic pagination
Source: examples/08_pagination_demo.py Test: tests/examples/test_08_pagination_demo.py
Demonstrates:
- Using
PageBreakto force content onto new pages - Multi-page document layout with explicit breaks
- Automatic pagination when content overflows
- Page numbering functionality
- Document flow control
Coverage: ✅ Fills critical gap - PageBreak had NO examples before this
Example 09: Link Navigation (NEW)
File: example_09_link_navigation.png (60 KB)
Source: examples/09_link_navigation_demo.py
Test: tests/examples/test_09_link_navigation_demo.py
Demonstrates:
- Internal links - Document navigation (
#section1,#section2) - External links - Web URLs (
https://example.com) - API links - API endpoints (
/api/settings,/api/save) - Function links - Direct function calls (
calculate(),process()) - Link styling (underlined, color-coded by type)
- Link callbacks and interactivity
Coverage: ✅ Comprehensive - All 4 LinkType variations demonstrated
Example 10: Comprehensive Forms (NEW)
File: example_10_forms.png (31 KB)
Source: examples/10_forms_demo.py
Test: tests/examples/test_10_forms_demo.py
Demonstrates all 14 FormFieldType variations:
Text-Based Fields:
TEXT- Standard text inputEMAIL- Email validation fieldPASSWORD- Password maskingURL- URL validationTEXTAREA- Multi-line text
Number/Date/Time Fields:
NUMBER- Numeric inputDATE- Date pickerTIME- Time selectorRANGE- Slider controlCOLOR- Color picker
Selection Fields:
CHECKBOX- Boolean selectionRADIO- Single choice from optionsSELECT- Dropdown menuHIDDEN- Hidden form data
Coverage: ✅ Complete - All 14 field types across 4 practical examples
Generating New Examples
Run Individual Examples
# Navigate to project root
cd /path/to/pyWebLayout
# Run specific example
python examples/08_pagination_demo.py
python examples/09_link_navigation_demo.py
python examples/10_forms_demo.py
Run All Example Tests
# Run all example tests with pytest
python -m pytest tests/examples/ -v
# Run specific test file
python -m pytest tests/examples/test_08_pagination_demo.py -v
All new examples (08, 09, 10) include:
- ✅ Comprehensive documentation
- ✅ Full test coverage (30 tests total)
- ✅ Visual output verification
- ✅ Working code examples
See the main README.md and examples/README.md for detailed information.
Usage in Documentation
These visual assets are used throughout the pyWebLayout documentation to showcase capabilities.
To embed in Markdown:
To embed in HTML with size control:
<img src="docs/images/ereader_page_navigation.gif" width="300" alt="Page Navigation">
<img src="docs/images/example_08_pagination_explicit.png" width="400" alt="Pagination">