Skip to content

GitLab

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

Implementacion de barra de controles

parent 4d963927
Show whitespace changes
Inline Side-by-side
Frontend Angular 4/src/app/app.module.ts
View file @ 52188d72
......@@ -7,10 +7,11 @@ import { AppComponent } from './app.component';
import { AuthGuard } from './shared/guards/auth.guard';
import { SessionService } from './shared/services/session.service';
import { NotificacionService } from './shared/services/notificacion.service';
import {NotificacionModule} from './notificacion/notificacion.module'
import {NotificacionModule} from './notificacion/notificacion.module';
@NgModule({
declarations: [
AppComponent,
AppComponent
],
imports: [
NotificacionModule,
......
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
View file @ 52188d72
......@@ -7,7 +7,7 @@
style="min-width: 70px;"
(click)=changeZoomType()
>
{{getZoom3DTypeName(zoomType)}}
{{getZoom3DTypeName(graphProps.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>
......@@ -15,7 +15,7 @@
<button
*ngFor="let type of [1,2,3,4]"
class="dropdown-item"
[disabled]="type === zoomType"
[disabled]="type === graphProps.zoomType"
(click)=changeZoomType(type)
>
{{getZoom3DTypeName(type)}}
......@@ -49,46 +49,154 @@
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomMas()
(click)=center()
>
<i class="fa fa-arrows"></i>
</button>
<button
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"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomMas()
(click)=clear()
>
<i class="fa fa-trash"></i>
</button>
<button
ngbPopover="Configuración"
triggers="mouseenter:mouseleave"
data-placement="bottom"
[ngbPopover]=popoverConfig
closePopoverOnOutsideClick
placement="bottom"
tiggers="click"
class="btn btn-sm btn-secondary"
(click)=zoomMas()
popoverTitle="Configuración"
>
<i class="fa fa-gear"></i>
</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 class="card-block contenedor-canvas" >
<animation-control
[minSpeed]="60"
[value]="animation.value"
[speed]="animation.speed"
[visible]="animation.visible"
[playing]="animation.playing"
[value]="animationProps.value"
[speed]="animationProps.speed"
[visible]="animationProps.visible"
[playing]="animationProps.playing"
[onChangeSpeed]="onAnimationChangeSpeed"
[onTogglePlay]="onAnimationTogglePlay"
>
</animation-control>
<div #graph3DElement style="width: 100%; height: 100%;">
</div>
</div>
......
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.scss
View file @ 52188d72
......@@ -14,7 +14,25 @@
vertical-align: bottom;
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;
}
}
}
}
......@@ -23,3 +41,7 @@
background-color: #f7f7f7;
color: #9e9e9e;
}
.d-block{
display: block;
}
\ No newline at end of file
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts
View file @ 52188d72
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import * as graph3DLib from 'graph3d';
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({
selector: 'graph3d-component',
......@@ -18,16 +18,17 @@ export class Graph3DComponent implements OnInit {
@ViewChild('graph3DElement')
private graph3DRef: ElementRef;
public zoomType: Zoom3DType = Zoom3DType.Normal;
private graphProps : GraphProps = Default_GraphProps;
private animation : AnimationProps = {
private animationProps : AnimationProps = {
visible: false,
playing: false,
value: 0,
speed: 1000
};
constructor(private ghciService: GHCIService, private zone: NgZone) {
constructor(ghciService: GHCIService, private zone: NgZone) {
this.ghciServiceSub = ghciService.messages.subscribe(
message => {
if (message.tipo == "canvas3D") {
......@@ -38,12 +39,13 @@ export class Graph3DComponent implements OnInit {
else if (message.tipo == "animacion3D") {
const frames = message.resultado.map((frame) => JSON.parse(formatJSON(frame)));
this.animation.visible = true;
this.animation.playing = true;
this.animation.value = 0;
this.animationProps.visible = true;
this.animationProps.playing = true;
this.animationProps.value = 0;
graph3DLib.clear();
graph3DLib.initializeAnimation(frames,
(value) => this.animation.value = value
(value) => this.animationProps.value = value
);
graph3DLib.playAnimation();
......@@ -53,9 +55,9 @@ export class Graph3DComponent implements OnInit {
}
ngOnInit() {
this.zone.runOutsideAngular(() => {
// this.zone.runOutsideAngular(() => {
graph3DLib.initialize(this.graph3DRef.nativeElement);
})
//})
}
ngOnDestroy() {
......@@ -71,30 +73,52 @@ export class Graph3DComponent implements OnInit {
}
onAnimationChangeSpeed = (value) => {
this.animation.speed = parseInt(value);
this.animationProps.speed = parseInt(value);
graph3DLib.changeSpeedAnimation(parseInt(value));
}
onAnimationTogglePlay = () => {
if (this.animation.playing) {
if (this.animationProps.playing) {
graph3DLib.pauseAnimation();
}
else {
graph3DLib.playAnimation();
}
this.animation.playing = !this.animation.playing;
this.animationProps.playing = !this.animationProps.playing;
}
public changeZoomType = (type: Zoom3DType = null) => {
if (type != null) {
this.zoomType = type;
this.graphProps.zoomType = type;
}
else {
this.zoomType = (this.zoomType % 4) + 1;
this.graphProps.zoomType = (this.graphProps.zoomType % 4) + 1;
}
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;
}
graph3DLib.changeZoomType(this.zoomType);
if (value > max) {
this.graphProps.range[v] = max;
}
graph3DLib.changeAxesSize(this.graphProps.range)
}
public zoomIn = () => {
......@@ -105,6 +129,18 @@ export class Graph3DComponent implements OnInit {
graph3DLib.changeZoom(false);
}
public clear = () => {
this.animationProps.visible = false;
graph3DLib.clear();
}
public center = () => {
this.graphProps = Default_GraphProps;
graph3DLib.reset();
}
public getZoom3DTypeName = (type: Zoom3DType) => {
switch (type) {
case Zoom3DType.Normal:
......
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.helper.ts
View file @ 52188d72
......@@ -8,6 +8,7 @@ export function formatJSON(jsonString: string) : string {
)
}
export interface AnimationProps {
visible?: boolean,
playing?: boolean,
......@@ -22,3 +23,29 @@ export enum Zoom3DType {
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
}
}
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.module.ts
View file @ 52188d72
......@@ -5,12 +5,15 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { Graph3DComponent } from './graph3D.component';
import { AnimationControlComponent } from '../animation-control/animation-control.component';
import { ClosePopoverOnOutsideClickDirective } from '../../../shared/utils/closePopoverDirective';
@NgModule({
imports: [FormsModule, RouterModule, CommonModule, NgbModule],
declarations: [
AnimationControlComponent,
Graph3DComponent
Graph3DComponent,
ClosePopoverOnOutsideClickDirective
],
entryComponents: [
AnimationControlComponent
......
Frontend Angular 4/src/app/shared/config.ts
View file @ 52188d72
......@@ -5,5 +5,9 @@
//export const GHCI_URL = 'ws://localhost:9090/endpoint';
//Configuracion dinamica pensando en servidor con ip dinamica
export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
export const GHCI_URL = window.location.protocol == 'http:'? 'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
// export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
// export const GHCI_URL = window.location.protocol == 'http:'? 'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
export const SERVER = 'http://192.168.95.3:9090';
export const GHCI_URL = 'ws://192.168.95.3:9090/endpoint';
Frontend Angular 4/src/app/shared/utils/closePopoverDirective.ts 0 → 100644
View file @ 52188d72
import { Directive, HostListener, ElementRef, ComponentRef } from '@angular/core';
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
import { NgbPopoverWindow } from '@ng-bootstrap/ng-bootstrap/popover/popover';
@Directive({
selector: '[closePopoverOnOutsideClick][ngbPopover]'
})
export class ClosePopoverOnOutsideClickDirective {
constructor(private elementRef: ElementRef,
private ngbPopover: NgbPopover) {
}
@HostListener('document:click', ['$event'])
private documentClicked(event: MouseEvent): void {
// Popover is open
if (this.ngbPopover && this.ngbPopover.isOpen()) {
// Not clicked on self element
if (!this.elementRef.nativeElement.contains(event.target)) {
// Hacking typescript to access private member
const popoverWindowRef: ComponentRef<NgbPopoverWindow> = (this.ngbPopover as any)._windowRef;
// If clicked outside popover window
if (!popoverWindowRef.location.nativeElement.contains(event.target)) {
this.ngbPopover.close();
}
}
}
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment