Med Web Port kan du bädda in html-baserade portlets i system på sidor. Web Port innehåller ett symbolbibliotek med några exempel på portlets. Det är möjligt att bygga egna portlets, precis som alla andra symboler i Web Port, och de portlets som ingår i installationen är fria att använda eller anpassa efter behov. När man skapar en ny portlet tillåter Web Port endast namn som innehåller A–Z, a–z, och 0–9. Inga andra symboler eller specialtecken är tillåtna.
Här följer en beskrivning av några av dessa:
| Portlet: | Beskrivning: |
| Google Street View | Ger möjlighet att bädda in gatuvyer från Google |
| Gauge | Översätter ett värde på en tagg till en grafisk mätare |
| Trend | Bäddar in trenddiagram på en systemsida |
| Pie chart | Visualiserar taggvärden som ett cirkeldiagram |
| Thermometer | Visualiserar taggvärden som en termometer |
För varje portlet finns ett antal allmänna inställningar:
| Inställning: | Beskrivning: |
| Namn | Namn på portleten |
| X-Position | Horisontell position på sidan |
| Y-position | Vertikal position på sidan |
| Bredd | Bredd i pixlar |
| Höjd | Höjd i pixlar |
| Ram | Eventuell ram runt portleten, CSS-kod |
| Dölj när | Dölj portleten baserat på ett booleskt uttryck |
Utöver de generella inställningarna kan även individuella inställningar skapas för varje portlet, som sedan kan användas för att förmedla data mellan Web Port och portleten.
Varje portlet definieras i en htm-fil som finns i symbolbibliotekets underkatalog / portlets /. Specifika inställningar görs i libs.conf. Kortkoderna (i formatet: "<%=NAME%>") definieras också i .htm-filen och ersätts av portletinställningarna när sidan renderas.
Tips!
Det finns två huvudtyper av portlets. Portlets som hanteras som i-frame har ett komplett HTML-dokument baserat på taggarna <html>, <head> och <body>. Den andra typen är portlets som inte använder i-frame för att visas, och som inte har egna <html>-, <head>- och <body>-taggar.
Om du vill välja den typ som inte använder i-frame anger du:
"Embedded": true
i portlets inställningar i lib.conf.
Google street view
Google Street View bäddar in gatufoton från angivna kartkoordinater. För Street View behöver du en Google Maps JavaScript API-nyckel som kan genereras i dess Google API-konsol.
Inställningar som kan göras är:
| Inställning: | Beskrivning: | |
| Latitud | <%=LAT%> | Latitud |
| Longitud | <%=LNG%> LONGITUD | Longitud |
| Riktning | <%=HEADING%> | Riktning i grader |
| Höjd | <%=PITCH%> | Lutning i grader |
| Zoom | <%=ZOOM%> | Nivå för inzoomning (1-20) |
| API-nyckel |
<%=API%> | Google Maps JavaScript API-nyckel |
Exempel:
Skriptkod (från 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 i 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
Är en grafisk mätare som visualiserar mätningar från en tagg.
Inställningar:
| Inställning: | Beskrivning: |
| Tag | Namn på den tagg som ska laddas |
| Text | Beskrivning |
| Minimum | Minsta värde |
| Maximum | Högsta värde |
| Small ticks | Antal mindre mätpunkter mellan de större |
| Large ticks | Antal större mätpunkter på mätaren |
| Limit 1 | Värde för den första gränsmarkeringen |
| Limit 2 | Värde för den andra gränsmarkeringen |
| Color 1 | Färgkod enligt #rrggbb, där rrggbb (röd, grön, blå) är anges i hex-format |
| Color 2 | Färgkod enligt #rrggbb, där rrggbb (rött, grönt, blått) anges anges i hex-format |
| Color 3 | Färgkod enligt #rrggbb, där rrggbb (rött, grönt, blått) är anges i hex-format |
URL
Skapar en ruta där en extern webbsida kan bäddas in. Lägg till den URL som ska bäddas in.
Trend
När du lägger till ett trenddiagram kan följande inställningar konfigureras:
| Inställning: | Beskrivning: |
| Rubrik | Trendgrafens rubrik |
| Ange vy | Visningsläge, se informationsrutan nedan |
| Ange tidsintervall | Tidsintervall, se informationsrutan nedan |
| Ange taggar | De taggar som ska visas i trenddiagrammet |
Information:
Följande visningslägen är tillgängliga:
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:
Följande tidsspann är tillgängliga:
1H = 1 timme
1D = 1 dag
1W = 1 vecka
1M = 1 månad
1Q = 1 kvartal
1Y = 1 år
PH = Föregående timme
PD = Föregående dag
PW = Föregående vecka
PM = Föregående månad
PQ = Föregående kvartal
PY = Föregående år
Pie chart
Skapar ett cirkeldiagram från ett eller flera taggvärden som anges kommaseparerade.
Exempel: LB01_GT11_PV, LB01_GT12_PV
Thermometer
Skapar en visualisering av en termometer där min, max och steglängd kan konfigureras tillsammans med temperaturtaggen.