@shijiu/jsview-vue 0.9.602 → 0.9.631

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -2,13 +2,13 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:30:33
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-13 10:50:43
+ * @LastEditTime: 2022-09-01 17:05:07
  * @Description: file content
 -->
 <script>
 import AppPage from "./AppPage.vue";
 import { getKeyFramesGroup } from "jsview";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 
 export default {
   components: {

package/samples/Preload/App.vue

@@ -5,6 +5,7 @@ import {
   JsvPreload,
   buildPreloadInfo,
   buildDownloadInfo,
+  useFocusHub,
 } from "jsview";
 import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
@@ -14,11 +15,11 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 const name = "/preload";
+const focusHub = useFocusHub();
 const text = ref("");
-let = preloadInfo = [];
-let = downloadInfo = [];
+let preloadInfo = [];
+let downloadInfo = [];
 const router = useRouter();
-let focusNode = ref(null);
 
 const _onPreloading = (percent) => {
   console.log("preloading ", percent);
@@ -28,9 +29,9 @@ const _onPreloadDone = (imageInfo) => {
   console.log("PRELOAD DONE!", imageInfo);
 };
 
-const _onDownloadDone = () => {
-  console.log("DOWNLOAD DONE!");
-  this.text = `图片下载完成\n${awesome}\n${cat}`;
+const _onDownloadDone = (urls, extra) => {
+  console.log("DOWNLOAD DONE!", urls, extra);
+  text.value = `图片下载完成\n${awesome}\n${cat}`;
 };
 
 const _measures = () => {
@@ -43,13 +44,13 @@ const _measures = () => {
 
 const _onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
   }
   return true;
 };
 
 const _onFocus = () => {
-  focusNode.value.findBlockByName(name).requestFocus();
+  focusHub.setFocus(name);
 };
 
 for (const item of data) {
@@ -58,16 +59,20 @@ for (const item of data) {
 }
 preloadInfo.push(null); // 测试item为null的加载
 downloadInfo = [
-  buildDownloadInfo(awesome),
-  buildDownloadInfo(cat),
+  buildDownloadInfo(awesome, null, true),
+  buildDownloadInfo(cat, null, true),
   buildDownloadInfo(null), // 测试URL为null的加载
 ];
 </script>
 
 <template>
   <jsv-focus-block
-    ref="focusNode"
     autoFocus
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#FFFFFF',
+    }"
     :onAction="{
       onKeyDown: _onKeyDown,
       onFocus: _onFocus,

package/samples/TextureAnimation/App2.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import {
+  jJsvRuntimeBridge,
+  getKeyFramesGroup,
+  JsvTextureAnim,
+  TexAlignAnchor,
+  DECORATE_NINEPATCH_ALPHA_MIX,
+  DECORATE_BORDER_RADIUS,
+} from "jsview";
+import img from "./assets/light.png";
+import img2 from "./assets/light2.png";
+import mask from "./assets/mask.png";
+
+const getRandom = (start, end) => {
+  return Math.round(Math.random() * (end - start) + start);
+};
+
+const router = useRouter();
+const width = ref(300);
+const height = ref(200);
+const left = ref(50);
+const top = ref(80);
+const rotateAnimation =
+  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
+
+const ninePatchDecorator = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `url(${mask})`,
+  imageWidth: 86,
+  centerWidth: 2,
+  borderOutset: 0,
+  animTime: 0.5,
+};
+//注意texture的尺寸需要兼顾最大的view
+const texCoord = {
+  width: 600,
+  height: 600,
+};
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == 13) {
+    left.value = getRandom(50, 400);
+    top.value = getRandom(80, 200);
+    width.value = getRandom(100, 300);
+    height.value = getRandom(100, 300);
+  }
+  return true;
+};
+</script>
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onKeyDown="onKeyDown"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundImage:
+        'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      .9型的旋转焦点框,OK键进行随机位置+尺寸变换
+    </div>
+    <div>
+      <jsv-texture-anim
+        :src="img"
+        :left="left"
+        :top="top"
+        :width="width"
+        :height="height"
+        :texCoord="texCoord"
+        :animation="rotateAnimation"
+        :duration="2000"
+        :repeat="-1"
+        :autoStart="true"
+        :decorate="ninePatchDecorator"
+      ></jsv-texture-anim>
+    </div>
+    <div>
+      <jsv-texture-anim
+        :src="img2"
+        :left="left + 500"
+        :top="top"
+        :width="width"
+        :height="height"
+        :texCoord="texCoord"
+        :animation="rotateAnimation"
+        :duration="2000"
+        :repeat="-1"
+        :autoStart="true"
+        :decorate="ninePatchDecorator"
+      ></jsv-texture-anim>
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/VisibleSensorDemo/App.vue

@@ -1,22 +1,15 @@
 <script setup>
-import { reactive, onMounted, ref } from "vue";
+import { watch, reactive, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
 
 const BOX_WIDTH = 150;
 const BOX_HEIGHT = 150;
-const BOX_COLOR = "#00FFFF";
+const BOX_COLOR = "rgba(0,255,255,0.6)";
+const VISIBLE_RANGE = 0.25;
 
 const router = useRouter();
 
-let shown = reactive({
-  vertical: 0.25,
-  horizon: 1.0,
-});
-
-let left_change = reactive({ left: 0 });
-let top_change = reactive({ top: 0 });
-
 const containerRef = ref(null);
 let case_config = ref(null);
 let status_text = reactive({
@@ -26,12 +19,24 @@ let status_text = reactive({
   newV: "false",
 });
 
-case_config.value = getTestCase(0);
+let test_case_type = ref(0);
+
+window.LudlTestCase = test_case_type;
+
+case_config.value = getTestCase(test_case_type.value);
+
+watch(test_case_type, () => {
+  case_config.value = getTestCase(test_case_type.value);
+});
 
 onMounted(() => {
   jJsvRuntimeBridge.notifyPageLoaded();
 });
 
+// const onAnimDone = () => {
+//   test_case_type.value = (test_case_type.value + 1) % 2;
+// };
+
 // 内部接口
 const onBeVisible = (old_h, new_h, old_v, new_v) => {
   status_text.oldH = old_h ? "true" : "false";
@@ -46,6 +51,9 @@ const onKeyDown = (ev) => {
     router?.go(-1); // 有router时，回退
     return true;
   }
+  if (ev.keyCode == 13) {
+    test_case_type.value = (test_case_type.value + 1) % 2;
+  }
   return false;
 };
 
@@ -60,17 +68,17 @@ function getTestCase(test_index) {
   switch (test_index) {
     case 0: {
       // 上到下
-      test_config.animation = "visibleSensor_upDown 5s infinite linear";
+      test_config.animation = "visibleSensor_upDown 8s infinite linear";
       test_config.text = "从上到下";
       test_config.horizon = 1.0;
-      test_config.vertical = 0.25;
+      test_config.vertical = VISIBLE_RANGE;
       break;
     }
     case 1: {
       // 左到右
-      test_config.animation = "visibleSensor_leftRight 5s infinite linear";
+      test_config.animation = "visibleSensor_leftRight 8s infinite linear";
       test_config.text = "从左到右";
-      test_config.horizon = 0.25;
+      test_config.horizon = VISIBLE_RANGE;
       test_config.vertical = 1.0;
       break;
     }
@@ -87,7 +95,7 @@ function getTestCase(test_index) {
         :style="{
           left: 10,
           top: 10,
-          height: 100,
+          height: 120,
           width: 900,
           fontColor: '#000000',
           fontSize: 15,
@@ -95,7 +103,8 @@ function getTestCase(test_index) {
         }"
       >
         {{
-          `new horizon: ${status_text.newH}
+          `按OK键切换方向
+new horizon: ${status_text.newH}
 new vertical: ${status_text.newV}
 -------
 old horizon: ${status_text.oldH}
@@ -106,12 +115,34 @@ old vertical: ${status_text.oldV}`
         ref="containerRef"
         :style="{
           left: 240,
-          top: 110,
-          width: 800,
-          height: 500,
+          top: 180,
+          width: 300,
+          height: 300,
           backgroundColor: '#00F0F0',
         }"
       >
+        <div
+          :style="{
+            left: 50,
+            top: 50,
+            width: 200,
+            height: 200,
+            backgroundColor: '#00AAAA',
+            zIndex: test_case_type == 0 ? -22 : 0,
+          }"
+        />
+
+        <div
+          :style="{
+            left: 80,
+            top: 30,
+            width: 140,
+            height: 240,
+            backgroundColor: '#0000AA',
+            zIndex: test_case_type == 0 ? -33 : 0,
+          }"
+        />
+
         <div
           :style="{
             left: 0,
@@ -128,6 +159,40 @@ old vertical: ${status_text.oldV}`
             :container="containerRef"
             :callback="onBeVisible"
           >
+            <div v-if="test_case_type == 0">
+              <div
+                :style="{
+                  width: BOX_WIDTH,
+                  height: BOX_HEIGHT * VISIBLE_RANGE,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+              <div
+                :style="{
+                  top: BOX_HEIGHT * (1 - VISIBLE_RANGE),
+                  width: BOX_WIDTH,
+                  height: BOX_HEIGHT * VISIBLE_RANGE,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+            </div>
+            <div v-else>
+              <div
+                :style="{
+                  width: BOX_WIDTH * VISIBLE_RANGE,
+                  height: BOX_HEIGHT,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+              <div
+                :style="{
+                  left: BOX_WIDTH * (1 - VISIBLE_RANGE),
+                  width: BOX_WIDTH * VISIBLE_RANGE,
+                  height: BOX_HEIGHT,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+            </div>
             <div
               :style="{
                 width: BOX_WIDTH,
@@ -137,7 +202,9 @@ old vertical: ${status_text.oldV}`
                 lineHeight: 30,
               }"
             >
-              {{ case_config.text }}
+              {{
+                `${case_config.text}\nH:${status_text.newH}\nV:${status_text.newV}`
+              }}
             </div>
           </JsvVisibleSensor>
         </div>
@@ -149,19 +216,19 @@ old vertical: ${status_text.oldV}`
 <style scoped>
 @keyframes visibleSensor_upDown {
   from {
-    transform: translate3d(300px, -200px, 0);
+    transform: translate3d(75px, -180px, 0);
   }
   to {
-    transform: translate3d(300px, 600px, 0);
+    transform: translate3d(75px, 330px, 0);
   }
 }
 
 @keyframes visibleSensor_leftRight {
   from {
-    transform: translate3d(-160px, 200px, 0);
+    transform: translate3d(-180px, 75px, 0);
   }
   to {
-    transform: translate3d(1400px, 200px, 0);
+    transform: translate3d(330px, 75px, 0);
   }
 }
 </style>

package/utils/JsViewPlugin/JsvPlayer/JsvMedia.js

@@ -206,6 +206,7 @@ class JsvBaseMedia {
             timeUpdateLess: false,
             rate: 1.0,
             volume: 1.0,
+            chromaKey: null,
         };
         
 		this.local = {
@@ -341,6 +342,10 @@ class JsvBaseMedia {
         if(this.state["aspectRatio"] !== "origin"){
             this.setState("aspectRatio", this.state["aspectRatio"], "string");
         }
+
+        if(this.state["chromaKey"]){
+            this.setState("chromaKey", this.state["chromaKey"], "string");
+        }
     }
 
     onVisibilityChangeCallBack(){
@@ -1154,12 +1159,33 @@ class JsvBaseMedia {
      * @param {double} time，值为从当前时间计算向前移动了多长时间，单位秒。
      */
     setTimeShift(time){
-        logTrace("setTimeShift, key="+this.key+", time"+time);
+        logTrace("setTimeShift, key="+this.key+", time="+time);
         if(this.playerCreate && this.appVisible){
             window.jsvPlayerBridge.setTimeShift(this.key, time);
         }
     }
 
+    /**
+     * 设置色度抠像参数，只支持扣绿。
+     * 参考格式：{color: 0x30FF30, colorDistance: 0.15, edgeDistance: 0.4, greenOffset: 0.05}
+     * @param {JSON object} chromaKey，抠像参数，JSON Object包含的参数如下：
+     *                                 color，色值，int类型，为抠图色值范围的中心点，格式为0xRRGGBB。
+     *                                 colorDistance，float类型，色域范围，范围0-1.0。
+     *                                 edgeDistance，float类型，alpha透明度距离，范围colorDistance-1.0，从colorDistance到edgeDistance的alpha值从1.0-0线性递减。
+     *                                 greenOffset，float类型，红蓝差值，范围0-1.0。
+     */
+     setChromaKey(chromaKey){
+        logTrace("setChromaKey, key="+this.key+", chroma key="+JSON.stringify(chromaKey));
+        this.setState("chromaKey", JSON.stringify(chromaKey), "string");
+    }
+
+    setDebugMode(mode){
+        logTrace("setDebugMode, key="+this.key+", mode="+mode);
+        if(typeof window.jsvPlayerBridge !== "undefined"){
+            return window.jsvPlayerBridge.setDebugMode(this.key, mode);
+        }
+    }
+
     /**
      * 私有接口，外部不需要调用此接口。
      */
@@ -1286,7 +1312,7 @@ function getJsvPlayerCapabilitySet(){
      *                  支持三个属性：1、total：总的播放器个数；2、hardware：硬解播放器个数；3、软解播放器个数，如果硬解播放器个数不满足需求，会根据cpu能力确定是否提供软解播放器。
      * */
 function setJsvPlayerNumber(videoType, num){
-    logTrace("setPlayerNumber, key="+this.key+", videoType="+videoType+", num="+num);
+    logTrace("setPlayerNumber, videoType="+videoType+", num="+num);
     if(typeof window.jsvPlayerBridge !== "undefined"){
         return window.jsvPlayerBridge.setPlayerNumber(videoType, num);
     }else{
@@ -1294,6 +1320,13 @@ function setJsvPlayerNumber(videoType, num){
     }
 }
 
+function setJsvPlayerDebugMode(mode){
+    logTrace("setDebugMode, mode="+mode);
+    if(typeof window.jsvPlayerBridge !== "undefined"){
+        return window.jsvPlayerBridge.setDebugMode(null, mode);
+    }
+}
+
 export {
     JsvMediaVideo,
     JsvMediaAudio,
@@ -1307,4 +1340,5 @@ export {
     logWarning,
     logDebug,
     logTrace,
+    setJsvPlayerDebugMode,
 }

package/utils/JsViewPlugin/JsvPlayer/JsvPlayer.vue

@@ -49,11 +49,21 @@ export default {
 		/**
 		 * 属性，Boolean类型，是否保留最后一帧，true保留，false不保留。
 		 */
-		keepLastFrame: {type: Boolean, default: false},
+		keepLastFrame: {type: Boolean, default: true},
 		/**
 		 * 属性，String类型，视频显示比例，origin原始比例显示，full全屏显示，x:y按照指定比例显示。
 		 */
 		videoAspectRatio: {type: String, default: "origin"},
+		/**
+		 * 属性，JSON Object类型，色度抠像参数，包含color，colorDistance，edgeDistance，greenOffset四个参数，
+		 * 参考格式：{color: 0x30FF30, colorDistance: 0.15, edgeDistance: 0.4, greenOffset: 0.05}
+		 *          color，色值，int类型，为抠图色值范围的中心点，格式为0xRRGGBB。
+     	 *          colorDistance，float类型，色域范围，范围0-1.0。
+     	 *          edgeDistance，float类型，alpha透明度距离，范围colorDistance-1.0，从colorDistance到edgeDistance的alpha值从1.0-0线性递减。
+     	 *          greenOffset，float类型，红蓝差值，范围0-1.0。
+		 * 目前只支持扣绿。
+		 */
+		chromaKey: {type: Object, default: null},
 		/**
 		 * 回调函数，播放结束时通过此回调接口通知。
 		 */
@@ -255,13 +265,17 @@ export default {
 						this.video.loop = this.loop;
 					}
 
-					if(this.keepLastFrame){
+					if(!this.keepLastFrame){
 						this.video.keepLastFrame = this.keepLastFrame;
 					}
 
 					if(this.videoAspectRatio !== "origin"){
 						this.video.videoAspectRatio = this.videoAspectRatio;
 					}
+
+					if(this.chromaKey && this.chromaKey !== ""){
+						this.video.setChromaKey(this.chromaKey)
+					}
 				//}else{
 				if(!first_create){
 					this.video.setHoleID(this.holeId);
@@ -279,6 +293,7 @@ export default {
 	unmounted(){
 		if(this.video != null){
 			this.video.releasePlayer();
+
 			this.onRef?.(null)
 		}
 	},

package/utils/JsViewPlugin/JsvPlayer/index.js

@@ -2,10 +2,13 @@
 import * as JsvPlayer from "./JsvPlayer.vue";
 import { globalLoadJsvPlayerPlugin as initPlugin } from "./JsvMedia.js"
 import { getJsvPlayerCapabilitySet as getCapabilitySet } from "./JsvMedia.js"
+import { setJsvPlayerDebugMode as setDebugMode } from "./JsvMedia.js"
 let _JsvPlayer = JsvPlayer;
 
 let globalLoadJsvPlayerPlugin = initPlugin;
 let getJsvPlayerCapabilitySet = getCapabilitySet;
+let setJsvPlayerDebugMode = setDebugMode;
+
 if (window.JsvWidgetWrapperGroup?.BrowserJsvPlayer) {
     // 浏览器版本
     _JsvPlayer = window.JsvWidgetWrapperGroup.BrowserJsvPlayer;
@@ -19,6 +22,10 @@ if (window.JsvWidgetWrapperGroup?.BrowserJsvPlayer) {
     getJsvPlayerCapabilitySet = () => {
         return null;
     }
+
+    setJsvPlayerDebugMode = () => {
+        console.log("Set debug mode");
+    }
 }
 
 let component = _JsvPlayer.default;
@@ -27,5 +34,5 @@ export default component;
 export {
     globalLoadJsvPlayerPlugin, // 全局初始化播放器插件处理
     getJsvPlayerCapabilitySet, //获取设备能力集
-
+    setJsvPlayerDebugMode, //设置调试模式，可以查看帧率等信息
 }

package/utils/JsViewPlugin/JsvPlayer/version.js

@@ -2,16 +2,16 @@ let PluginInfo={
     // downloadUrl:"http://192.168.0.63:8080/plugin/JsvPlayer-164.zip", //插件下载地址
     packageName:"com.qcode.jsvplayer",
     name:"播放器插件",
-    version:"1.6.5",  //插件需要的版本号
-    versionCodeMin:165,
-    versionCodeMax:165,
+    version:"1.6.7",  //插件需要的版本号
+    versionCodeMin:167,
+    versionCodeMax:167,
     bridgeName:"jsvPlayerBridge", //插件bridge注册到jsview的名称
     className:"com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
     initMethod:"createInstance",   //插件初始化方法
     listener:"top.JsvPlayerPluginLoadResult",  //插件加载结果回调
     listener2: "top.JsvPlayerPluginStatus",
     // debug:true,
-    md5:"1d06b3a8acba255efb4826a15a7fb480"
+    md5:"19b065b6d4d2acdbaf6093c4864fea22"
 };
 
 // 不要用export default，update-env脚本不能解析