diff options
| author | Jakob Odersky <jodersky@gmail.com> | 2015-08-18 16:25:15 -0700 |
|---|---|---|
| committer | Jakob Odersky <jodersky@gmail.com> | 2015-08-18 16:25:15 -0700 |
| commit | 58daf3b0559d4facbb09fcc375a0b3d4ff9010cf (patch) | |
| tree | 71245f128e35f11b04beff8562d8f9a31c319768 | |
| parent | 19b2afbf346f5a622449e5c460a432c946962fe9 (diff) | |
| download | mavigator-58daf3b0559d4facbb09fcc375a0b3d4ff9010cf.tar.gz mavigator-58daf3b0559d4facbb09fcc375a0b3d4ff9010cf.tar.bz2 mavigator-58daf3b0559d4facbb09fcc375a0b3d4ff9010cf.zip | |
basic hud
| -rw-r--r-- | vfd-dashboard/src/main/scala/vfd/dashboard/ui/Hud.scala | 47 | ||||
| -rw-r--r-- | vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala | 2 | ||||
| -rw-r--r-- | vfd-main/public/images/hud/horizon.svg | 14 | ||||
| -rw-r--r-- | vfd-main/public/images/hud/overlay.html | 29 |
4 files changed, 83 insertions, 9 deletions
diff --git a/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Hud.scala b/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Hud.scala new file mode 100644 index 0000000..6abdb36 --- /dev/null +++ b/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Hud.scala @@ -0,0 +1,47 @@ +package vfd.dashboard.ui + +import vfd.dashboard.Environment +import vfd.dashboard.ui.instruments._ + +import scalatags.JsDom.all._ +import rx._ + +class Hud(attitude: Rx[(Double, Double)])(implicit env: Environment) { + + private def overlay(name: String, z: Int, thinnerThanWide: Boolean = false) = { + val direction = if (thinnerThanWide) "row" else "column" + div( + style:= + "position: absolute; left: 0; right: 0; top: 0; bottom: 0;" + + s"display: flex; align-content: center; align-items: stretch; flex-direction: $direction;"+ + s"z-index: $z;" + )( + `object`(`type`:="image/svg+xml", "data".attr:=env.asset("images/hud/" + name + ".svg"), style := "flex: 1 1 100%;") + ) + } + + object Horizon extends SvgInstrument[(Double, Double)] { + import SvgInstrument._ + + val value = attitude + + lazy val element = `object`(`type`:="image/svg+xml", "data".attr:=env.asset("images/hud/horizon.svg"), style:="flex: 1 1 100%;").render + lazy val horizon = part("horizon") + lazy val moveable = Seq(horizon) + + protected def update(pitchRoll: (Double, Double)) = { + rotate(horizon, pitchRoll._2) + //translate(horizon, 0, (pitchRoll._1 * 180 / math.Pi).toInt) // 1deg === 1px + } + } + + val element = div( + style:= + "position: absolute; left: 0; right: 0; top: 0; bottom: 0;" + + "display: flex; align-content: stretch; align-items: stretch; flex-direction: row;"+ + "z-index: 0;" + )( + Horizon.element + ) +} + diff --git a/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala b/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala index 8f84945..fe1b34f 100644 --- a/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala +++ b/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala @@ -258,7 +258,7 @@ class Layout(socket: MavlinkSocket)(implicit env: Environment) { left ), div(`class` := "d-main", style:="position: relative;")( - hud: _* + (new Hud(horizon.value)).element ) ) ).render diff --git a/vfd-main/public/images/hud/horizon.svg b/vfd-main/public/images/hud/horizon.svg index 1562d41..8cf0150 100644 --- a/vfd-main/public/images/hud/horizon.svg +++ b/vfd-main/public/images/hud/horizon.svg @@ -15,7 +15,7 @@ version="1.1" inkscape:version="0.48.5 r10040" sodipodi:docname="horizon.svg" - viewBox="-600 600 1200 1200" + viewBox="-600 -600 1200 1200" preserveAspectRatio="none"> <defs id="defs4" /> @@ -27,10 +27,10 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35374999" - inkscape:cx="339.9067" + inkscape:cx="356.86783" inkscape:cy="585.56122" inkscape:document-units="px" - inkscape:current-layer="layer1" + inkscape:current-layer="horizon" showgrid="true" showborder="true" inkscape:window-width="1920" @@ -58,18 +58,16 @@ </rdf:RDF> </metadata> <g - inkscape:label="Layer 1" - inkscape:groupmode="layer" - id="layer1"> + id="horizon"> <rect style="fill:#c88f00;fill-opacity:1;stroke:none" id="rect3000" width="1800" height="1200" x="-900" - y="1200" /> + y="0" /> <rect - y="0" + y="-1200" x="-900" height="1200" width="1800" diff --git a/vfd-main/public/images/hud/overlay.html b/vfd-main/public/images/hud/overlay.html new file mode 100644 index 0000000..58b0ef7 --- /dev/null +++ b/vfd-main/public/images/hud/overlay.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + +<html> + <head> + <style> + html,body { + margin: 0; + width: 100%; + height: 100%; + } + </style> + </head> + <body> + + <div style="width: 100%; height: 100%; display: flex; align-content: flex-start; align-items: stretch; flex-direction: row"> + <div style="flex: 1; background-color: yellow;">side menu</div> + + <div style="flex: 1 1 70%; background-color: red; position: relative;"> + <div style="background-color: green; z-index: 0; display: flex; align-content: center; align-items: stretch; flex-direction: column; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"> + <object style="flex: 1 1 100%;" type="image/svg+xml" data="horizon.svg">level0</object> + </div> + + <div style="z-index: 1; display: flex; align-content: center; align-items: stretch; flex-direction: column; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"> + <object style="flex: 1 1 100%;" type="image/svg+xml" data="roll.svg">level0</object> + </div> + </div> + </div> + </body> +</html> |
