Commit 52188d72 authored by jose.ignacio.fagian's avatar jose.ignacio.fagian
Browse files

Implementacion de barra de controles

parent 4d963927
...@@ -7,10 +7,11 @@ import { AppComponent } from './app.component'; ...@@ -7,10 +7,11 @@ import { AppComponent } from './app.component';
import { AuthGuard } from './shared/guards/auth.guard'; import { AuthGuard } from './shared/guards/auth.guard';
import { SessionService } from './shared/services/session.service'; import { SessionService } from './shared/services/session.service';
import { NotificacionService } from './shared/services/notificacion.service'; import { NotificacionService } from './shared/services/notificacion.service';
import {NotificacionModule} from './notificacion/notificacion.module' import {NotificacionModule} from './notificacion/notificacion.module';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent
], ],
imports: [ imports: [
NotificacionModule, NotificacionModule,
......
...@@ -23,7 +23,7 @@ import { NotificacionModule } from '../notificacion/notificacion.module'; ...@@ -23,7 +23,7 @@ import { NotificacionModule } from '../notificacion/notificacion.module';
declarations: [ declarations: [
LayoutComponent, LayoutComponent,
HeaderComponent, HeaderComponent,
SidebarComponent SidebarComponent
], ],
providers: [AuthenticationService, HaskellService] providers: [AuthenticationService, HaskellService]
}) })
......
<div class="card"> <div class="card">
<div class="controls"> <div class="controls">
<div class="btn-group ddown"> <div class="btn-group ddown">
<button
type="button"
class="btn btn-secondary"
style="min-width: 70px;"
(click)=changeZoomType()
>
{{getZoom3DTypeName(zoomType)}}
</button>
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button
*ngFor="let type of [1,2,3,4]"
class="dropdown-item"
[disabled]="type === zoomType"
(click)=changeZoomType(type)
>
{{getZoom3DTypeName(type)}}
</button>
</div>
</div>
</div>
<button <button
ngbPopover="Zoom +" type="button"
triggers="mouseenter:mouseleave" class="btn btn-secondary"
data-placement="bottom" style="min-width: 70px;"
class="btn btn-sm btn-secondary" (click)=changeZoomType()
(click)=zoomIn()
> >
<i class="fa fa-plus"></i> {{getZoom3DTypeName(graphProps.zoomType)}}
</button> </button>
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button
*ngFor="let type of [1,2,3,4]"
class="dropdown-item"
[disabled]="type === graphProps.zoomType"
(click)=changeZoomType(type)
>
{{getZoom3DTypeName(type)}}
</button>
</div>
</div>
</div>
<button <button
ngbPopover="Zoom -" ngbPopover="Zoom +"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" data-placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)=zoomOut() (click)=zoomIn()
> >
<i class="fa fa-minus"></i> <i class="fa fa-plus"></i>
</button> </button>
<button <button
ngbPopover="Centrar" ngbPopover="Zoom -"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" data-placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)=zoomMas() (click)=zoomOut()
> >
<i class="fa fa-arrows"></i> <i class="fa fa-minus"></i>
</button> </button>
<button <button
ngbPopover="Borrar" ngbPopover="Centrar"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" data-placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)=zoomMas() (click)=center()
> >
<i class="fa fa-trash"></i> <i class="fa fa-arrows"></i>
</button> </button>
<button <button
ngbPopover="Configuración" closePopoverOnOutsideClick
class="btn btn-sm btn-secondary"
placement="bottom"
[ngbPopover]=popoverAxesSize
popoverTitle="Rango de ejes"
#popover="ngbPopover"
tiggers="click"
>
<i class="fa fa-arrows-h"></i>
</button>
<ng-template #popoverAxesSize>
<div class="axes-size">
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.xMin"
[max]="graphProps.range.xMax-1"
[min]="-99"
(change)="onChangeAxesSize('xMin', $event)"
/>
<div class="less-than">
<span>&#8804;</span>x<span>&#8804;</span>
</div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.xMax"
[max]="99"
[min]="graphProps.range.xMin+1"
(change)="onChangeAxesSize('xMax', $event)"
/>
</div>
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.yMin"
[max]="graphProps.range.yMax-1"
[min]="-99"
(change)="onChangeAxesSize('yMin', $event)"
/>
<div class="less-than">
<span>&#8804;</span>y<span>&#8804;</span>
</div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.yMax"
[max]="99"
[min]="graphProps.range.yMin+1"
(change)="onChangeAxesSize('yMax', $event)"
/>
</div>
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.zMin"
[max]="graphProps.range.zMax-1"
[min]="-99"
(change)="onChangeAxesSize('zMin', $event)"
/>
<div class="less-than">
<span>&#8804;</span>z<span>&#8804;</span>
</div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.zMax"
[max]="99"
[min]="graphProps.range.zMin+1"
(change)="onChangeAxesSize('zMax', $event)"
/>
</div>
</div>
</ng-template>
<button
ngbPopover="Borrar"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" data-placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)=zoomMas() (click)=clear()
>
<i class="fa fa-trash"></i>
</button>
<button
[ngbPopover]=popoverConfig
closePopoverOnOutsideClick
placement="bottom"
tiggers="click"
class="btn btn-sm btn-secondary"
popoverTitle="Configuración"
> >
<i class="fa fa-gear"></i> <i class="fa fa-gear"></i>
</button> </button>
<ng-template #popoverConfig>
<div style="width: 140px;">
<label class="d-block">
<input type="checkbox"[checked]=graphProps.showAxes (click)="changeAxesVisibility()">
Mostrar grilla
</label>
<div style="display: flex;">
<span style="margin-right: 8px; align-self: center;">
Quality:
</span>
<input
type="number"
style="width: 55px;"
class="form-control form-control-sm"
/>
</div>
</div>
</ng-template>
</div> </div>
<div class="card-block contenedor-canvas" > <div class="card-block contenedor-canvas" >
<animation-control <animation-control
[minSpeed]="60" [minSpeed]="60"
[value]="animation.value" [value]="animationProps.value"
[speed]="animation.speed" [speed]="animationProps.speed"
[visible]="animation.visible" [visible]="animationProps.visible"
[playing]="animation.playing" [playing]="animationProps.playing"
[onChangeSpeed]="onAnimationChangeSpeed" [onChangeSpeed]="onAnimationChangeSpeed"
[onTogglePlay]="onAnimationTogglePlay" [onTogglePlay]="onAnimationTogglePlay"
> >
</animation-control> </animation-control>
<div #graph3DElement style="width: 100%; height: 100%;"> <div #graph3DElement style="width: 100%; height: 100%;">
</div> </div>
......
...@@ -14,7 +14,25 @@ ...@@ -14,7 +14,25 @@
vertical-align: bottom; vertical-align: bottom;
button { button {
padding: 2.5px 5px; padding: 2.5px 8px 2.5px 3px;
}
}
.axes-size {
width: 165px;
.axe {
display: flex;
&:not(:last-child) {
margin-bottom: 6px;
}
.less-than {
padding: 0 2.5px 0 5px;
font-size: 17px;
letter-spacing: 4px;
}
} }
} }
} }
...@@ -22,4 +40,8 @@ ...@@ -22,4 +40,8 @@
.dropdown-item:disabled{ .dropdown-item:disabled{
background-color: #f7f7f7; background-color: #f7f7f7;
color: #9e9e9e; color: #9e9e9e;
}
.d-block{
display: block;
} }
\ No newline at end of file
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core'; import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import * as graph3DLib from 'graph3d'; import * as graph3DLib from 'graph3d';
import { GHCIService } from '../../../shared/services/ghci.service'; import { GHCIService } from '../../../shared/services/ghci.service';
import { formatJSON, AnimationProps, Zoom3DType } from './graph3D.helper'; import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps } from './graph3D.helper';
@Component({ @Component({
selector: 'graph3d-component', selector: 'graph3d-component',
...@@ -18,16 +18,17 @@ export class Graph3DComponent implements OnInit { ...@@ -18,16 +18,17 @@ export class Graph3DComponent implements OnInit {
@ViewChild('graph3DElement') @ViewChild('graph3DElement')
private graph3DRef: ElementRef; private graph3DRef: ElementRef;
public zoomType: Zoom3DType = Zoom3DType.Normal; private graphProps : GraphProps = Default_GraphProps;
private animation : AnimationProps = { private animationProps : AnimationProps = {
visible: false, visible: false,
playing: false, playing: false,
value: 0, value: 0,
speed: 1000 speed: 1000
}; };
constructor(private ghciService: GHCIService, private zone: NgZone) { constructor(ghciService: GHCIService, private zone: NgZone) {
this.ghciServiceSub = ghciService.messages.subscribe( this.ghciServiceSub = ghciService.messages.subscribe(
message => { message => {
if (message.tipo == "canvas3D") { if (message.tipo == "canvas3D") {
...@@ -38,12 +39,13 @@ export class Graph3DComponent implements OnInit { ...@@ -38,12 +39,13 @@ export class Graph3DComponent implements OnInit {
else if (message.tipo == "animacion3D") { else if (message.tipo == "animacion3D") {
const frames = message.resultado.map((frame) => JSON.parse(formatJSON(frame))); const frames = message.resultado.map((frame) => JSON.parse(formatJSON(frame)));
this.animation.visible = true; this.animationProps.visible = true;
this.animation.playing = true; this.animationProps.playing = true;
this.animation.value = 0; this.animationProps.value = 0;
graph3DLib.clear();
graph3DLib.initializeAnimation(frames, graph3DLib.initializeAnimation(frames,
(value) => this.animation.value = value (value) => this.animationProps.value = value
); );
graph3DLib.playAnimation(); graph3DLib.playAnimation();
...@@ -53,9 +55,9 @@ export class Graph3DComponent implements OnInit { ...@@ -53,9 +55,9 @@ export class Graph3DComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.zone.runOutsideAngular(() => { // this.zone.runOutsideAngular(() => {
graph3DLib.initialize(this.graph3DRef.nativeElement); graph3DLib.initialize(this.graph3DRef.nativeElement);
}) //})
} }
ngOnDestroy() { ngOnDestroy() {
...@@ -71,30 +73,52 @@ export class Graph3DComponent implements OnInit { ...@@ -71,30 +73,52 @@ export class Graph3DComponent implements OnInit {
} }
onAnimationChangeSpeed = (value) => { onAnimationChangeSpeed = (value) => {
this.animation.speed = parseInt(value); this.animationProps.speed = parseInt(value);
graph3DLib.changeSpeedAnimation(parseInt(value)); graph3DLib.changeSpeedAnimation(parseInt(value));
} }
onAnimationTogglePlay = () => { onAnimationTogglePlay = () => {
if (this.animation.playing) { if (this.animationProps.playing) {
graph3DLib.pauseAnimation(); graph3DLib.pauseAnimation();
} }
else { else {
graph3DLib.playAnimation(); graph3DLib.playAnimation();
} }
this.animation.playing = !this.animation.playing; this.animationProps.playing = !this.animationProps.playing;
} }
public changeZoomType = (type: Zoom3DType = null) => { public changeZoomType = (type: Zoom3DType = null) => {
if (type != null) { if (type != null) {
this.zoomType = type; this.graphProps.zoomType = type;
} }
else { else {
this.zoomType = (this.zoomType % 4) + 1; this.graphProps.zoomType = (this.graphProps.zoomType % 4) + 1;
} }
graph3DLib.changeZoomType(this.zoomType); graph3DLib.changeZoomType(this.graphProps.zoomType);
}
public changeAxesVisibility = () => {
this.graphProps.showAxes = !this.graphProps.showAxes;
graph3DLib.showAxes(this.graphProps.showAxes);
}
public onChangeAxesSize = (v, event) => {
let value = this.graphProps.range[v];
const min = parseInt(event.target.min);
const max = parseInt(event.target.max);
if (value < min) {
this.graphProps.range[v] = min;
}
if (value > max) {
this.graphProps.range[v] = max;
}
graph3DLib.changeAxesSize(this.graphProps.range)
} }
public zoomIn = () => { public zoomIn = () => {
...@@ -105,6 +129,18 @@ export class Graph3DComponent implements OnInit { ...@@ -105,6 +129,18 @@ export class Graph3DComponent implements OnInit {
graph3DLib.changeZoom(false); graph3DLib.changeZoom(false);
} }
public clear = () => {
this.animationProps.visible = false;
graph3DLib.clear();
}
public center = () => {
this.graphProps = Default_GraphProps;
graph3DLib.reset();
}
public getZoom3DTypeName = (type: Zoom3DType) => { public getZoom3DTypeName = (type: Zoom3DType) => {
switch (type) { switch (type) {
case Zoom3DType.Normal: case Zoom3DType.Normal:
......
...@@ -8,6 +8,7 @@ export function formatJSON(jsonString: string) : string { ...@@ -8,6 +8,7 @@ export function formatJSON(jsonString: string) : string {
) )
} }
export interface AnimationProps { export interface AnimationProps {
visible?: boolean, visible?: boolean,
playing?: boolean, playing?: boolean,
...@@ -22,3 +23,29 @@ export enum Zoom3DType { ...@@ -22,3 +23,29 @@ export enum Zoom3DType {
ZAxis, ZAxis,
} }
export interface GraphProps {
zoomType?: Zoom3DType,
showAxes?: boolean,
range: {
xMin?: number,
xMax?: number,
yMin?: number,
yMax?: number,
zMin?: number,
zMax?: number
}
}
export const Default_GraphProps : GraphProps = {
zoomType: Zoom3DType.Normal,
showAxes: true,
range: {
xMin: -10,
xMax: 10,
yMin: -10,
yMax: 10,
zMin: -10,
zMax: 10
}
}