Här finner du dokumentation om ExpoDesigner familjen.

EWA 4.0

---

EWC

Bilder från EWC

Alla de bilder som vi har lagt in i den här artikeln är hämtade från EWC-motorn. EWC gör det möjligt att skapa bilder med hjälp av olika kommandon. Vi kommer här att beskriva dessa kommandon och därefter kan du titta på resultatet.

HTML5

Det här objektet gör det möjligt att visa en specifik mässa genom att använda det nya HTML5 Canvas objektet. Zoomning, panorering och klickningar på händelser inkluderas.

Bilder

MässApi, Mässa

308.jpg = 308 är Mäss ID, välj sedan mellan jpg och png.
Master = Namnet på den mall som du vill använda. Dessa är tillgängliga:

• Master
• Golvbrunnar
• Konferensrum
• Orient
• Pelarmått
• Takhöjden
• – = ingen mall

800 = bredd, antal pixlar.
600 = höjd, antal pixlar.

HallApi, OffsetVy

Hall Namn:

A = hall ID

0.5 = zoom vy, ju lägre nummer desto mer zoomad.

Hall Alias:

Hall%20C = Hall alias Hall C.

MässApi, OffsetVy

A06~28 = Monter med monternummer A06:28.

MässApi, ListVy

MässApi, HallVy

---

EWC – API

Kom igång

Genom att få åtgång till ExpoDesigners API kan man skapa appar för datorer, “paddor” och mobiler. Här kommer en beskrivning på hur ni stegvis gör för att komma igång.

Index.cshtml – startsidan

1. Gå till servern där projektet ligger.
2. I projektet öppna mappen ewc, i mappen ligger en fil som heter index.cshtml. Öppna denna i en texteditor
3. Ersätt namnet EWC i länken med klassen brand med mässnamnet
   Byt ut befintlig startbild på mässan genom att ändra url i bilden med usemap id #ImageMap
4. I taggen map med id:et ImageMap så kan du lägga till de hallar som ska vara klickbara i denna mässa

Raden för att lägga till en hall ser ut så här:

Här beskrivs de olika attributen:

Attribut	Beskrivning
Title	Ger bara lite extra information kring hallen och deta visas när man för musen över hallen
Shape	Beskriver hur ytan ser ut. Valbara värden är defaultrect circlepoly
Coords	Här anger man koordinaterna för hallen.
data-template	Här anger ni den template som ska användas för mässan. Templaten brukar traditionellt användas för att visa utomhusområdet,toaletter, trappor osv. Har ni mer funderingar på hur man kan anpassa en template till eran mässa, hör osv gärna av er till oss på Dox Sweden AB. Det finns några olika templates att välja emellan. 2012, Master, 200web eller -. Dessa templates innehåller olika saker, och ni kan själva laborera med vilken ni tycker passar bäst till de olika mässorna. Om man sätter -så använder man ingen template alls.
data-fairid	Ange mässid för den mässa som man skall navigera till om man klickar på hallen.
data-hall	Ange mässid för den mässa som man skall navigera till om man klickar på hallen.

hallm.cshtml – mobilvyn
När man klickar på en hall i index.csthml så kommer man till följande vy. Denna vy hittar ni också i mappen EWC i api-projektet.

Det man kan konfigurera i denna vy är att kunna lägga till vilka hallar som skall vara valbara i menyn.

Under taggen ul.nav så kan man lägga till li -taggar med länkar till hallar. Sätter man klassen active till li -taggen så blir fliken vald via css. Själva länkens url automatgenereras.

ExpoDesigner Map functions

In order to include ‘ExpoMap’ in a page, an IFrame must be added to a div. Example:

<div> <iframe id="ExpoMap" src="" style="width: 800px; height: 600px; border: 0px;"></iframe> </div>

After that, the source of the ‘ExpoMap’ should be set to a proper URL expo service. Example:

$(document).ready(function () { $("#ExpoMap")[0].src = "http://api.expodesigner.com/ewc/expowebmapm/308/-/A/-/800/600"; });

There are a numbers of functions in ExpoMap you can using for selecting, deselecting, etc. The only thing you need to do is to get ExpoMap window and then you can call a function by passing the proper argument(s). Example:

//Getting the window var winExpoMap = $('#ExpoMap')[0].contentWindow; if (winExpoMap.selectEntities === undefined) { return; }

//calling 'Select entity' function winExpoMap.selectEntities(['A05:26','A04:30','A06:28']);

/Example for 'Select stand' $(document).ready(function () { $("#selectstand").click(function (e) { //The input filed '#standtoselect' should have value like this A05:26,A04:30,A06:28 var standNumberList = $("#standtoselect").val().split(','); //Array of stand numbers //Geting the ExpoMap page window var winExpoMap = $('#ExpoMap')[0].contentWindow; if (winExpoMap.deselectAllEntities === undefined || winExpoMap.selectEntities === undefined) { return; } //Selects the stands with stand numbers contained in standNumberList winExpoMap.selectEntities(standNumberList); }); });

ExpoMap function list

• selectEntities(standNumberList) – select stands with stand numbers from the list.
• deselectEntities(standNumberList) – deselect stands with stand numbers from the list.
• deselectAllEntities() – deselect all stands.

Inställningar i karta

I filen ExpoWebMapSettings-v1.0.0.js i mappen Scripts finns en rad olika egenskaper som kan korrigeras, för att få till ett bra utseende.

Dessa är:

Namn	Standardvärde Beskrivning
ZoomInScaleFactor	1 + 0.35 Värdet för hur mycket ett “zoom-steg” ska vara när man zoomar in. Standardvärdet gör att varje zoom-steg vid in-zoomning är 35%
ZoomOutScaleFactor	1 / MapSettings.ZoomInScaleFactor Värdet för hur mycket ett “zoom-steg” ska vara när man zoomar ut. Standardvärdet gör att varje zoom-steg vid ut-zoomning är 35%
ZoomLevelMax	5 Värdet för antalet zoom-steg som skall tillåtas. Detta värde används främst när man klickar på en zoom-symbol.
PanStep	50 Klickar man på en symbol för att panorera i kartan, så flyttas kartan så här många pixlar.
HallVisibility	true Om hallens linjer skall visas eller ej
HallLineColor	"#333" Ange hex-kod för hallens gränslinje
HallLineWidth	10 Hur många pixlar bred ska hallen vara?
HallHasFillColor	true Om hallen ska ha en fyllnadsfärg
HallFillColor	"#707070" Vilken fyllnadsfärg hallen skall ha
HallFillColorStop0	"#707070" Kan kan få till en gradient på hallens färg. Här anger du den första färgen.
HallFillColorStop1	"#707070" Här anger du den andra gradient-färgen.
StandLineColor	"#333" Hexkoden för färgen på monternlinjen
StandHasFillColor	true Om montern ska ha fyllnadsfärg
StandFillColor	"#fff" Vilken färg som montern skall ha
StandFillColorStop0	"#cecece" En monter kan ha en gradient mellan två färger. Här anger du startfärgen
StandFillColorStop1	"#cecece" Här anger du färgen för att avsluta gradienten.
StandSelectedFillColorStop0	"#fff" Vald monter, kan ha en gradient mellan två färger. Här anger du startfärgen
StandSelectedFillColorStop1	"#FF0080" Vald monter färgen för att avsluta gradienten.
StandTextVisibility	false Om montrana i hallen ska visa monternamn
StandTextSize	3 Om värdet är 0 så kommer textstorleken att anpassas till monterstorleken
StandReduceTextSizeInPercent	15 Om StandTextSize är 0 så kommer värdet 15 här göra att texten slutar 15% ifrån monterns vägg
StandCompanyNameVisibility	false Om monternamnen ska vara synliga eller ej
StandNumberVisibility	true Om monternumren ska vara synliga eller ej
BirdseyeWinStrokeColor	"#0000FF"
BirdseyeWinFillColor	'rgba(128, 128, 255, 0.3)' Färg på fönstret innehållande översiktsvyn
BirdseyeBackgroundColor	"#B67" Bakgrundsfärgen på översiktsvyn