@inclouded/vm-leaflet NPM

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

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 (simonovszkij@gmail.com), Jánki Zoltán R. (jankiz@inf.u-szeged.hu)

tslib

@infinitebrahmanuniverse/nolb-_inc @everything-registry/sub-chunk-461 @zalastax/nolb-_inc

3 years ago

3 years ago

3 years ago

3 years ago