fan

src/components/fan.vue

@@ -1,5 +1,5 @@
 <template>
-  <div  style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
+  <div style="height: 98%; background: #fff; width: 98%; margin: 10px auto">
     <div class="tip">
       <img src="../assets/img/fan/tips.png" alt="" />
     </div>
@@ -20,6 +20,7 @@
           setD,
           getE,
           setE,
+          setisF,
         }"
       >
         <img src="../assets/img/fan/1.png" alt="" />
@@ -40,6 +41,7 @@
           setD,
           getE,
           setE,
+          setisF,
         }"
       >
         <img src="../assets/img/fan/2.png" alt="" />
@@ -60,6 +62,7 @@
           setD,
           getE,
           setE,
+          setisF,
         }"
       >
         <img src="../assets/img/fan/3.png" alt="" />
@@ -80,6 +83,7 @@
           setD,
           getE,
           setE,
+          setisF,
         }"
       >
         <img src="../assets/img/fan/4.png" alt="" />
@@ -100,6 +104,7 @@
           setD,
           getE,
           setE,
+          setisF,
         }"
       >
         <img src="../assets/img/fan/5.png" alt="" />
@@ -120,13 +125,19 @@
           setD,
           getE,
           setE,
+          setisF,
         }"
       >
         <img src="../assets/img/fan/6.png" alt="" />
       </div>
     </div>
     <div class="right"><img src="../assets/img/right.png" alt="" /></div>
-    <div class="button">进入CocoBlockly编程平台</div>
+    <div style="  position: absolute;bottom: 5%;display:flex;
+  left: 50%;
+  transform: translateX(-50%);">
+      <div class="button" v-show="isF">进入CocoBlockly编程平台</div>
+    <div class="button dark" style="margin-left:20px" @click="goto('/fans')">进入体验页</div>
+    </div>
     <video
       id="musicC"
       :src="require('../assets/music/click.mp3')"
@@ -139,6 +150,7 @@
 export default {
   data() {
     return {
+      isF: false,
       that: this,
       panThing: "",
       aaa: 0,
@@ -304,11 +316,14 @@ export default {
             right.style.display = "block";
             right.style.left = baseL + 435 + "px";
             right.style.top = baseT + 65 + "px";
+            binding.value.setisF(true);
+
           } else {
             line.style.display = "none";
             btn.className = "button";
             btn.onclick = null;
             right.style.display = "none";
+            binding.value.setisF(false);
           }
         }
         function st(nl, nt, type) {
@@ -345,7 +360,7 @@ export default {
           var lbL = lineL - baseL;
           var lbT = lineT - baseT;
 
-          if (270 < mbL && mbL < 310 && -140 < mbT && mbT < -100 && type == 2) {
+          if (260 < mbL && mbL < 320 && -150 < mbT && mbT < -90 && type == 2) {
             motor.style.left = baseL + 292 + "px";
             motor.style.top = baseT - 121 + "px";
             binding.value.setA(1);
@@ -355,10 +370,10 @@ export default {
           }
 
           if (
-            270 < mbL &&
-            mbL < 310 &&
-            -140 < mbT &&
-            mbT < -100 &&
+            260 < mbL &&
+            mbL < 320 &&
+            -150 < mbT &&
+            mbT < -90 &&
             type == 1 &&
             binding.value.getD() == 1
           ) {
@@ -493,11 +508,14 @@ export default {
             right.style.display = "block";
             right.style.left = nl + 435 + "px";
             right.style.top = nt + 65 + "px";
+            binding.value.setisF(true);
+
           } else {
             line.style.display = "none";
             btn.className = "button";
             btn.onclick = null;
             right.style.display = "none";
+            binding.value.setisF(false);
           }
         }
       },
@@ -506,6 +524,9 @@ export default {
   methods: {
     go() {
       this.$router.push("/blockly?typeN=fan");
+    },
+     goto(path) {
+      this.$router.push(path);
     },
     setPan(value) {
       this.panThing = value;
@@ -543,6 +564,9 @@ export default {
     getE() {
       return this.eee;
     },
+    setisF(a) {
+      this.isF = a;
+    },
   },
 };
 </script>
@@ -583,7 +607,7 @@ body {
 #fan {
   width: 425px;
   position: absolute;
-  left: 50%;
+  left: 64%;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
@@ -592,8 +616,8 @@ body {
 #base {
   width: 423.33px;
   position: absolute;
-  top: 64%;
-  left: 15%;
+  top: 50%;
+  left: 14%;
   transform: translateY(-50%);
   z-index: 4;
 }
@@ -601,7 +625,7 @@ body {
 #motor {
   width: 134.16px;
   position: absolute;
-  top: 40%;
+  top: 50%;
   left: 40%;
   transform: translateY(-50%);
   z-index: 3;
@@ -610,7 +634,7 @@ body {
 #a4 {
   width: 210px;
   position: absolute;
-  left: 21%;
+  left: 50%;
   top: 36%;
   transform: translateY(-50%);
   z-index: 5;
@@ -618,8 +642,8 @@ body {
 #screan {
   width: 178.33px;
   position: absolute;
-  left: 39%;
-  top: 70%;
+  left: 50%;
+  top: 57%;
   transform: translateY(-50%);
   z-index: 3;
 }
@@ -636,16 +660,14 @@ body {
 .button {
   color: #fff;
   background: #8ca1de;
-  width: 550px;
+  width: 350px;
   height: 55px;
   font-size: 20px;
   text-align: center;
   line-height: 55px;
-  position: absolute;
-  bottom: 10%;
-  left: 50%;
-  transform: translateX(-50%);
+  
   user-select: none;
+  border-radius: 5px;
 }
 
 .right {

src/components/functionFan2.vue

@@ -1,149 +1,136 @@
 <template>
-  <div style="width: 100%; height: calc(100%); background: #fff">
-    <div class="img">
-      <div class="left" style="width: 380px"></div>
-      <div class="controlZ">
-        <div id="fan" ref="fan">
-          <img :src="img[0]" alt />
-        </div>
-        <div id="fanB">
-          <img :src="img[6]" alt />
-        </div>
-        <div id="motor">
-          <img :src="img[1]" alt />
-        </div>
-        <div id="base">
-          <img :src="img[2]" alt />
-        </div>
-        <div id="a4">
-          <img :src="img[3]" alt />
-        </div>
-        <div id="screan">
-          <img :src="img[4]" alt />
-          <!--图片展示-->
-          <video
-            ref="video"
-            id="video_cam"
-            width="178"
-            height="142.4"
-            class="face"
-            autoplay
-            v-show="isCamera"
-          ></video>
-          <canvas
-            ref="canvasDOM"
-            width="178"
-            height="142.4"
-            class="kuang"
-            v-show="isCamera"
-          ></canvas>
-        </div>
-        <div id="line">
-          <img :src="img[5]" alt />
+  <div style="width: 100%; height: calc(100%); background: #fff;display:flex">
+    <div class="ablockly">
+      <div id="blocklyDiv"></div>
+      <xml id="toolbox" style="display: none">
+        <category name="逻辑" colour="%{BKY_LOGIC_HUE}">
+          <block type="controls_if"></block>
+          <block type="logic_compare"></block>
+          <block type="logic_operation"></block>
+          <block type="logic_negate"></block>
+          <block type="logic_boolean"></block>
+          <block type="logic_number"></block>
+        </category>
+        <sep></sep>
+        <category name="循环" colour="#5ba55b">
+          <block type="controls_repeat_forever"></block>
+          <block type="controls_whileUntil"></block>
+          <block type="controls_for"></block>
+        </category>
+        <sep></sep>
+        <category id="catIOTScreen" name="屏幕" colour="#5cb2d6">
+          <block type="iot_lcd_screeninit"></block>
+        </category>
+        <sep></sep>
+        <category id="cat" name="人脸识别" colour="#ee783a">
+          <block type="iot_lcd_faceinit"></block>
+        </category>
+        <sep></sep>
+        <category id="police" name="电子警察组件" colour="#1b5873">
+          <block type="iot_lcd_policeinit"></block>
+        </category>
+        <sep></sep>
+        <category id="police" name="AI组件" colour="#935ba5">
+          <block type="ai_gesture"></block>
+          <block type="ai_motor"></block>
+        </category>
+      </xml>
+    </div>
+    <div class="container">
+      <div class="img">
+        <div class="left" style="width: 120px"></div>
+        <div class="controlZ">
+          <div id="fan" ref="fan">
+            <img :src="img[0]" alt />
+          </div>
+          <div id="fanB">
+            <img :src="img[6]" alt />
+          </div>
+          <div id="motor">
+            <img :src="img[1]" alt />
+          </div>
+          <div id="base">
+            <img :src="img[2]" alt />
+          </div>
+          <div id="a4">
+            <img :src="img[3]" alt />
+          </div>
+          <div id="screan">
+            <img :src="img[4]" alt />
+            <!--图片展示-->
+            <video
+              ref="video"
+              id="video_cam"
+              width="178"
+              height="142.4"
+              class="face"
+              autoplay
+              v-show="isCamera"
+            ></video>
+            <canvas
+              ref="canvasDOM"
+              width="178"
+              height="142.4"
+              class="kuang"
+              v-show="isCamera"
+            ></canvas>
+          </div>
+          <div id="line">
+            <img :src="img[5]" alt />
+          </div>
         </div>
-      </div>
 
-      <div class="cameraZ">
-        <!--开启摄像头-->
-        <div class="cameraBtn">
-          <!-- <div class="open" @click="callCamera" v-if="!isCamera">
-            <img src="../assets/img/open.png" alt />
-          </div> -->
-          <div class="open" @click="start()" v-if="!isZuan">
-            <img src="../assets/img/fan/icon.png" alt />
+        <div class="cameraZ">
+          <!--开启摄像头-->
+          <div class="cameraBtn">
+            <div class="open" @click="start()" v-if="!isZuan">
+              <img src="../assets/img/fan/icon.png" alt />
+            </div>
+            <div class="close" @click="closeCamera()" v-else>
+              <img src="../assets/img/fan/icon2.png" alt />
+            </div>
           </div>
-          <div class="close" @click="closeCamera()" v-else>
-            <img src="../assets/img/fan/icon2.png" alt />
+          <!--确认-->
+          <div v-show="false" class="isPhoto">
+            <!--canvas截取流-->
+            <canvas
+              ref="canvas"
+              width="300"
+              height="240"
+              v-show="false"
+            ></canvas>
           </div>
-          <!-- <div class="save" @click="photograph" v-if="isCamera">
-            <img src="../assets/img/shibie.png" alt />
-          </div> -->
-        </div>
-        <!--确认-->
-        <div v-show="false" class="isPhoto">
-          <!--canvas截取流-->
-          <canvas ref="canvas" width="300" height="240" v-show="false"></canvas>
         </div>
       </div>
     </div>
-    <!-- <div v-if="isCamera" class="isPhoto">
-      <span>截取的图片</span>
-      <div
-        style="width: 98%; overflow: auto; display: flex; margin: 20px 0 0 10px"
-      >
-        <div v-for="(res, index) in sampleArr" :key="index" class="gdt">
-          <img
-            :src="res.img[0]"
-            alt=""
-            style="margin-right: 10px; width: 178px; height: 142.4px"
-          />
-          <div class="spotNumber">{{ res.name }}</div>
-        </div>
-      </div>
-
-    </div> -->
-    <el-dialog
-      title="设置名称"
-      :visible.sync="updateMessage"
-      :append-to-body="true"
-      width="300px"
-      :before-close="handleClose"
-      class="dialog_diy"
-    >
-      <el-form class="over1">
-        <el-form-item
-          label="名称"
-          :label-width="formLabelWidth"
-          style="font-size: 16px !important"
-        >
-          <!-- {{ this.gameInfo.name }} -->
-          <el-input
-            clearable
-            type="primary"
-            v-model="upName"
-            style="width: 150px"
-            class="inputStyle"
-          ></el-input>
-        </el-form-item>
-      </el-form>
-      <el-button class="update" @click="update">添加</el-button>
-      <el-button @click="cancel" style="font-size: 16px !important"
-        >取消</el-button
-      >
-    </el-dialog>
-    <!-- <el-dialog
-      title="识别"
-      :visible.sync="closeUpdateMessage"
-      :append-to-body="true"
-      width="300px"
-      :before-close="handleClose"
-      class="dialog_diy"
-    >
-      <div style="text-align: center; font-size: 16px !important">
-        已识别到"{{ this.resultImg.name }}"的图片
-      </div>
-      <el-button
-        @click="closeUpdateMessage = false"
-        style="margin: 20px 0 0 35%; font-size: 16px !important"
-        >确认</el-button
-      >
-    </el-dialog> -->
   </div>
 </template>
 <script>
-//import tracking from "@/assets/js/tracking-min.js";
-//import "@/assets/js/face-min.js";
-//import * as faceapi from "face-api.js";
-
 import * as handPoseDetection from "@tensorflow-models/hand-pose-detection";
 
 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/`);
+// 引入Blockly
+import Blockly from "blockly";
+// 引入想要转换的语言，语言有php python dart lua javascript
+import * as JavaScript from "blockly/javascript";
+import * as Blocks from "blockly/blocks";
+// 引入语言包并使用
+import * as hans from "blockly/msg/zh-hans";
+Blockly.setLocale(hans);
+//引入媒体文件：我是在github上下载的blockly源码，将源码中的media文件放入我项目中的public文件夹下
+
+//忽略被vue错认为组件的blockly中的标签，不止以下这些，请发现一个忽略一个
+import Vue from "vue";
+Vue.config.ignoredElements.push("xml");
+Vue.config.ignoredElements.push("block");
+Vue.config.ignoredElements.push("field");
+Vue.config.ignoredElements.push("category");
+Vue.config.ignoredElements.push("sep");
+Vue.config.ignoredElements.push("value");
+Vue.config.ignoredElements.push("statement");
+Vue.config.ignoredElements.push("mutation");
 
 export default {
   data() {
@@ -249,7 +236,7 @@ export default {
       let hands = await this.detector.estimateHands(video, {
         flipHorizontal: false,
       });
-      // console.log(hands);
+      console.log(hands);
       if (hands.length > 0 && this.isCamera) {
         let handsA = hands[0].keypoints;
         let _58y = handsA[5].y / handsA[8].y;
@@ -258,12 +245,11 @@ export default {
         let _1720y = handsA[17].y / handsA[20].y;
 
         /*石头剪刀布的转速 */
-        let buNum = 20;
+        let buNum = 50;
         let sNum = 0;
-        let jNum = 100;
+        let jNum = 20;
         /**1布2石头3剪刀 */
 
-
         if (_58y > 1 && _912y > 1 && _1316y > 1 && _1720y > 1) {
           console.log("布");
           if (this.hand == 1) {
@@ -466,34 +452,155 @@ export default {
         });
       });
     },
+    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("");
+      },
+    };
+
+    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.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.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.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.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.noCamera) {
+        that.$message.error(e.data.noCamera);
+      }
+    });
+  },
   },
   mounted() {
-    // console.log(this.$store.state.function);
-    // var _s3 = document.createElement("script");
-    // _s3.src = "/static/materialize/jquery-2.1.3.min.js";
-    // _s3.type = "text/javascript";
-    // document.head.appendChild(_s3);
-    // var _s2 = document.createElement("script");
-    // _s2.src = "/static/camera.283d5d54.js";
-    // _s2.type = "text/javascript";
-    // document.head.appendChild(_s2);
-    // var _s1 = document.createElement("script");
-    // _s1.src = "/static/bundle.js";
-    // _s1.type = "text/javascript";
-    // document.head.appendChild(_s1);
-    // console.log(this.$store.state.function);
-    // this.$nextTick(() => {
+    this.blocklyInit();
+
     this.fnInit();
-    // this.fnInit().then(() => this.fnRun());
-    // });
 
-    // if (this.$store.state.function.indexOf("screen=1;") != -1) {
-    //   // this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
-    //   this.callCamera();
-    // }
     this.videoEl = this.$refs.video;
     this.canvasEL = this.$refs.canvasDOM;
   },
+
+
 };
 </script>
 
@@ -748,4 +855,24 @@ body {
   display: flex;
   flex-direction: column;
 }
+
+
+.ablockly,
+#blocklyDiv {
+height: 100%;
+    width: 100%;
+}
+.blocklySvg {
+  height: 905px !important;
+}
+
+.ablockly {
+  position: relative;
+}
+
+.container{
+    width: 50%;
+    height: 100%;
+    min-width: 960px;
+}
 </style>