1// Copyright 2022 Google LLC
2//
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6//
7//     https://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14
15import { LitElement, html, css } from "lit";
16
17import "./Orientation.js";
18
19export class DeviceInfo extends LitElement {
20  static styles = css`
21    :host {
22      display: flex;
23      flex-direction: column;
24      padding: 12px;
25      color: white;
26    }
27
28    h1 {
29      margin: 0 auto;
30      font-weight: 700;
31    }
32
33    h2 {
34      font-weight: 500;
35      margin: 12px;
36    }
37
38    .secondary {
39      color: #4f46e5;
40    }
41
42    .orientation {
43      margin-top: 10px;
44      display: flex;
45      flex-direction: column;
46      margin-bottom: 2px;
47    }
48
49    .orientation > pika-orientation {
50      width: 200px;
51      height: 200px;
52      margin: auto;
53    }
54
55    label {
56      display: flex;
57      flex-direction: column;
58    }
59
60    .neighbors {
61      display: flex;
62      flex-direction: column;
63      padding: 0;
64      margin: 0;
65      list-style: none;
66      overflow-y: scroll;
67    }
68
69    .neighbors > li {
70      display: flex;
71      flex-direction: row;
72      align-items: center;
73    }
74
75    .neighbors > li > table {
76      color: inherit;
77    }
78
79    .neighbors > li > table td {
80      padding: 0 6px;
81    }
82
83    .neighbors > li > pika-orientation {
84      width: 100px;
85      height: 100px;
86    }
87  `;
88
89  static properties = {
90    device: {},
91  };
92
93  constructor() {
94    super();
95    this.device = null;
96  }
97
98  setYaw(event) {
99    this.device.yaw = Number(event.target.value);
100    this.update();
101  }
102
103  setPitch(event) {
104    this.device.pitch = Number(event.target.value);
105    this.update();
106  }
107  setRoll(event) {
108    this.device.roll = Number(event.target.value);
109    this.update();
110  }
111
112  setElevation(event) {
113    this.device.elevation = Number(event.target.value);
114    this.update();
115  }
116
117  notifyChange() {
118    this.dispatchEvent(new CustomEvent("orientation-change"));
119  }
120
121  render() {
122    return html`
123      <h1>Pica</h1>
124      <h2>Selected Device</h2>
125      ${this.device == null
126        ? html`<span>No Device Selected</span>`
127        : html`
128            <span> Mac Address: ${this.device.mac_address} </span>
129            <span
130              >X:
131              <span style="color: red">${this.device.position.x}</span></span
132            >
133            <span
134              >Y:
135              <span style="color: blue">${this.device.position.y}</span></span
136            >
137            <span
138              >Z:
139              <span style="color: green">${this.device.position.z}</span></span
140            >
141            <div class="orientation">
142              <span class="center">Device Orientation</span>
143              <pika-orientation
144                yaw=${this.device.yaw}
145                pitch=${this.device.pitch}
146                roll=${this.device.roll}
147              ></pika-orientation>
148              <label>
149                <span>Yaw (${this.device.yaw})</span>
150                <input
151                  type="range"
152                  min="-180"
153                  max="180"
154                  value=${this.device.yaw}
155                  @input=${this.setYaw}
156                  @change=${this.notifyChange}
157                />
158              </label>
159              <label>
160                <span>Pitch (${this.device.pitch})</span>
161                <input
162                  type="range"
163                  min="-90"
164                  max="90"
165                  value=${this.device.pitch}
166                  @input=${this.setPitch}
167                  @change=${this.notifyChange}
168                />
169              </label>
170              <label>
171                <span>Roll (${this.device.roll})</span>
172                <input
173                  type="range"
174                  min="-180"
175                  max="180"
176                  value=${this.device.roll}
177                  @input=${this.setRoll}
178                  @change=${this.notifyChange}
179                />
180              </label>
181            </div>
182            <h2>Neighbors</h2>
183            <ul class="neighbors">
184              ${this.device.neighbors.map(
185                ({ mac_address, distance, azimuth, elevation }) => html`
186                  <li>
187                    <pika-orientation
188                      yaw="${-azimuth}"
189                      pitch="${elevation}"
190                    ></pika-orientation>
191                    <table>
192                      <tr>
193                        <td>Mac</td>
194                        <td> ${mac_address} </td>
195                      </tr>
196                      <tr>
197                        <td>Distance</td>
198                        <td>${distance} cm</td>
199                      </tr>
200                      <tr>
201                        <td>Azimuth</td>
202                        <td>${azimuth}</td>
203                      </tr>
204                      <tr>
205                        <td>Elevation</td>
206                        <td>${elevation}</td>
207                      </tr>
208                    </table>
209                  </li>
210                `
211              )}
212            </ul>
213          `}
214    `;
215  }
216}
217customElements.define("pika-device-info", DeviceInfo);
218