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
import org.scalajs.dom.html
import scalatags.JsDom.all.ExtendedString
import scalatags.JsDom.all.Int2CssNumber
import scalatags.JsDom.all.`class`
import scalatags.JsDom.all.div
import scalatags.JsDom.all.header
import scalatags.JsDom.all.height
import scalatags.JsDom.all.iframe
import scalatags.JsDom.all.p
import scalatags.JsDom.all.src
import scalatags.JsDom.all.stringAttr
import scalatags.JsDom.all.stringFrag
import scalatags.JsDom.all.stringPixelStyle
import scalatags.JsDom.all.style
import scalatags.JsDom.all.width
import scalatags.JsDom.all.button
import scalatags.JsDom.all.id
import scalatags.JsDom.all._
import scalatags.jsdom._
import scalatags.jsdom.Frag
import vfd.dashboard.Environment
import vfd.dashboard.MavlinkSocket
import vfd.dashboard.ui.panels.Communication
import vfd.dashboard.ui.panels.Primary
import org.scalajs.dom.MouseEvent
import org.scalajs.dom
class Layout(socket: MavlinkSocket)(implicit env: Environment) {
private def panel(contents: Frag*) = div(`class` := "d-panel")(contents: _*)
def layout =
div(`class` := "d-container d-column")(
div(`class` := "d-above")(
top),
div(`class` := "d-above d-container d-row")(
panel(modes),
panel(infos)),
div(`class` := "d-container d-row")(
div(`class` := "d-container d-details")(
panel("foo")),
div(`class` := "d-container d-left")(
left),
div(`class` := "d-container d-column d-middle")(
div(`class` := "d-container d-center")(
center),
div(`class` := "d-container d-below")(
below)),
div(`class` := "d-container d-right")(
right)))
def top = header(
div("Flight Control Panel"),
div("00:00:00"),
div("System #"))
def left = panel(map)
def center = panel(feed)
def below = panel(Primary(socket))
def right = panel(Communication(socket))
def mode(name: String, kind: String, on: Boolean = false) = div(`class` := s"mode $kind ${if (!on) "off"}")(name)
val modes = div(
mode("MANUAL", "warning", true),
mode("STABILIZED", "info", true),
mode("GUIDED", "success", true),
mode("AUTO", "success", true))
val infos = div(
mode("BAY", "info"),
mode("RECOVERY", "danger"),
mode("NOGPS", "warning", true),
mode("OVERLOAD", "danger", true),
mode("BATTERY", "danger", false),
mode("LINK", "danger", true),
mode("SOCKET", "danger", true),
div(style := "float: right")(mode("CRITICAL", "danger", true)))
val map = iframe(
width := 100.pct,
height := 350.px,
"frameborder".attr := "0",
"scrolling".attr := "no",
"marginheight".attr := "0",
"marginwidth".attr := "0",
src := "http://www.openstreetmap.org/export/embed.html?bbox=6.5611016750335684%2C46.51718501017836%2C6.570038795471191%2C46.520577350893525&layer=mapnik")
val feed = div(style := "width: 100%; height: 460px; color: #ffffff; background-color: #c2c2c2; text-align: center;")(
p(style := "padding-top: 220px")("video feed"))
def element: html.Element = layout.render
}
|
