Creating a New Page
StudioWeb lets you create new display pages from scratch. This guide covers page creation, canvas configuration, and tab management.
Creating a Blank Page
- Click File → New in the menu bar, or click the New Page toolbar icon
- Confirm the dialog if you have unsaved changes
- A blank canvas appears with default dimensions (800×600) and dark background
Configuring the Canvas
After creating a page, configure its properties by clicking the canvas background (deselect all objects):
Geometry Tab
| Property | Description | Default |
|---|---|---|
| Canvas Width | Page width in pixels | 800 |
| Canvas Height | Page height in pixels | 600 |
| Location X | Window X position (legacy) | 0 |
| Location Y | Window Y position (legacy) | 0 |
| Max Width | Maximum width constraint | 0 (none) |
| Max Height | Maximum height constraint | 0 (none) |
| Scale Factor | Display scaling factor | 1.0 |
Background Tab
| Property | Description | Default |
|---|---|---|
| Background Color | Canvas fill color | #0f172a (dark slate) |
| BG Image Type | Background image mode | none |
| BG Image Name | Background image file | — |
| BG Image Color | Tint color for BG image | — |
Window Tab
| Property | Description |
|---|---|
| Description | Human-readable page description |
| Title | Window title bar text |
| Window Class | SAMMI window classification |
| Help File | Associated help file name |
| Security Level | Access control level |
Working with Tabs
StudioWeb supports multi-tab pages (like SAMMI’s Virtual Buttons):
Adding a Tab
- Click Edit → Add Tab or right-click the tab bar
- A new tab appears with its own canvas
- Each tab has independent objects and background settings
Switching Tabs
- Click a tab label at the bottom of the canvas to switch
- Each tab maintains its own set of objects and layers
Tab Properties
Each tab inherits the page-level format properties but can have its own objects, layers, and layout.
Page Paging Links
For multi-page navigation, configure paging in the Format Properties:
| Property | Description |
|---|---|
| Page Forward | Next page name |
| Page Backward | Previous page name |
| Page Up | Page up name |
| Page Down | Page down name |
| Page First | First page in sequence |
| Page Last | Last page in sequence |
Tips
- Set canvas size to match your target display resolution
- Use a dark background (
#0f172a) for industrial displays — it reduces eye strain - Name your pages descriptively — the name appears in RuntimeWeb’s file picker
- Save frequently with File → Save