aboutsummaryrefslogtreecommitdiff
path: root/vfd-dashboard/src/main/scala/vfd/dashboard/ui/panels/Communication.scala
blob: dd43ab454a8f8e665e1989ab94534257e9fc3595 (plain) (blame)
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
96
97
98
99
100
101
102
103
104
105
106
package vfd.dashboard.ui.panels

import org.mavlink.messages.Heartbeat
import org.mavlink.messages.Motor
import org.mavlink.messages.Power
import org.scalajs.dom.HTMLElement
import rx.core.Obs
import scalatags.JsDom.all.bindNode
import scalatags.JsDom.all.`class`
import scalatags.JsDom.all.div
import scalatags.JsDom.all.stringAttr
import scalatags.JsDom.all.table
import scalatags.JsDom.all.tbody
import scalatags.JsDom.all.td
import scalatags.JsDom.all._
import vfd.dashboard.Environment
import vfd.dashboard.MavlinkSocket
import vfd.dashboard.ui.components.Generic
import vfd.dashboard.ui.components.Balance
import vfd.dashboard.ui.components.Bar
import vfd.dashboard.ui.components.Led

object Communication {

  def apply(socket: MavlinkSocket)(implicit app: Environment): HTMLElement = {

    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 {
        case Motor(m0, m1, m2, m3) =>
          motor0.update(m0)
          motor1.update(m1)
          motor2.update(m2)
          motor3.update(m3)
          powerDistribution.update(m0, m1, m2, m3)

        case Power(mV) =>
          batteryLevel.update(100 * (mV - 9600) / 12600)
        case Heartbeat(_) => {
          hb.style.visibility = "hidden"
          hb.style.visibility = "visible"
          //hb.classList.remove("heartbeat")
          //hb.offsetHeight
          //hb.classList.add("heartbeat")
        }
        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
  }

}