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
|
package vfd.frontend.ui
import org.scalajs.dom.HTMLElement
import rx.Obs
import rx.Rx
import rx.Rx
import scalatags.JsDom.all.ExtendedString
import scalatags.JsDom.all.bindNode
import scalatags.JsDom.all.div
import scalatags.JsDom.all.`object`
import scalatags.JsDom.all.stringAttr
import scalatags.JsDom.all.stringFrag
import scalatags.JsDom.all.stringStyle
import scalatags.JsDom.all.style
import scalatags.JsDom.all.`type`
import scalatags.JsDom.all.width
import vfd.frontend.util.Environment
object Components {
def led(color: Rx[String], size: String)(implicit app: Environment) = {
val elem = `object`(`type` := "image/svg+xml", "data".attr := app.asset("leds/led.svg"), width := size)(
"Error loading image.").render
Obs(color, skipInitial = true) {
val svg = elem.contentDocument
svg.getElementById("light").setAttribute("fill", color())
}
elem
}
private def instrument(name: String)(implicit app: Environment) = {
val path = app.asset("images/instruments/" + name + ".svg")
`object`(`type` := "image/svg+xml", "data".attr := path, width := "100%")(
"Error loading image " + name).render
}
private def frame(elem: HTMLElement, size: String) = {
div(style := s"width: $size; height: $size; display: inline-block;")(
elem)
}
def attitude(pitchRoll: Rx[(Double, Double)], size: String)(implicit app: Environment) = {
val inst = instrument("attitude")
Obs(pitchRoll, skipInitial = true) {
val svg = inst.contentDocument
val pitch = svg.getElementById("pitch")
val roll = svg.getElementById("roll")
pitch.setAttribute("transform", "translate(0, " + pitchRoll()._1 / math.Pi * 180 + ")");
roll.setAttribute("transform", "rotate(" + pitchRoll()._2 / math.Pi * 180 + ")");
}
frame(inst, size)
}
def altitude(value: Rx[Double], size: String)(implicit app: Environment) = {
val inst = instrument("altitude")
Obs(value, skipInitial = true) {
val svg = inst.contentDocument
// 36deg === 1m
svg.getElementById("hand").setAttribute("transform", "rotate(" + value() * 36 + ")");
}
frame(inst, size)
}
def heading(value: Rx[Double], size: String)(implicit app: Environment) = {
val inst = instrument("heading")
Obs(value, skipInitial = true) {
val svg = inst.contentDocument
// 1deg === 1deg
svg.getElementById("heading").setAttribute("transform", "rotate(" + value() / math.Pi * 180 + ")");
}
frame(inst, size)
}
}
|