In this article, you will learn how to manage pages and objects in Web Port. From creating and uploading pages to editing, copying, moving, and removing them, as well as generating objects from tags. You'll also delve into the advanced settings for customizing your page elements effectively. Plus, explore helpful tips and best practices for efficient workflow integration.
Create page
To create a new page, go to the directory where the page is to be placed. Select the PAGE/Add tool button in the menu. Check placement in the dialog, name the page and select the page type .wpp. Then click the SAVE button. The page is now opened in edit mode
Upload page
Web Port can also import pages that have been created in another project. Click the button Page/Upload in the toolbar menu. Navigate to the page file, choose whether it should overwrite an existing file if one exists with the same ID, and select Save. The page import has support for all types of pages except for ones created in extensions. From this interface page files can also be downloaded.
NOTE!
When uploading files created in later versions of Web Port than the target there is the risk that the page cannot be imported. Make sure to only import pages made in the same or older versions of Web Port.
Copy page
To copy a page, go to the directory where the page is located. Select the Page tool button and then Copy in the menu. Enter the name of the new page and which directory it should be placed in. Then click on the COPY button to complete.
Move page
To move a page, go to the directory where the page is located. Select the Page tool button and then Move in the menu. Indicate which directory the page should be moved to. Then click the MOVE button to complete.
Remove page
To delete a page, go to the directory that contains the page, and then click the Page toolbar and then Delete. Select the pages to delete and then click the DELETE button.
Open page
A page is opened by clicking on the desired page under MENU/MY PAGES.
Edit page
To edit a page, first open the desired page in view mode, click the EDIT button in the toolbar.
In edit mode, a list of available symbol librarys is displayed on the left, while the page is displayed to the right.
To change page information, click page settings. A dialog opens to the right with the following settings options:
| Setting | Description |
| ID | ID of the page. (Defined by page location, name and file type, not editable) |
| *Name | Page name, also file name. Must be unique |
| Alias | Alias of the page. Can be used to link a page and object permissions |
| Description | Description of the page |
| Location | Location information |
| Created by | Indicates who created the page |
| IO-device | Links a status icon of the IO-device to the page information bar |
| Alarm tag | Alarm tag to connect to the status icon (used if no IO-device is indicated) |
| Internal URL | URL to be opened as iframe if connection is made from local network Example: http://www.kiona.com) |
| External URL | External network connection URL or if no internal URL is indicated |
| New tab | Indicates whether URL should be opened embedded in Web Port or in new tab |
| Background | Background image selection. Choose from list files from /system/backgrounds or upload new |
| Background color | Background colour on the page |
| Background color behind page | Background colour behind/around the display area |
| Select documentation | List of files and directories downloaded from /system/docs or upload new. If a folder is selected all files in the folder will be connected as documentation |
| Position | Selecting where in the window the page should be placed |
| Frame | Should frame appear around the page |
| Custom width | Used when background image is missing or is of format .svg |
| Custom height | Used when background image is missing or is of format .svg |
| Latitude | Position for page. Used by map module |
| Longitude | Position for page. Used by map module |
*Mandatory field
Information
Use Alias to facilitate when permissions should be set to page or object level. When permission is set to an alias, its link remains even if the page is moved.
Information
The background for a page can be an image placed in the directory /system/backgrounds/ (see page information above) or drawn directly in Web Port (see chapter "Template pages"). External images can be of the .png, .jpg, HTML or .svg (vector format) file types.
NOTE!
When using file type .svg (vector format), the file size should NOT be larger than 2MB to avoid performance problems when loading / updating the Webport page where the background image is used!
Create objects
To create dynamic objects on the page, the desired object is dragged and dropped from the libraries to the desired position. A dialog opens where a unique name for the object is set. It is also possible to create objects by copying existing objects. For more information on that, see "Edit objects". This section describes version 2 of the Web Port object standard. If you are using an older version you should read the accompanying manual about version 1 of the object standard.
To change all of the object parameters, click the object and a dialog opens to the right. The following options are available:
| Setting | Description |
| ID | Object ID. Must be unique |
| Prefix | Tag prefix. Used to attach tags to the object |
| Text | Text displayed above the object on the page |
Symbol settings
Click to expand
| Setting | Description |
| Symbol | Possibility to change the symbol of the object |
| X and Y position | The position of the object in x and y directions. Also updated during drag and drop |
| Rotation | The rotation of the object. Selection according to configuration in the symbol library |
| Scale factor | Change scale of an object. Value 1 = 100%, 0.5 = 50%, 2 = 200% |
| Hide whenMore information: Hide when can be used to limit visibility based on access level, by setting e.g. access<2 to hide the object for users with VIEW access. For more info on access levels, see chapter 9.3 |
Boolean expression that hides the object when evaluated to true |
| Custom class | Indicates a custom css class that is set on the object |
| Background color | Background color of the object. Indicated according to #RRGGBB (R=red, G=green, B=blue, 00-FF) |
| Page/Folder link | Link to another page. See information below |
Hide when:
You can also hide objects based on tag values. You can hide an object by writing: LB01_GT11_P=0
Then the symbol will be hidden if the tag when loading the page is 0.
You can also use expressions like <> if a value on a tag should be greater/less than for example 1.
Then you write according to the following example: LB01_GT11_P>1
If you want to use multiple tag values or different tags that must meet a condition see below example:
To have several options such as if LB01_GT11_P is "0" or greater than 1, you separate this with a "|" sign and write:
LB01_GT11_P=0|LB01_GT11_P>1
If you want more conditions to be met before the symbol is hidden like LB01_GT11_P is 0 and LB01_GT31_PV is greater than 20, this is written together with an "&" sign according to the following example:
LB01_GT11_P=0&LB01_GT31_PV>20
Text settings
Click to expand
| Setting | Description |
| Show text | (Checkbox)Indicates whether to display the text on the page. |
| Text Position | Indicates how text is positioned relative to the object. It is also possible to drag and drop the text on page to get exact position |
| Offset hor/ver | Indicates the number of pixels the text will be offset from initial position |
| Font size | Font size in pixels |
| Bold font | Indicates whether the text will be bold |
| Description color | Color of the text |
| Background color | Color of the text background |
| Custom style | Custom style for the object. Indicated according to CSS format |
Description and tag settings
Click to expand
| Setting | Description |
| Show labels | Indicates whether tag descriptions should be displayed in connection with measurement values on the page |
| Show values | Indicates whether the measured values should be displayed in connection with the object |
| Value and desc position | Indicates where the value and description should be placed relative to the symbol. Can also be drag and dropped. Default is the same as text position |
| Offset hor/ver | Indicates the number of pixels the text will be offset from initial position |
| Font size | Font size in pixels |
| Bold font | Indicates whether the text will be bold |
| Description color | Color of the text |
| Background color | Color of the text background |
| Custom style | Custom style for the object. Indicated according to CSS format |
| Custom value | Translates different measured values into their own texts. See examples below |
Advanced settings
Click to expand
| Setting | Description |
| Clickable | Indicates whether the object is clickable on the page in view mode |
| Edit text | Indicates whether the text of the object can be edited in view mode |
| Trend view | Indicates the object's default view for trend |
| Custom Trend Tags | Provides the possibility the define custom tags for default trend view |
| Tooltip | Descriptive text that appears when the object is clicked or when the mouse is placed above it |
| Indicator offset x/y | Offset of any indicators (hand, blocked alarm etc) from the symbol |
Information
Custom class
Custom class can either indicate a fixed css class that is always set on the object and thus can be used to change style via e.g. style.css which is automatically loaded if it is placed under /assets/theme/ or style.css from a symbol library.
The following keywords can also be used to dynamically insert classes:
| LID | Replaced with the current library ID |
| LOID | Replaced with the current object's library page |
| STATE | Replaced with the highest priority active state name |
| STATES | Replaced with the names of all active states |
Custom style
Custom style is indicated according to CSS standard. See www.w3schools.com/css for more information and CSS.
Example of a custom style:
font-size:24px;color:#dd4499; (Sets font size and color)Custom value
Custom value is given according to the format:
Suffix=VALUE:SUFIX=TEXT;...
Example of custom value:
_PV=0:_PV=Stop;_PV=1:_PV=Half speed;_PV=2:_PV=Full speed
To list which suffixes to display in an image, this is indicated by:
list#_SUFIX1;_SUFIX2;
Example list:
list#_PV1;_PV2;_PV3;
To call a script and show the result in an image, do this through script # script name (par1=value1, par2 = value2)
Script name indicates an existing call script and par1, par2, etc. sets variables to be inserted in the script. The values for the parameters can either be suffix and in that case indicated according to _SUFIX, or fixed values.
Example for script calls:
script#sum(x=3,y=_PV)
Page/Folder Link
Example of page link (ID):
VENTILATION_LB01_WPP
Template pages
Web Port has the possibility to save template pages and use them to create objects on new pages. This is done from a page in edit mode through Template in the toolbar menu above the page.
If the page from where the template is loaded has a page prefix, all the generated objects from the template will use that prefix (through starting the object prefix with _), provided they do not have hardcoded prefix in the template. If they have a hardcoded prefix, the prefix will remain on the objects after loading the template.
NOTE!
Make sure that a template page is not saved with the exact same name as another page in Web Port, since this can cause problems in rendering and can make the added objects disappear.
Generate objects from tags
It is possible to generate one or more objects from existing tags. Click Generate Objects in the toolbar.
| Option: | Description: |
| Symbol library | Symbol library from which objects are to be generated |
| From tag list | Choose whether tags should be retrieved from all tag lists or a specific one |
| Prefix filters | Provides an additional filter options |
| Add prefix to object name | Allows you to add additional prefixes to the object name |
Selecting object from Symbol library
Click for example
Example from lib.conf:
"Sensor": {
"Description": "Sensor",
"ImageBase": "Sensor",
"ImageType": "svg",
"States": [
{"State": "off", "criteria": "V=0|CMD=0"},
{"State": "on", "criteria": "V=1|CMD=1"},
{"State": "al", "criteria": "AL=1|FAULT=1"}],
"Rotations": [0,90,180,270],
"ObjectFilter": "TS|ROOM"
},
From tag list
Click for example
The ending "_PV" is deleted. The symbol name is the text that remains after the last "_", which is matched against all Objects and their ObjectFilter in the selected symbol library.
In this case, TS under the Object Sensor.
If an Object the symbol library has the ObjectFilter set to "*", that symbol will be selected if no other match is made.
Prefix Filters
Click for example
Example:
"AS01_VS01" filters all tags starting with "AS01_VS01"
"*VS01" filters tags containing VS01
"*VS|*KB" filters all tags containing VS or KB "
Add prefix to object name
Click for example
Example:
Tag name "AS01_VS01_GT11_PV" will by default provide the object GT11.
If the prefix "VS02" is entered, the object's name will become "VS02-GT11".
If "*" is entered, the prefix will be taken from the tag name and become "VS01-GT11".
Edit objects
There are several ways to edit and manage objects on pages, and mainly they are accessed through the toolbar menu above the page in edit mode.
Through the Object menu you can edit depth, distribute objects horizontally and vertically, and align objects with each other.
Through the Edit menu you can edit common fields on several objects simultaneously, and also copy and paste objects.
Copy objects
It is possible to copy objects through the Edit menu on a page in edit mode. First select the object(s), and then click Copy objects and then Paste objects. It is also possible to copy and paste objects between pages in the same way, and with the standard keyboard shortcuts Ctrl+C and Ctrl+V.
Remove objects
To delete an object, this is marked in the same way as when editing. In the dialog that opens, click the DELETE button. More objects can be deleted at the same time by dragging and selecting an area containing several objects and then pressing DELETE.
Edit background
In order to create a simpler page background through Web Port, first open the desired page in edit mode, (see chapter "Open page"). To switch to editing mode of the background, click on Tools/Drawing Tools in the edit menu.
The editor used is svg-edit and help texts and introduction videos can be found online.
Information
To save the changes made, click the save button at the top left of the editor. Then switch back to dynamic mode to see the background along with components.
NOTE!
Background image drawn via the Editor is placed on top of any background image selected via page information.
TIP!
An efficient way of working is to have both the external editing program for the background image and Web Port open simultaneously. Changes saved in the editor are updated directly to Web Port by reloading the page.