I denna artikel kommer du att lära dig hur du hanterar sidor och objekt i Web Port. Från skapande och uppladdning av sidor till redigering, kopiering, flyttning och borttagning av dem, samt generering av objekt från taggar. Du kommer även att få insikt i avancerade inställningar för att effektivt anpassa dina sidaelement. Dessutom kommer du utforska användbara tips och bästa metoder för en effektiv arbetsflödesintegration.
Skapa sida
För att skapa en ny sida gå till den katalog där sidan skall placeras. Välj verktygsknappen Sida/Lägg till i menyn. Kontrollera placering i dialogrutan, ge sidan ett namn och välj sidtyp .wpp. Klicka sedan på knappen SPARA. Sidan öppnas nu i redigeringsläge
Ladda upp sida
Web Port kan också läsa in filer som skapats i annat projekt. Välj verktygsknappen Sida/Ladda upp i menyn. Navigera till önskad sidfil, välj om den ska skriva över om det finns en befintlig sida med samma id, och välj Spara. Sidimporten har stöd för alla typer av sidor som Web Port utom de som ligger i tilläggsmoduler. Från detta gränssnitt kan man även ladda ner sidfiler från aktuell katalog.
OBS!
Vid uppladdning av filer skapade i senare versioner av Web Port än den man laddar upp till finns risk att sidan inte längre kan laddas in. Skapa därför alltid sidor i samma eller äldre version av Web Port än den de ska användas i.
Kopiera sida
För att kopiera en sida går du till den katalog där sidan finns. Välj verktygsknappen Sida och sedan Kopiera i menyn. Ange namnet på den nya sidan och vilken katalog den ska placeras i. Klicka sedan på knappen KOPIERA för att slutföra.
Flytta sida
För att flytta en sida går du till den katalog där sidan finns. Välj verktygsknappen Sida och sedan Flytta i menyn. Ange vilken katalog sidan ska flyttas till. Klicka sedan på knappen FLYTTA för att slutföra.
Länksida
En länksida är en sidtyp som låter dig återanvända en befintlig sida på en annan plats i navigationsstrukturen – utan att skapa en kopia.
När en användare öppnar en länksida visas innehållet från originalsidan, men användaren stannar kvar på den plats där de klickade på länken. Detta gör det enklare att organisera information på olika sätt, till exempel både efter systemtyp och byggnadsplats.
Viktiga punkter:
- En länksida innehåller inget eget innehåll
- Den visar alltid innehåll från originalsidan
- Alla uppdateringar av originalsidan återspeglas automatiskt
- Den hjälper användare att hitta samma sida via flera navigationsvägar
- Den räknas inte med i det totala antalet sidor
Använd länksidor när du vill förbättra navigering och tillgänglighet, samtidigt som du behåller en enda källa till sanningen för ditt innehåll.
Du skapar en länksida via det vanliga flödet för att skapa sidor. Gå till den plats i navigationsstrukturen där du vill att länken ska visas och skapa en ny sida. Välj Länksida som sidtyp (.wplp) och ge den ett namn. Välj sedan målsidan i rullgardinsmenyn – den sida du vill visa – och spara sidan.
Ta bort sida
Om du vill ta bort en sida går du till katalogen där sidan finns och klickar sedan på verktygsfältet Sida och sedan på Ta bort. Markera de sidor som ska tas bort och klicka sedan på knappen TA BORT.
Öppna sida
En sida öppnas genom att klicka på önskad sida under MENY/MINA SIDOR.
Redigera sida
För att redigera en sida öppnar du först den önskade sidan i visningsläge och klickar sedan på knappen REDIGERA i verktygsfältet.
I redigeringsläget visas en lista över tillgängliga symbolbibliotek till vänster, medan sidan visas till höger.
Klicka på sidinställningar för att ändra sidinformation. En dialog öppnas till höger med följande inställningsalternativ:
| Inställning | Beskrivning |
| ID | ID för sidan. (Definieras av sidans plats, namn och filtyp, ej redigerbart) |
| *Namn | Sidans namn, även filnamn. Måste vara unikt |
| Alias | Alias för sidan. Kan användas för att länka en sida och objektbehörigheter |
| Beskrivning av sidan | Beskrivning av sidan |
| Plats | Information om platsen |
| Skapad av | Anger vem som skapade sidan |
| IO-enhet | Länkar en statusikon för IO-enheten till sidans informationsfält |
| Tagg för larm | Larmtagg för att ansluta till statusikonen (används om ingen IO-enhet anges) |
| Intern URL | URL som ska öppnas som iframe om anslutningen görs från det lokala nätverket Exempel: http://www.kiona.com) |
| Extern URL | URL för anslutning till externt nätverk eller om ingen intern URL anges |
| Ny flik | Anger om URL ska öppnas inbäddad i Web Port eller på ny flik |
| Bakgrund | Val av bakgrundsbild. Välj från listan filer från /system/bakgrunder eller ladda upp en ny |
| Bakgrundsfärg | Bakgrundsfärg på sidan |
| Bakgrundsfärg bakom sidan | Bakgrundsfärg bakom/omkring visningsområdet |
| Välj dokumentation | Lista över filer och kataloger som laddats ner från /system/docs eller laddas upp nya. Om en mapp är vald kommer alla filer i mappen att anslutas som dokumentation |
| Position | Välja var i fönstret sidan ska placeras |
| Ram | Ska ram visas runt sidan |
| Anpassad bredd | Används när bakgrundsbild saknas eller är av formatet .svg |
| Anpassad höjd | Används när bakgrundsbild saknas eller är i formatet .svg |
| Latitud | Position för sidan. Används av kartmodulen |
| Longitud | Position för sidan. Används av kartmodulen |
*Obligatoriskt fält
Information
Använd Alias för att underlätta när behörigheter ska sättas till sid- eller objektnivå. När behörighet sätts till ett alias finns dess länk kvar även om sidan flyttas.
Information
Bakgrunden för en sida kan vara en bild som placeras i katalogen /system/backgrounds/ (se sidinformation ovan) eller ritas direkt i Web Port (se "Mallsidor"). Externa bilder kan vara av filtyperna .png, .jpg, HTML eller .svg (vektorformat).
OBS!
När du använder filtypen .svg (vektorformat), bör filstorleken INTE vara större än 2MB för att undvika prestandaproblem vid laddning/uppdatering av webbportsidan där bakgrundsbilden används!
Tips
När du lägger till en URL i sidaninställningarna för att öppna en sida som ett iframe (som Alarm Listan), kan du dölja sidmenyn genom att lägga till&fullscreen=1 till URL:en.
Exampel:
-
Utan fullscreen:
http://localhost:8090/alarm/main?type=active -
Med fullscreen:
http://localhost:8090/alarm/main?type=active&fullscreen=1
Skapa objekt
För att skapa dynamiska objekt på sidan drar och släpper man det önskade objektet från biblioteken till önskad position. En dialog öppnas där ett unikt namn för objektet anges. Det är också möjligt att skapa objekt genom att kopiera befintliga objekt. För mer information om detta, se"Redigera objekt". Detta avsnitt beskriver version 2 av objektstandarden för Web Port. Om du använder en äldre version bör du läsa den medföljande manualen om version 1 av objektstandarden.
Om du vill ändra alla objektparametrar klickar du på objektet och en dialog öppnas till höger. Följande alternativ är tillgängliga:
| Inställning | Beskrivning av objektet |
| ID | Objektets ID. Måste vara unikt |
| Prefix | Prefix för tagg. Används för att koppla taggar till objektet |
| Text | Text som visas ovanför objektet på sidan |
Symbolinställningar
Klicka för att expandera
| Inställning | Beskrivning av symbol |
| Symbol | Möjlighet att ändra symbolen för objektet |
| X- och Y-position | Objektets position i x- och y-riktning. Uppdateras även under dra och släpp |
| Rotation | Objektets rotation. Val enligt konfiguration i symbolbiblioteket |
| Skala faktor | Ändra skalan på ett objekt. Värde 1 = 100%, 0,5 = 50%, 2 = 200%. |
| Göm dåFör mer information om åtkomstnivåer, se kapitel 9.3 | Booleskt uttryck som döljer objektet när det utvärderas till true |
| Anpassad klass | Indikerar en anpassad css-klass som är inställd på objektet |
| Bakgrundsfärg | Bakgrundsfärg för objektet. Anges enligt #RRGGBB (R=röd, G=grön, B=blå, 00-FF) |
| Länk till sida/mapp | Länk till annan sida. Se information nedan |
Göm då:
Du kan också gömma objekt baserat på tagg-värden.
Du kan gömma ett objekt genom att skriva: LB01_GT11_P=0
Då kommer symbolen att döljas om taggen vid inläsning av sidan är 0.
Du kan även använda utryck som <> om ett värde på en tagg skall vara större/mindre än till exempel 1. Då skriver du enligt följande exempel: LB01_GT11_P>1
Om du vill använda dig av fler taggvärden eller olika taggar som skall uppfylla ett vilkor se nedan exmempel:
För att ha flera alternativ som tex att om LB01_GT11_P är "0" eller större än 1 så separerar du detta med ett "|"-tecken och skriver:
LB01_GT11_P=0|LB01_GT11_P>1
Om du vill att flera vilkor skall uppfyllas innan symbolen döljs som tex LB01_GT11_P är 0 och LB01_GT31_PV är större än 20 så skrivs detta ihop med ett "&"-tecken enligt följande exempel:
LB01_GT11_P=0&LB01_GT31_PV>20
Textinställningar
Klicka för att expandera
| Inställning | Beskrivning |
| Visa text | (Kryssruta)Anger om texten ska visas på sidan. |
| Position för text | Anger hur texten är placerad i förhållande till objektet. Det är också möjligt att dra och släppa texten på sidan för att få exakt position |
| Offset hor/ver | Anger antalet pixlar som texten kommer att förskjutas från startpositionen |
| Teckenstorlek | Teckenstorlek i pixlar |
| Fetstil | Anger om texten ska vara fet |
| Textfärg | Färg på texten |
| Bakgrundsfärg | Färg på textens bakgrund |
| Egen stil | Egen stil för objektet. Anges enligt CSS-format |
Beskrivning och tagginställningar
Klicka för att expandera
| Inställning | Beskrivning av objekt |
| Visa etiketter | Anger om taggbeskrivningar ska visas i anslutning till mätvärden på sidan |
| Visa värden | Anger om de uppmätta värdena ska visas i anslutning till objektet |
| Position för värde och beskrivning | Anger var värdet och beskrivningen ska placeras i förhållande till symbolen. Kan även dras och släppas. Standard är samma som textposition |
| Offset hor/ver | Anger hur många pixlar texten ska förskjutas från startpositionen |
| Teckensnittsstorlek | Teckensnittsstorlek i pixlar |
| Fetstil | Anger om texten ska vara fet |
| Textfärg | Färg på texten |
| Bakgrundsfärg | Färg på textens bakgrund |
| Egen stil | Egen stil för objektet. Anges enligt CSS-format |
| Eget värde | Översätter olika mätvärden till egna texter. Se exempel nedan |
Avancerade inställningar
Klicka för att expandera
| Inställning | Beskrivning av inställning |
| Klickbar | Anger om objektet är klickbart på sidan i visningsläge |
| Redigera text | Anger om objektets text kan redigeras i visningsläge |
| Trendvy | Anger objektets standardvy för trend |
| Anpassade trendtaggar |
Ger möjlighet att definiera egna taggar för standardvyn för trend. Ex: _PV;_SP;AS01_VS01_GT31_PV Kommer visa ärvärde och börvärde för valt objekt samt AS01_VS01_GT31_PV i trendvyn när man klickar på trend för objektet. |
| Verktygstips | Beskrivande text som visas när objektet klickas eller när musen placeras ovanför det |
| Indikator offset x/y | Förskjutning av eventuella indikatorer (hand, blockerat larm etc) från symbolen |
Information
Egen klass:
Custom class kan antingen ange en fast css-klass som alltid är inställd på objektet och därmed kan användas för att ändra stil via t.ex. style.css som laddas automatiskt om den placeras under /assets/theme/ eller style.css från ett symbolbibliotek.
Följande nyckelord kan också användas för att dynamiskt infoga klasser:
| LID | Ersätts med aktuellt biblioteks-ID |
| LOID | Ersätts med det aktuella objektets bibliotekssida |
| STAT | Ersätts med det aktiva tillståndsnamnet med högsta prioritet |
| STATUS | Ersätts med namnen på alla aktiva stater |
Egen stil:
Egen stil anges enligt CSS-standarden. Se www.w3schools.com/css för mer information och CSS.
Exempel på en anpassad stil:
font-size:24px;color:#dd4499; (Ställer in teckenstorlek och färg)
Anpassat värde anges enligt formatet:
Suffix=VALUE:SUFIX=TEXT;...
Exempel på eget värde:
_PV=0:_PV=Stop;_PV=1:_PV=Halv hastighet;_PV=2:_PV=Full hastighet
För att lista vilka suffix som ska visas i en bild anges detta med:
list#SUFIX1;SUFIX2;
Exempel på lista:
list#_PV1;_PV2;_PV3;
För att anropa ett skript och visa resultatet i en bild, gör detta genom skript # skriptnamn (par1=värde1, par2 = värde2)
Skriptnamn indikerar ett befintligt anropsskript och par1, par2, etc. anger variabler som skall infogas i skriptet. Värdena för parametrarna kan antingen vara suffix och i så fall anges enligt _SUFIX, eller fasta värden.
Exempel på skriptanrop:
script#sum(x=3,y=_PV)
Länk sida/mapp
Exempel på sidlänk (ID):
VENTILATION_LB01_WPP
Mall för sidor
Web Port har möjlighet att spara mallsidor och använda dem för att skapa objekt på nya sidor. Detta görs från en sida i redigeringsläge via Mall i verktygsfältets meny ovanför sidan.
Om sidan från vilken mallen laddas har ett sidprefix, kommer alla objekt som genereras från mallen att använda detta prefix (genom att objektprefixet inleds med _), förutsatt att de inte har ett hårdkodat prefix i mallen. Om de har ett hårdkodat prefix kommer prefixet att finnas kvar på objekten efter att mallen har laddats.
OBS!
Se till att en mallsida inte sparas med exakt samma namn som en annan sida i Web Port, eftersom detta kan orsaka problem vid rendering och kan göra att de tillagda objekten försvinner.
Generera objekt från taggar
Det är möjligt att generera ett eller flera objekt från befintliga taggar. Klicka på Generera objekt i verktygsfältet.
| Alternativ: | Beskrivning: |
| Symbolbibliotek | Symbolbibliotek från vilket objekt ska genereras |
| Från tagglista | Välj om taggar ska hämtas från alla tagglistor eller en specifik |
| Filter för prefix | Tillhandahåller ytterligare filteralternativ |
| Lägg till prefix till objektnamn | Låter dig lägga till ytterligare prefix till objektnamnet |
Välja objekt från symbolbiblioteket
Klicka för exempel
Exempel från 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"
},
Från tagglistan
Klicka för exempel
Ändelsen "_PV" är borttagen. Symbolnamnet är den text som återstår efter det sista "_", som matchas mot alla Objects och deras ObjectFilter i det valda symbolbiblioteket.
I detta fall TS under objektsensorn.
Om ett objekt i symbolbiblioteket har ObjectFilter inställt på "*", kommer den symbolen att väljas om ingen annan matchning görs.
Prefixfilter
Klicka för exempel
Exempel:
"AS01_VS01" filtrerar alla taggar som börjar med "AS01_VS01"
"*VS01" filtrerar taggar som innehåller VS01
"*VS|*KB" filtrerar alla taggar som innehåller VS eller KB "
Lägg till prefix i objektnamnet
Klicka för exempel
Exempel:
Taggnamnet "AS01_VS01_GT11_PV" kommer som standard att tillhandahålla objektet GT11.
Om prefixet "VS02" anges kommer objektets namn att bli "VS02-GT11".
Om "*" anges kommer prefixet att tas från taggnamnet och bli "VS01-GT11".
Redigera objekt
Det finns flera sätt att redigera och hantera objekt på sidor, och huvudsakligen nås de via verktygsfältets meny ovanför sidan i redigeringsläge.
Via Objekt-menyn kan du redigera djup, fördela objekt horisontellt och vertikalt, samt justera objekt i förhållande till varandra.
Via menyn Redigera kan du redigera vanliga fält på flera objekt samtidigt, samt kopiera och klistra in objekt.
Kopiera objekt
Det är möjligt att kopiera objekt via Redigera-menyn på en sida i redigeringsläge. Markera först objektet/objekten och klicka sedan på Kopiera objekt och sedan Klistra in objekt. Det går också att kopiera och klistra in objekt mellan sidor på samma sätt, och med kortkommandona Ctrl+C och Ctrl+V.
Ta bort objekt
För att ta bort ett objekt markeras detta på samma sätt som vid redigering. I dialogrutan som öppnas klickar du på knappen RADERA. Du kan ta bort flera objekt samtidigt genom att dra och markera ett område som innehåller flera objekt och sedan trycka på DELETE.
Redigera bakgrund
För att skapa en enklare sidbakgrund via Web Port, öppna först den önskade sidan i redigeringsläge, (se "Öppna sida"). För att växla till redigeringsläge av bakgrunden, klicka på Verktyg/Ritverktyg i redigeringsmenyn.
Editorn som används är svg-edit och hjälptexter och introduktionsfilmer finns på nätet.
Information
För att spara ändringarna klickar du på spara-knappen längst upp till vänster i editorn. Växla sedan tillbaka till dynamiskt läge för att se bakgrunden tillsammans med komponenter.
OBS!
Bakgrundsbild som ritas via editorn placeras ovanpå eventuell bakgrundsbild som valts via sidinformation.
TIPS!
Ett effektivt sätt att arbeta är att ha både det externa redigeringsprogrammet för bakgrundsbilden och Web Port öppna samtidigt. Ändringar som sparas i editorn uppdateras direkt till Web Port genom att sidan laddas om.