Create custom objects
Custom objects are created through a set of images that are named according to the object specification that the symbol library describes in lib.conf (see chapter 5.6). Objects are defined under the Objects group in lib.conf and are defined as follows:
Example:
The following example describes a compressor with states, on, off and alarm with rotation 0, 90°, 180° and 270°.
"Compressor": {Unique ID
"Description": "Compressor",Description of object
"ImageBase": "compressor",Name base for image (if left empty, ID is used)
"ImageType": "gif",Image type (jpg, png, gif, svg)
"States": [
{"State": "off", "criteria": "V=0|CMD=0"},
{"State": "on", "criteria": "V=1|CMD=1"},
{"State": "al", "criteria": "AL=1|FAULT=1"}],States with attached criteria
"Rotations": [0,90,180,270],Rotations
"ObjectFilter": ""Used to generate objects based on prefix
},
This configuration needs the following images in the symbols directory to work: compressor_off.gif, compressor_on.gif, compressor_al.gif,
compressor_off_90.gif, compressor_on_90.gif, compressor_al_90.gif,
compressor_off_180.gif, compressor_on_180.gif, compressor_al_180.gif,
compressor_off_270.gif, compressor_on_270.gif, compressor_al_270.gif,
Information
The criteria for the states are defined by Boolean expressions. The terms can be grouped with parentheses and then evaluated. The following comparisons can be used: <, >, <=, >=, <>, =, & (and),|(or).
If no match can be made against any of the states of the object and criteria, the top of the list is always used.
If any state is fulfilled further down the list, this has priority over any previously fulfilled states.
If the object is of the type svg, several states can be active simultaneously.
The criterion may also contain conditions for the alarm status by using .AlarmState=CONDITION, where STATE is replaced by one of the following: OK, OK_NACK, ALARM, ALARM_NACK or BLOCKED
Object Functions
Object functions are used to define how tags should be displayed on a page define the content of settings dialogs. Object functions are also used to define different types of commands that can be performed from settings dialogs, for example, manual manoeuvre of a pump or valve. Functions are defined under Functions in lib.conf, and may be of the following types:
| Function: | Description: |
| Digital | Indicates which suffixes are digital signals. |
| Value | Indicates which suffix to display in image. |
| Setpoint | Indicates which suffixes are changeable for level 1 (BASIC) can also be indicated via Access. |
| Input | Indicates which suffixes are changeable for level 2 (ADVANCED). |
| Select | Multiple selection function that is displayed as buttons, such as hand controls. |
| Dropdown | Multiple selection function that appears as a multiple-choice list, such as operating modes. |
| Schedule | Indicates which suffixes are used for schedules. |
| Portlet | Allows you to embed a portlet in the sidebar. |
| Optional | Optional whether setting should be visible, and provides the possibility to run a script after all the values have been written. See information box below. |
Example:
The following example describes a function for a Hand-0-Auto switch.
"F11": {Unique ID
"Description":"Manual Mode H/0/A",Description of function
"Type": "Select",Function type
"Action": "From:M=1,MCMD=0|To:M=1,MCMD=1|Auto:M=0,MCMD=0",Description of how the function should work
"Level": "Manual mode",Text shown in popup
"Access": 3Access-level for the function
},
Information
Level has different functions depending on the type of function. For Value type, Level indicates which level a value should be displayed on (1 at the top, 2 at the bottom), For Select and Dropdown, Level indicates the text displayed in the settings box. Setpoint and Input retrieve their texts from the tag list.
Tip!
To introduce a delay in a sequence of events for an Action, d=delay is used where the delay is given in milliseconds.
Example:
The following example sets the MCMD tag to 1, waits 2 seconds, and then sets the tag to 0 when the Toggle button is clicked.
...
"ACTION": " Toggle:MCMD=1,d=2000,MCMD=0"
...
Tip!
CALL SCRIPTS can also be run from an Action. This is done by writing:
Script#script name(parameters).
Script names can be read from SYSTEM SETTINGS/SCRIPTS/CALL SCRIPTS
Parameters are not mandatory but are a good way to send information to the script.
Parameters are written in the form par1=value,par2=value where par1 and par2 become variables with set values in the script.
If PREFIX is set as the value for a parameter, this is replaced by the prefix for the current object.
Suffix can be indicated as a value for a parameter and then replaced with the current value for the tag. This is done by starting the value with _ (e.g. _PV)
Example:
The following example calls the script sum with two parameters x=3 and y=_PV, when the Calculate button is clicked. This assumes that a script named sum exists, and uses two parameters, one of which is the number 3 and the other is an object tag that ends on _PV. For more information about scripts, see Chapter "Call scripts".
...
"ACTION": "Calculate:script#sum(x=3, y=_PV)"
...
Schedule Type
For the Schedule type, Action can be indicated in three different ways. This is to be able to offer different types of schedule solutions.
Option 1:
To link a local schedule with on and off-times separated in different tags, us Action CT#| CF# where CT and CF can be replaced by other tag SUFFIXes if desired. # will be replaced with numbers in Web Port according to 1.2.. 7 for Monday, Tuesday.. Sunday and 8 and 9 for holiday eves and holidays. If several on and off-sets are desired, use 11,12..17 for on/off number 2 and 21,22..27 for number 3 and so forth.
Option 2:
If a tag uses /day, Action is indicated according to CV# where CV can be replaced with other tag endings if desired. # will be replaced by numbers in Web Port according to 1.2.. 7 for Monday, Tuesday.. Sunday and 8 and 9 for holiday eves and holiday.
Option 3:
A schedule can also be connected to the more advanced schedule solution of Web Port. This is done by entering Action WEBPORT. In order to then link a page object to a schedule, the Text field (object name) is set to the same name as the schedule, and the function is checked in the object settings.
Note!
If option 3 is used, no other fields or functions will be shown in the sidemenu for the object in view mode.
Information
Optional gives an input field for settings, similar to INPUT. The difference is that the input field is only shown if the function Optional is chosen.
Example: ”Action”: ”SP10” , setting for SP10 is only shown if the function is activated.
Optional also gives the possibility to set Level to RunOnSave which will run a script configured in Action.
Example:
"Action": "script#RunOnSave(prefix=PREFIX)",
"Level": "RunOnSave",
Portlet type
The Portlet type allows a portlet to be embedded in the popup dialog. This can be used to provide more detailed information, embed a map or the like. Below is an example of how this can be done
Example:
" LIBOBJECT ": {
"Description": "Lib object",
" Type": "Portlet",
" Action": "portlet-lib_LIBOBJECT:OBJECT=property-svg_Sensor,POSX=20,POSY=20,PREFIX = PREFIX",
"Level": "",
"Access": 3
},
Action indicates the path to the portlet to be embedded and any parameters. The path is indicated according to [library name]_[object-id]:[parameters].
In the example above, the library name is portlet-lib, object- ID LIBOBJECT and the parameters OBJECT, POSX, POSY and PREFIX.
The following keywords can be used to replace the page or object information:
| Keyword | Description |
| PREFIX | Replaced with the object's prefix |
| LNG | Replaced with longitude for the page |
| LAT | Replaced with latitude for the page |
| _SUFFIX | Replaced with the value of the tag the suffix indicates, for example _PV |
Indicators
Indicators are displayed above objects and can be used to alert the user to special conditions. In the supplied symbol library, indicators are used to display a flashing hand on objects that are not in automatic mode. Indicators are defined in the same way as objects. Examples of how these are indicated can be seen in chapters "Create custom objects" and "lib.conf". Indicators are defined under the group Indicators in lib.conf.
style.css
With style.css you can affect how your svg symbols look in different states. You can also create a unique graphical standard for your headers, texts and tags for each symbol. Every library has its own style.css. When creating styles in this file it is important to name the “paths” to the classes correctly.
Example 1
Here is an example of a “path” to a class can look: .fastighet-svg.Fan.on .ind_on {
fill: #23d879;
}
.fastighet-svg is the name of the library
.Fan is the name (ID) of the symbol
.on is in this case a state
.ind_on is the class set on the specific element of the svg image. In this example we switch color of the element when the state is “on”.
Another thing you can do with style.css is to set unique text styles for your symbol library. If you want to create a generic style throughout all symbol libraries you should instead add the style in /assets/theme/style.css.
There are example classes in these files which shows how to change the text styles. Below follows another example:
Example 2
.fastighet-svg.WpCompV2 .wpCompText .NAME
{
font-weight:bold;
}
In this example we change the header on all symbols to bold.
Here is a list of standard classes:
| Class | Description |
| .fastighet-svg.WpCompV2 .wpCompText .NAME | header style |
| .fastighet-svg.WpCompV2 .wpCompTag | description and tag value style |
| .fastighet-svg.WpCompV2 .wpCompTag .wpCompDescription | value description style |
| .fastighet-svg.WpCompV2 .wpCompTag .wpCompTagValue | value style |
| .fastighet-svg.WpCompV2 .wpCompSelectBox | style for the box containing the symbol and all its texts |
| .fastighet-svg.WpCompV2 .wpCompImage | style around the symbol |
Virtual components
There are possibilities to access the same settings as for an object without creating the object itself, by using virtual components. It can be used e.g. for settings popups in reports or portlets.
It is created by in javascript call ShowSideInfo("/page/objectsettings", { id: oid, lf1: xxx, lf2: yyy, lib: libid, pageid:pid });
Where oid is the tag prefix of the object, e.g. VS01_GT11 lfX (optional parameter) gives the possibility to select functions such as buttons for manual maneuver, e.g. ‘F13’.
pid is the page that the virtual object shall be tied to.
If there is an object on a page with the same prefix, the function is taken from the same symbol library. If there is no object of if the function should be fetched from another library, the parameter lib (optional) is used.
Example:
ShowSideInfo("/page/objectsettings", { id: ’VS01_GT11’, lf1: ‘F12’, lf2: ‘F13’, lib: ‘fastighet-svg’, pageid:’LB01_WPP’ });
Metadata
There is the possibility to add more information to an object through creating data structures in Portlets. In these cases the settings of a portlet is used to define which data and in which way it should be input or selected.
The connection is then done through the tag list by using a prefix+suffix structure in the same way as other tags. META1-5 are predefined in fastighet-svg as valid suffix for tags, but can be adapted as needed. To connect a portlet to a tag, select the datatype PORTLET. Save the tag and open it again for editing. Instead of address a drop-down list is now shown where available Portlets in the system can be selected. Observe that description is mandatory for Metadata to appear on connected page objects. Page objects that have metadata connected will show these as collapsed groups where the header will be set as the description of the meta tag.