@shijiu/jsview-vue-samples 1.9.747

package/FilterDemo/App.vue

@@ -0,0 +1,159 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-20 21:05:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:16:52
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { jJsvRuntimeBridge, JsvFilterView } from "jsview";
+import sample from "./jpegDemo.jpeg";
+import webpSample from "./webpDemo.webp";
+import AnimatePic from "./AnimatePic.vue";
+import VideoLayer from "./VideoLayer.vue";
+
+let viewId = -1;
+let enableFilter = ref(true);
+let filterType = reactive({
+  type: "gray-down",
+});
+
+const router = useRouter();
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else {
+    if (ev.keyCode == 13) {
+      if (filterType.type == null) {
+        filterType.type = "gray-down";
+      } else {
+        filterType.type = null;
+      }
+    }
+  }
+  return true;
+};
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div
+      id="main-test"
+      :style="{
+        left: 400,
+      }"
+    >
+      <jsv-filter-view
+        :width="501"
+        :height="401"
+        ref="filter1"
+        :filterType="this.filterType.type"
+      >
+        <div
+          :style="{
+            left: 0,
+            top: 0,
+            width: 400,
+            height: 350,
+            backgroundImage: `url(${sample})`,
+          }"
+        ></div>
+        <!-- 测试双层FBO (FilterView + opacity变化) 的透过处理(video播放) -->
+        <video-layer :top="20" :left="45" :width="310" :height="310" />
+      </jsv-filter-view>
+      <div
+        :style="{
+          left: 450,
+          top: 0,
+          width: 400,
+          height: 350,
+          backgroundImage: `url(${sample})`,
+        }"
+      ></div>
+
+      <jsv-filter-view
+        :top="400"
+        :width="402"
+        :height="402"
+        ref="filter2"
+        :filterType="this.filterType.type"
+      >
+        <div
+          :style="{
+            width: 300,
+            height: 300,
+            backgroundImage: `url(${webpSample})`,
+          }"
+        ></div>
+        <!-- 测试FBO + 形变效果 -->
+        <animate-pic />
+      </jsv-filter-view>
+      <div
+        :style="{
+          left: 450,
+          top: 400,
+          width: 300,
+          height: 300,
+          backgroundImage: `url(${webpSample})`,
+        }"
+      ></div>
+    </div>
+  </jsv-focus-block>
+  <div
+    className="guideText"
+    :style="{
+      left: 10,
+      top: 30,
+      width: 400,
+      height: 200,
+    }"
+  >
+    {{
+      `1. 布局说明: \n\
+  第1行第1列为黑白图(含透明动画+video)，第2列为原图\n\
+  第2行第1列为黑白图(透明+变形动画)，第2列为原图\n\
+\n\
+2. 操作说明
+  按OK键关闭/开启第1列的黑白滤镜\n\
+\n\
+3. 观测内容\n\
+  A. 第1列是否正常切换黑白/彩色效果\n\
+  B. 第1列的上下两个区域是否都含有淡出的动画
+  C. 第1行第1列是否看到视频(彩色)\n\
+`
+    }}
+  </div>
+</template>
+
+<style scoped>
+.guideText {
+  color: #ffffff;
+  font-size: 16;
+  line-height: 18;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/FilterDemo/VideoLayer.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { JsvVideo } from "jsview";
+
+const props = defineProps({
+  top: {
+    type: Number,
+    default: 0,
+  },
+  left: {
+    type: Number,
+    default: 0,
+  },
+  width: {
+    type: Number,
+    require: true,
+  },
+  height: {
+    type: Number,
+    require: true,
+  },
+});
+
+// const video_url = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20210207/52fae4231350c85fec605b47bbe479c5.mp4";
+const video_url =
+  "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
+</script>
+
+<style scoped>
+@keyframes opacityVideoDemo_CompositeOpacity {
+  from {
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+</style>
+
+<template>
+  <div
+    className="blockStyle"
+    :style="{
+      top: props.top,
+      left: props.left,
+      width: props.width,
+      height: props.height,
+      backgroundColor: '#0000FF',
+      animation: 'opacityVideoDemo_CompositeOpacity 3s infinite',
+    }"
+  >
+    <jsv-video
+      :src="video_url"
+      autoplay="autoplay"
+      loop="loop"
+      :style="{
+        top: 5,
+        left: 5,
+        width: props.width - 10,
+        height: props.height - 10,
+      }"
+    />
+  </div>
+</template>

package/FlipCard/App.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { useRouter } from "vue-router";
+import { ref, shallowRef } from "vue";
+import { HORIZONTAL, MetroWidget } from "jsview";
+import FlipCard from "./FlipCard.vue";
+import { data } from "./data.js";
+import redEgg from "./assets/red_egg.png";
+import blueEgg from "./assets/blue_egg.png";
+
+const name = "/flipCard";
+const focusNode = shallowRef(null);
+const router = useRouter();
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+
+  return false;
+};
+const measures = (item) => {
+  return {
+    width: item.blocks.w,
+    height: item.blocks.h,
+    focusable: item.focusable,
+    hasSub: item.hasSub,
+  };
+};
+const onFocus = () => {
+  focusNode.value.findBlockByName(name).requestFocus();
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+    }"
+  >
+    <metro-widget
+      :name="name"
+      :width="1280"
+      :height="720"
+      :padding="{ left: 50, top: 100, right: 20, bottom: 20 }"
+      :data="data"
+      :direction="HORIZONTAL"
+      :measures="measures"
+    >
+      <template #renderItem="{ data, query, onEdge, onAction }">
+        <FlipCard
+          :data="data"
+          :query="query"
+          :onEdge="onEdge"
+          :onAction="onAction"
+          :width="191"
+          :height="252"
+          :backImg="redEgg"
+          :foreImg="blueEgg"
+          :perspective="300"
+          :initFlipped="false"
+          :name="name + '/' + data.id"
+        />
+      </template>
+    </metro-widget>
+  </jsv-focus-block>
+</template>

package/FlipCard/FlipCard.vue

@@ -0,0 +1,118 @@
+<script setup>
+import { ref, shallowRef } from "vue";
+const props = defineProps({
+  initFlipped: Boolean,
+  width: Number,
+  height: Number,
+  backImg: String,
+  foreImg: String,
+  perspective: Number,
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+  name: String,
+});
+
+let flipAnim = ref("");
+let flipped = ref(props.initFlipped);
+let focused = ref(false);
+let keyLocked = false;
+let focusNode = shallowRef(null);
+
+const onFocus = () => {
+  focused.value = true;
+  focusNode.value.findBlockByName(props.name).requestFocus();
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+const onFlipped = () => {
+  flipped.value = !flipped.value;
+  keyLocked = false;
+};
+const onKeyDown = (ev) => {
+  if (keyLocked) {
+    return true;
+  } else {
+    if (ev.keyCode === 13) {
+      flipAnim.value = flipped.value ? "flip 1s" : "flipBack 1s";
+      return true;
+    }
+  }
+  return false;
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div :style="{ width, height, perspective }">
+      <div
+        :style="{
+          width,
+          height,
+          animation: flipAnim,
+          transformStyle: 'preserve-3d',
+          backgroundColor: '#FFFF00',
+        }"
+        :onAnimationEnd="onFlipped"
+      >
+        <div
+          :style="{
+            width,
+            height,
+            backgroundImage: backImg,
+            backfaceVisibility: 'hidden',
+            transform: flipped ? '' : 'rotate3d(0,1,0,180deg)',
+          }"
+        ></div>
+        <div
+          :style="{
+            width,
+            height,
+            backgroundImage: foreImg,
+            backfaceVisibility: 'hidden',
+            transform: flipped ? 'rotate3d(0,1,0,-180deg)' : '',
+          }"
+        ></div>
+      </div>
+    </div>
+    <div
+      v-if="focused"
+      :style="{ width: 20, height: 20, backgroundColor: '#FF0000' }"
+    ></div>
+  </jsv-focus-block>
+</template>
+<style>
+@keyframes flip {
+  from {
+    transform: rotate3d(0, 1, 0, 0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 1, 0, 180deg);
+    transform-origin: center center;
+  }
+}
+
+@keyframes flipBack {
+  from {
+    transform: rotate3d(0, 1, 0, 0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 1, 0, -180deg);
+    transform-origin: center center;
+  }
+}
+</style>

package/FlipCard/data.js

@@ -0,0 +1,13 @@
+let data = [];
+for (let i = 0; i < 12; i++) {
+    data.push({
+        blocks: {
+            w: 200,
+            h: 300
+        },
+        focusable: true,
+        id: i
+    });
+}
+
+export { data }

package/GridDemo/App.vue

@@ -0,0 +1,215 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-06 19:32:53
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:39:09
+ * @Description: file content
+-->
+<script setup>
+import { jJsvRuntimeBridge, JsvGrid, LineType, EdgeDirection } from "jsview";
+import { reactive, ref, shallowRef, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import ItemVue from "./Item.vue";
+import FocusItem from "./FocusItem.vue";
+const lineType = new LineType(1, 3);
+const name1 = "updatePage1";
+const name2 = "updatePage2";
+const widget1 = shallowRef(null);
+const widget2 = shallowRef(null);
+const router = useRouter();
+const _provideData1 = () => {
+  let data = [];
+  for (let i = 0; i < 113; i++) {
+    data.push({
+      content: i + "_CCCCCCCCCCCCCCCCCCCCCCC",
+    });
+  }
+  return data;
+};
+const _provideData2 = () => {
+  let data2 = [];
+  for (let i = 0; i < 113; i++) {
+    data2.push({
+      name: i + "_D",
+      baseColor: i,
+    });
+  }
+  return data2;
+};
+const _provideData3 = () => {
+  return [];
+};
+
+const _onEdge1 = (info) => {
+  if (info.direction == EdgeDirection.right) {
+    widget2.value.getFocusBlockRef().findBlockByName(name2).requestFocus();
+  }
+};
+const _onEdge2 = (info) => {
+  if (info.direction == EdgeDirection.left) {
+    widget1.value.getFocusBlockRef().findBlockByName(name1).requestFocus();
+  }
+};
+const _onKeyDown = (ev) => {
+  console.log("app onkeydown");
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+  widget2.value.getFocusBlockRef()?.findBlockByName(name2).requestFocus();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#FFFFFF',
+    }"
+    ><jsv-grid
+      ref="widget1"
+      :name="name1"
+      :left="50"
+      :top="50"
+      :provideData="_provideData1"
+      :row="4"
+      :column="5"
+      :itemSize="{
+        width: 100,
+        height: 50,
+      }"
+      :gapInfo="{
+        row: 10,
+        column: 10,
+      }"
+      :verticalUpdate="true"
+      :columnFirst="true"
+      :onEdge="_onEdge1"
+      :initFocusId="21"
+      :loopUpdate="true"
+    >
+      <template #renderItem="{ userData, widgetData, onAction }">
+        <item-vue
+          :userData="userData"
+          :widgetData="widgetData"
+          :onAction="onAction"
+        />
+      </template>
+    </jsv-grid>
+    <div
+      :style="{
+        left: 100,
+        top: 300,
+        width: 300,
+        height: 50,
+        fontSize: 30,
+      }"
+    >
+      纵向排布, 翻页模式
+    </div>
+    <div
+      :style="{
+        left: 700,
+      }"
+    >
+      <jsv-grid
+        ref="widget2"
+        :name="name2"
+        :left="50"
+        :top="50"
+        :provideData="_provideData2"
+        :row="4"
+        :column="5"
+        :itemSize="{
+          width: 100,
+          height: 50,
+        }"
+        :gapInfo="{
+          row: 10,
+          column: 10,
+        }"
+        :verticalUpdate="false"
+        :columnFirst="true"
+        :onEdge="_onEdge2"
+        :updateType="lineType"
+        :initFocusId="0"
+      >
+        <template #renderItem="{ userData, widgetData, onAction }">
+          <focus-item
+            :userData="userData"
+            :widgetData="widgetData"
+            :onAction="onAction"
+          />
+        </template>
+      </jsv-grid>
+      <div
+        :style="{
+          left: 100,
+          top: 300,
+          width: 300,
+          height: 50,
+          fontSize: 30,
+        }"
+      >
+        横向排布, 逐行刷新
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: 500,
+      }"
+    >
+      <jsv-grid
+        ref="widget3"
+        name="empty"
+        :left="50"
+        :top="50"
+        :provideData="_provideData3"
+        :row="4"
+        :column="5"
+        :itemSize="{
+          width: 100,
+          height: 50,
+        }"
+        :gapInfo="{
+          row: 10,
+          column: 10,
+        }"
+        :verticalUpdate="false"
+        :columnFirst="true"
+        :onEdge="_onEdge2"
+        :updateType="lineType"
+        :initFocusId="0"
+      >
+        <template #renderItem="{ userData, widgetData, onAction }">
+          <item-vue
+            :userData="userData"
+            :widgetData="widgetData"
+            :onAction="onAction"
+          />
+        </template>
+      </jsv-grid>
+      <div
+        :style="{
+          left: 100,
+          top: 300,
+          width: 300,
+          height: 50,
+          fontSize: 30,
+        }"
+      >
+        空数据
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>