Feat: UserflowDataGatherer send correct datas; Feat: UserflowPredictorWebserver receive data and create userflowmap

2019-04-10 23:24:01 +02:00 · 2019-04-10 23:24:01 +02:00 · 9946f8c057
commit 9946f8c057
parent 6feb5af4d0
26 changed files with 3977 additions and 22 deletions
--- a/DataGatherer/package-lock.json
+++ b/DataGatherer/package-lock.json
@ -4,6 +4,27 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
+    "@types/html2canvas": {
+      "version": "0.0.35",
+      "resolved": "https://registry.npmjs.org/@types/html2canvas/-/html2canvas-0.0.35.tgz",
+      "integrity": "sha512-28p0/yNwXnvGWQK3rEIBj7NHNQoBXuX0ymcCNjSYR/i0Vk9z+xrKCQZPvsrEmurx9vs4B/eHGbOaJY/a9CXdSg==",
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
+    "@types/jquery": {
+      "version": "3.3.29",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz",
+      "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
+    },
    "axios": {
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
@ -13,6 +34,19 @@
        "is-buffer": "^1.1.5"
      }
    },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "^0.1.5"
+      }
+    },
    "eslint-scope": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
@ -67,6 +101,14 @@
        }
      }
    },
+    "html2canvas": {
+      "version": "1.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.1.tgz",
+      "integrity": "sha512-ImguLJ3goQnY0P6z7n6VqBZ+ViS77Hv6J7iYXBxvdb3NWz3s8/mqr4/Lj0OlMUb3ID+qCQ1BPLIBuRMqhgqvYg==",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
    "is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
--- a/DataGatherer/package.json
+++ b/DataGatherer/package.json
@ -4,7 +4,9 @@
  "description": "",
  "main": "main.js",
  "dependencies": {
+    "@types/html2canvas": "0.0.35",
    "axios": "^0.18.0",
+    "html2canvas": "^1.0.0-rc.1",
    "rxios": "^1.1.2",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.4.0"
--- a/DataGatherer/src/data/Data.ts
+++ b/DataGatherer/src/data/Data.ts
@ -2,10 +2,31 @@ export class Data {
    private name: string;
    private data: any;
    private timestamp: number;
+    private size: {
+        width: number;
+        height: number;
+    };

-    constructor(name: string, data: any) {
+    constructor(name: string, data: any, size: any, timestamp?: number) {
        this.name = name;
        this.data = data;
-        this.timestamp = Date.now();
+        this.timestamp = timestamp ? timestamp : Date.now();
+        this.size = size;
+    }
+
+    public getName() {
+        return this.name;
+    }
+
+    public getData() {
+        return this.data;
+    }
+
+    public getTimestamp() {
+        return this.timestamp;
+    }
+
+    public getSize() {
+        return this.size;
    }
 }
--- a/DataGatherer/src/index.html
+++ b/DataGatherer/src/index.html
@ -1,8 +1,34 @@
 <html>
    <head>
        <script src="../dist/bundle.js"></script>
+        <script>
+            const interval = setInterval(() => {
+                let i = 1;
+                for( i = 1; i <= 13; i++){
+                    const el = document.getElementById(i.toString());
+                    el.style.top = Math.floor(Math.random() * 1000) + 10 + 'px';
+                    el.style.width = Math.floor(Math.random() * 200) + 10 + 'px';
+                    el.style.height = Math.floor(Math.random() * 200) + 10 + 'px';
+                    el.style.left =  Math.floor(Math.random() * 1000) + 10 + 'px';
+                }
+                clearInterval(interval);
+            }, 200);
+        </script>
    </head>
    <body>
-        
+        <button>ciao</button>
+        <div id="1" style="width: 50px; height: 70px; background-color:red; position: absolute"></div>
+        <div id="2" style="width: 30px; height: 30px; background-color:blue; position: absolute"></div>
+        <div id="3" style="width: 40px; height: 20px; background-color:pink; position: absolute"></div>
+        <div id="4" style="width: 30px; height: 30px; background-color:black; position: absolute"></div>
+        <div id="5" style="width: 30px; height: 30px; background-color:cyan; position: absolute"></div>
+        <div id="6" style="width: 30px; height: 30px; background-color:yellow; position: absolute"></div>
+        <div id="7" style="width: 30px; height: 30px; background-color:limegreen; position: absolute"></div>
+        <div id="8" style="width: 30px; height: 30px; background-color:darkmagenta; position: absolute"></div>
+        <div id="9" style="width: 30px; height: 30px; background-color:darkslategray; position: absolute"></div>
+        <div id="10" style="width: 30px; height: 30px; background-color:fuchsia; position: absolute"></div>
+        <div id="11" style="width: 30px; height: 30px; background-color:purple; position: absolute"></div>
+        <div id="12" style="width: 30px; height: 30px; background-color:sienna; position: absolute"></div>
+        <div id="13" style="width: 30px; height: 30px; background-color:darkturquoise; position: absolute"></div>
    </body>
-</html>
+</html>
--- a/DataGatherer/src/main.ts
+++ b/DataGatherer/src/main.ts
@ -2,16 +2,23 @@ import { Sender } from "./sender/Sender";
 import { Mouse } from "./source/mouse/Mouse";
 import { Gatherer } from "./gatherer/Gatherer";
 import { Keyboard } from "./source/keyboard/Keyboard";
+import { Screen } from "./source/screen/Screen";

 function main() {
    const gatherer: Gatherer = new Gatherer([
-            new Keyboard('keyboard', ['keydown']), 
+            new Screen('screen'),
+            new Keyboard('keyboard', ['keydown']),
            new Mouse('mouse', ['click', 'mousemove'])
        ]);

    gatherer.start();
+    startPrediction(gatherer);
+    startGathering(gatherer);
+  
+}

-    const sender: Sender = new Sender(() => gatherer.getData(), '/predictor', 4000, 2000);
+function startPrediction(gatherer: Gatherer) {
+    const sender: Sender = new Sender(() => gatherer.getData(), 'localhost:4000/predict', 10000);
    sender.start()
        .subscribe(
            val => {
@ -20,4 +27,15 @@ function main() {
        );
 }

-main();
+
+function startGathering(gatherer: Gatherer) {
+    const sender: Sender = new Sender(() => gatherer.getData(), 'localhost:4000/trainData', 3000);
+    sender.start()
+        .subscribe(
+            val => {
+                console.log(val);
+            }
+        );
+}
+
+main();
--- a/DataGatherer/src/sender/Sender.ts
+++ b/DataGatherer/src/sender/Sender.ts
@ -4,13 +4,11 @@ import { Rxios } from 'rxios';

 export class Sender {
    private url: string;
-    private port: number;
    private interval: number;
    private dataSourceFn: any;

-    constructor(dataSourceFn: any, url: string, port: number, interval: number) {
+    constructor(dataSourceFn: any, url: string, interval: number) {
        this.url = url;
-        this.port = port;
        this.interval = interval;
        this.dataSourceFn = dataSourceFn;
    }
@ -24,11 +22,13 @@ export class Sender {

    private send(data: any) {
        const http: Rxios = new Rxios();
-        //return http.post(this.url, data);
-        function generateFakeResponse() {
-            return Array.from({length: 20}, () => Math.random().toPrecision(2));
-        }
-
-        return of(generateFakeResponse()).pipe(delay(200));
+       /* var wsConnect = new WebSocket('ws://' + this.url, "protocolOne");
+        wsConnect.send(data);
+        wsConnect.onmessage((msg) => {
+            console.log(msg)
+            }
+            //gestire con rxjs o un wrapper di websocket client
+        )*/
+        return http.post('http://' + this.url, data);
    }
 }
--- a/DataGatherer/src/source/Source.ts
+++ b/DataGatherer/src/source/Source.ts
@ -2,7 +2,7 @@ import { Data } from "./../data/Data";

 export class Source {
    private name: string;
-    public data: Array<any> = [];
+    public data: Array<Data> = [];
    public events: Array<string>;

    constructor(name: string, events: Array<string>) {
@ -11,11 +11,6 @@ export class Source {
    }

    public startCollect() {
-        for(const event of this.events){
-            document.addEventListener(event, (e) => {
-                this.data.push(new Data(event, e));
-            });
-        }
    }

    public getData() {
--- a/DataGatherer/src/source/mouse/Mouse.ts
+++ b/DataGatherer/src/source/mouse/Mouse.ts
@ -1,9 +1,18 @@
 import { Source } from '../Source';
+import {Data} from "../../data/Data";

 export class Mouse extends Source {

    constructor(name: string, events: Array<string>) {
        super(name, events);
    }
+
+    startCollect() {
+        for(const event of this.events){
+            document.addEventListener(event, (e: MouseEvent) => {
+                this.data.push(new Data(event, {x: e.x, y: e.y}, {width: window.innerWidth, height: window.innerHeight}));
+            });
+        }
+    }
 }
   
--- a/DataGatherer/src/source/screen/Screen.ts
+++ b/DataGatherer/src/source/screen/Screen.ts
@ -0,0 +1,23 @@
+import { Source } from '../Source';
+import Html2CanvasStatic from "html2canvas";
+import {Data} from "../../data/Data";
+
+export class Screen extends Source {
+
+    constructor(name: string, events: Array<string> = []) {
+        super(name, events);
+    }
+
+    public startCollect() {
+        const interval = setInterval(() => {
+            if (document.body) {
+                Html2CanvasStatic(document.body, {logging: false})
+                    .then((canvas) => {
+                        console.log(canvas);
+                        const imgData = canvas.toDataURL("image/png");
+                        this.data.push(new Data('screen', imgData, {width: window.innerWidth, height: window.innerHeight}))
+                    });
+            }
+        }, 3000);
+    }
+}