first commit

app.py

@@ -1,9 +1,9 @@
 import os
+import json
 import sqlite3
 
 from flask import Flask, request, jsonify, render_template
 from flask_sqlalchemy import SQLAlchemy
-from sqlalchemy import PickleType
 
 
 basedir = os.path.abspath(os.path.dirname(__file__))
@@ -15,7 +15,7 @@ db = SQLAlchemy(app)
 class Tracker(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     distance = db.Column(db.Integer, nullable=False)
-    data = db.Column(PickleType(), nullable=False)
+    data = db.Column(db.Text, nullable=False)
 
 
 @app.route('/', methods=['GET'])
@@ -28,9 +28,7 @@ def index():
 def upload_data():
     data = request.json
     print(data)
-    record = Tracker(distance=data["distance"], data=data["data"])
+    record = Tracker(distance=data["distance"], data=json.dumps(data["data"]))
-
-    print(sum(item[0] for item in data["data"]))
     db.session.add(record)
     db.session.commit()
     return jsonify({"message": "Data recorded"}), 200

get_mouse_tracker.py

@@ -0,0 +1,17 @@
+
+import sqlite3
+import json
+
+conn = sqlite3.connect('database.db')
+
+cursor = conn.cursor()
+cursor.execute("SELECT * FROM Tracker")
+
+rows = cursor.fetchall()
+
+for index, distance, mouse_tracker in rows:
+    print(f"Index: {index}, Distance: {distance}")
+    print(f"Mouse tracker: {json.loads(mouse_tracker)}")
+
+# 关闭连接
+conn.close()

templates/index.html

@@ -7,7 +7,6 @@
 </head>
 
 <body>
-
   <style>
     #targetSlider {
       position: relative;
@@ -28,6 +27,15 @@
       width: 500px;
     }
 
+    #dragContainerTarget {
+      position: relative;
+      display: block;
+      background: #e8e8e8;
+      width: 500px;
+      height: 33px;
+      border: 2px solid #e8e8e8;
+    }
+
     /* 滑动控件容器,灰色背景 */
     #dragContainer {
       position: relative;
@@ -65,35 +73,43 @@
       cursor: move;
     }
 
+    #dragTargetHandler {
+      position: absolute;
+      width: 40px;
+      height: 100%;
+      cursor: move;
+    }
+
     /* 滑块初始背景 */
     .dragHandlerBg {
       background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
     }
 
-
-    /* 验证成功时的滑块背景 有√*/
     .dragHandlerOkBg {
       background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
     }
   </style>
 
-
   <body>
-    <div id="targetSlider">
+    <div id="dragContainerTarget">
-      <input id="targetInput" type="range" min="1" max="500" value="0">
+      <div id="dragTargetHandler" class="dragHandlerBg"></div>
     </div>
+
     <div id="dragContainer">
       <div id="dragTarget"></div>
       <div id="dragBg"></div>
       <div id="dragText"></div>
       <div id="dragHandler" class="dragHandlerBg"></div>
     </div>
-    <!-- <div><input class="btn" id="download_track" type="submit" value="导出记录" onclick="downloadTracks()" /></div> -->
+    <div>
-    <!-- 上传数据成功 通知框 -->
+      <input type="text" id="inputDistance" value="50" />
+    </div>
+    <button id="submit" onclick="">提交</button>
     <div id="success" style="display: none;">
       <div style="background-color: #7ac23c; color: white; text-align: center; padding: 10px; border-radius: 5px;">
         数据上载成功
       </div>
+    </div>
   </body>
 
   <script>
@@ -101,11 +117,45 @@
     let startTime = null;
     let startX = null;
     let startY = null;
-    let inputDistance = 30;
+    let dargX = null;
-    let mouseDataList = {}
+    let postMouseData = [];
+    let dragStartX = 0;
+
+    var dragContainer = document.getElementById("dragContainer");
+    var dragContainerTarget = document.getElementById("dragContainerTarget");
+    var dragBg = document.getElementById("dragBg");
+    var dragText = document.getElementById("dragText");
+    var dragHandler = document.getElementById("dragHandler");
+    var dragTargetHandler = document.getElementById("dragTargetHandler");
 
 
-    // 发起一个post请求， 将mouseDataList发送到后端
+    dragTargetHandler.style.left = 50 + "px";
+
+    document.getElementById('inputDistance').addEventListener('input', function () {
+      var inputDistance = parseInt(document.getElementById('inputDistance').value);
+      dragTargetHandler.style.left = inputDistance + "px";
+    });
+
+    document.getElementById('submit').addEventListener('click', function () {
+      var distance = parseInt(document.getElementById('inputDistance').value);
+      var data = postMouseData;
+      var xhr = new XMLHttpRequest();
+      xhr.open("POST", "/", true);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      var payload = {
+        distance: distance,
+        data: data
+      };
+      xhr.send(JSON.stringify(payload));
+      document.getElementById("success").style.display = "block";
+      setTimeout(() => {
+        document.getElementById("success").style.display = "none";
+      }, 1000);
+
+      //刷新网页
+      window.location.reload();
+    });
+
     function sendMouseData(distance, data) {
       var xhr = new XMLHttpRequest();
       xhr.open("POST", "/", true);
@@ -115,7 +165,6 @@
         data: data
       };
       xhr.send(JSON.stringify(payload));
-      // 展示上载成功的通知框
       document.getElementById("success").style.display = "block";
       setTimeout(() => {
         document.getElementById("success").style.display = "none";
@@ -123,72 +172,62 @@
     }
 
 
-    //加载（事件会在页面加载完成后触发）
+    dragStartX = dragContainer.getBoundingClientRect().left;
-    window.onload = function () {
-      var isVertifySucc = false;
-      var dragContainer = document.getElementById("dragContainer");
-      var dragBg = document.getElementById("dragBg");
-      var dragText = document.getElementById("dragText");
-      var dragHandler = document.getElementById("dragHandler");
-      var targetInput = document.getElementById("targetInput");
-      var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
 
-      dragText.textContent = "拖动滑块验证";
+    dragText.textContent = "拖动滑块验证";
-      dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
+    dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
 
-      function onRecordTrace(e) {
+    function onRecordTrace(e) {
-        if (startTime === null) {
+      if (startTime === null) {
-          startTime = Date.now();
+        startTime = Date.now();
-          startX = e.clientX;
+        startX = e.clientX;
-          startY = e.clientY;
+        startY = e.clientY;
-        }
+      }
-        var currentTime = Date.now()
+      var currentTime = Date.now()
-        let timeElapsed = currentTime - startTime;
+      let timeElapsed = currentTime - startTime;
-        startTime = currentTime;
+      startTime = currentTime;
-        let offsetX = e.clientX - startX;
+      let offsetX = e.clientX - startX;
-        let offsetY = e.clientY - startY;
+      let offsetY = e.clientY - startY;
-        mouseData.push([offsetX, offsetY, timeElapsed]);
+      mouseData.push([offsetX, offsetY, timeElapsed]);
-      };
+    };
 
-      //选中滑块
+    function onDragHandlerMouseDown() {
-      function onDragHandlerMouseDown() {
+
-        targetInput.value = inputDistance + dragHandler.clientWidth / 2;
+      document.addEventListener("mousemove", onRecordTrace);
-        document.addEventListener("mousemove", onRecordTrace);
+      document.addEventListener("mousemove", onDragHandlerMouseMove);
-        document.addEventListener("mousemove", onDragHandlerMouseMove);
+      document.addEventListener("mouseup", onDragHandlerMouseUp);
-        document.addEventListener("mouseup", onDragHandlerMouseUp);
+    }
+
+    function onDragHandlerMouseMove() {
+      if (dargX === null) {
+        dargX = event.clientX
       }
 
-      function onDragHandlerMouseMove() {
+      var offsetX = event.clientX - dargX;
-        var left = event.clientX - dragHandler.clientWidth / 2;
+      if (Math.abs(offsetX - parseInt(dragTargetHandler.style.left, 10)) < 1) {
-        if (left < 0) {
+        dragContainerTarget.style.background = '#7ac23c';
-          left = 0;
+      } else {
-        } else if (Math.abs(left + dragHandler.clientWidth / 2 - targetInput.value) < 2) {
+        dragContainerTarget.style.background = '#e8e8e8';
-          targetSlider.style.background = '#7ac23c';
-        } else {
-          targetSlider.style.background = '#FFF';
-        }
-        dragHandler.style.left = left + "px";
-        dragBg.style.width = dragHandler.style.left;
-      }
-
-      function onDragHandlerMouseUp() {
-        document.removeEventListener("mousemove", onDragHandlerMouseMove);
-        document.removeEventListener("mouseup", onDragHandlerMouseUp);
-        document.removeEventListener("mouseup", onRecordTrace);
-        // sendMouseData(inputDistance, mouseData);
-        console.log(inputDistance);
-        console.log(mouseData);
-        targetSlider.style.background = '#FFF';
-        dragHandler.style.left = 0;
-        dragBg.style.width = 0;
-        startTime = null;
-        inputDistance += 2;
-        mouseData = [];
-        startX = null;
-        startY = null;
-
       }
+      dragHandler.style.left = offsetX + "px";
+      dragBg.style.width = dragHandler.style.left;
+    }
 
+    function onDragHandlerMouseUp() {
+      document.removeEventListener("mousemove", onRecordTrace);
+      document.removeEventListener("mousemove", onDragHandlerMouseMove);
+      document.removeEventListener("mouseup", onDragHandlerMouseUp);
+      console.log(parseInt(document.getElementById('inputDistance').value));
+      console.log(mouseData);
+      console.log(mouseData[mouseData.length - 1]);
+      postMouseData = mouseData;
+      dragContainerTarget.style.background = '#e8e8e8';
+      dragHandler.style.left = 0;
+      dragBg.style.width = 0;
+      startTime = null;
+      mouseData = [];
+      startX = null;
+      startY = null;
     }
   </script>