ing

package.json

@@ -2,6 +2,7 @@
   "name": "scanner-app",
   "version": "0.0.0",
   "scripts": {
+    "postinstall": "yarn electron:builder:install-app-deps",
     "ng": "ng",
     "start": "yarn start:electron:hmr",
     "start:hmr": "ng serve --configuration hmr",
@@ -78,6 +79,7 @@
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",
     "typescript": "~2.7.2",
+    "vis": "^4.21.0",
     "wait-on": "^2.1.0",
     "webpack-cli": "^3.1.0",
     "webpack-node-externals": "^1.7.2",

src/app/pages/home/home-page.component.html

@@ -1,8 +1,8 @@
-<div class="home-start">
+<div *ngIf="showIntro" class="home-start">
     <div class="start-button" (click)="discoverHost($event)">
         <svg version="1.1" viewBox="0 0 200 210">
             <path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
-    c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
+        c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
         </svg>
     </div>
     <div class="home-description">
@@ -11,7 +11,13 @@
         <b>를 이용해 주셔서 감사합니다.</b>
         <br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
     </div>
+
 </div>
+
+<div *ngIf="!showIntro" #discoveryTarget class="vis-container">
+
+</div>
+
 <!-- <div class="ui-fluid">
     <div class="ui-g">
         <div class="ui-g-12">

src/app/pages/home/home-page.component.scss

@@ -41,3 +41,21 @@
     transition: 0.1s;
   }
 }
+
+.vis-container {
+  //  position: absolute;
+  //  top:78px;
+  //  left:0px;
+  //  bottom: 0px;
+  //  width: 100%;
+  //  margin: 0;
+  height: 100vh;
+  margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 400px;
+  //text-align: center;
+}

src/app/pages/home/home-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
 
 import { Observable, Subscription, of } from 'rxjs';
 import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
@@ -11,6 +11,7 @@ import { toMetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
 import { Address } from '../../../commons/component/nic-dropdown.component';
 import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
 
+const vis = require('vis');
 
 @Component({
   selector: 'app-pages-home',
@@ -18,13 +19,21 @@ import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
   styleUrls: ['./home-page.component.scss'],
 })
 export class HomePageComponent implements OnInit, OnDestroy {
+  private discoveryTargetRef: ElementRef;
+
+  @ViewChild('discoveryTarget') set discoveryTarget(content: ElementRef) {
+    this.discoveryTargetRef = content;
+  }
 
   blockedPanel = false;
 
   blockedDocument = false;
   addresses: Address[];
 
+  showIntro = true;
+
   constructor(
+    private changeDetector: ChangeDetectorRef,
     private probeService: ProbeService,
   ) {
   }
@@ -45,31 +54,59 @@ export class HomePageComponent implements OnInit, OnDestroy {
   }
 
   discoverHost(dfd: string) {
-    const zone: Zone = {
+    // const zone: Zone = {
-      network: '192.168.1.0/24',
+    //   network: '192.168.1.0/24',
-      iface: 'enp3s0',
+    //   iface: 'enp3s0',
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+    //   metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      address: '192.168.1.101',
+    //   address: '192.168.1.101',
-      mac: '44:8a:5b:f1:f1:f3',
+    //   mac: '44:8a:5b:f1:f1:f3',
+    // };
+
+    // const discoverHost: DiscoverHost = {
+    //   metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+    //   firstScanRange: '192.168.1.1',
+    //   lastScanRange: '192.168.1.254',
+    //   discoveryConfig: {
+    //   },
+    //   discoverPort: {
+    //     firstScanRange: 1,
+    //     lastScanRange: 65535,
+    //     includeTCP: true,
+    //     includeUDP: true,
+    //     discoverService: {
+    //     }
+    //   }
+    // };
+
+    // this.probeService.send('DiscoveryService.DiscoverHost', requesterID, zone, discoverHost);
+    this.showIntro = false;
+    this.changeDetector.detectChanges();
+
+    const nodes = [
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+    ];
+    const edges = [
+      { from: 1, to: 2 },
+      { from: 1, to: 3 },
+      { from: 2, to: 3 },
+    ];
+
+    const data = {
+      nodes: nodes,
+      edges: edges,
     };
 
-    const discoverHost: DiscoverHost = {
+    const options = {
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+      width: '100%',
-      firstScanRange: '192.168.1.1',
+      height: '100%'
-      lastScanRange: '192.168.1.254',
-      discoveryConfig: {
-      },
-      discoverPort: {
-        firstScanRange: 1,
-        lastScanRange: 65535,
-        includeTCP: true,
-        includeUDP: true,
-        discoverService: {
-        }
-      }
     };
 
-    this.probeService.send('DiscoveryService.DiscoverHost', requesterID, zone, discoverHost);
+    const network = new vis.Network(this.discoveryTargetRef.nativeElement, data, options);
+
+
+
   }
 
   /**

yarn.lock

@@ -2297,6 +2297,10 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+emitter-component@^1.1.1:
+  version "1.1.1"
+  resolved "https://nexus.loafle.net/repository/npm-all/emitter-component/-/emitter-component-1.1.1.tgz#065e2dbed6959bf470679edabeaf7981d1003ab6"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://nexus.loafle.net/repository/npm-all/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -3142,6 +3146,10 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://nexus.loafle.net/repository/npm-all/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
+hammerjs@^2.0.6, hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://nexus.loafle.net/repository/npm-all/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+
 handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://nexus.loafle.net/repository/npm-all/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
@@ -4126,6 +4134,10 @@ keyboardevents-areequal@^0.2.1:
   version "0.2.2"
   resolved "https://nexus.loafle.net/repository/npm-all/keyboardevents-areequal/-/keyboardevents-areequal-0.2.2.tgz#88191ec738ce9f7591c25e9056de928b40277194"
 
+keycharm@^0.2.0:
+  version "0.2.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/keycharm/-/keycharm-0.2.0.tgz#fa6ea2e43b90a68028843d27f2075d35a8c3e6f9"
+
 killable@^1.0.0:
   version "1.0.0"
   resolved "https://nexus.loafle.net/repository/npm-all/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
@@ -4598,7 +4610,7 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
   dependencies:
     minimist "0.0.8"
 
-moment@2.x.x:
+moment@2.x.x, moment@^2.18.1:
   version "2.22.2"
   resolved "https://nexus.loafle.net/repository/npm-all/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
 
@@ -5450,6 +5462,12 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+propagating-hammerjs@^1.4.6:
+  version "1.4.6"
+  resolved "https://nexus.loafle.net/repository/npm-all/propagating-hammerjs/-/propagating-hammerjs-1.4.6.tgz#fed00e9b00767ffd42d14f5b531bc493eb672e37"
+  dependencies:
+    hammerjs "^2.0.6"
+
 protractor@~5.3.0:
   version "5.3.2"
   resolved "https://nexus.loafle.net/repository/npm-all/protractor/-/protractor-5.3.2.tgz#b8278f3131d9d52fa1172ed0f7fec03085fbe0ce"
@@ -7197,6 +7215,16 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vis@^4.21.0:
+  version "4.21.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/vis/-/vis-4.21.0.tgz#dd71638bff7f6495d00bc9f40c253526133ded6b"
+  dependencies:
+    emitter-component "^1.1.1"
+    hammerjs "^2.0.8"
+    keycharm "^0.2.0"
+    moment "^2.18.1"
+    propagating-hammerjs "^1.4.6"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://nexus.loafle.net/repository/npm-all/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"