[web] update html pages to make tests easier

titusfortner · titusfortner · commit e695723bcee8 · 2022-05-25T01:15:06.000-05:00
diff --git a/common/src/web/mouse_interaction.html b/common/src/web/mouse_interaction.html
@@ -0,0 +1,80 @@
+<html>
+  <head>
+    <title>BasicMouseInterfaceTest</title>
+
+    <style>
+      div.solidborder { border-style:solid; border-width:1px;}
+      #draggable { width: 60px; height: 60px; padding: 0.5em; margin: 10px; }
+      #droppable { width: 75px; height: 75px; padding: 0.5em; margin: 10px; }
+    </style>
+
+  <link type="text/css" href="css/ui-lightness/jquery-ui-1.12.1.min.css" rel="stylesheet" />
+  <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
+  <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"></script>
+  <script type="text/javascript">
+    jQuery(document).ready(function(){
+        $('#mousetracker').mousemove(function(e){
+          xPos = e.pageX - this.offsetLeft;
+          yPos = e.pageY - this.offsetTop;
+          $('#status').html(xPos + ', ' + yPos);
+          });
+        })
+
+</script>
+  <script type="text/javascript">
+    function clickStatus(message) {
+      document.getElementById('click-status').innerHTML = message;
+    }
+    function moveStatus(message) {
+      document.getElementById('move-status').innerHTML = message;
+    }
+    function dropStatus(message) {
+      document.getElementById('drop-status').innerHTML = message;
+    }
+  </script>
+  <script type="text/javascript">
+    $(function () {
+      $("#draggable").draggable();
+      $("#droppable").droppable({
+        drop: function (event, ui) { dropStatus("Dropped!") }
+      });
+    });
+  </script>
+
+  </head>
+  <body>
+  <h2>Mouse Clicks</h2>
+
+  <p><a href="resultPage.html" id="click">Click for Results Page</a></p>
+
+  <div>
+   <input type="text" id="presses"
+    onfocus="clickStatus('focus')"
+    oncontextmenu="clickStatus('contextClick')"
+    ondblclick="clickStatus('doubleClick')"
+    placeholder="Click"/>&nbsp;&nbsp;
+
+    <strong id="click-status">&nbsp;</strong>
+  </div>
+
+  <h2>Drag & Drop</h2>
+
+  <strong id="drop-status">&nbsp;</strong>
+  <div id="draggable" class="ui-widget-content">Drag this</div>
+
+  <div id="droppable" class="ui-widget-header">Drop here</div>
+
+  <h2>Mouse Position</h2>
+
+  <div>
+    <input type="button" id="hover" onmouseleave="moveStatus('')" onmouseover="moveStatus('hovered')" value="Hover"/>
+    <strong id="move-status">&nbsp;</strong>
+  </div>
+
+  <p><strong id="status">0, 0</strong></p>
+  <div id="mousetracker" class="solidborder" style="position: absolute; height: 200px; width: 200px;">
+    Move mouse here.
+  </div>
+
+  </body>
+</html>
diff --git a/common/src/web/pointerActionsPage.html b/common/src/web/pointerActionsPage.html
@@ -32,11 +32,11 @@
         var els = {};
         var allEvents = { events: [] };
         function displayMessage(message) {
-            document.getElementById("events").innerHTML = "<p>" + message + "</p>";
+            document.getElementById("events").innerHTML += "<p>" + message + "</p>";
         }
 
-        function appendMessage(message) {
-            document.getElementById("events").innerHTML += "<p>" + message + "</p>";
+        function appendMessage(type, message) {
+          document.getElementById("events").innerHTML += "<p class='" + type + "'>" + message + "</p>";
         }
 
         function recordPointerEvent(event) {
@@ -65,7 +65,7 @@
                 "altitudeAngle": event.altitudeAngle,
                 "azimuthAngle": event.azimuthAngle
             });
-            appendMessage(event.type + " " +
+            appendMessage(event.type, event.type + " " +
                 "button: " + event.button + ", " +
                 "pageX: " + event.pageX + ", " +
                 "pageY: " + event.pageY + ", " +
diff --git a/common/src/web/single_text_input.html b/common/src/web/single_text_input.html
@@ -4,7 +4,7 @@
 </head>
 <body>
 <form action="#">
-    <input type="text" id="textInput" />
+    <input type="text" id="textInput" autofocus/>
 </form>
 </body>
 </html>
