design hud skeleton

5 files changed, 438 insertions, 18 deletions

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 8bc35cd..8f84945 100644
--- a/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala
+++ b/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala
@@ -37,8 +37,7 @@ class Layout(socket: MavlinkSocket)(implicit env: Environment) {
     "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%; color: #ffffff; background-color: #c2c2c2; text-align: center;")(
-    p(style := "padding-top: 220px")("video feed"))
+  val feed = div(style := "width: 100%; height: 100%; color: #ffffff; background-color: #c2c2c2; text-align: center;")
 
   val altimeter = new Altimeter(
     Var(0.0)
@@ -222,7 +221,31 @@ class Layout(socket: MavlinkSocket)(implicit env: Environment) {
     )
   )
 
-  val element = div(`class` := "d-container d-column")(
+
+
+  val hud = {
+    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%;")
+      )
+
+    }
+
+    Seq(
+      overlay("horizon", 0),
+      overlay("roll", 1)
+    )
+  }
+
+
+
+  val element = div(`class` := "d-container d-column", style:="width: 100%; height: 100%;")(
     div(`class` := "d-above")(
       top
     ),
@@ -234,12 +257,10 @@ class Layout(socket: MavlinkSocket)(implicit env: Environment) {
       div(`class` := "d-container d-left")(
         left
       ),
-      div(`class` := "d-container d-column d-middle")(
-        panel(feed),
-        panel(map)
-      ),
-      div(`class` := "d-container d-right")()
+      div(`class` := "d-main", style:="position: relative;")(
+        hud: _*
+      )
     )
   ).render
 
-}
\ No newline at end of file
+}
diff --git a/vfd-main/public/images/hud/horizon.svg b/vfd-main/public/images/hud/horizon.svg
new file mode 100644
index 0000000..1562d41
--- /dev/null
+++ b/vfd-main/public/images/hud/horizon.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1200"
+   height="1200"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="horizon.svg"
+   viewBox="-600 600 1200 1200"
+   preserveAspectRatio="none">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35374999"
+     inkscape:cx="339.9067"
+     inkscape:cy="585.56122"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showborder="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1033"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2987"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#c88f00;fill-opacity:1;stroke:none"
+       id="rect3000"
+       width="1800"
+       height="1200"
+       x="-900"
+       y="1200" />
+    <rect
+       y="0"
+       x="-900"
+       height="1200"
+       width="1800"
+       id="rect3770"
+       style="fill:#aaeeff;fill-opacity:1;stroke:none" />
+  </g>
+</svg>
diff --git a/vfd-main/public/images/hud/hud.svg b/vfd-main/public/images/hud/hud.svg
new file mode 100644
index 0000000..943d7a4
--- /dev/null
+++ b/vfd-main/public/images/hud/hud.svg
@@ -0,0 +1,182 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1200"
+   height="1200"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="drawing.svg"
+   viewBox="-600 600 1200 1200">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.25013902"
+     inkscape:cx="1001.4796"
+     inkscape:cy="-231.89709"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showborder="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1033"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2987"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:0.6;fill:#808000;fill-opacity:0.48235294;stroke:none"
+       id="rect2985"
+       width="1200"
+       height="1200"
+       x="-600"
+       y="600" />
+    <path
+       sodipodi:type="arc"
+       style="opacity:0.6;fill:#808000;fill-opacity:0.48235294;stroke:none"
+       id="path2989"
+       sodipodi:cx="0"
+       sodipodi:cy="1200"
+       sodipodi:rx="440"
+       sodipodi:ry="440"
+       d="m 440,1200 a 440,440 0 1 1 -880,0 440,440 0 1 1 880,0 z" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path3782"
+       d="m 380,1200 60,0"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m -440,1200 60,0"
+       id="path3012"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="M 0,760.06247 0,815"
+       id="path3786"
+       inkscape:connector-curvature="0"
+       inkscape:transform-center-y="-412.46877" />
+    <path
+       inkscape:transform-center-y="-357.20843"
+       inkscape:connector-curvature="0"
+       id="path3794"
+       d="M -219.96877,819.00292 -192.5,866.58022"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="206.23439" />
+    <path
+       inkscape:transform-center-y="-291.65947"
+       inkscape:connector-curvature="0"
+       id="path3796"
+       d="m -311.08281,888.91719 38.8467,38.8467"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="291.65946" />
+    <path
+       inkscape:transform-center-y="-291.65947"
+       inkscape:connector-curvature="0"
+       id="path3798"
+       d="m 311.08281,888.91719 -38.8467,38.8467"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="-291.65946" />
+    <path
+       inkscape:transform-center-y="-357.20843"
+       inkscape:connector-curvature="0"
+       id="path3800"
+       d="M 219.96877,819.00292 192.5,866.58022"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="-206.23439" />
+    <path
+       inkscape:transform-center-y="-406.20244"
+       inkscape:connector-curvature="0"
+       id="path3802"
+       d="m 76.394345,766.74611 -9.539802,54.1029"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="-71.624444" />
+    <path
+       inkscape:transform-center-x="-141.07262"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 150.46749,786.59395 -18.78974,51.62438"
+       id="path3804"
+       inkscape:connector-curvature="0"
+       inkscape:transform-center-y="-387.59386" />
+    <path
+       inkscape:transform-center-y="-406.20244"
+       inkscape:connector-curvature="0"
+       id="path3806"
+       d="m -76.394345,766.74611 9.539802,54.1029"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="71.624444" />
+    <path
+       inkscape:transform-center-x="141.07262"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m -150.46749,786.59395 18.78974,51.62438"
+       id="path3808"
+       inkscape:connector-curvature="0"
+       inkscape:transform-center-y="-387.59386" />
+    <path
+       style="fill:#ffb380;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -10,760 20,0 -10,40 -10,-40"
+       id="path3810"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+    <path
+       d="m 440,1200 a 440,440 0 1 1 -880,0 440,440 0 1 1 880,0 z"
+       sodipodi:ry="440"
+       sodipodi:rx="440"
+       sodipodi:cy="1200"
+       sodipodi:cx="0"
+       id="path3812"
+       style="opacity:0.6;fill:#808000;fill-opacity:0.48235294;stroke:none"
+       sodipodi:type="arc"
+       transform="translate(0,910)" />
+    <rect
+       style="opacity:0.6;fill:#ffb380;fill-opacity:0.48235294;stroke:#ffffff;stroke-width:5;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect3814"
+       width="125"
+       height="895"
+       x="-597.5"
+       y="752.5" />
+    <rect
+       y="752.5"
+       x="472.5"
+       height="895"
+       width="125"
+       id="rect3816"
+       style="opacity:0.6;fill:#ffb380;fill-opacity:0.48235294;stroke:#ffffff;stroke-width:5;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+  </g>
+</svg>
diff --git a/vfd-main/public/images/hud/roll.svg b/vfd-main/public/images/hud/roll.svg
new file mode 100644
index 0000000..93a9f90
--- /dev/null
+++ b/vfd-main/public/images/hud/roll.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1200"
+   height="1200"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="hud.svg"
+   viewBox="-600 600 1200 1200">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.70749999"
+     inkscape:cx="1028.6796"
+     inkscape:cy="816.93521"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showborder="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1033"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2987"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       inkscape:connector-curvature="0"
+       id="path3782"
+       d="m 380,1200 60,0"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m -440,1200 60,0"
+       id="path3012"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="M 0,760.06247 0,815"
+       id="path3786"
+       inkscape:connector-curvature="0"
+       inkscape:transform-center-y="-412.46877" />
+    <path
+       inkscape:transform-center-y="-357.20843"
+       inkscape:connector-curvature="0"
+       id="path3794"
+       d="M -219.96877,819.00292 -192.5,866.58022"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="206.23439" />
+    <path
+       inkscape:transform-center-y="-291.65947"
+       inkscape:connector-curvature="0"
+       id="path3796"
+       d="m -311.08281,888.91719 38.8467,38.8467"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="291.65946" />
+    <path
+       inkscape:transform-center-y="-291.65947"
+       inkscape:connector-curvature="0"
+       id="path3798"
+       d="m 311.08281,888.91719 -38.8467,38.8467"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="-291.65946" />
+    <path
+       inkscape:transform-center-y="-357.20843"
+       inkscape:connector-curvature="0"
+       id="path3800"
+       d="M 219.96877,819.00292 192.5,866.58022"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="-206.23439" />
+    <path
+       inkscape:transform-center-y="-406.20244"
+       inkscape:connector-curvature="0"
+       id="path3802"
+       d="m 76.394345,766.74611 -9.539802,54.1029"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="-71.624444" />
+    <path
+       inkscape:transform-center-x="-141.07262"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 150.46749,786.59395 -18.78974,51.62438"
+       id="path3804"
+       inkscape:connector-curvature="0"
+       inkscape:transform-center-y="-387.59386" />
+    <path
+       inkscape:transform-center-y="-406.20244"
+       inkscape:connector-curvature="0"
+       id="path3806"
+       d="m -76.394345,766.74611 9.539802,54.1029"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       inkscape:transform-center-x="71.624444" />
+    <path
+       inkscape:transform-center-x="141.07262"
+       style="fill:none;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m -150.46749,786.59395 18.78974,51.62438"
+       id="path3808"
+       inkscape:connector-curvature="0"
+       inkscape:transform-center-y="-387.59386" />
+    <path
+       style="fill:#ffb380;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -10,760 20,0 -10,40 -10,-40"
+       id="path3810"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>
diff --git a/vfd-main/public/stylesheets/main.css b/vfd-main/public/stylesheets/main.css
index 5430334..f254449 100644
--- a/vfd-main/public/stylesheets/main.css
+++ b/vfd-main/public/stylesheets/main.css
@@ -1,5 +1,6 @@
 html, body {
-	height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 body {
@@ -58,12 +59,10 @@ body {
 
 .d-column {
 	flex-direction: column;
-	height: 100%;
 }
 
 .d-row {
 	flex-direction: row;
-	width: 100%;
 }
 
 .d-above {
@@ -74,12 +73,8 @@ body {
 	flex: 1 1 30%;
 }
 
-.d-middle {
-	flex: 1 1 45%;
-}
-
-.d-right {
-	flex: 1 1 25%;
+.d-main {
+	flex: 1 1 70%;
 }
 
 .d-panel {