|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div style="width: 100%; height: calc(100%); background: #fff;display:flex">
|
|
|
+ <div style="width: 100%; height: calc(100%); background: #fff; display: flex">
|
|
|
<div class="ablockly">
|
|
|
<div id="blocklyDiv"></div>
|
|
|
<xml id="toolbox" style="display: none">
|
|
|
@@ -105,6 +105,39 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<style>
|
|
|
+.as {
|
|
|
+ animation: myfirst 1s;
|
|
|
+ -webkit-animation: myfirst 1s; /* Safari and Chrome */
|
|
|
+}
|
|
|
+
|
|
|
+.asn {
|
|
|
+ transform: rotate(0deg);
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes myfirst {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes myfirst /* Safari and Chrome */ {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ass {
|
|
|
+ animation: myfirst 3s;
|
|
|
+ -webkit-animation: myfirst 3s; /* Safari and Chrome */
|
|
|
+}
|
|
|
+</style>
|
|
|
<script>
|
|
|
import * as handPoseDetection from "@tensorflow-models/hand-pose-detection";
|
|
|
|
|
|
@@ -199,22 +232,38 @@ export default {
|
|
|
this.isZuan = true;
|
|
|
this.isCamera = true;
|
|
|
let video = this.$refs["video"];
|
|
|
- setInterval(() => {
|
|
|
- this.handsFind(video);
|
|
|
- // window.requestAnimationFrame(this.start);
|
|
|
+ var that = this;
|
|
|
+ window.requestAnimationFrame(function () {
|
|
|
+ that.handsFind(video);
|
|
|
+ that.start();
|
|
|
+ });
|
|
|
+
|
|
|
+ // setInterval(() => {
|
|
|
+ // this.handsFind(video);
|
|
|
+ // // window.requestAnimationFrame(this.start);
|
|
|
+ // }, 1000);
|
|
|
+ },
|
|
|
+ zhuan() {
|
|
|
+ var _fan = this.$refs.fan;
|
|
|
+ _fan.className = "asn as";
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = setInterval(function () {
|
|
|
+ _fan.className = "asn";
|
|
|
+ setTimeout(function () {
|
|
|
+ _fan.className = "as";
|
|
|
+ }, 0);
|
|
|
}, 1000);
|
|
|
},
|
|
|
- zhuan(num) {
|
|
|
+ zhuann() {
|
|
|
var _fan = this.$refs.fan;
|
|
|
- if (this.timer || num == 0) {
|
|
|
- clearInterval(this.timer);
|
|
|
- this.timer = null;
|
|
|
- } else {
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.rotate += num;
|
|
|
- _fan.style.transform = `rotate(${this.rotate}deg)`;
|
|
|
- }, 100);
|
|
|
- }
|
|
|
+ this.$refs.fan.className = "asn ass";
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = setInterval(function () {
|
|
|
+ _fan.className = "asn";
|
|
|
+ setTimeout(function () {
|
|
|
+ _fan.className = "ass";
|
|
|
+ }, 0);
|
|
|
+ }, 3000);
|
|
|
},
|
|
|
update() {
|
|
|
this.change = 1;
|
|
|
@@ -256,40 +305,22 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
this.hand = 1;
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer);
|
|
|
- this.timer = null;
|
|
|
- this.zhuan(buNum);
|
|
|
- } else {
|
|
|
- this.zhuan(buNum);
|
|
|
- }
|
|
|
+ this.zhuan();
|
|
|
} else if (_58y < 1 && _912y < 1 && _1316y < 1 && _1720y < 1) {
|
|
|
console.log("石头");
|
|
|
if (this.hand == 2) {
|
|
|
return;
|
|
|
}
|
|
|
this.hand = 2;
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer);
|
|
|
- this.timer = null;
|
|
|
- this.zhuan(sNum);
|
|
|
- } else {
|
|
|
- this.zhuan(sNum);
|
|
|
- }
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.$refs.fan.className = "asn";
|
|
|
} else if (_58y > 1 && _912y > 1 && _1316y < 1 && _1720y < 1) {
|
|
|
console.log("剪刀");
|
|
|
if (this.hand == 3) {
|
|
|
return;
|
|
|
}
|
|
|
this.hand = 3;
|
|
|
-
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer);
|
|
|
- this.timer = null;
|
|
|
- this.zhuan(jNum);
|
|
|
- } else {
|
|
|
- this.zhuan(jNum);
|
|
|
- }
|
|
|
+ this.zhuann();
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -458,144 +489,147 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- blocklyInit(){
|
|
|
+ blocklyInit() {
|
|
|
this.workspace = Blockly.inject("blocklyDiv", {
|
|
|
- //工具栏
|
|
|
- toolbox: document.getElementById("toolbox"),
|
|
|
- //网格效果
|
|
|
- grid: { spacing: 20, length: 3, colour: "#ccc", snap: true },
|
|
|
- //媒体资源
|
|
|
- media: "../assets/img/",
|
|
|
- //垃圾桶
|
|
|
- trashcan: true,
|
|
|
- });
|
|
|
- //工作区监听代码生成器
|
|
|
- this.workspace.addChangeListener(this.myUpdateFunction);
|
|
|
-
|
|
|
- Blockly.Blocks["iot_lcd_screeninit"] = {
|
|
|
- init: function () {
|
|
|
- this.appendDummyInput().appendField(
|
|
|
- new Blockly.FieldImage(
|
|
|
- require("../assets/img/screen_init_header.png"),
|
|
|
- 45,
|
|
|
- 45
|
|
|
- )
|
|
|
- );
|
|
|
- this.appendDummyInput().appendField("LCD屏幕打开");
|
|
|
- this.setInputsInline(false);
|
|
|
- this.setPreviousStatement(true);
|
|
|
- this.setNextStatement(true);
|
|
|
- this.setColour("#5cb2d6");
|
|
|
- this.setTooltip("");
|
|
|
- this.setHelpUrl("");
|
|
|
- },
|
|
|
- };
|
|
|
+ //工具栏
|
|
|
+ toolbox: document.getElementById("toolbox"),
|
|
|
+ //网格效果
|
|
|
+ grid: { spacing: 20, length: 3, colour: "#ccc", snap: true },
|
|
|
+ //媒体资源
|
|
|
+ media: "../assets/img/",
|
|
|
+ //垃圾桶
|
|
|
+ trashcan: true,
|
|
|
+ });
|
|
|
+ //工作区监听代码生成器
|
|
|
+ this.workspace.addChangeListener(this.myUpdateFunction);
|
|
|
+
|
|
|
+ Blockly.Blocks["iot_lcd_screeninit"] = {
|
|
|
+ init: function () {
|
|
|
+ this.appendDummyInput().appendField(
|
|
|
+ new Blockly.FieldImage(
|
|
|
+ require("../assets/img/screen_init_header.png"),
|
|
|
+ 45,
|
|
|
+ 45
|
|
|
+ )
|
|
|
+ );
|
|
|
+ this.appendDummyInput().appendField("LCD屏幕打开");
|
|
|
+ this.setInputsInline(false);
|
|
|
+ this.setPreviousStatement(true);
|
|
|
+ this.setNextStatement(true);
|
|
|
+ this.setColour("#5cb2d6");
|
|
|
+ this.setTooltip("");
|
|
|
+ this.setHelpUrl("");
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
- Blockly.JavaScript.iot_lcd_screeninit = function (block) {
|
|
|
- var _code = "screen=1;";
|
|
|
- return _code;
|
|
|
- };
|
|
|
+ Blockly.JavaScript.iot_lcd_screeninit = function (block) {
|
|
|
+ var _code = "screen=1;";
|
|
|
+ return _code;
|
|
|
+ };
|
|
|
|
|
|
- Blockly.Blocks["iot_lcd_faceinit"] = {
|
|
|
- init: function () {
|
|
|
- this.appendDummyInput().appendField(
|
|
|
- new Blockly.FieldImage(
|
|
|
- require("../assets/img/face_recognition_header.png"),
|
|
|
- 45,
|
|
|
- 45
|
|
|
- )
|
|
|
- );
|
|
|
- this.appendDummyInput().appendField("人脸辨识");
|
|
|
- this.setInputsInline(false);
|
|
|
- this.setPreviousStatement(true);
|
|
|
- this.setNextStatement(true);
|
|
|
- this.setColour("#ee783a");
|
|
|
- this.setTooltip("");
|
|
|
- this.setHelpUrl("");
|
|
|
- },
|
|
|
- };
|
|
|
+ Blockly.Blocks["iot_lcd_faceinit"] = {
|
|
|
+ init: function () {
|
|
|
+ this.appendDummyInput().appendField(
|
|
|
+ new Blockly.FieldImage(
|
|
|
+ require("../assets/img/face_recognition_header.png"),
|
|
|
+ 45,
|
|
|
+ 45
|
|
|
+ )
|
|
|
+ );
|
|
|
+ this.appendDummyInput().appendField("人脸辨识");
|
|
|
+ this.setInputsInline(false);
|
|
|
+ this.setPreviousStatement(true);
|
|
|
+ this.setNextStatement(true);
|
|
|
+ this.setColour("#ee783a");
|
|
|
+ this.setTooltip("");
|
|
|
+ this.setHelpUrl("");
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
- Blockly.JavaScript.iot_lcd_faceinit = function (block) {
|
|
|
- var _code = "face=1;";
|
|
|
- return _code;
|
|
|
- };
|
|
|
+ Blockly.JavaScript.iot_lcd_faceinit = function (block) {
|
|
|
+ var _code = "face=1;";
|
|
|
+ return _code;
|
|
|
+ };
|
|
|
|
|
|
- Blockly.Blocks["iot_lcd_policeinit"] = {
|
|
|
- init: function () {
|
|
|
- this.appendDummyInput().appendField(
|
|
|
- new Blockly.FieldImage(
|
|
|
- require("../assets/img/screen_init_header.png"),
|
|
|
- 45,
|
|
|
- 45
|
|
|
- )
|
|
|
- );
|
|
|
- this.appendDummyInput().appendField("电子警察组件");
|
|
|
- this.setInputsInline(false);
|
|
|
- this.setPreviousStatement(true);
|
|
|
- this.setNextStatement(true);
|
|
|
- this.setColour("#1b5873");
|
|
|
- this.setTooltip("");
|
|
|
- this.setHelpUrl("");
|
|
|
- },
|
|
|
- };
|
|
|
+ Blockly.Blocks["iot_lcd_policeinit"] = {
|
|
|
+ init: function () {
|
|
|
+ this.appendDummyInput().appendField(
|
|
|
+ new Blockly.FieldImage(
|
|
|
+ require("../assets/img/screen_init_header.png"),
|
|
|
+ 45,
|
|
|
+ 45
|
|
|
+ )
|
|
|
+ );
|
|
|
+ this.appendDummyInput().appendField("电子警察组件");
|
|
|
+ this.setInputsInline(false);
|
|
|
+ this.setPreviousStatement(true);
|
|
|
+ this.setNextStatement(true);
|
|
|
+ this.setColour("#1b5873");
|
|
|
+ this.setTooltip("");
|
|
|
+ this.setHelpUrl("");
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
- Blockly.JavaScript.iot_lcd_policeinit = function (block) {
|
|
|
- var _code = "police=1;";
|
|
|
- return _code;
|
|
|
- };
|
|
|
+ Blockly.JavaScript.iot_lcd_policeinit = function (block) {
|
|
|
+ var _code = "police=1;";
|
|
|
+ return _code;
|
|
|
+ };
|
|
|
|
|
|
- Blockly.Blocks["iot_lcd_trunLeftinit"] = {
|
|
|
- init: function () {
|
|
|
- this.appendDummyInput().appendField("向左移动");
|
|
|
- this.setInputsInline(false);
|
|
|
- this.setPreviousStatement(true);
|
|
|
- this.setNextStatement(true);
|
|
|
- this.setColour("#1b5873");
|
|
|
- this.setTooltip("");
|
|
|
- this.setHelpUrl("");
|
|
|
- },
|
|
|
- };
|
|
|
+ Blockly.Blocks["iot_lcd_trunLeftinit"] = {
|
|
|
+ init: function () {
|
|
|
+ this.appendDummyInput().appendField("向左移动");
|
|
|
+ this.setInputsInline(false);
|
|
|
+ this.setPreviousStatement(true);
|
|
|
+ this.setNextStatement(true);
|
|
|
+ this.setColour("#1b5873");
|
|
|
+ this.setTooltip("");
|
|
|
+ this.setHelpUrl("");
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
- Blockly.JavaScript.iot_lcd_trunLeftinit = function (block) {
|
|
|
- var _code = "trunLeft=1;";
|
|
|
- return _code;
|
|
|
- };
|
|
|
+ Blockly.JavaScript.iot_lcd_trunLeftinit = function (block) {
|
|
|
+ var _code = "trunLeft=1;";
|
|
|
+ return _code;
|
|
|
+ };
|
|
|
|
|
|
- Blockly.Blocks["iot_lcd_trunRightinit"] = {
|
|
|
- init: function () {
|
|
|
- this.appendDummyInput().appendField("向右移动");
|
|
|
- this.setInputsInline(false);
|
|
|
- this.setPreviousStatement(true);
|
|
|
- this.setNextStatement(true);
|
|
|
- this.setColour("#1b5873");
|
|
|
- this.setTooltip("");
|
|
|
- this.setHelpUrl("");
|
|
|
- },
|
|
|
- };
|
|
|
+ Blockly.Blocks["iot_lcd_trunRightinit"] = {
|
|
|
+ init: function () {
|
|
|
+ this.appendDummyInput().appendField("向右移动");
|
|
|
+ this.setInputsInline(false);
|
|
|
+ this.setPreviousStatement(true);
|
|
|
+ this.setNextStatement(true);
|
|
|
+ this.setColour("#1b5873");
|
|
|
+ this.setTooltip("");
|
|
|
+ this.setHelpUrl("");
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
- Blockly.JavaScript.iot_lcd_trunRightinit = function (block) {
|
|
|
- var _code = "trunRight=1;";
|
|
|
- return _code;
|
|
|
- };
|
|
|
- var that = this;
|
|
|
- window.addEventListener("message", function (e) {
|
|
|
- // 监听 message 事件
|
|
|
- if (e.data.success) {
|
|
|
- that.loading = true;
|
|
|
- that.$refs.unityvue.contentWindow.postMessage({ type: that.type }, "*");
|
|
|
- }
|
|
|
+ Blockly.JavaScript.iot_lcd_trunRightinit = function (block) {
|
|
|
+ var _code = "trunRight=1;";
|
|
|
+ return _code;
|
|
|
+ };
|
|
|
+ var that = this;
|
|
|
+ window.addEventListener("message", function (e) {
|
|
|
+ // 监听 message 事件
|
|
|
+ if (e.data.success) {
|
|
|
+ that.loading = true;
|
|
|
+ that.$refs.unityvue.contentWindow.postMessage(
|
|
|
+ { type: that.type },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
- if (e.data.active) {
|
|
|
- that.active = true;
|
|
|
- } else if (e.data.active != undefined) {
|
|
|
- that.active = false;
|
|
|
- }
|
|
|
+ if (e.data.active) {
|
|
|
+ that.active = true;
|
|
|
+ } else if (e.data.active != undefined) {
|
|
|
+ that.active = false;
|
|
|
+ }
|
|
|
|
|
|
- if (e.data.noCamera) {
|
|
|
- that.$message.error(e.data.noCamera);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
+ if (e.data.noCamera) {
|
|
|
+ that.$message.error(e.data.noCamera);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
this.blocklyInit();
|
|
|
@@ -605,8 +639,6 @@ export default {
|
|
|
this.videoEl = this.$refs.video;
|
|
|
this.canvasEL = this.$refs.canvasDOM;
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -664,7 +696,7 @@ body {
|
|
|
z-index: 5;
|
|
|
left: 150px;
|
|
|
top: 0;
|
|
|
- transition: all .5s;
|
|
|
+ transition: all 0.5s;
|
|
|
transform: rotate(0deg);
|
|
|
}
|
|
|
|
|
|
@@ -862,11 +894,10 @@ body {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.ablockly,
|
|
|
#blocklyDiv {
|
|
|
-height: 100%;
|
|
|
- width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
.blocklySvg {
|
|
|
height: 905px !important;
|
|
|
@@ -876,9 +907,9 @@ height: 100%;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
-.container{
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- min-width: 960px;
|
|
|
+.container {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ min-width: 960px;
|
|
|
}
|
|
|
</style>
|
