api/public/css/stylesheet.css

@@ -28,4 +28,23 @@ body {
     height: 400px;
     border: 1px solid red;
     padding: 10px;
+}
+
+#connectedbuttons {
+    overflow: auto;
+}
+
+#buttons {
+    float: left;
+}
+
+#connectedstatus {
+    float:left;
+}
+
+#take_picture {
+    float:right;
+}
+#arm_disarm {
+    float: right;
 }

api/views/index.ejs

@@ -15,10 +15,26 @@
         <div class="mainvideo">
             <p>Camera view:</p>
             <p><%- api_connected %></p>
+            <div id="connectedbuttons">
+                <div id="buttons">
+                    <button id="take_picture">Take picture</button>
+                    <button id="arm_disarm">Arm/Disarm</button>
+                </div>
+                <div id="connectedstatus">
+                    <p>Connected: <%- api_connected %></p>
+                </div>
+            </div>
         </div>
         <div class="lastpicture">
             <p>Last picture:</p>
             <img id="picture">
+            <h2>Drone status</h2>
+            <p id="batterypercentage">Battery percentage</p>
+            <p id="cpuload">CPU load</p>
+            <p id="speed">Current speed</p>
+            <p id="position">Current position</p>
+            <br>
+            <p id="failsafe">Failsafe status</p>
         </div>
     </div>
 </body>