144 lines
4.7 KiB
Markdown
144 lines
4.7 KiB
Markdown
# pyWebLayout HTML Browser
|
|
|
|
A simple HTML browser built using the pyWebLayout library components from `pyWebLayout/io/` and `pyWebLayout/concrete/`.
|
|
|
|
## Features
|
|
|
|
This browser demonstrates the capabilities of pyWebLayout by implementing:
|
|
|
|
### Rendering Components
|
|
- **Text rendering** with various formatting (bold, italic, underline)
|
|
- **Headers** (H1-H6) with proper sizing and styling
|
|
- **Links** (clickable, with external browser opening for external URLs)
|
|
- **Images** (local files and web URLs with error handling)
|
|
- **Layout containers** for proper element positioning
|
|
- **Basic HTML parsing** and element conversion
|
|
|
|
### User Interface
|
|
- **Navigation controls**: Back, Forward, Refresh buttons
|
|
- **Address bar**: Enter URLs or file paths
|
|
- **File browser**: Open local HTML files
|
|
- **Scrollable content area** with both vertical and horizontal scrollbars
|
|
- **Mouse interaction**: Clickable links with hover effects
|
|
- **Status bar**: Shows current operation status
|
|
|
|
## Usage
|
|
|
|
### Starting the Browser
|
|
```bash
|
|
python html_browser.py
|
|
```
|
|
|
|
### Loading Content
|
|
|
|
1. **Load the test page**: The browser starts with a welcome page showing various features
|
|
2. **Open local files**: Click "Open File" to browse and select HTML files
|
|
3. **Enter URLs**: Type URLs in the address bar and press Enter or click "Go"
|
|
4. **Navigate**: Use back/forward buttons to navigate through history
|
|
|
|
### Test Files
|
|
|
|
- `test_page.html` - A comprehensive test page demonstrating all supported features including:
|
|
- Text formatting (bold, italic, underline)
|
|
- Headers of all levels (H1-H6)
|
|
- Links (both internal and external)
|
|
- Images (includes the sample image from tests/data/)
|
|
- Line breaks and paragraphs
|
|
|
|
## Architecture
|
|
|
|
### HTML Parser (`HTMLParser` class)
|
|
- Simple regex-based HTML tokenizer
|
|
- Converts HTML elements to pyWebLayout abstract objects
|
|
- Handles font styling with a font stack for nested formatting
|
|
- Supports basic HTML tags: h1-h6, b, strong, i, em, u, a, img, br, p, div, span
|
|
|
|
### Browser Window (`BrowserWindow` class)
|
|
- Tkinter-based GUI with navigation controls
|
|
- Canvas-based rendering of pyWebLayout Page objects
|
|
- Mouse event handling for interactive elements
|
|
- Navigation history management
|
|
- File and URL loading capabilities
|
|
|
|
### pyWebLayout Integration
|
|
|
|
The browser uses these pyWebLayout components:
|
|
|
|
#### From `pyWebLayout/concrete/`:
|
|
- `Page` - Top-level container for web page content
|
|
- `Container` - Layout management for multiple elements
|
|
- `Box` - Basic rectangular container with positioning
|
|
- `Text` - Text rendering with font styling
|
|
- `RenderableImage` - Image loading and display with scaling
|
|
- `RenderableLink` - Interactive link elements
|
|
- `RenderableButton` - Interactive button elements
|
|
|
|
#### From `pyWebLayout/abstract/`:
|
|
- `Link` - Abstract link representation with types (internal, external, API, function)
|
|
- `Image` - Abstract image representation with dimensions and loading
|
|
- Font and styling classes for text appearance
|
|
|
|
#### From `pyWebLayout/style/`:
|
|
- `Font` - Font management with size, weight, style, and decoration
|
|
- `FontWeight`, `FontStyle`, `TextDecoration` - Typography enums
|
|
- `Alignment` - Layout positioning options
|
|
|
|
## Supported HTML Features
|
|
|
|
### Text Elements
|
|
- `<h1>` to `<h6>` - Headers with appropriate sizing
|
|
- `<p>` - Paragraphs with spacing
|
|
- `<b>`, `<strong>` - Bold text
|
|
- `<i>`, `<em>` - Italic text
|
|
- `<u>` - Underlined text
|
|
- `<br>` - Line breaks
|
|
|
|
### Interactive Elements
|
|
- `<a href="...">` - Links (opens external URLs in system browser)
|
|
|
|
### Media Elements
|
|
- `<img src="..." alt="..." width="..." height="...">` - Images with scaling
|
|
|
|
### Container Elements
|
|
- `<div>`, `<span>` - Generic containers (parsed but not specially styled)
|
|
|
|
## Example Usage
|
|
|
|
```python
|
|
# Start the browser
|
|
from html_browser import BrowserWindow
|
|
|
|
browser = BrowserWindow()
|
|
browser.run()
|
|
```
|
|
|
|
## Limitations
|
|
|
|
This is a demonstration browser with simplified HTML parsing:
|
|
- No CSS support (styling is done through pyWebLayout components)
|
|
- No JavaScript execution
|
|
- Limited HTML tag support
|
|
- No form submission (forms can be rendered but not submitted)
|
|
- No advanced layout features (flexbox, grid, etc.)
|
|
|
|
## Dependencies
|
|
|
|
- `tkinter` - GUI framework (usually included with Python)
|
|
- `PIL` (Pillow) - Image processing
|
|
- `requests` - HTTP requests for web URLs
|
|
- `pyWebLayout` - The core layout and rendering library
|
|
|
|
## Testing
|
|
|
|
Load `test_page.html` to see all supported features in action:
|
|
1. Run the browser: `python html_browser.py`
|
|
2. Click "Open File" and select `test_page.html`
|
|
3. Explore the different text formatting, links, and image rendering
|
|
|
|
The test page includes:
|
|
- Various header levels
|
|
- Text formatting examples
|
|
- Clickable links (try the Google link!)
|
|
- A sample image from the test data
|
|
- Mixed content demonstrations
|