From 87b1858bfb9d53f9932767d48e1b21bdc7d536fb Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sun, 17 Apr 2022 21:56:08 +0200 Subject: Promenio komponentu za iscrtavanje reaktivne pozadine tako da je transparentna, dodao komponentu za iscrtavanje gradijentne pozadine. Ispravio razne BUG-ove vezane za reaktivnu pozadinu, i promenio stil. --- .../reactive-background.component.ts | 88 +++++++++++++++------- 1 file changed, 61 insertions(+), 27 deletions(-) (limited to 'frontend/src/app/_elements/reactive-background/reactive-background.component.ts') diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts index 980e3e6f..9d7f5522 100644 --- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts +++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts @@ -1,14 +1,17 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-reactive-background', templateUrl: './reactive-background.component.html', styleUrls: ['./reactive-background.component.css'] }) -export class ReactiveBackgroundComponent implements OnInit { +export class ReactiveBackgroundComponent implements AfterViewInit { + + @ViewChild('bgCanvas') canvasRef!: ElementRef; @Input() numPoints: number = 450; @Input() speed: number = 0.001; // 0-1 + @Input() scrollSpeed: number = 1; @Input() maxSize: number = 6; @Input() minDistance: number = 0.07; //0-1 @@ -25,8 +28,8 @@ export class ReactiveBackgroundComponent implements OnInit { private height = 200; private ratio = 1; - private canvas?: HTMLCanvasElement; - private ctx?: CanvasRenderingContext2D; + private canvas!: HTMLCanvasElement; + private ctx!: CanvasRenderingContext2D; private time: number = 0; @@ -35,14 +38,22 @@ export class ReactiveBackgroundComponent implements OnInit { private mouseX = 0; private mouseY = 0; - ngOnInit(): void { - + ngAfterViewInit(): void { document.addEventListener('mousemove', (e) => { this.mouseX = e.clientX / this.width; this.mouseY = e.clientY / this.height; }) - this.canvas = (document.getElementById('bgCanvas')); + document.addEventListener('mouseleave', _ => { + this.mouseX = -1; + this.mouseY = -1; + }) + + document.addEventListener('scroll', (e) => { + this.scrollBackground(e); + }) + + this.canvas = (this.canvasRef.nativeElement); const ctx = this.canvas.getContext('2d'); if (ctx) { this.ctx = ctx; @@ -68,17 +79,28 @@ export class ReactiveBackgroundComponent implements OnInit { }, 1000 / 60); } + private lastScrollY: number = 0; + + scrollBackground(e: Event) { + const scrolledAmount = window.scrollY - this.lastScrollY; + this.points.forEach((point) => { + point.y = point.y - (scrolledAmount / this.height) * this.scrollSpeed; + this.keepPointWithinBounds(point); + }) + this.lastScrollY = window.scrollY; + } + drawBackground() { if (!this.ctx || !this.canvas) return; this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.ctx.fillStyle = this.bgColor; - this.ctx.fillRect(0, 0, this.width, this.height); + //this.ctx.fillStyle = this.bgColor; + //this.ctx.fillRect(0, 0, this.width, this.height); this.points.forEach((point, index) => { + this.updatePoint(point); this.drawLines(point, index); this.drawPoint(point); - this.updatePoint(point); }); //this.drawPoint(new Point(this.mouseX, this.mouseY, 12, 0)); @@ -94,11 +116,12 @@ export class ReactiveBackgroundComponent implements OnInit { const dist = this.distance(p.x, p.y, otherPoint.x, otherPoint.y); if (dist < this.minDistance) { const h = HEX[Math.round((1 - dist / this.minDistance) * 16)] - this.ctx!.strokeStyle = this.lineColor + h + h; - this.ctx!.beginPath(); - this.ctx!.moveTo(p.x * this.width, p.y * this.height); - this.ctx!.lineTo(otherPoint.x * this.width, otherPoint.y * this.height); - this.ctx!.stroke(); + this.ctx.strokeStyle = this.lineColor + h; + this.ctx.lineWidth = this.maxSize / 2; + this.ctx.beginPath(); + this.ctx.moveTo(p.x * this.width, p.y * this.height); + this.ctx.lineTo(otherPoint.x * this.width, otherPoint.y * this.height); + this.ctx.stroke(); } i++; @@ -108,7 +131,7 @@ export class ReactiveBackgroundComponent implements OnInit { drawPoint(p: Point) { this.ctx!.fillStyle = this.pointColor; this.ctx!.beginPath(); - this.ctx!.arc(p.x * this.width, p.y * this.height, p.size, 0, 2 * Math.PI); + this.ctx!.arc(p.x * this.width, p.y * this.height, p.size * this.screenDepth(p.x), 0, 2 * Math.PI); this.ctx!.fill(); } @@ -140,22 +163,33 @@ export class ReactiveBackgroundComponent implements OnInit { p.x -= ((mx - p.x) / distToCursor) / 500; p.y -= ((my - p.y) / distToCursor) / 500; - const grd = this.ctx!.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height); - grd.addColorStop(0, this.cursorLineColor + 'ff'); + const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height); + const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))]; + grd.addColorStop(0, this.cursorLineColor + alpha); grd.addColorStop(1, this.cursorLineColor + '00'); - this.ctx!.strokeStyle = grd; - this.ctx!.beginPath(); - this.ctx!.moveTo(p.x * this.width, p.y * this.height); - this.ctx!.lineTo(mx * this.width, my * this.height); - this.ctx!.stroke(); + this.ctx.strokeStyle = grd; + this.ctx.beginPath(); + this.ctx.moveTo(p.x * this.width, p.y * this.height); + this.ctx.lineTo(mx * this.width, my * this.height); + this.ctx.stroke(); } - p.x %= 1; - p.y %= 1; + this.keepPointWithinBounds(p); + } + + keepPointWithinBounds(p: Point) { + p.x = p.x % 1.0; + p.y = p.y % 1.0; + p.x = ((1 - Math.sign(p.x)) / 2) + p.x; + p.y = ((1 - Math.sign(p.y)) / 2) + p.y; } distance(x1: number, y1: number, x2: number, y2: number): number { - return Math.sqrt(((x2 - x1) ** 2) + ((y2 / this.ratio - y1 / this.ratio) ** 2)); + return Math.sqrt(((x2 - x1) ** 2) + ((y2 / this.ratio - y1 / this.ratio) ** 2) / this.screenDepth(x1)) * this.ratio; + } + + screenDepth(x: number): number { + return (1.5 - Math.sin(x * Math.PI)); } } @@ -168,4 +202,4 @@ class Point { ) { } } -const HEX = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']; \ No newline at end of file +const HEX = ['00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff']; \ No newline at end of file -- cgit v1.2.3 From 56fbc59007fe5064168af33c9770a0d378343b85 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sun, 17 Apr 2022 23:20:18 +0200 Subject: Promenio stil home strane. --- .../reactive-background.component.ts | 6 ++- frontend/src/app/_pages/home/home.component.html | 62 +++++++++++++--------- frontend/src/app/app.component.html | 8 +-- frontend/src/styles.css | 16 ++++++ 4 files changed, 60 insertions(+), 32 deletions(-) (limited to 'frontend/src/app/_elements/reactive-background/reactive-background.component.ts') diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts index 9d7f5522..73cdb326 100644 --- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts +++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts @@ -22,6 +22,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit { @Input() pointColor: string = '#ffffff'; @Input() cursorLineColor: string = '#ff0000'; + private fleeSpeed = 0.005; + private points: Point[] = []; private width = 200; @@ -160,8 +162,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit { const distToCursor = this.distance(p.x, p.y, mx, my); if (distToCursor < this.cursorDistance) { - p.x -= ((mx - p.x) / distToCursor) / 500; - p.y -= ((my - p.y) / distToCursor) / 500; + p.x -= ((mx - p.x) / distToCursor) * this.fleeSpeed; + p.y -= ((my - p.y) / distToCursor) * this.fleeSpeed; const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height); const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))]; diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 08f95a69..8294a73b 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,56 +1,66 @@ -
+
-

Započnite sa treniranjem!

-
-
+ +
+ +

Započnite sa eksperimentisanjem! + lightbulb +

+ +
+ +
+
- storage + storage

Moji izvori podataka

- Preuredite vaše izvore - podataka, ili - dodajte novi. + Preuredite vaše izvore podataka, ili dodajte novi.

-
+
- model_training + model_training

Moji modeli

- Pregledajte vaše modele, menjajte ih, - napravite nove modele, ili - ih obrišite. + Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite.

-
+
- batch_prediction + batch_prediction

Rezultati treniranja

- Pregledajte sve vaše trenirane - modele, - koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. + Pregledajte sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite.

-

Pogledajte javne izvore podataka!

- +
+

Pogledajte javne izvore podataka!

+
+ -

Pogledaj sve javne izvore podataka...

-

Iskoristite već trenirane modele!

+ +
+ Pogledaj sve javne izvore podataka... +
+ +
+

Iskoristite već trenirane modele!

+
-

Pogledaj sve javne trenirane modele...

+ +
+ Pogledaj sve javne trenirane modele... +
\ No newline at end of file diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 1bd207e1..ba7743b5 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,9 +1,9 @@ - - + + - + - +
diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 802b8bd0..b6555f43 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -2,4 +2,20 @@ body { /*background-image: url('/assets/images/add_model_background.jpg');*/ background-color: #003459; +} + +.shadowed { + box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px; +} + +.shadowed:last-child { + box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; +} + +.shadowed:first-child { + box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px; +} + +.shadow-accent { + box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px; } \ No newline at end of file -- cgit v1.2.3 From 6fe49c5cd6ef20dc477f11dac098e4c18c2584ee Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 03:01:02 +0200 Subject: Dodao korisnička podešavanja za pozadinu. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reactive-background.component.ts | 52 +++++++++++++++------- .../_pages/playground/playground.component.html | 19 +++++++- .../app/_pages/playground/playground.component.ts | 18 +++++++- frontend/src/app/app.component.html | 7 +-- frontend/src/app/app.component.ts | 15 ++++--- frontend/src/app/material.module.ts | 6 ++- frontend/src/styles/helper.css | 12 +++++ 7 files changed, 100 insertions(+), 29 deletions(-) (limited to 'frontend/src/app/_elements/reactive-background/reactive-background.component.ts') diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts index 73cdb326..4cafbc6d 100644 --- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts +++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts @@ -1,4 +1,5 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-reactive-background', @@ -22,6 +23,9 @@ export class ReactiveBackgroundComponent implements AfterViewInit { @Input() pointColor: string = '#ffffff'; @Input() cursorLineColor: string = '#ff0000'; + @Input() animate: boolean = true; + @Input() fill: number = 1.0; + private fleeSpeed = 0.005; private points: Point[] = []; @@ -35,7 +39,7 @@ export class ReactiveBackgroundComponent implements AfterViewInit { private time: number = 0; - constructor() { } + constructor(private cookie: CookieService) { } private mouseX = 0; private mouseY = 0; @@ -77,6 +81,13 @@ export class ReactiveBackgroundComponent implements AfterViewInit { this.resize(); setInterval(() => { + if (this.cookie.check('animateBackground')) { + this.animate = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.fill = parseFloat(this.cookie.get('backgroundFill')); + } + this.drawBackground(); }, 1000 / 60); } @@ -85,7 +96,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit { scrollBackground(e: Event) { const scrolledAmount = window.scrollY - this.lastScrollY; - this.points.forEach((point) => { + this.points.forEach((point, index) => { + if (index > this.numPoints * this.fill) return; point.y = point.y - (scrolledAmount / this.height) * this.scrollSpeed; this.keepPointWithinBounds(point); }) @@ -100,19 +112,21 @@ export class ReactiveBackgroundComponent implements AfterViewInit { //this.ctx.fillRect(0, 0, this.width, this.height); this.points.forEach((point, index) => { - this.updatePoint(point); + if (index > this.numPoints * this.fill) return; + this.drawLines(point, index); this.drawPoint(point); + + if (this.animate) + this.updatePoint(point); }); //this.drawPoint(new Point(this.mouseX, this.mouseY, 12, 0)); - - this.time += 1; } drawLines(p: Point, index: number) { let i = index + 1; - while (i < this.points.length) { + while (i < this.points.length * this.fill) { const otherPoint = this.points[i]; const dist = this.distance(p.x, p.y, otherPoint.x, otherPoint.y); @@ -151,24 +165,22 @@ export class ReactiveBackgroundComponent implements AfterViewInit { } updatePoint(p: Point) { - const vx = Math.sin(p.direction); - const vy = Math.cos(p.direction); - - p.x = p.x + vx * this.speed; - p.y = p.y + vy * this.speed; - const mx = this.mouseX; const my = this.mouseY; const distToCursor = this.distance(p.x, p.y, mx, my); + if (distToCursor < this.cursorDistance) { - p.x -= ((mx - p.x) / distToCursor) * this.fleeSpeed; - p.y -= ((my - p.y) / distToCursor) * this.fleeSpeed; + const t = (distToCursor / this.cursorDistance); + p.x -= ((mx - p.x) / distToCursor) * this.speed * (1 + t * 2); + p.y -= ((my - p.y) / distToCursor) * this.speed * (1 + t * 2); + + p.direction = this.lerp(p.direction, Math.atan2(my - p.y, mx - p.x) * 180 / Math.PI, t); const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height); const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))]; grd.addColorStop(0, this.cursorLineColor + alpha); - grd.addColorStop(1, this.cursorLineColor + '00'); + grd.addColorStop(0.5, this.cursorLineColor + '00'); this.ctx.strokeStyle = grd; this.ctx.beginPath(); this.ctx.moveTo(p.x * this.width, p.y * this.height); @@ -176,9 +188,19 @@ export class ReactiveBackgroundComponent implements AfterViewInit { this.ctx.stroke(); } + const vx = Math.sin(p.direction); + const vy = Math.cos(p.direction); + + p.x = p.x + vx * this.speed; + p.y = p.y + vy * this.speed; + this.keepPointWithinBounds(p); } + lerp(start: number, end: number, amt: number) { + return (1 - amt) * start + amt * end + } + keepPointWithinBounds(p: Point) { p.x = p.x % 1.0; p.y = p.y % 1.0; diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html index 5622cd83..d3751d5c 100644 --- a/frontend/src/app/_pages/playground/playground.component.html +++ b/frontend/src/app/_pages/playground/playground.component.html @@ -1 +1,18 @@ -
\ No newline at end of file +
+
+

+ Broj tačaka: +

+ + + +
+
+

+ Animacija:

+ + +
+
+
+
\ No newline at end of file diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts index 007a455e..f8ea8bb4 100644 --- a/frontend/src/app/_pages/playground/playground.component.ts +++ b/frontend/src/app/_pages/playground/playground.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-playground', @@ -7,9 +8,24 @@ import { Component, OnInit } from '@angular/core'; }) export class PlaygroundComponent implements OnInit { - constructor() { } + animateBackground = true; + backgroundFill = 1.0; + + constructor(private cookie: CookieService) { } + + updateBGPrefs() { + this.cookie.set('animateBackground', "" + this.animateBackground); + this.cookie.set('backgroundFill', "" + this.backgroundFill); + console.log(this.animateBackground, this.backgroundFill); + } ngOnInit(): void { + if (this.cookie.check('animateBackground')) { + this.animateBackground = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.backgroundFill = parseFloat(this.cookie.get('backgroundFill')); + } } } diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index ba7743b5..984389c4 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,11 +1,12 @@ - + - + - + +pozadina
Izvor podataka

Izaberite vas izvor podataka

@@ -37,14 +38,14 @@
-
-
- +
+
+
-
+
Insert odabir kolona
-
+
Insert treniranje
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 2d623709..377866d1 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -1,20 +1,86 @@ -import { Component, ViewEncapsulation } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren } from '@angular/core'; import { StepperSelectionEvent } from '@angular/cdk/stepper'; +import { MatStepper } from '@angular/material/stepper'; +import Shared from 'src/app/Shared'; + @Component({ selector: 'app-experiment', templateUrl: './experiment.component.html', styleUrls: ['./experiment.component.css'] }) -export class ExperimentComponent { +export class ExperimentComponent implements AfterViewInit { + + @ViewChild(MatStepper) stepper!: MatStepper; + @ViewChild('stepsContainer') stepsContainer!: ElementRef; + @ViewChildren('steps') steps!: ElementRef[]; event: number = 0; constructor() { } + stepHeight = this.calcStepHeight(); + + calcStepHeight() { + return window.innerHeight - 64; + } + + ngAfterViewInit(): void { + window.addEventListener('resize', () => { + this.updatePageHeight(); + }) + this.updatePageHeight(); + + setInterval(() => { + this.updatePageIfScrolled(); + }, 200); + + this.stepsContainer.nativeElement.addEventListener('scroll', (event: Event) => { + Shared.emitBGScrollEvent(this.stepsContainer.nativeElement.scrollTop); + }); + } + + updatePageIfScrolled() { + if (this.scrolling) return; + const currentPage = Math.round(this.stepsContainer.nativeElement.scrollTop / this.stepHeight) + this.stepper.selectedIndex = currentPage; + } + + updatePageHeight() { + this.stepHeight = this.calcStepHeight(); + const stepHeight = `${this.stepHeight}px`; + this.stepsContainer.nativeElement.style.minHeight = stepHeight; + this.steps.forEach(step => { + step.nativeElement.style.minHeight = stepHeight; + }) + } + changePage(event: StepperSelectionEvent) { - this.event = event.selectedIndex; - console.log(this.event); + this.updatePage(event.selectedIndex) + } + + goToPage(pageNum: number) { + this.stepper.selectedIndex = pageNum; + this.updatePage(pageNum); + } + + updatePage(pageNum: number) { + this.event = pageNum; + let scrollAmount = 0; + this.steps.forEach((step, index) => { + if (index == pageNum) { + scrollAmount = step.nativeElement.offsetTop; + } + }) + this.scrolling = true; + setTimeout(() => { + this.scrolling = false; + }, 1000); + this.stepsContainer.nativeElement.scroll({ + top: scrollAmount, + behavior: 'smooth' //auto, smooth, initial, inherit + }); } + scrolling: boolean = false; } diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index 9c520ac3..875b94f1 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -51,4 +51,27 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +} + +.btn-clear { + border: unset; + background-color: unset; + outline: unset; + position: relative; +} + +.input-icon { + color: var(--offwhite); + transform: translateY(25%); +} + +.input-icon:hover { + color: var(--ns-primary); +} + +.f-row { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; } \ No newline at end of file -- cgit v1.2.3