loke/userflow-predictor
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Lorenzo Iovino 2019-04-10 23:24:01 +02:00
parent 6feb5af4d0
commit 9946f8c057
26 changed files with 3977 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

25
DataGatherer/src/data/Data.ts
View file

@ -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;
}
}

30
DataGatherer/src/index.html
View file

@ -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>

24
DataGatherer/src/main.ts
View file

@ -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();

18
DataGatherer/src/sender/Sender.ts
View file

@ -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);
}
}

7
DataGatherer/src/source/Source.ts
View file

@ -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() {

9
DataGatherer/src/source/mouse/Mouse.ts
View file

@ -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}));
});
}
}
}

23
DataGatherer/src/source/screen/Screen.ts Normal file
View file

@ -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);
}
}