Web Page Editor

You design web pages using the UniLogic Web Page editor. The principles of design are identical to those of designing an HMI screen. The webserver supports User Controls and many of the widgets that also appear in the HMI toolbox, plus hyperlinks. In addition, Web Elements offer additional actions, such as the ability to download files located on the controller's SD card, either via the Hyperlink element, or using the Hyperlink option in element Actions.

Note that widgets in web pages are configured in similar fashion to HMI Elements: HE.

Creating Web Pages

You use the Web Page Editor to create your pages. Note that you can also convert existing HMI Screens to Web Pages.

1	HMI Editor	This is where you create your pages.
3	Toolbox (Ctr+T)	All elements are contained here. Most Web Server elements also exist as HMI elements, and are essentially the same in both form and function.
4	Properties Window	The Properties change according to the element you have currently selected.

Creating/Adding Pages

You can right-click a module and select Add Page, import, or add all of the pages in the module to the Library.

Right-clicking a page enables you to duplicate it, export it, and add it to the Library.

The Page properties are shown in the Properties Window when you first enter a page, or at any time you click an empty area on the page.

Properties

Page Height

Assign a height in pixels.

Lock Screen

Check this to prevent the elements on the page from being moved.

Name

Assign a name to identify the page.

Page Roles

Use this to assign a passwords to the page.

Background: Color\Image

Click the drop-down arrow to the right, and then:

To open the color palette, click the tab on the left.
To a select an image, click the tab on the right.

Finding and placing elements

Via Keyboard

Begin typing the element name into the Search field; the list narrows as you type.
Use your keyboard's Down arrow to scroll down the list.
To insert the element either:
- Press Enter or double-click it to place it on the screen
or
- Use your mouse to drag-and-drop the element to the desired location.

Via Mouse

Navigate through categorized list using your mouse.
Drag-and-drop the element to the desired location.

Language Support

Note that you can translate the language of the text strings in the individual elements, such as button labels.

Note that you can also convert your existing HMI Screens to Web Pages.

HMI/Web, Copy & Paste between Projects

In the source project HMI screen or Web Page, select one or more elements and press CTRL + C.
In the destination project's HMI screen or Web Page, select one or more elements and press CTRL + V.

UniLogic automatically creates any Structs or tags supporting the elements.