@inclouded/vm-leaflet
v1.4.5
Published
``` 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-firebas
Downloads
22
Keywords
Readme
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/fireBevezető
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
Az SDK használatához szükséges egy Angular 2+ projekt.
Az index.html-be bele kell illeszteni a következő kódot:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script>
if((/iPhone|iPad|iPod/i.test(navigator.userAgent) )) {
document.write('<link rel="stylesheet" type="text/css" media="all" href="../node_modules/@inclouded/leaflet-draw/dist/leaflet.draw.mobile.ios.css?v=2.0" />');
}
if((/Android/i.test(navigator.userAgent) )) {
document.write('<link rel="stylesheet" type="text/css" media="all" href="../node_modules/@inclouded/leaflet-draw/dist/leaflet.draw.mobile.android.css?v=2.0" />');
}
</script>
<style>
body{
height: 100%;
padding: 0;
background: #000000;
margin: 0;
}
div#map{
height: 100%;
min-height: 100%;
width: 100%;
position: absolute;
top: 0%;
left: 0;
margin: 0;
padding: 0;
}
.mat-drawer-content{
position:static!important;
}
</style>
<title>VM-Viewer</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
if (!(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent))) {
function updateBars() {
$('.horizontal .progress-fill span').each(function () {
var percent = $(this).html();
$(this).parent().css('width', percent);
});
}
}
function toggleMarkers() {
var x = document.getElementById("leafletBar");
var y = document.getElementById("statsDivMarker");
var z = document.getElementById("statsMarker");
x.classList.toggle('hide');
x.classList.remove('biggerSection');
y.classList.toggle('hide');
z.classList.remove('hideTable');
}
function toggleAnnotations() {
var x = document.getElementById("annotationsTable");
x.classList.toggle('showAnnotations');
}
function toggleCircles() {
var x = document.getElementById("leftleafletBar");
var y = document.getElementById("statsDiv");
var z = document.getElementById("statsCircle");
x.classList.remove('biggerSection');
x.classList.toggle('hide');
y.classList.toggle('hide');
z.classList.remove('hideLegend');
}
function toggleDesc() {
var x = document.getElementById("legend");
x.classList.toggle('hideLegend');
}
function toggleHelp() {
var x = document.getElementById("help");
x.classList.toggle('hideLegend');
}
function togglecheckboxes() {
if ($('.confirmCheckbox').is(':checkbox')) {
console.log('Checkboxes visibility changed');
$('.leaflet-tooltip').addClass("tooltipHandler");
$('.confirmCheckbox').toggleClass("hideCheckboxes");
}
if (document.getElementById('greenCheck').checked === true) {
$('.confirmCheckbox').removeClass("hideCheckboxes");
$('.confirmCheckbox').addClass("showCheckboxes");
} else {
$('.confirmCheckbox').addClass("hideCheckboxes");
$('.confirmCheckbox').removeClass("showCheckboxes");
}
}
function toggleStatsMarker() {
var x = document.getElementById("statsMarker");
var y = document.getElementById("statsButton");
var z = document.getElementById("leafletBar");
z.classList.toggle('biggerSection');
x.classList.toggle('hideTable');
}
function toggleStatsCircle() {
var x = document.getElementById("statsCircle");
var z = document.getElementById("leftleafletBar");
z.classList.toggle('biggerSection');
x.classList.toggle('hideLegend');
}
function toggleMiniMap() {
var x = document.getElementById("minimap");
x.classList.toggle('hideMiniMap');
}
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>- 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:
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<string>;
}
export declare class Survey {
id?: string;
schemas: Array<string>;
samples: Array<string>;
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.
- A következő path-ek szükségesek a megfelelő stylok eléréséhez az angular.json fájlba:
"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"
]"assets": [
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@inclouded/leaflet-draw/leaflet-color-markers",
"output": "./assets/leaflet-color-markers"
}
],Felelős fejlesztő: Simon Gábor ([email protected]), Jánki Zoltán R. ([email protected])