1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
package vfd.dashboard.ui.panels
import org.scalajs.dom.html
import rx.core.Obs
import scalatags.JsDom.all.bindNode
import scalatags.JsDom.all.`class`
import scalatags.JsDom.all.div
import scalatags.JsDom.all.i
import scalatags.JsDom.all.stringAttr
import scalatags.JsDom.all.stringFrag
import scalatags.JsDom.all.stringPixelStyle
import scalatags.JsDom.all.style
import scalatags.JsDom.all.table
import scalatags.JsDom.all.tbody
import scalatags.JsDom.all.td
import scalatags.JsDom.all.thead
import scalatags.JsDom.all.tr
import scalatags.JsDom.all.width
import vfd.dashboard.Environment
import vfd.dashboard.MavlinkSocket
import vfd.dashboard.ui.components.Balance
import vfd.dashboard.ui.components.Bar
import vfd.dashboard.ui.components.Generic
import vfd.dashboard.ui.components.Led
object Communication {
def apply(socket: MavlinkSocket)(implicit app: Environment): html.Element = {
val hb = i(`class` := "fa fa-heart heartbeat").render
def foo() = {
hb.textContent = ""
}
val motor0 = new Generic(0, 50, 100, "%")
val motor1 = new Generic(0, 50, 100, "%")
val motor2 = new Generic(0, 50, 100, "%")
val motor3 = new Generic(0, 50, 100, "%")
val powerDistribution = new Balance()
val batteryLevel = new Bar()
Obs(socket.message, skipInitial = true) {
socket.message() match {
//TODO match message and update UI
case _ =>
}
}
div(
table(`class` := "table")(
thead("Communication"),
tbody(
tr(
td("Conn"),
div(width := "20px")(td((new Led()).element)),
td("Server"),
td("5 ms")),
tr(
td("Uplink"),
td("-20 dBm"),
td("Heartbeat"),
td(hb)))),
table(`class` := "table-instrument", style := "height: 100px")(
tbody(
tr(
td(),
td(),
td(),
td(),
td(),
td(),
td(),
td(),
td(),
td(batteryLevel.element)))),
table (`class` := "table-instrument")(
thead("Motors"),
tbody(
tr(
td(motor0.element),
td(),
td(motor1.element)),
tr(
td(),
td(powerDistribution.element),
td()),
tr(
td(motor2.element),
td(),
td(motor3.element))))).render
}
}
|
