4 files changed, 122 insertions, 20 deletions
diff --git a/backend/app/views/index.scala.html b/backend/app/views/index.scala.html
index 7f12df8..654c2a1 100644
--- a/backend/app/views/index.scala.html
+++ b/backend/app/views/index.scala.html
@@ -1,11 +1,40 @@
-@main(""){
-	<span id='ct' ></span>
+@main("Main"){
 
-	<object id="attitude" type="image/svg+xml" data="@routes.Assets.at("images/instruments/attitude.svg")" width="300px" height="300px">Cannot load or display SVG image.</object>
+	<div class="row">
+		<div class="col-lg-2">
+			<div style="width: 100%; height: 450px; background-color: #000000; display: table;">
+				<div style="display: table-cell; text-align: center; vertical-align: middle;">no feed</div>
+			</div>
+		</div>
+		<div class="col-lg-6">
+			@panels.pfd()
+			<!-- <div style="width: 100%; height: 450px; background-color: #000000; display: table;">
+				<div style="display: table-cell; text-align: center; vertical-align: middle;">no feed</div>
+			</div> -->
+		</div>
+		<div class="col-lg-4">
+			station
+			<ul>
+				<li>server link</li>
+				<li>uav link</li>
+			</ul>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-lg-4">
+			uav
+		</div>
+		<div class="col-lg-4">
+			
+		</div>
+		<div class="col-lg-4">
+			@panels.eicas()
+		</div>
+	</div>
 
-	<object id="heading"  type="image/svg+xml" data="@routes.Assets.at("images/instruments/heading.svg")" width="200px" height="200px">Cannot load or display SVG image.</object>
 
-	<object id="altitude"  type="image/svg+xml" data="@routes.Assets.at("images/instruments/altitude.svg")" width="200px" height="200px">Cannot load or display SVG image.</object>
+
+	
 
 	<script type="text/javascript">
 
diff --git a/backend/app/views/main.scala.html b/backend/app/views/main.scala.html
index 4005beb..86f1384 100644
--- a/backend/app/views/main.scala.html
+++ b/backend/app/views/main.scala.html
@@ -2,14 +2,15 @@
 
 <!DOCTYPE html>
 
-<html>
+<html lang="en">
 <head>
-	<title>@title</title>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>VFD - @title</title>
+
 	<link rel="stylesheet" media="screen" href="@routes.Assets.at("lib/bootstrap/css/bootstrap.css")">
 	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
-	<script type="text/javascript" src="@routes.Assets.at("lib/vfd-frontend-fastopt.js")"></script>
-	<script type="text/javascript" src="@routes.Assets.at("lib/jquery/jquery.js")"></script>
-	<script type="text/javascript" src="@routes.Assets.at("lib/bootstrap/js/bootstrap.min.js")"></script>
 </head>
 <body>
 	<header>
@@ -35,21 +36,27 @@
 					</ul>
 					<ul class="nav navbar-nav navbar-right">
 						<li class="dropdown">
-          					<a href="#" class="dropdown-toggle" data-toggle="dropdown">options<b class="caret"></b></a>
-          					<ul class="dropdown-menu">
-            					<li>
-            						<form method="POST" action="">
-        								<button type="submit" style="width: 100%;" class="btn btn-default">Sign Out</button>
-      								</form>
-      							</li>		
-          					</ul>
-        				</li>
+							<a href="#" class="dropdown-toggle" data-toggle="dropdown">options<b class="caret"></b></a>
+							<ul class="dropdown-menu">
+								<li>
+									<form method="POST" action="">
+										<button type="submit" style="width: 100%;" class="btn btn-default">Sign Out</button>
+									</form>
+								</li>		
+							</ul>
+						</li>
 					</ul>
 				</div><!-- /.navbar-collapse -->
 			</div><!-- /.container-fluid -->
 		</nav>
 	</header>
-	@content
 
+	<div class="container-fluid">
+		@content
+	</div>
+
+	<script type="text/javascript" src="@routes.Assets.at("lib/vfd-frontend-fastopt.js")"></script>
+	<script type="text/javascript" src="@routes.Assets.at("lib/jquery/jquery.js")"></script>
+	<script type="text/javascript" src="@routes.Assets.at("lib/bootstrap/js/bootstrap.min.js")"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/backend/app/views/panels/eicas.scala.html b/backend/app/views/panels/eicas.scala.html
new file mode 100644
index 0000000..211adba
--- /dev/null
+++ b/backend/app/views/panels/eicas.scala.html
@@ -0,0 +1,35 @@
+@()
+
+@led(condition: String) = @{
+	"images/leds/" + (condition match {
+		case "error" => "red-on.svg"
+		case "warn" => "yellow-on.svg"
+		case "good" => "green-on.svg"
+		case "unknown" => "none.svg"
+		case _ => "a"
+	})
+}
+
+@instrument(name: String, condition: String, status: String) = {
+	<tr>
+		<td>@name</td>
+		<td>
+			<img src="@routes.Assets.at(led(condition))" alt="@condition" width="15px">
+		</td>
+		<td>
+			<span class="status @condition">
+				@status
+			</span>
+		</td>
+	</tr>
+}
+
+
+<!-- <table class="control-table">
+	@instrument("engine1", "unknown", "0 rpm")
+	@instrument("engine2", "unknown", "1000 rpm")
+	@instrument("engine3", "unknown", "2080 rpm")
+	@instrument("engine4", "unknown", "1000 rpm")
+	@instrument("battery", "unknown", "3000Wh")
+	@instrument("power", "unknown", "2000W")
+</table -->
+\ No newline at end of file
diff --git a/backend/app/views/panels/pfd.scala.html b/backend/app/views/panels/pfd.scala.html
new file mode 100644
index 0000000..9c89d6a
--- /dev/null
+++ b/backend/app/views/panels/pfd.scala.html
@@ -0,0 +1,31 @@
+@()
+
+@instrument(name: String) = {
+	@defining("images/instruments/" + name + ".svg") { location =>
+		<object id="@name" type="image/svg+xml" data="@routes.Assets.at(location)" width="100%">Error loading image.</object>
+	}
+}
+
+
+<div class="row">
+	<div class="col-lg-4">
+		
+	</div>
+	<div class="col-lg-4">
+		@instrument("attitude")
+	</div>
+	<div class="col-lg-4">
+		@instrument("altitude")
+	</div>
+</div>
+<div class="row">
+	<div class="col-lg-4">
+		
+	</div>
+	<div class="col-lg-4">
+		@instrument("heading")
+	</div>
+	<div class="col-lg-4">
+		@instrument("distance")
+	</div>
+</div>
+\ No newline at end of file