From 369a4c2b75e9b280f01df7cef8ed84ef32e9fb34 Mon Sep 17 00:00:00 2001
From: Sem van der Hoeven <semmer99@gmail.com>
Date: Mon, 29 May 2023 13:19:56 +0200
Subject: [PATCH] add buttons

---
 api/public/css/stylesheet.css |  5 +++++
 api/views/index.ejs           | 19 +++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/api/public/css/stylesheet.css b/api/public/css/stylesheet.css
index 314a3660..ecb9792f 100644
--- a/api/public/css/stylesheet.css
+++ b/api/public/css/stylesheet.css
@@ -48,4 +48,9 @@ body {
 }
 #arm_disarm {
     float: right;
+}
+
+#button_stop {
+    background-color: red;
+    color: white;
 }
\ No newline at end of file
diff --git a/api/views/index.ejs b/api/views/index.ejs
index 5146e3d3..b275f848 100644
--- a/api/views/index.ejs
+++ b/api/views/index.ejs
@@ -15,13 +15,28 @@
         <div class="mainvideo">
             <p>Camera view:</p>
             <div id="connectedbuttons">
+                <div id="connectedstatus">
+                    <p>Connected: <%- api_connected %></p>
+                </div>
                 <div id="buttons">
                     <button id="take_picture">Take picture</button>
                     <br>
                     <button id="arm_disarm">Arm/Disarm</button>
                 </div>
-                <div id="connectedstatus">
-                    <p>Connected: <%- api_connected %></p>
+            </div>
+            <div id="controls">
+                <h2>Controls</h2>
+                <div id="buttons">
+                    <button id="button_turnleft">Turn left</button>
+                    <button id="button_turnright">Turn right</button>
+                    <button id="button_up">Up</button>
+                    <button id="button_down">Down</button>
+                    <button id="button_forward">Forward</button>
+                    <button id="button_backward">Backward</button>
+                    <button id="button_left">Left</button>
+                    <button id="button_right">Right</button>
+                    <button id="button_stop"><strong>Emergency Stop</strong></button>
+
                 </div>
             </div>
         </div>