YonathanMeguira

1) add a button " Visibility Point Query"
click on this button should :
  -disable the tilting and orbit controls of the scene
  - capture any click on the screen and only draw the last clicked point
  - transform window x, y to world coordinates
  - the button is inversed to "Query visibility", click on this button sends the last clicked point to the server and shows a loader
  
 2) add a button "Path Visibility"
  clicking on this button has the same effect as previously but:
  all points are drawn onto the scene, need to link the points between them, (draw vectors by couples of {x, y}), if the first couple and the last couple (last clicked point)

YonathanMeguira

/* orange to red buttons with animation on hover */

  .warm-btn{
    padding: 10px 20px;
    font-weight: 600;
    color: #ff386a;
    border: solid 1px #ff386a;
    text-transform: uppercase;
    font-size: 0.9em;
    background-color: transparent;

YonathanMeguira

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { HTTPStatus } from './services/RxJS/HTTPListener.service';
declare var bodymovin: any;

@Component({
  selector: 'app-root',
  template: `<div [hidden] = !HTTPActivity`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

YonathanMeguira

/* Angular Modules */

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';


import { AppComponent } from './app.component';

YonathanMeguira

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest
} from '@angular/common/http';

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

YonathanMeguira

<div *ngFor="let element of myArray; let idx = index">
  <input name="someName" [(ngModel)] = "myArray[idx]">
</div>

YonathanMeguira

<div *ngFor="let element of myArray">
  <input name="someName" [(ngModel)] = "element">
</div>

YonathanMeguira

export class SomeClass {
  public myArray = ['First Item', 'Second Item', 'Third Item'];
}

YonathanMeguira

[
  {
    "id": 1,
    "name": "group1",
    "desc": "description1",
    "devices": [
      {
        "type": "device1",
        "healthy": false,
        "appliances": [

YonathanMeguira

import {Component, OnInit} from '@angular/core';
import {Monsters} from './monsters';

@Component({
  selector: 'monsters',
  templateUrl: './monsters.component.html',
  styleUrls: ['./monsters.component.css']
})

export class MonstersComponent implements OnInit {