Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
matefun
Frontend
Commits
52188d72
Commit
52188d72
authored
Jul 20, 2018
by
jose.ignacio.fagian
Browse files
Implementacion de barra de controles
parent
4d963927
Changes
9
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/layout.module.ts
View file @
52188d72
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>
≤
</span>
x
<span>
≤
</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>
≤
</span>
y
<span>
≤
</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>
≤
</span>
z
<span>
≤
</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]=
"animation
Props
.value"
[speed]=
"animation
Props
.speed"
[visible]=
"animation
Props
.visible"
[playing]=
"animation
Props
.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
;
p
ublic
zoomType
:
Zoom3DType
=
Zoom3DType
.
Normal
;
p
rivate
graphProps
:
GraphProps
=
Default_GraphProps
;
private
animation
:
AnimationProps
=
{
private
animation
Props
:
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
.
animation
Props
.
visible
=
true
;
this
.
animation
Props
.
playing
=
true
;
this
.
animation
Props
.
value
=
0
;
graph3DLib
.
clear
();
graph3DLib
.
initializeAnimation
(
frames
,
(
value
)
=>
this
.
animation
.
value
=
value
(
value
)
=>
this
.
animation
Props
.
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
.
animation
Props
.
speed
=
parseInt
(
value
);
graph3DLib
.
changeSpeedAnimation
(
parseInt
(
value
));
}
onAnimationTogglePlay
=
()
=>
{
if
(
this
.
animation
.
playing
)
{
if
(
this
.
animation
Props
.
playing
)
{
graph3DLib
.
pauseAnimation
();
}
else
{
graph3DLib
.
playAnimation
();
}
this
.
animation
.
playing
=
!
this
.
animation
.
playing
;
this
.
animation
Props
.
playing
=
!
this
.
animation
Props
.
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment