blockly

src/components/blockly.vue

@@ -81,7 +81,7 @@ export default {
     return {
       that: this,
       workspace: null,
-      type:this.$route.query.type
+      type: this.$route.query.type,
     };
   },
 
@@ -112,9 +112,10 @@ export default {
       //update修改   function state里的参数
       var a = this.myUpdateFunction();
       this.$store.commit("update", ["function", a]);
-      if(this.type == "fan"){
+      console.log(a);
+      if (this.type == "fan") {
         this.$router.push("Ffun");
-      }else{
+      } else {
         this.$router.push("function");
       }
     },
@@ -221,7 +222,7 @@ export default {
     Blockly.JavaScript["logic_loop"] = function (block) {
       var statements_name = Blockly.JavaScript.statementToCode(block, "NAME");
       // TODO: Assemble JavaScript into code variable.
-      var code = "...;\n";
+      var code = "for;\n";
       return code;
     };
 
@@ -241,7 +242,7 @@ export default {
     Blockly.JavaScript["logic_number"] = function (block) {
       var text_number = block.getFieldValue("number");
       // TODO: Assemble JavaScript into code variable.
-      var code = "...";
+      var code = text_number;
       // TODO: Change ORDER_NONE to the correct strength.
       return [code, Blockly.JavaScript.ORDER_NONE];
     };
@@ -260,7 +261,7 @@ export default {
     Blockly.JavaScript["ai_gesture"] = function (block) {
       var dropdown_id = block.getFieldValue("ID");
       // TODO: Assemble JavaScript into code variable.
-      var code = "...";
+      var code = "hands";
       // TODO: Change ORDER_NONE to the correct strength.
       return [code, Blockly.JavaScript.ORDER_NONE];
     };
@@ -271,8 +272,7 @@ export default {
           .appendField(new Blockly.FieldDropdown([["M1", "M1"]]), "motor")
           .appendField("以速度")
           .appendField(new Blockly.FieldTextInput("0"), "speed")
-          .appendField("转动");  
-        this.setInputsInline(true);
+          .appendField("转动");
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
         this.setColour(285);
@@ -284,9 +284,9 @@ export default {
       var dropdown_motor = block.getFieldValue("motor");
       var text_speed = block.getFieldValue("speed");
       // TODO: Assemble JavaScript into code variable.
-      var code = "...";
+      var code = "motor=" + text_speed;
       // TODO: Change ORDER_NONE to the correct strength.
-      return [code, Blockly.JavaScript.ORDER_NONE];
+      return code;
     };
   },
 };

src/components/functionFan.vue

@@ -49,10 +49,10 @@
           <!-- <div class="open" @click="callCamera" v-if="!isCamera">
             <img src="../assets/img/open.png" alt />
           </div> -->
-          <div class="open" @click="zhuan(20)" v-if="!isZuan">
+          <div class="open" @click="start()" v-if="!isZuan">
             <img src="../assets/img/fan/icon.png" alt />
           </div>
-          <div class="close" @click="zhuan(0)" v-else>
+          <div class="close" @click="closeCamera()" v-else>
             <img src="../assets/img/fan/icon2.png" alt />
           </div>
           <!-- <div class="save" @click="photograph" v-if="isCamera">
@@ -135,19 +135,16 @@
 //import "@/assets/js/face-min.js";
 //import * as faceapi from "face-api.js";
 
-import * as handPoseDetection from '@tensorflow-models/hand-pose-detection';
+import * as handPoseDetection from "@tensorflow-models/hand-pose-detection";
 
-import '@tensorflow/tfjs-backend-webgl';
-import * as mpHands from '@mediapipe/hands';
+import "@tensorflow/tfjs-backend-webgl";
+import * as mpHands from "@mediapipe/hands";
 
 //import * as tfjsWasm from '@tensorflow/tfjs-backend-wasm';
 
 // tfjsWasm.setWasmPaths(
 //   `https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@${tfjsWasm.version_wasm}/dist/`);
 
-
-
-
 export default {
   data() {
     return {
@@ -197,6 +194,8 @@ export default {
       rotate: 0,
       timer: null,
       detector: null,
+      hand: 0,
+      isC:false,
     };
   },
   methods: {
@@ -209,19 +208,25 @@ export default {
         this.fnsample();
       }
     },
+    start() {
+      if(!this.isC){
+        return;
+      }
+      this.isZuan = true;
+      this.isCamera = true;
+      let video = this.$refs["video"];
+      setInterval(() => {
+      this.handsFind(video);
+
+      // window.requestAnimationFrame(this.start);
+      }, 1000);
+    },
     zhuan(num) {
       var _fan = this.$refs.fan;
       if (this.timer || num == 0) {
-        this.closeCamera();
-        this.isZuan = false;
         clearInterval(this.timer);
         this.timer = null;
       } else {
-        this.callCamera();
-        let video = this.$refs["video"];
-        let hands = this.detector.estimateHands(video);
-        console.log(hands);
-        this.isZuan = true;
         this.timer = setInterval(() => {
           this.rotate += num;
           _fan.style.transform = `rotate(${this.rotate}deg)`;
@@ -244,16 +249,51 @@ export default {
       }
       this.updateMessage = false;
     },
+    async handsFind(video) {
+      let hands = await this.detector.estimateHands(video, {
+        flipHorizontal: false,
+      });
+      // console.log(hands);
+      if (hands.length > 0 && this.isCamera) {
+        let handsA = hands[0].keypoints;
+        let _58y = handsA[5].y / handsA[8].y;
+        let _912y = handsA[9].y / handsA[12].y;
+        let _1316y = handsA[13].y / handsA[16].y;
+        let _1720y = handsA[17].y / handsA[20].y;
+
+        if (_58y > 1 && _912y > 1 && _1316y > 1 && _1720y > 1) {
+          console.log("布");
+          if (this.hand == 1) {
+            return;
+          }
+          this.hand = 1;
+          this.zhuan(20);
+        } else if (_58y < 1 && _912y < 1 && _1316y < 1 && _1720y < 1) {
+          console.log("石头");
+          if (this.hand == 2) {
+            return;
+          }
+          this.hand = 2;
+          this.zhuan(0);
+        } else if (_58y > 1 && _912y > 1 && _1316y < 1 && _1720y < 1) {
+          console.log("剪刀");
+          if (this.hand == 3) {
+            return;
+          }
+          this.hand = 3;
+          this.zhuan(20);
+        }
+      }
+    },
     // 调用摄像头
     callCamera() {
       let _this = this;
       // H5调用电脑摄像头API
-      navigator.mediaDevices
+      window.navigator.mediaDevices
         .getUserMedia({
           video: true,
         })
         .then((success) => {
-          _this.isCamera = true;
           // 摄像头开启成功
           _this.$refs["video"].srcObject = success;
           // 实时拍照效果
@@ -261,6 +301,7 @@ export default {
         })
         .catch((error) => {
           // console.error("摄像头开启失败，请检查摄像头是否可用！");
+          _this.isC = false
           _this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
         });
     },
@@ -288,30 +329,44 @@ export default {
     },
     // 关闭摄像头
     closeCamera() {
-      if (!this.$refs["video"].srcObject) {
-        this.isCamera = false;
-        return;
-      }
-      let stream = this.$refs["video"].srcObject;
-      let tracks = stream.getTracks();
-      tracks.forEach((track) => {
-        track.stop();
-      });
-      this.$refs["video"].srcObject = null;
+      // if (!this.$refs["video"].srcObject) {
+      //   this.isCamera = false;
+      //   return;
+      // }
+      // let stream = this.$refs["video"].srcObject;
+      // let tracks = stream.getTracks();
+      // tracks.forEach((track) => {
+      //   track.stop();
+      // });
+      // this.$refs["video"].srcObject = null;
       this.isCamera = false;
+
+      this.isZuan = false;
+      clearInterval(this.timer);
+      this.timer = null;
+      this.hand = 0;
     },
 
     async fnInit() {
+      // debugger;
       const model = handPoseDetection.SupportedModels.MediaPipeHands;
       const detectorConfig = {
         runtime: "mediapipe", // or 'tfjs'
         modelType: "full",
-        solutionPath: `/static/hands`
+        // solutionPath: `https://cdn.jsdelivr.net/npm/@mediapipe/hands@${mpHands.VERSION}`,
+        solutionPath: `/static/hands`,
       };
+      // debugger;
       this.detector = await handPoseDetection.createDetector(
         model,
         detectorConfig
       );
+      if (this.$store.state.function.indexOf("screen=1;") != -1) {
+        this.callCamera();
+        this.isC = true;
+      }else{
+        this.isC = false;
+      }
     },
     async fnsample() {
       const labeledFaceDescriptors = await Promise.all(