pull/15/head
lxy 2 years ago
parent 6e415ef424
commit d61fa87677

@ -0,0 +1,3 @@
# Default ignored files
/shelf/
/workspace.xml

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<settings>
<option name="USE_PROJECT_PROFILE" value="false" />
<version value="1.0" />
</settings>
</component>

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/src.iml" filepath="$PROJECT_DIR$/.idea/src.iml" />
</modules>
</component>
</project>

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="RunConfigurationProducerService">
<option name="ignoredProducers">
<set>
<option value="com.android.tools.idea.compose.preview.runconfiguration.ComposePreviewRunConfigurationProducer" />
</set>
</option>
</component>
</project>

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="PYTHON_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>

Binary file not shown.

@ -0,0 +1,201 @@
(function() {
/*
Copyright The Closure Library Authors.
SPDX-License-Identifier: Apache-2.0
*/
'use strict';
function h(a) {
var c = 0;
return function() {
return c < a.length ? {
done: !1,
value: a[c++]
} : {
done: !0
}
}
}
var l = "function" == typeof Object.defineProperties ? Object.defineProperty : function(a, c, b) {
if (a == Array.prototype || a == Object.prototype) return a;
a[c] = b.value;
return a
};
function m(a) {
a = ["object" == typeof globalThis && globalThis, a, "object" == typeof window && window, "object" == typeof self && self, "object" == typeof global && global];
for (var c = 0; c < a.length; ++c) {
var b = a[c];
if (b && b.Math == Math) return b
}
throw Error("Cannot find global object");
}
var n = m(this);
function p(a, c) {
if (c) a: {
var b = n;a = a.split(".");
for (var d = 0; d < a.length - 1; d++) {
var e = a[d];
if (!(e in b)) break a;
b = b[e]
}
a = a[a.length - 1];d = b[a];c = c(d);c != d && null != c && l(b, a, {
configurable: !0,
writable: !0,
value: c
})
}
}
function q(a) {
var c = "undefined" != typeof Symbol && Symbol.iterator && a[Symbol.iterator];
return c ? c.call(a) : {
next: h(a)
}
}
var r = "function" == typeof Object.assign ? Object.assign : function(a, c) {
for (var b = 1; b < arguments.length; b++) {
var d = arguments[b];
if (d)
for (var e in d) Object.prototype.hasOwnProperty.call(d, e) && (a[e] = d[e])
}
return a
};
p("Object.assign", function(a) {
return a || r
});
p("Array.prototype.fill", function(a) {
return a ? a : function(c, b, d) {
var e = this.length || 0;
0 > b && (b = Math.max(0, e + b));
if (null == d || d > e) d = e;
d = Number(d);
0 > d && (d = Math.max(0, e + d));
for (b = Number(b || 0); b < d; b++) this[b] = c;
return this
}
});
function t(a) {
return a ? a : Array.prototype.fill
}
p("Int8Array.prototype.fill", t);
p("Uint8Array.prototype.fill", t);
p("Uint8ClampedArray.prototype.fill", t);
p("Int16Array.prototype.fill", t);
p("Uint16Array.prototype.fill", t);
p("Int32Array.prototype.fill", t);
p("Uint32Array.prototype.fill", t);
p("Float32Array.prototype.fill", t);
p("Float64Array.prototype.fill", t);
var u = this || self;
function v(a, c) {
a = a.split(".");
var b = u;
a[0] in b || "undefined" == typeof b.execScript || b.execScript("var " + a[0]);
for (var d; a.length && (d = a.shift());) a.length || void 0 === c ? b[d] && b[d] !== Object.prototype[d] ? b = b[d] : b = b[d] = {} : b[d] = c
};
var w = {
color: "white",
lineWidth: 4,
radius: 6,
visibilityMin: .5
};
function x(a) {
a = a || {};
return Object.assign(Object.assign(Object.assign({}, w), {
fillColor: a.color
}), a)
}
function y(a, c) {
return a instanceof Function ? a(c) : a
}
function z(a, c, b) {
return Math.max(Math.min(c, b), Math.min(Math.max(c, b), a))
}
v("clamp", z);
v("drawLandmarks", function(a, c, b) {
if (c) {
b = x(b);
a.save();
var d = a.canvas,
e = 0;
c = q(c);
for (var f = c.next(); !f.done; f = c.next())
if (f = f.value, void 0 !== f && (void 0 === f.visibility || f.visibility > b.visibilityMin)) {
a.fillStyle = y(b.fillColor, {
index: e,
from: f
});
a.strokeStyle = y(b.color, {
index: e,
from: f
});
a.lineWidth = y(b.lineWidth, {
index: e,
from: f
});
var g = new Path2D;
g.arc(f.x * d.width, f.y * d.height, y(b.radius, {
index: e,
from: f
}), 0, 2 * Math.PI);
a.fill(g);
a.stroke(g);
++e
} a.restore()
}
});
v("drawConnectors", function(a, c, b, d) {
if (c && b) {
d = x(d);
a.save();
var e = a.canvas,
f = 0;
b = q(b);
for (var g = b.next(); !g.done; g = b.next()) {
var k = g.value;
a.beginPath();
g = c[k[0]];
k = c[k[1]];
g && k && (void 0 === g.visibility || g.visibility > d.visibilityMin) && (void 0 === k.visibility || k.visibility > d.visibilityMin) && (a.strokeStyle = y(d.color, {
index: f,
from: g,
to: k
}), a.lineWidth = y(d.lineWidth, {
index: f,
from: g,
to: k
}), a.moveTo(g.x * e.width, g.y * e.height), a.lineTo(k.x * e.width, k.y * e.height));
++f;
a.stroke()
}
a.restore()
}
});
v("drawRectangle", function(a, c, b) {
b = x(b);
a.save();
var d = a.canvas;
a.beginPath();
a.lineWidth = y(b.lineWidth, {});
a.strokeStyle = y(b.color, {});
a.fillStyle = y(b.fillColor, {});
a.translate(c.xCenter * d.width, c.yCenter * d.height);
a.rotate(c.rotation * Math.PI / 180);
a.rect(-c.width / 2 * d.width, -c.height / 2 * d.height, c.width * d.width, c.height * d.height);
a.translate(-c.xCenter * d.width, -c.yCenter * d.height);
a.stroke();
a.fill();
a.restore()
});
v("lerp", function(a, c, b, d, e) {
return z(d * (1 - (a - c) / (b - c)) + e * (1 - (b - a) / (b - c)), d, e)
});
}).call(this);

@ -0,0 +1,194 @@
var Module = typeof createMediapipeSolutionsPackedAssets !== 'undefined' ? createMediapipeSolutionsPackedAssets : {};
if (!Module.expectedDataFileDownloads) {
Module.expectedDataFileDownloads = 0;
}
Module.expectedDataFileDownloads++;
(function() {
// When running as a pthread, FS operations are proxied to the main thread, so we don't need to
// fetch the .data bundle on the worker
if (Module['ENVIRONMENT_IS_PTHREAD']) return;
var loadPackage = function(metadata) {
var PACKAGE_PATH = '';
if (typeof window === 'object') {
PACKAGE_PATH = window['encodeURIComponent'](window.location.pathname.toString().substring(0, window.location.pathname.toString().lastIndexOf('/')) + '/');
} else if (typeof process === 'undefined' && typeof location !== 'undefined') {
// web worker
PACKAGE_PATH = encodeURIComponent(location.pathname.toString().substring(0, location.pathname.toString().lastIndexOf('/')) + '/');
}
var PACKAGE_NAME = 'blaze-out/k8-opt/genfiles/third_party/mediapipe/web/solutions/hands/hands_solution_packed_assets.data';
var REMOTE_PACKAGE_BASE = 'hands_solution_packed_assets.data';
if (typeof Module['locateFilePackage'] === 'function' && !Module['locateFile']) {
Module['locateFile'] = Module['locateFilePackage'];
err('warning: you defined Module.locateFilePackage, that has been renamed to Module.locateFile (using your locateFilePackage for now)');
}
var REMOTE_PACKAGE_NAME = Module['locateFile'] ? Module['locateFile'](REMOTE_PACKAGE_BASE, '') : REMOTE_PACKAGE_BASE;
var REMOTE_PACKAGE_SIZE = metadata['remote_package_size'];
var PACKAGE_UUID = metadata['package_uuid'];
function fetchRemotePackage(packageName, packageSize, callback, errback) {
if (typeof process === 'object' && typeof process.versions === 'object' && typeof process.versions.node === 'string') {
require('fs').readFile(packageName, function(err, contents) {
if (err) {
errback(err);
} else {
callback(contents.buffer);
}
});
return;
}
var xhr = new XMLHttpRequest();
xhr.open('GET', packageName, true);
xhr.responseType = 'arraybuffer';
xhr.onprogress = function(event) {
var url = packageName;
var size = packageSize;
if (event.total) size = event.total;
if (event.loaded) {
if (!xhr.addedTotal) {
xhr.addedTotal = true;
if (!Module.dataFileDownloads) Module.dataFileDownloads = {};
Module.dataFileDownloads[url] = {
loaded: event.loaded,
total: size
};
} else {
Module.dataFileDownloads[url].loaded = event.loaded;
}
var total = 0;
var loaded = 0;
var num = 0;
for (var download in Module.dataFileDownloads) {
var data = Module.dataFileDownloads[download];
total += data.total;
loaded += data.loaded;
num++;
}
total = Math.ceil(total * Module.expectedDataFileDownloads/num);
if (Module['setStatus']) Module['setStatus']('Downloading data... (' + loaded + '/' + total + ')');
} else if (!Module.dataFileDownloads) {
if (Module['setStatus']) Module['setStatus']('Downloading data...');
}
};
xhr.onerror = function(event) {
throw new Error("NetworkError for: " + packageName);
}
xhr.onload = function(event) {
if (xhr.status == 200 || xhr.status == 304 || xhr.status == 206 || (xhr.status == 0 && xhr.response)) { // file URLs can return 0
var packageData = xhr.response;
callback(packageData);
} else {
throw new Error(xhr.statusText + " : " + xhr.responseURL);
}
};
xhr.send(null);
};
function handleError(error) {
console.error('package error:', error);
};
var fetchedCallback = null;
var fetched = Module['getPreloadedPackage'] ? Module['getPreloadedPackage'](REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE) : null;
if (!fetched) fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, function(data) {
if (fetchedCallback) {
fetchedCallback(data);
fetchedCallback = null;
} else {
fetched = data;
}
}, handleError);
function runWithFS() {
function assert(check, msg) {
if (!check) throw msg + new Error().stack;
}
Module['FS_createPath']("/", "third_party", true, true);
Module['FS_createPath']("/third_party", "mediapipe", true, true);
Module['FS_createPath']("/third_party/mediapipe", "modules", true, true);
Module['FS_createPath']("/third_party/mediapipe/modules", "palm_detection", true, true);
Module['FS_createPath']("/third_party/mediapipe/modules", "hand_landmark", true, true);
/** @constructor */
function DataRequest(start, end, audio) {
this.start = start;
this.end = end;
this.audio = audio;
}
DataRequest.prototype = {
requests: {},
open: function(mode, name) {
this.name = name;
this.requests[name] = this;
Module['addRunDependency']('fp ' + this.name);
},
send: function() {},
onload: function() {
var byteArray = this.byteArray.subarray(this.start, this.end);
this.finish(byteArray);
},
finish: function(byteArray) {
var that = this;
Module['FS_createPreloadedFile'](this.name, null, byteArray, true, true, function() {
Module['removeRunDependency']('fp ' + that.name);
}, function() {
if (that.audio) {
Module['removeRunDependency']('fp ' + that.name); // workaround for chromium bug 124926 (still no audio with this, but at least we don't hang)
} else {
err('Preloading file ' + that.name + ' failed');
}
}, false, true); // canOwn this data in the filesystem, it is a slide into the heap that will never change
this.requests[this.name] = null;
}
};
var files = metadata['files'];
for (var i = 0; i < files.length; ++i) {
new DataRequest(files[i]['start'], files[i]['end'], files[i]['audio'] || 0).open('GET', files[i]['filename']);
}
function processPackageData(arrayBuffer) {
assert(arrayBuffer, 'Loading data file failed.');
assert(arrayBuffer instanceof ArrayBuffer, 'bad input to processPackageData');
var byteArray = new Uint8Array(arrayBuffer);
var curr;
// Reuse the bytearray from the XHR as the source for file reads.
DataRequest.prototype.byteArray = byteArray;
var files = metadata['files'];
for (var i = 0; i < files.length; ++i) {
DataRequest.prototype.requests[files[i].filename].onload();
} Module['removeRunDependency']('datafile_blaze-out/k8-opt/genfiles/third_party/mediapipe/web/solutions/hands/hands_solution_packed_assets.data');
};
Module['addRunDependency']('datafile_blaze-out/k8-opt/genfiles/third_party/mediapipe/web/solutions/hands/hands_solution_packed_assets.data');
if (!Module.preloadResults) Module.preloadResults = {};
Module.preloadResults[PACKAGE_NAME] = {fromCache: false};
if (fetched) {
processPackageData(fetched);
fetched = null;
} else {
fetchedCallback = processPackageData;
}
}
if (Module['calledRun']) {
runWithFS();
} else {
if (!Module['preRun']) Module['preRun'] = [];
Module["preRun"].push(runWithFS); // FS is not initialized yet, wait for it
}
}
loadPackage({"files": [{"filename": "/third_party/mediapipe/modules/palm_detection/palm_detection_lite.tflite", "start": 0, "end": 1985440}, {"filename": "/third_party/mediapipe/modules/palm_detection/palm_detection_full.tflite", "start": 1985440, "end": 4326720}, {"filename": "/third_party/mediapipe/modules/hand_landmark/handedness.txt", "start": 4326720, "end": 4326731}], "remote_package_size": 4326731, "package_uuid": "f2b11ac8-0259-41a9-b49f-d0fb8d91f87d"});
})();

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,27 @@
{
"name": "@mediapipe/hands",
"version": "0.4.1646424915",
"description": "Mediapipe Hands Solution",
"main": "hands.js",
"module": "hands.js",
"jsdelivr": "hands.js",
"unpkg": "hands.js",
"types": "index.d.ts",
"author": "mhays@google.com",
"license": "Apache-2.0",
"homepage": "https://google.github.io/mediapipe/solutions/hands",
"keywords": [ "AR", "ML", "Augmented" ],
"devDependencies": {
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
},
"browser": {
"node-fetch": false,
"util": false,
"crypto": false
},
"sideEffects" : []
}

@ -0,0 +1,153 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/static/hand/camera_utils.js" crossorigin="anonymous"></script>
<script src="/static/hand/control_utils.js" crossorigin="anonymous"></script>
<script src="/static/hand/drawing_utils.js" crossorigin="anonymous"></script>
<script src="/static/hand/hands.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<canvas class="output_canvas" width="1280px" height="720px"></canvas>
</div>
<div id="txtHint"></div>
<script type="module">
function ajax(str) {
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML+=xmlhttp.responseText;
num=0
}
}
xmlhttp.open("GET","/trans?="+str,true)
xmlhttp.send();
}
const videoElement = document.createElement("video");
const canvasElement = document.getElementsByClassName('output_canvas')[0];
const canvasCtx = canvasElement.getContext('2d');
var str =""
var pre=str
var num=2
function onResults(results) {
canvasCtx.save();
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
if (results.multiHandLandmarks) {
var Left=[0,0,0,0,0,0,0,0,0]
var Right=[0,0,0,0,0,0,0,0,0]
for (let i = 0; i < results.multiHandLandmarks.length; i++) {
var hand_lable=results.multiHandedness[i].label
if (hand_lable=="Left"){
Left[0]=1
var wrist=results.multiHandLandmarks[i][0]
var index_finger_mcp=results.multiHandLandmarks[i][5]
var index_finger_tip=results.multiHandLandmarks[i][8]
var middle_finger_mcp=results.multiHandLandmarks[i][9]
var middle_finger_tip=results.multiHandLandmarks[i][12]
var ring_finger_mcp=results.multiHandLandmarks[i][13]
var ring_finger_tip=results.multiHandLandmarks[i][16]
var pinky_mcp=results.multiHandLandmarks[i][17]
var pinky_tip=results.multiHandLandmarks[i][20]
var one_x = index_finger_mcp.x-pinky_mcp.x
var one_y = index_finger_mcp.y-pinky_mcp.y
if (Math.abs(one_x)>Math.abs(one_y)) {
Left[3]=1;//平
if (one_x>0) Left[1]=1;//正
var tow = index_finger_mcp.y-wrist.y;
if (tow<0) Left[2]=1;//
var length = Math.abs(middle_finger_mcp.y-wrist.y)/3;
if (Math.abs(index_finger_tip.y-index_finger_mcp.y)>length) Left[5]=1;
if (Math.abs(middle_finger_tip.y-middle_finger_mcp.y)>length) Left[6]=1;
if (Math.abs(ring_finger_tip.y-ring_finger_mcp.y)>length) Left[7]=1;
if (Math.abs(pinky_tip.y-pinky_mcp.y)>length) Left[8]=1;
} else {
var length = Math.abs(one_y)/3;
if (Math.abs(index_finger_mcp.x-index_finger_tip.x)>length) Left[5]=1;
if (Math.abs(middle_finger_mcp.x-middle_finger_tip.x)>length) Left[6]=1;
if (Math.abs(ring_finger_mcp.x-ring_finger_tip.x)>length) Left[7]=1;
if (Math.abs(pinky_mcp.x-pinky_tip.x)>length) Left[8]=1;
}
} else {
Right[0]=1
var wrist=results.multiHandLandmarks[i][0]
var index_finger_mcp=results.multiHandLandmarks[i][5]
var index_finger_tip=results.multiHandLandmarks[i][8]
var middle_finger_mcp=results.multiHandLandmarks[i][9]
var middle_finger_tip=results.multiHandLandmarks[i][12]
var ring_finger_mcp=results.multiHandLandmarks[i][13]
var ring_finger_tip=results.multiHandLandmarks[i][16]
var pinky_mcp=results.multiHandLandmarks[i][17]
var pinky_tip=results.multiHandLandmarks[i][20]
var one_x = index_finger_mcp.x-pinky_mcp.x
var one_y = index_finger_mcp.y-pinky_mcp.y
if (Math.abs(one_x)>Math.abs(one_y)) {
Right[3]=1;//平
if (one_x>0) Right[1]=1;//正
var tow = index_finger_mcp.y-wrist.y;
if (tow<0) Right[2]=1;//
var length = Math.abs(middle_finger_mcp.y-wrist.y)/3;
if (Math.abs(index_finger_tip.y-index_finger_mcp.y)>length) Right[5]=1;
if (Math.abs(middle_finger_tip.y-middle_finger_mcp.y)>length) Right[6]=1;
if (Math.abs(ring_finger_tip.y-ring_finger_mcp.y)>length) Right[7]=1;
if (Math.abs(pinky_tip.y-pinky_mcp.y)>length) Right[8]=1;
} else {
var length = Math.abs(one_y)/3;
if (Math.abs(index_finger_mcp.x-index_finger_tip.x)>length) Right[5]=1;
if (Math.abs(middle_finger_mcp.x-middle_finger_tip.x)>length) Right[6]=1;
if (Math.abs(ring_finger_mcp.x-ring_finger_tip.x)>length) Right[7]=1;
if (Math.abs(pinky_mcp.x-pinky_tip.x)>length) Right[8]=1;
}
}
pre=str
str=''
for (let j = 0; j < Left.length; j++) str+=Left[j]
str+='|'
for (let j = 0; j < Right.length; j++) str+=Right[j]
if (pre==str) num=num+1
console.log(pre,str,num)
if (num==20) ajax(str)
drawConnectors(canvasCtx, results.multiHandLandmarks[i], HAND_CONNECTIONS,
{color: '#00FF00', lineWidth: 5});
drawLandmarks(canvasCtx, results.multiHandLandmarks[i], {color: '#FF0000', lineWidth: 2});
}
}
canvasCtx.restore();
}
const hands = new Hands({locateFile: (file) => {
return `/static/hand/${file}`;
}});
hands.setOptions({
maxNumHands: 2,
modelComplexity: 1,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5
});
hands.onResults(onResults);
const camera = new Camera(videoElement, {
onFrame: async () => {
await hands.send({image: videoElement});
},
width: 1280,
height: 720
});
camera.start();
</script>
</body>
</html>

@ -0,0 +1,746 @@
:root{
/*背景颜色*/
--white:#e9e9e9;
--gray:#333;
--blue:#0367a6;
--lightblue:#008997;
/*外边框圆角属性*/
--button-radius:0.7rem;
--max-width:758px;
--max-height:480px;
/*字体样式*/
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.box{
width: 950px;
height: 500px;
position:absolute;
top: 40%;
left: 50%;
transform:translate(-50%,-50%);
}
.top{
height: 20px;
width: 30px;
position:relative;
}
.output_canvas{
width: 950px;
height: 415px;
}
.container{
background-color: #fff;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
/* 相对定位 */
position: relative;
width: 950px;
height: 415px;
}
.button1{
position: absolute;
}
.button2{
position:relative;
top: 20%;
}
button{
width: 100px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
button:hover{
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
/*输出框*/
.output{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
position: relative;
top: 10%;
}
/*输入框*/
.input{
position: relative;
top: 10%;
}
input{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder{
color: #fff;
}
input:focus{
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder{
opacity: 0;
}
.switch-wrapper {
width: 100px;
height: 50px;
/*margin: 200px auto;*/
/* outline: 1px solid red; */
}
.switch {
width: 100px;
height: 50px;
overflow: hidden;
}
.switch .switch__label{
display: block;
height: 100%;
cursor: pointer;
}
.switch .switch__round {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #9e9292;
transition: all .8s ease-in-out;
}
.switch .switch__round__btn {
display: block;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: 44px;
height: 44px;
background-color: #fff;
transition: all .2s ease-in-out;
}
.switch .switch__input {
display: none;
}
.switch .switch__input:checked + .switch__round {
background-color: #4d59ce;
}
.switch .switch__input:checked + .switch__round > .switch__round__btn {
left: 53px;
}
.switch .switch__radius {
border-radius: 50px;
}
/*普通笔记本电脑900px<屏幕宽<950px高小于800px*/
@media screen and (max-width:950px) and (min-width:900px) and (max-height:800px){
:root{
/*背景颜色*/
--white:#e9e9e9;
--gray:#333;
--blue:#0367a6;
--lightblue:#008997;
/*外边框圆角属性*/
--button-radius:0.7rem;
--max-width:758px;
--max-height:480px;
/*字体样式*/
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.box{
width: 900px;
height: 500px;
position:absolute;
top: 40%;
left: 50%;
transform:translate(-50%,-50%);
}
.top{
height: 20px;
width: 30px;
position:relative;
}
.output_canvas{
width: 900px;
height: 415px;
}
.container{
background-color: #fff;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
/* 相对定位 */
position: relative;
width: 900px;
height: 415px;
}
.button1{
position: absolute;
}
.button2{
position:relative;
top: 20%;
}
button{
width: 100px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
button:hover{
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
/*输出框*/
.output{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
position: relative;
top: 10%;
}
/*输入框*/
.input{
position: relative;
top: 10%;
}
input{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder{
color: #fff;
}
input:focus{
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder{
opacity: 0;
}
.switch-wrapper {
width: 100px;
height: 50px;
/*margin: 200px auto;*/
/* outline: 1px solid red; */
}
.switch {
width: 100px;
height: 50px;
overflow: hidden;
}
.switch .switch__label{
display: block;
height: 100%;
cursor: pointer;
}
.switch .switch__round {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #9e9292;
transition: all .8s ease-in-out;
}
.switch .switch__round__btn {
display: block;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: 44px;
height: 44px;
background-color: #fff;
transition: all .2s ease-in-out;
}
.switch .switch__input {
display: none;
}
.switch .switch__input:checked + .switch__round {
background-color: #4d59ce;
}
.switch .switch__input:checked + .switch__round > .switch__round__btn {
left: 53px;
}
.switch .switch__radius {
border-radius: 50px;
}
}
/*普通移动手机屏幕高大于800px*/
@media screen and (min-height:800px){
:root{
/*背景颜色*/
--white:#e9e9e9;
--gray:#333;
--blue:#0367a6;
--lightblue:#008997;
/*外边框圆角属性*/
--button-radius:0.7rem;
--max-width:758px;
--max-height:480px;
/*字体样式*/
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.box{
width: 950px;
height: 1200px;
position:absolute;
top: 40%;
left: 50%;
transform:translate(-50%,-50%);
}
.top{
height: 20px;
width: 30px;
position:relative;
}
.output_canvas{
width: 950px;
height: 1200px;
}
.container{
background-color: #fff;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
/* 相对定位 */
position: relative;
width: 950px;
height: 1200px;
}
.button1{
position: absolute;
}
.button2{
position:relative;
top: 20%;
}
button{
width: 100px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
button:hover{
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
/*输出框*/
.output{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
position: relative;
top: 10%;
}
/*输入框*/
.input{
position: relative;
top: 10%;
}
input{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder{
color: #fff;
}
input:focus{
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder{
opacity: 0;
}
.switch-wrapper {
width: 100px;
height: 50px;
/*margin: 200px auto;*/
/* outline: 1px solid red; */
}
.switch {
width: 100px;
height: 50px;
overflow: hidden;
}
.switch .switch__label{
display: block;
height: 100%;
cursor: pointer;
}
.switch .switch__round {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #9e9292;
transition: all .8s ease-in-out;
}
.switch .switch__round__btn {
display: block;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: 44px;
height: 44px;
background-color: #fff;
transition: all .2s ease-in-out;
}
.switch .switch__input {
display: none;
}
.switch .switch__input:checked + .switch__round {
background-color: #4d59ce;
}
.switch .switch__input:checked + .switch__round > .switch__round__btn {
left: 53px;
}
.switch .switch__radius {
border-radius: 50px;
}
}
/*普通笔记本电脑850px<屏幕宽<900px高小于800px*/
@media screen and (max-width:900px) and (min-width:850px) and (max-height:800px){
:root{
/*背景颜色*/
--white:#e9e9e9;
--gray:#333;
--blue:#0367a6;
--lightblue:#008997;
/*外边框圆角属性*/
--button-radius:0.7rem;
--max-width:758px;
--max-height:480px;
/*字体样式*/
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.box{
width: 850px;
height: 500px;
position:absolute;
top: 40%;
left: 50%;
transform:translate(-50%,-50%);
}
.top{
height: 20px;
width: 30px;
position:relative;
}
.output_canvas{
width: 850px;
height: 415px;
}
.container{
background-color: #fff;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
/* 相对定位 */
position: relative;
width: 850px;
height: 415px;
}
.button1{
position: absolute;
}
.button2{
position:relative;
top: 20%;
}
button{
width: 100px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
button:hover{
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
/*输出框*/
.output{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
position: relative;
top: 10%;
}
/*输入框*/
.input{
position: relative;
top: 10%;
}
input{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder{
color: #fff;
}
input:focus{
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder{
opacity: 0;
}
.switch-wrapper {
width: 100px;
height: 50px;
/*margin: 200px auto;*/
/* outline: 1px solid red; */
}
.switch {
width: 100px;
height: 50px;
overflow: hidden;
}
.switch .switch__label{
display: block;
height: 100%;
cursor: pointer;
}
.switch .switch__round {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #9e9292;
transition: all .8s ease-in-out;
}
.switch .switch__round__btn {
display: block;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: 44px;
height: 44px;
background-color: #fff;
transition: all .2s ease-in-out;
}
.switch .switch__input {
display: none;
}
.switch .switch__input:checked + .switch__round {
background-color: #4d59ce;
}
.switch .switch__input:checked + .switch__round > .switch__round__btn {
left: 53px;
}
.switch .switch__radius {
border-radius: 50px;
}
}

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
<title>手语翻译</title>
<link rel="stylesheet" type="text/css" href="./main/test1.css">
</head>
<body>
<div class="box">
<div class="top">
</div>
<div class="container">
<canvas class="output_canvas"></canvas>
</div>
<div class="container1">
<script type="module">
const videoElement = document.createElement("video");
const canvasElement = document.getElementsByClassName('output_canvas')[0];
const canvasCtx = canvasElement.getContext('2d');
function onResults(results) {
canvasCtx.save();
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
if (results.multiHandLandmarks) {
for (const landmarks of results.multiHandLandmarks) {
console.log(landmarks)
drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
{color: '#00FF00', lineWidth: 5});
drawLandmarks(canvasCtx, landmarks, {color: '#FF0000', lineWidth: 2});
}
}
canvasCtx.restore();
}
const hands = new Hands({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
}});
hands.setOptions({
maxNumHands: 2,
modelComplexity: 1,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5
});
hands.onResults(onResults);
const camera = new Camera(videoElement, {
onFrame: async () => {
await hands.send({image: videoElement});
},
width: 1280,
height: 720
});
camera.start();
</script>
</div>
<div class="button1">
<button>START</button>
<button>DESTORY</button>
<button>SUMIT</button>
</div>
<div class="output">
<output name = "shuchu" type = "text"></output>
</div>
<div class="button2">
<a href="./test1.html">
<button id="btn4" class="btn">VIDEO</button>
</a>
<a href="./test2.html">
<button id="btn5" class="btn">WORD</button>
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands_solution_packed_assets_loader.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands_solution_simd_wasm_bin.js" crossorigin="anonymous">
</script>
</div>
</body>
</html>

@ -0,0 +1,659 @@
:root{
/*背景颜色*/
--white:#e9e9e9;
--gray:#333;
--blue:#0367a6;
--lightblue:#008997;
/*外边框圆角属性*/
--button-radius:0.7rem;
--max-width:758px;
--max-height:480px;
/*字体样式*/
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.box{
width: 950px;
height: 500px;
position:absolute;
top: 40%;
left: 50%;
transform:translate(-50%,-50%);
}
.top{
height: 20px;
width: 30px;
position:relative;
}
#container{
background-color: #fff;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
/* 相对定位 */
position: relative;
width: 950px;
height: 415px;
}
.button1{
position: absolute;
}
.button2{
position: absolute;
}
button{
width: 100px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
button:hover{
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
/*输入框*/
.input{
}
input{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder{
color: #fff;
}
input:focus{
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder{
opacity: 0;
}
.switch-wrapper {
width: 100px;
height: 50px;
/*margin: 200px auto;*/
/* outline: 1px solid red; */
}
.switch {
width: 100px;
height: 50px;
overflow: hidden;
}
.switch .switch__label{
display: block;
height: 100%;
cursor: pointer;
}
.switch .switch__round {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #9e9292;
transition: all .8s ease-in-out;
}
.switch .switch__round__btn {
display: block;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: 44px;
height: 44px;
background-color: #fff;
transition: all .2s ease-in-out;
}
.switch .switch__input {
display: none;
}
.switch .switch__input:checked + .switch__round {
background-color: #4d59ce;
}
.switch .switch__input:checked + .switch__round > .switch__round__btn {
left: 53px;
}
.switch .switch__radius {
border-radius: 50px;
}
/*普通笔记本电脑900px<屏幕宽<950px高小于800px*/
@media screen and (max-width:950px) and (min-width:900px) and (max-height:800px){
:root{
/*背景颜色*/
--white:#e9e9e9;
--gray:#333;
--blue:#0367a6;
--lightblue:#008997;
/*外边框圆角属性*/
--button-radius:0.7rem;
--max-width:758px;
--max-height:480px;
/*字体样式*/
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.box{
width: 900px;
height: 500px;
position:absolute;
top: 40%;
left: 50%;
transform:translate(-50%,-50%);
}
.top{
height: 20px;
width: 30px;
position:relative;
}
#container{
background-color: #fff;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
/* 相对定位 */
position: relative;
width: 900px;
height: 415px;
}
.button1{
position: absolute;
}
.button2{
position: absolute;
}
button{
width: 100px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
button:hover{
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
/*输入框*/
.input{
}
input{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder{
color: #fff;
}
input:focus{
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder{
opacity: 0;
}
.switch-wrapper {
width: 100px;
height: 50px;
/*margin: 200px auto;*/
/* outline: 1px solid red; */
}
.switch {
width: 100px;
height: 50px;
overflow: hidden;
}
.switch .switch__label{
display: block;
height: 100%;
cursor: pointer;
}
.switch .switch__round {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #9e9292;
transition: all .8s ease-in-out;
}
.switch .switch__round__btn {
display: block;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: 44px;
height: 44px;
background-color: #fff;
transition: all .2s ease-in-out;
}
.switch .switch__input {
display: none;
}
.switch .switch__input:checked + .switch__round {
background-color: #4d59ce;
}
.switch .switch__input:checked + .switch__round > .switch__round__btn {
left: 53px;
}
.switch .switch__radius {
border-radius: 50px;
}
}
/*普通移动手机屏幕高大于800px*/
@media screen and (min-height:800px){
:root{
/*背景颜色*/
--white:#e9e9e9;
--gray:#333;
--blue:#0367a6;
--lightblue:#008997;
/*外边框圆角属性*/
--button-radius:0.7rem;
--max-width:758px;
--max-height:480px;
/*字体样式*/
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.box{
width: 950px;
height: 1500px;
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.top{
height: 20px;
width: 30px;
position:relative;
}
#container{
background-color: #fff;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
/* 相对定位 */
position: relative;
width: 950px;
height: 1200px;
}
.button1{
position: absolute;
}
.button2{
position: absolute;
}
button{
width: 100px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
button:hover{
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
/*输入框*/
.input{
}
input{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder{
color: #fff;
}
input:focus{
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder{
opacity: 0;
}
.switch-wrapper {
width: 100px;
height: 50px;
/*margin: 200px auto;*/
/* outline: 1px solid red; */
}
.switch {
width: 100px;
height: 50px;
overflow: hidden;
}
.switch .switch__label{
display: block;
height: 100%;
cursor: pointer;
}
.switch .switch__round {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #9e9292;
transition: all .8s ease-in-out;
}
.switch .switch__round__btn {
display: block;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: 44px;
height: 44px;
background-color: #fff;
transition: all .2s ease-in-out;
}
.switch .switch__input {
display: none;
}
.switch .switch__input:checked + .switch__round {
background-color: #4d59ce;
}
.switch .switch__input:checked + .switch__round > .switch__round__btn {
left: 53px;
}
.switch .switch__radius {
border-radius: 50px;
}
}
/*普通笔记本电脑850px<屏幕宽<900px高小于800px*/
@media screen and (max-width:900px) and (min-width:850px) and (max-height:800px){
:root{
/*背景颜色*/
--white:#e9e9e9;
--gray:#333;
--blue:#0367a6;
--lightblue:#008997;
/*外边框圆角属性*/
--button-radius:0.7rem;
--max-width:758px;
--max-height:480px;
/*字体样式*/
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.box{
width: 850px;
height: 500px;
position:absolute;
top: 40%;
left: 50%;
transform:translate(-50%,-50%);
}
.top{
height: 20px;
width: 30px;
position:relative;
}
#container{
background-color: #fff;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
/* 相对定位 */
position: relative;
width: 850px;
height: 415px;
}
.button1{
position: absolute;
}
.button2{
position: absolute;
}
button{
width: 100px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
button:hover{
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
/*输入框*/
.input{
}
input{
background-color: transparent;
width: 300px;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255,255,255,0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder{
color: #fff;
}
input:focus{
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder{
opacity: 0;
}
.switch-wrapper {
width: 100px;
height: 50px;
/*margin: 200px auto;*/
/* outline: 1px solid red; */
}
.switch {
width: 100px;
height: 50px;
overflow: hidden;
}
.switch .switch__label{
display: block;
height: 100%;
cursor: pointer;
}
.switch .switch__round {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #9e9292;
transition: all .8s ease-in-out;
}
.switch .switch__round__btn {
display: block;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: 44px;
height: 44px;
background-color: #fff;
transition: all .2s ease-in-out;
}
.switch .switch__input {
display: none;
}
.switch .switch__input:checked + .switch__round {
background-color: #4d59ce;
}
.switch .switch__input:checked + .switch__round > .switch__round__btn {
left: 53px;
}
.switch .switch__radius {
border-radius: 50px;
}
}

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手语翻译</title>
<link rel="stylesheet" type="text/css" href="./main/test2.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="importmap">
{
"imports":{
"three":"./main/three.module.js",
"three/addons/":"./main/"
}
}
</script>
</head>
<body>
<div class="box">
<div id="container">
</div>
<div class="input">
<input id="txt" type="text">
<button type="button" id="btn" onclick="loadXMLDoc(txt.value)">start</button>
</div>
<div class="button2">
<a href="./test1.html">
<button id="btn4" class="btn4" onclick="add">VIDEO</button>
</a>
<a href="./test2.html">
<button id="btn5" class="btn5">WORD</button>
</a>
</div>
</div>
</body>
<script type="module" src="./main/main2_class2.js" ></script>
</html>

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手语翻译</title>
<link rel="stylesheet" type="text/css" href="/static/1.css">
<script src="/static/three.js-r122/build/three.js"></script>
<script src="/static/three.js-r122/examples/jsm/controls/OrbitControls.js" type="module"></script>
</head>
<body>
<div class="box">
<div id="container">
</div>
<div class="input">
<input type="text">
</div>
<div class="button2">
<a href="./test1.html">
<button id="btn4" class="btn4">VIDEO</button>
</a>
<a href="./test2.html">
<button id="btn5" class="btn5">WORD</button>
</a>
<a href="./test3.html">
<button id="btn6" class="btn6">SETTING</button>
</a>
</div>
<script type="module" src="/static/three.js" ></script>
</div>
</body>
</html>

@ -0,0 +1,11 @@
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
Loading…
Cancel
Save