VM Leaflet SDK

``
npm install --save @inclouded/vm-leaflet
npm install --save @inclouded/leaflet
npm install --save @inclouded/leaflet-draw
npm install --save @inclouded/ngx-leaflet
npm install --save @inclouded/ngx-leaflet-draw
npm install --save @inclouded/vm-firebase-sdk
npm install --save @inclouded/angularfire-document-mapper
npm install --save firebase
npm install --save @angular/fire
`

Bevezető

A repository-ban az VM Leaflet erőforráshoz készült VM Leaflet SDK található egy telepíthető Angular könyvtár formájában. Az SDK telepíthető minden Angular 2+ projekthez. Az SDK megvalósítja a szükséges CRUD műveleteket.

Használata

1. Az SDK használatához szükséges egy Angular 2+ projekt.

2. Az index.html-be bele kell illeszteni a következő kódot:

`typescript




















`

3. A következő Inputok és Outputok szükségesek a megfelelő működéshez:

Inputs:

inputAnnotation - A használandó képhez tartozó markerek adatait tartalmazza.
inputImage - A használandó kép adatait tartalmazza.
inputUser - Az annotátorra bejelentkező user-hez tartozó objektum.
inputSurvey - A Survey objektum, amihez az Annotation tartozik.
inputEdit - Akarjuk-e szerkeszteni a képet vagy csak olvasásra nyitjuk meg. (boolean)
editTypeSet - A képen elvégezhető műveletek eldöntésére használt input. Két lehetőség:
WBC differentiation - MARKERek használatához,
WBC morphology - CIRCLE -ök használatához
markerSet - A képen elhelyezhető marker típusok felsorolása egy tömbben, amelyek elhelyezhetőek.

Hozzá szükséges Interfész felépítése:

`typescript
export class Annotation {
id: string;
imageId: string;
marker?: Marker[];
labReference: string;
}

export interface Marker {
name: string;
type: string;
positionX: number;
positionY: number;
checked?: boolean;
indeterminate?: boolean;
radius?: number;
}

export class Image {
id: string;
imageUrl: string;
description: string;
name: string;
maxZoom: number;
minZoom: number;
maxNativeZoom: number;
markerSet: string;
}

export declare class User {
id: string;
name: string;
email: string;
active: boolean;
isManager: boolean;
isAdmin: boolean;
isContactUser: boolean;
phone: string;
labIds: Array;
}

export declare class Survey {
id?: string;
schemas: Array;
samples: Array;
category: string;
effectivePeriod: EffectivePeriod;
name: string;
status: string;
date: Date;
description: string;
}

export declare class EffectivePeriod {
start: Date;
end: Date;
}
`

Outputs:

outputAnnotation = new EventEmitter(); - Az összes felvett markert az ősosztályba küldő EventEmitter.

4. A következő path-ek szükségesek a megfelelő stylok eléréséhez az angular.json fájlba:

`typescript
"styles": [
"src/styles.css",
"node_modules/@inclouded/leaflet/dist/leaflet.css",
"node_modules/@inclouded/leaflet-draw/dist/leaflet.draw.css",
"node_modules/@inclouded/leaflet-draw/dist/leaflet.draw.mobile.ios.css",
"node_modules/@inclouded/leaflet-draw/dist/leaflet.draw.mobile.android.css"
]
`

`typescript
"assets": [
"src/assets",
{
"glob": "*/",
"input": "./node_modules/@inclouded/leaflet-draw/leaflet-color-markers",
"output": "./assets/leaflet-color-markers"
}
],
``

Felelős fejlesztő: Simon Gábor (simonovszkij@gmail.com), Jánki Zoltán R. (jankiz@inf.u-szeged.hu)