Skip to content

Commit 2df477c

Browse files
maxchisttmaxchistt
committed
web animation
1 parent c8e9e5f commit 2df477c

4 files changed

Lines changed: 81 additions & 51 deletions

File tree

‎WebCellLifeSimulationApp/ClientApp/src/app/home/home.component.html‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,45 @@ <h1 class="container h1 m-2"></h1>
55
<div class="container mb-2">
66
<div class="row text-center">
77
<div class="col-sm m-2">
8-
<button class="btn btn-light p-2 m-0 w-100 h-100" (click)="this.clearCells()">
9-
clearCells
8+
<button class="btn btn-secondary p-2 m-0 w-100 h-100" (click)="this.requestGenerateCells()">
9+
generateCells
1010
</button>
1111
</div>
1212
<div class="col-sm m-2">
13-
<button class="btn btn-light p-2 m-0 w-100 h-100" (click)="this.generateCells()">
14-
generateCells
13+
<button class="btn btn-light p-2 m-0 w-100 h-100" (click)="this.requestClearCells()">
14+
clearCells
1515
</button>
1616
</div>
1717
<div class="col-sm m-2">
1818
<div class="alert bg-light p-2 m-0 w-100 h-100">
19-
<span>Connections = {{connections}}</span>
19+
<span>Connections: {{connections}}</span>
2020
</div>
2121
</div>
22+
<div class="col-md m-2" [ngClass]="{'collapse': !collapse}">
23+
<button (click)="collapse=!collapse" class="btn btn-light p-2 m-0 w-100 h-100"
24+
[ngClass]="{'collapse': !collapse}">
25+
Open view
26+
</button>
27+
</div>
2228
</div>
29+
</div>
2330

31+
<div class="container" [ngStyle]="{'width' : scale?'40%':'95%'}">
32+
<div class="m-2" style="position: relative;" [ngClass]="{'collapse': collapse}">
33+
34+
<button (click)="scale=!scale" class="btn btn-light px-2 m-1 py-0" [ngStyle]="{'top' : scale?'1em':'3em'}"
35+
style="z-index: 7; position: absolute;right: 5em;background: transparent;border: transparent;outline: none;">-</button>
36+
37+
<button (click)="collapse=!collapse" class="btn btn-light px-2 m-1 py-0" [ngStyle]="{'top' : scale?'1em':'3em'}"
38+
style="z-index: 7; position: absolute;right: 3em;background: transparent;border: transparent;outline: none;">x</button>
39+
40+
<canvas class="w-100" #myCanvas></canvas>
41+
42+
</div>
2443
</div>
44+
2545
<div class="container">
26-
<p class="m-2">W: {{this.size[0]}} H: {{this.size[1]}}</p>
46+
<p class="m-2">Width: {{this.size[0]}} Height: {{this.size[1]}} Amount: {{this.frame.length}}</p>
2747
</div>
2848

2949

@@ -45,6 +65,7 @@ <h1 class="container h1 m-2"></h1>
4565
</div>
4666
</div>
4767

68+
4869
<div class="container mt-3">
4970
<table class="table">
5071
<thead>

‎WebCellLifeSimulationApp/ClientApp/src/app/home/home.component.ts‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,61 @@
1-
import { Component, Inject } from '@angular/core';
1+
import { Component, ViewChild, ElementRef, AfterViewInit, Output, Inject } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
3-
import { send } from 'process';
43

54
@Component({
65
selector: 'app-home',
76
templateUrl: './home.component.html',
87
})
9-
export class HomeComponent {
8+
export class HomeComponent implements AfterViewInit {
9+
@ViewChild('myCanvas', { static: false }) myCanvas: ElementRef;
1010
socket: WebSocket;
1111
frame: IDrawEntity[] = [];
1212
http: HttpClient;
1313
baseUrl: string;
1414
size: number[] = [2, 2];
15-
colors: number[] = [0,0,0];
15+
colors: number[] = [0, 0, 0];
16+
wrapperWidth: number = 600;
17+
connections: number = 0;
18+
collapse: boolean = false;
19+
scale: boolean = false;
1620

17-
connections:number=0;
21+
public canvasContext: CanvasRenderingContext2D;
22+
23+
ngAfterViewInit(): void {
24+
this.canvasContext = this.myCanvas.nativeElement.getContext('2d');
25+
}
1826

1927
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
2028
this.http = http;
2129
this.baseUrl = baseUrl;
2230

23-
this.http.get<number[]>(this.baseUrl + 'api/Simulation/getSize').subscribe(this.setSize, error => console.error(error));
31+
this.requestSize();
2432
this.initWebSocket(new URL(this.baseUrl).host);
25-
26-
2733
}
2834

29-
requestConnections = ()=>this.http.get<number>(this.baseUrl + `wsserver/getConnections`).subscribe(this.setConnectionsCounter, error => console.error(error));
30-
setConnectionsCounter=(num:number)=>this.connections=num;
35+
requestConnections = () => this.http.get<number>(this.baseUrl + `wsserver/getConnections`).subscribe(this.setConnectionsCounter, error => console.error(error));
36+
setConnectionsCounter = (num: number) => this.connections = num;
3137

32-
clearCells = () => {
33-
this.http.get(this.baseUrl + `api/Simulation/clearCells`).subscribe();
34-
}
38+
requestClearCells = () => this.http.get(this.baseUrl + `api/Simulation/clearCells`).subscribe();
39+
requestGenerateCells = () => this.http.get(this.baseUrl + `api/Simulation/generateCells/${30}`).subscribe();
3540

36-
generateCells = () => {
37-
this.http.get(this.baseUrl + `api/Simulation/generateCells/${30}`).subscribe();
38-
}
41+
requestSize = () => this.http.get<number[]>(this.baseUrl + 'api/Simulation/getSize').subscribe(this.setSize, error => console.error(error));
42+
setSize = (result: number[]) => this.size = result;
3943

40-
setSize = (result: number[]) => {
41-
this.size = result;
44+
draw() {
45+
this.canvasContext.canvas.height = this.size[0];
46+
this.canvasContext.canvas.width = this.size[1];
47+
this.frame.forEach((element) => {
48+
this.canvasContext.strokeStyle = element.color;
49+
this.canvasContext.fillStyle = element.color;
50+
this.canvasContext.beginPath();
51+
this.canvasContext.arc(element.y, element.x, element.size / 2, 0, 2 * Math.PI, true);
52+
this.canvasContext.fill();
53+
});
4254
}
4355

4456
initWebSocket = (host: string) => {
4557
this.socket = new WebSocket("ws://" + host + "/ws");
46-
this.socket.onopen = () => { console.log("success");this.requestConnections();};
58+
this.socket.onopen = () => { console.log("success"); this.requestConnections(); };
4759
this.socket.onmessage = (msg) => this.onUpdate(msg);
4860
this.socket.onclose = () => { console.log("closed"); };
4961
this.socket.onerror = () => { console.log("error"); };
@@ -53,16 +65,17 @@ export class HomeComponent {
5365
//console.log("income msg", msg.data);
5466
this.frame = this.parseDrawEntities(msg.data);
5567
this.calccolors();
68+
this.draw();
5669
}
5770

58-
calccolors= ()=>{
59-
this.colors=[0,0,0];
71+
calccolors = () => {
72+
this.colors = [0, 0, 0];
6073
this.frame.forEach(element => {
61-
if(element.color=="Color [Red]"){
74+
if (element.color == "Red") {
6275
this.colors[0]++;
63-
}else if(element.color=="Color [Green]"){
76+
} else if (element.color == "Green") {
6477
this.colors[1]++;
65-
}else if(element.color=="Color [Blue]"){
78+
} else if (element.color == "Blue") {
6679
this.colors[2]++;
6780
}
6881
});
@@ -71,6 +84,9 @@ export class HomeComponent {
7184
parseDrawEntities(value: string): IDrawEntity[] {
7285
let container: IFrameContainer = JSON.parse(value);
7386
let frame: IDrawEntity[] = container.frame;
87+
frame.forEach(element => {
88+
element.color = element.color.substr(7, element.color.length - 8);
89+
});
7490
return frame;
7591
}
7692

‎WebCellLifeSimulationApp/ClientApp/src/app/nav-menu/nav-menu.component.html‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
11
<header>
2-
<nav
3-
class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
4-
>
2+
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
53
<div class="container">
64
<a class="navbar-brand" [routerLink]="['/']">WebCellLifeSimulationApp</a>
7-
<button
8-
class="navbar-toggler"
9-
type="button"
10-
data-toggle="collapse"
11-
data-target=".navbar-collapse"
12-
aria-label="Toggle navigation"
13-
[attr.aria-expanded]="isExpanded"
14-
(click)="toggle()"
15-
>
5+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
6+
aria-label="Toggle navigation" [attr.aria-expanded]="isExpanded" (click)="toggle()">
167
<span class="navbar-toggler-icon"></span>
178
</button>
18-
<div
19-
class="navbar-collapse collapse d-sm-inline-flex justify-content-end"
20-
[ngClass]="{ show: isExpanded }"
21-
>
9+
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-end" [ngClass]="{ show: isExpanded }">
2210
<ul class="navbar-nav flex-grow">
11+
<li class="nav-item">
12+
<a class="nav-link text-dark" href="https://github.com/maxchistt/CellLifeSimulation">GitHub</a>
13+
</li>
14+
</ul>
15+
<!--!<ul class="navbar-nav flex-grow">
2316
<li
2417
class="nav-item"
2518
[routerLinkActive]="['link-active']"
2619
[routerLinkActiveOptions]="{ exact: true }"
2720
>
2821
<a class="nav-link text-dark" [routerLink]="['/']">Home</a>
2922
</li>
30-
</ul>
23+
</ul>-->
3124
</div>
3225
</div>
3326
</nav>
34-
</header>
27+
</header>

‎WebCellLifeSimulationApp/Program.cs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ public static void Main(string[] args)
2727
private static void setupSimulation()
2828
{
2929
simulation.clearCells();
30-
simulation.setTimeSettings(10, 100);
30+
simulation.setTimeSettings(12, 50);
3131
simulation.setCellsReproductionLimit(300);
32-
simulation.setSimulationSize(600, 800);
33-
simulation.generateCells(20);
32+
simulation.setSimulationSize(400, 800);
33+
//simulation.generateCells(20);
3434
simulation.start();
3535
}
3636

0 commit comments

Comments
 (0)