Skip to content
Snippets Groups Projects
Commit 52188d72 authored by jose.ignacio.fagian's avatar jose.ignacio.fagian
Browse files

Implementacion de barra de controles

parent 4d963927
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 326 additions and 91 deletions
Frontend Angular 4/src/app/app.module.ts
+ 3
− 2
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/layout.module.ts
+ 1
− 1
View file @ 52188d72
......@@ -23,7 +23,7 @@ import { NotificacionModule } from '../notificacion/notificacion.module';
declarations: [
LayoutComponent,
HeaderComponent,
SidebarComponent
SidebarComponent
],
providers: [AuthenticationService, HaskellService]
})
......
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
+ 175
− 67
View file @ 52188d72
<div class="card">
<div class="controls">
<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>
<div class="controls">
<div class="btn-group ddown">
<button
ngbPopover="Zoom +"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomIn()
type="button"
class="btn btn-secondary"
style="min-width: 70px;"
(click)=changeZoomType()
>
<i class="fa fa-plus"></i>
{{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>
<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
ngbPopover="Zoom -"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomOut()
>
<i class="fa fa-minus"></i>
</button>
<button
ngbPopover="Zoom +"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomIn()
>
<i class="fa fa-plus"></i>
</button>
<button
ngbPopover="Centrar"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomMas()
>
<i class="fa fa-arrows"></i>
</button>
<button
ngbPopover="Zoom -"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomOut()
>
<i class="fa fa-minus"></i>
</button>
<button
ngbPopover="Borrar"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomMas()
>
<i class="fa fa-trash"></i>
</button>
<button
ngbPopover="Centrar"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=center()
>
<i class="fa fa-arrows"></i>
</button>
<button
ngbPopover="Configuración"
<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]=popoverConfig
closePopoverOnOutsideClick
placement="bottom"
tiggers="click"
class="btn btn-sm btn-secondary"
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>
......
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.scss
+ 23
− 1
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;
}
}
}
}
......@@ -22,4 +40,8 @@
.dropdown-item:disabled{
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
+ 53
− 17
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 animation : AnimationProps = {
private graphProps : GraphProps = Default_GraphProps;
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.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 = () => {
......@@ -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
+ 27
− 0
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
+ 4
− 1
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
+ 6
− 2
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
+ 34
− 0
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
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