Merge branch 'master' of ssh://imaginaerraum.de:2201/Telos4/RoboRallyGUI

app.py

@@ -167,7 +167,7 @@ def hello_world():
     if request.method == 'GET':
         robot = players[player_id].robot
         if robot is not None:
-            robot_pos = (robot.x, robot.y)
+            robot_pos = (robot.x, robot.y, robot.orientation)
         else:
             robot_pos = None
         return render_template('drag_example.html', cmds=player_hand, player_id=player_id, robot_pos=robot_pos)

static/style.css

@@ -18,6 +18,30 @@
     cursor: move;
 }
 
+.rotate90 {
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+.rotate180 {
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.rotate270 {
+    -webkit-transform: rotate(270deg);
+    -moz-transform: rotate(270deg);
+    -o-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    transform: rotate(270deg);
+}
+
 .card0 { left: 0; top: 0;  background-color: #E74C3C; }
 .card1 { left: 100px; top: 0; background-color: #8E44AD; }
 .card2 { left: 200px; top: 0; background-color: #5DADE2; }

templates/drag_example.html

@@ -26,6 +26,28 @@
 
     </div>
 
+    <div class="row">
+    {% if robot_pos is none %}
+        <label for="inputRobotX">X:</label>
+        <input type="number" id="inputRobotX" name="robot_x" min="1" max="12" value="5">
+
+        <label for="inputRobotY">Y:</label>
+        <input type="number" id="inputRobotY" name="robot_y" min="1" max="6" value="3">
+
+        <img id="orientation" src="/static/orientation.png" alt="0">
+    {% else %}
+        <label for="inputRobotX">X:</label>
+        <input type="number" id="inputRobotX" name="robot_x" min="1" max="12" value="{{ robot_pos[0] }}" readonly>
+
+        <label for="inputRobotY">Y:</label>
+        <input type="number" id="inputRobotY" name="robot_y" min="1" max="6" value="{{ robot_pos[1] }}" readonly>
+
+        <img id="orientation" src="/static/orientation.png" name="{{ robot_pos[2] }}">
+
+    {% endif %}
+    </div>
+
+
 </div><!-- container -->
 
 <input id="btnSubmit" type="submit" value="Befehle abschicken" />
@@ -43,7 +65,29 @@
     var box = $(".box");
     var mainCanvas = $(".main-canvas");
 
+    var orientation_icon = $("#orientation");
+
+    orientation_icon.click(function () {
+        if (this.alt === "0") {
+            this.alt = "90";
+        }
+        else if (this.alt === "90") {
+            this.alt = "180";
+        }
+        else if (this.alt === "180") {
+            this.alt = "270";
+        }
+        else if (this.alt === "270") {
+            this.alt = "0";
+        }
+       $(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
+    });
+
+
     $("#btnSubmit").click(function () {
+            var robot_x = $("#inputRobotX");
+            var robot_y = $("#inputRobotY");
+
            //alert("button");
             for (i = 0; i < 9; i++) {
                 var c = document.getElementsByClassName("box card" + String(i));
@@ -51,10 +95,9 @@
                     $(c).hide();
                 }
             }
-
             $(please_wait).show();
 
-            $.post("/send_cmds", "", function (data) {
+            $.post("/send_cmds", { "x" : robot_x.val(), "y": robot_y.val()}, function (data) {
                 console.log(data);
                 if (data === 'OK') {
                     location.reload();  // reload page to get new cards for next round