1 files changed, 54 insertions, 0 deletions
diff --git a/mavigator-cockpit/src/main/scala/mavigator/dashboard/ui/instruments/SvgInstrument.scala b/mavigator-cockpit/src/main/scala/mavigator/dashboard/ui/instruments/SvgInstrument.scala
new file mode 100644
index 0000000..28c8d65
--- /dev/null
+++ b/mavigator-cockpit/src/main/scala/mavigator/dashboard/ui/instruments/SvgInstrument.scala
@@ -0,0 +1,54 @@
+package mavigator.dashboard.ui.instruments
+
+
+import org.scalajs.dom
+import org.scalajs.dom.html
+
+import scalatags.JsDom.all._
+
+import mavigator.util.Environment
+
+/** An instrument backed by an SVG image. */
+trait SvgInstrument[A] extends Instrument[A] {
+  
+  /** SVG object element that contains the rendered instrument */
+  val element: html.Object
+  
+  /** Retrieves an element of the underlying SVG document by ID. */
+  protected def part(id: String) = element.contentDocument.getElementById(id).asInstanceOf[html.Element]
+  
+  /** Movable parts of the instrument */
+  protected def moveable: Seq[html.Element]
+  
+  /** Called when element has been loaded. */
+  protected def load(event: dom.Event): Unit = {
+    for (part <- moveable) {
+      part.style.transition = "transform 50ms ease-out"
+    }
+    ready()
+  }
+  
+  element.addEventListener("load", (e: dom.Event) => load(e))
+}
+
+/** Contains helpers for SVG instruments. */
+object SvgInstrument {
+
+  /** Retrieves an SVG object element by its instrument's name. */
+  def svgObject(name: String)(implicit app: Environment): html.Object = {
+    val path = app.asset("images/instruments/" + name + ".svg")
+    `object`(`type` := "image/svg+xml", "data".attr := path, width := 100.pct)(
+      "Error loading instrument " + name).render
+  }
+
+  /** Applies translation styling to an element. */
+  def translate(elem: html.Element, x: Int, y: Int): Unit = {
+    elem.style.transform = "translate(" + x + "px, " + y + "px)";
+  }
+
+  /** Applies rotation styling to an element. */
+  def rotate(elem: html.Element, rad: Double): Unit = {
+    elem.style.transform = "rotateZ(" + rad + "rad)";
+  }
+
+}