Web Port allows you to embed html-based portlets in system in pages. Web Port includes a symbol library with some examples of Portlets. It is possible to build custom portlets, similar to any other symbols in Web Port, and the portlets included in the installation are free to use or customize as needed.
Here is a description of some of these:
| Portlet: | Description: |
| Google Street View | Provides the opportunity to embed street views from Google |
| Gauge | Translates a value on a tag to a graphical meter |
| Trend | Embeds trend graphs on a system page |
| Pie chart | Visualizes tag values as a pie chart |
| Thermometer | Visualizes tag values as a thermometer |
For each portlet there are a number of general settings:
| Setting: | Description: |
| Name | Name of the portlet |
| X-Position | Horizontal position on the page |
| Y-Position | Vertical position on the page |
| Width | Width in pixels |
| Height | Height in pixels |
| Frame | Any potential frame around the portlet, CSS code |
| Hide when | Hide the portlet based on Boolean expression |
In addition to the general settings, individual settings can also be created for each portlet, which can then be used to convey data between Web Port and the portlet.
Each portlet is defined in an htm file found in the symbol library's subdirectory / portlets /. Specific settings are defined in libs.conf. The short codes (in the format: "<%=NAME%>") are also defined in the .htm file and are replaced by the portlet settings upon rendering of the page.
Tip!
There are two main types of portlets. Portlets handled as i-frame have a complete HTML document based on <html>, <head>, and <body> tags. The second type is the portlets that do not use i-frame to appear, and do not have their own <html>, <head>, and <body> tags.
To select the type that does not use the i-frame, specify:
"Embedded": true
in the portlet's settings in lib.conf.
Google street view
Google street view embeds street photos from indicated map coordinates. For Street View, you need a Google Maps JavaScript API key that can be generated in its Google API console.
Settings that can be made are:
| Setting: | Description: | |
| Latitude | <%=LAT%> | Latitude |
| Longitude | <%=LNG%> | Longitude |
| Direction | <%=HEADING%> | Direction in degrees |
| Pitch | <%=PITCH%> | Gradient in degrees |
| Zoom | <%=ZOOM%> | Zoom in level (1-20) |
| API key |
<%=API%> | Google Maps JavaScript API key |
Example:
Script code (from streetview.htm)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
</style>
</head>
<body>
<div id="street-view"></div>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama( document.getElementById('street-view'),
{
position: {lat: <%=LAT%>, lng: <%=LNG%>},
pov: {heading: <%=HEADING%>, pitch: <%=PITCH%>},
zoom: <%=ZOOM%>
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%=API%>&callback=initialize">
</script>
</body>
</html>
Definition in lib.conf
STREETVIEW": {
"Description": "{lang:Google Street View:Google Street View}",
"URL": "streetview.htm",
"Width": 200,
Height": 200,
"Scalable": true,
"Scrolling": "HIDDEN",
"Access": 2,
"Settings": {
"LAT": {
"Value": "0",
"Description": "{lang:Latitude:Latitude}",
"Type": "NUMBER",
"Validation": "f[-90..90]"
},
"LNG": {
"Value": "0",
"Description": "{lang:Longitude:Longitude}",
"Type": "NUMBER",
"Validation": "f[-180..180]"
},
"HEADING": {
"Value": "0",
"Description": "{lang:Heading: Heading}",
"Type": "NUMBER",
"Validation": "f[-180..180]"
},
"PITCH": {
"Value": "0",
"Description": "{lang:Pitch:Pitch}",
"Type": "NUMBER",
"Validation": "f[-90..90]"
},
"ZOOM": {
"Value": "1",
"Description": "{lang:Zoom:Zoom}",
"Type": "NUMBER",
"Validation": "f[0..23]"
}, "APIKEY": {
"Value": "",
“Description": "{lang:API-KEY:API-Key}",
"Type": "TEXT",
"Validation": ""
}
}
}
Gauge
Is a graphical meter that visualizes measurements from a tag.
Settings:
| Setting: | Description: |
| Tag | Name of the tag to be loaded |
| Text | Description |
| Minimum | Minimum Value |
| Maximum | Maximum Value |
| Small ticks | Number of smaller measuring points between the larger ones |
| Large ticks | Number of larger measuring points on the meter |
| Limit 1 | Value for the first limit mark |
| Limit 2 | Value for the second limit mar |
| Color 1 | Color code according to #rrggbb, where rrggbb (red, green, blue) is indicated in hex format |
| Color 2 | Color code according to #rrggbb, where rrggbb (red, green, blue) is indicated in hex format |
| Color 3 | Color code according to #rrggbb, where rrggbb (red, green, blue) is indicated in hex format |
URL
Creates a box where an external web page can be embedded. Add the URL to be embedded.
Trend
When adding a trend graph, the following settings can be configured:
| Setting: | Description: |
| Header | The header of the trend graph |
| Enter view | View mode, see info box below |
| Enter timespan | Timespan, see info box below |
| Enter tags | The tags to show in the trend graph |
Information:
The following view modes are available:
TREND = 0
TREND_INSTANT = 13
YEARLY_AVERAGE = 1
MONTHLY_AVEREGE = 2
WEEKLY_AVERAGE = 3
DAILY_AVERAGE = 4
HOURLY_AVERAGE = 14
YEARLY_USAGE = 5
MONTHLY_USAGE = 6
WEEKLY_USAGE = 7
DAILY_USAGE = 8
HOURLY_USAGE = 15
YEARLY_ACTIVE = 9
MONTHLY_ACTIVE = 10
WEEKLY_ACTIVE = 11
DAILY_ACTIVE = 12
HOURLY_ACTIVE = 16
YEARLY_TIME = 17
MONTHLY_TIME = 18
WEEKLY_TIME = 19
DAILY_TIME = 20
HOURLY_TIME = 21
Information:
The following time spans are available:
1H = 1 hour
1D = 1 day
1W = 1 week
1M = 1 month
1Q = 1 quarter
1Y = 1 year
PH = Previous hour
PD = Previous day
PW = Previous week
PM = Previous month
PQ = Previous quarter
PY = Previous year
Pie chart
Creates a pie chart from one or more tag values, entered comma-separated.
Example: LB01_GT11_PV, LB01_GT12_PV
Thermometer
Creates a visualization of a thermometer where min, max, and step length can be configured along with the temperature tag.
Comments
0 comments
Please sign in to leave a comment.