first commit
This commit is contained in:
jianxin committed
1 parent
2e4edfeb42
commit
2063d3d6d4
5 files changed
+98
-44
No files matched your search
Binary file not shown.
@@ -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"])
|
||||
|
||||
print(sum(item[0] for item in data["data"]))
|
||||
record = Tracker(distance=data["distance"], data=json.dumps(data["data"]))
|
||||
db.session.add(record)
|
||||
db.session.commit()
|
||||
return jsonify({"message": "Data recorded"}), 200
|
||||
BIN
Binary file not shown.
@@ -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()
|
||||
+78
-39
@@ -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">
|
||||
<input id="targetInput" type="range" min="1" max="500" value="0">
|
||||
<div id="dragContainerTarget">
|
||||
<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 mouseDataList = {}
|
||||
let dargX = null;
|
||||
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,15 +172,7 @@
|
||||
}
|
||||
|
||||
|
||||
//加载（事件会在页面加载完成后触发）
|
||||
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;
|
||||
dragStartX = dragContainer.getBoundingClientRect().left;
|
||||
|
||||
dragText.textContent = "拖动滑块验证";
|
||||
dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
|
||||
@@ -150,45 +191,43 @@
|
||||
mouseData.push([offsetX, offsetY, timeElapsed]);
|
||||
};
|
||||
|
||||
//选中滑块
|
||||
function onDragHandlerMouseDown() {
|
||||
targetInput.value = inputDistance + dragHandler.clientWidth / 2;
|
||||
|
||||
document.addEventListener("mousemove", onRecordTrace);
|
||||
document.addEventListener("mousemove", onDragHandlerMouseMove);
|
||||
document.addEventListener("mouseup", onDragHandlerMouseUp);
|
||||
}
|
||||
|
||||
function onDragHandlerMouseMove() {
|
||||
var left = event.clientX - dragHandler.clientWidth / 2;
|
||||
if (left < 0) {
|
||||
left = 0;
|
||||
} else if (Math.abs(left + dragHandler.clientWidth / 2 - targetInput.value) < 2) {
|
||||
targetSlider.style.background = '#7ac23c';
|
||||
} else {
|
||||
targetSlider.style.background = '#FFF';
|
||||
if (dargX === null) {
|
||||
dargX = event.clientX
|
||||
}
|
||||
dragHandler.style.left = left + "px";
|
||||
|
||||
var offsetX = event.clientX - dargX;
|
||||
if (Math.abs(offsetX - parseInt(dragTargetHandler.style.left, 10)) < 1) {
|
||||
dragContainerTarget.style.background = '#7ac23c';
|
||||
} else {
|
||||
dragContainerTarget.style.background = '#e8e8e8';
|
||||
}
|
||||
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);
|
||||
document.removeEventListener("mouseup", onRecordTrace);
|
||||
// sendMouseData(inputDistance, mouseData);
|
||||
console.log(inputDistance);
|
||||
console.log(parseInt(document.getElementById('inputDistance').value));
|
||||
console.log(mouseData);
|
||||
targetSlider.style.background = '#FFF';
|
||||
console.log(mouseData[mouseData.length - 1]);
|
||||
postMouseData = mouseData;
|
||||
dragContainerTarget.style.background = '#e8e8e8';
|
||||
dragHandler.style.left = 0;
|
||||
dragBg.style.width = 0;
|
||||
startTime = null;
|
||||
inputDistance += 2;
|
||||
mouseData = [];
|
||||
startX = null;
|
||||
startY = null;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in new issue
Block a user