更换图标,增加语言切换

package.json

@@ -23,7 +23,8 @@
     "vue": "^3.0.0",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.0",
-    "vuex": "^4.0.1"
+    "vuex": "^4.0.1",
+    "zrender": "^5.3.1"
   },
   "devDependencies": {
     "@quasar/app": "^3.3.3",

quasar.conf.js

@@ -87,7 +87,7 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ["Notify", "Dialog", "Loading", "AppFullscreen"],
+      plugins: ["Notify", "Dialog", "Loading", "AppFullscreen", "Cookies"],
     },
 
     // animations: 'all', // --- includes all animations

src/boot/i18n.ts

@@ -1,10 +1,22 @@
-import { boot } from 'quasar/wrappers';
+import { boot } from "quasar/wrappers";
-import { createI18n } from 'vue-i18n';
+import { createI18n } from "vue-i18n";
+import { Cookies } from "quasar";
 
-import messages from 'src/i18n';
+import messages from "src/i18n";
+
+let language = Cookies.get("language");
+if (!language) {
+  language = "zh-CN";
+}
+
+if (language != "zh-CN" && language != "en-US") {
+  language = "zh-CN";
+}
+
+Cookies.set("language", language);
 
 const i18n = createI18n({
-  locale: 'zh-CN',
+  locale: language,
   messages,
 });
 

src/common/ClientConnection.ts

@@ -7,6 +7,7 @@ import { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
 import SubtitleEntity from "src/entities/SubtitleEntity";
 import { Protocol } from "src/entities/WSProtocol";
 import EventBus, { EventNamesDefine } from "./EventBus";
+import { EdgeBlendingPoint } from "src/entities/EdgeBlendingEntities";
 
 class _RpcInfo {
   send_timestamp: number;
@@ -809,6 +810,7 @@ export default class ClientConnection {
       new Protocol.GetSystemTimesRequestEntity(0)
     );
   }
+
   public restartDevice(delay_ms?: number) {
     this.ws?.send(
       JSON.stringify(new Protocol.RestartDeviceRequestEntity(delay_ms))
@@ -835,6 +837,41 @@ export default class ClientConnection {
     }
   }
 
+  public async getEdgeBlendingInfo() {
+    return await this.doRpc<Protocol.GetEdgeBlendingInfoResponseEntity>(
+      new Protocol.GetEdgeBlendingInfoRequestEntity(0)
+    );
+  }
+
+  public async setEdgeBlendingInfo(
+    enable_blending: boolean,
+    enable_correct: boolean,
+    width: number,
+    height: number,
+    col: number,
+    row: number,
+    point_count: number
+  ) {
+    return await this.doRpc<Protocol.SetEdgeBlendingInfoResponseEntity>(
+      new Protocol.SetEdgeBlendingInfoRequestEntity(
+        enable_blending,
+        enable_correct,
+        width,
+        height,
+        col,
+        row,
+        point_count,
+        0
+      )
+    );
+  }
+
+  public setEdgeBlendingPoint(point: EdgeBlendingPoint) {
+    this.ws?.send(
+      JSON.stringify(new Protocol.SetEdgeBlendingPointRequestEntity(point))
+    );
+  }
+
   public destory() {
     if (this.ws) {
       this.ws.onclose = null;

src/components/EdgeBlendingControl.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <div ref="render" class="fit"></div>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  Ref,
+  watch,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+} from "vue";
+const elementResizeDetectorMaker = require("element-resize-detector");
+import { useStore } from "src/store";
+import { useQuasar, copyToClipboard } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+
+import CanvasPainter from "zrender/lib/canvas/Painter";
+import * as zrender from "zrender";
+
+import {
+  EdgeBlendingInfo,
+  EdgeBlendingPoint,
+} from "src/entities/EdgeBlendingEntities";
+
+class _GridItem {
+  row = 0;
+  col = 0;
+  x = 0;
+  y = 0;
+  width = 0;
+  height = 0;
+  index = 0;
+  points: EdgeBlendingPoint[] = [];
+}
+
+export default defineComponent({
+  name: "ComponentEdgeBlendingControl",
+  components: {},
+  props: {
+    edge_blending_info: {
+      type: EdgeBlendingInfo,
+      default: new EdgeBlendingInfo(),
+    },
+    all_points: {
+      type: Array,
+      default: [],
+    },
+  },
+  setup($props) {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    const render: Ref<any> = ref(null);
+
+    const real_render_width = ref(0);
+    const real_render_height = ref(0);
+    const width_scaler = ref(0.0);
+    const height_scaler = ref(0.0);
+
+    let grid_items: _GridItem[] = [];
+
+    let z_render: zrender.ZRenderType;
+    let background_group: zrender.Group;
+    let points_group: zrender.Group;
+
+    const get_point = (row: number, col: number, index: number) => {
+      const result = ($props.all_points as EdgeBlendingPoint[]).find(
+        (element) =>
+          element &&
+          element.row == row &&
+          element.col == col &&
+          element.point_index == index
+      );
+      return result;
+    };
+
+    const refresh_grid_items = () => {
+      const grid_width =
+        $props.edge_blending_info.width / $props.edge_blending_info.col;
+      const grid_height =
+        $props.edge_blending_info.height / $props.edge_blending_info.row;
+
+      grid_items = [];
+      for (let row = 0; row < $props.edge_blending_info.row; ++row) {
+        for (let col = 0; col < $props.edge_blending_info.col; ++col) {
+          let item = new _GridItem();
+          item.index = row * $props.edge_blending_info.col + col;
+          item.row = row;
+          item.col = col;
+          item.x = grid_width * item.col;
+          item.y = grid_height * item.row;
+          item.width = grid_width;
+          item.height = grid_height;
+          item.points = [];
+
+          for (let i = 0; i < $props.edge_blending_info.point_count; ++i) {
+            const point = get_point(row, col, i);
+            if (point) {
+              item.points.push(point);
+            }
+          }
+
+          grid_items.push(item);
+        }
+      }
+    };
+
+    const initialize_zrender = () => {
+      if (render.value) {
+        zrender.registerPainter("canvas", CanvasPainter);
+        z_render = zrender.init(render.value);
+        console.log(z_render);
+        background_group = new zrender.Group();
+        points_group = new zrender.Group();
+
+        z_render.add(background_group);
+        z_render.add(points_group);
+      }
+    };
+
+    const render_background = () => {
+      background_group.removeAll();
+      for (const grid_item of grid_items) {
+        if (grid_item) {
+          var rect = new zrender.Rect({
+            shape: {
+              x: grid_item.x * width_scaler.value + 5,
+              y: grid_item.y * height_scaler.value + 5,
+              width: grid_item.width * width_scaler.value,
+              height: grid_item.height * height_scaler.value,
+            },
+            style: {
+              fill: "none",
+              stroke: "#F00",
+              lineDash: [10, 5],
+            },
+          });
+          var text = new zrender.Text({
+            style: {
+              x: rect.shape.x,
+              y: rect.shape.y,
+              width: rect.shape.width,
+              height: rect.shape.height,
+              align: "center",
+              verticalAlign: "middle",
+              fill: "red",
+              stroke: "none",
+              text: "aaa",
+            },
+          });
+          background_group.add(rect);
+          background_group.add(text);
+        }
+      }
+    };
+
+    const render_points = () => {
+      points_group.removeAll();
+      for (const grid_item of grid_items) {
+        if (grid_item) {
+          for (const point of grid_item.points) {
+            if (point) {
+              var circle = new zrender.Circle({
+                shape: {
+                  cx: (grid_item.x + point.x) * width_scaler.value + 5,
+                  cy: (grid_item.y + point.y) * height_scaler.value + 5,
+                  r: 5,
+                },
+                style: {
+                  fill: "black",
+                  stroke: "none",
+                },
+                draggable: true,
+              });
+              points_group.add(circle);
+            }
+          }
+        }
+      }
+    };
+
+    const do_render = () => {
+      render_background();
+      render_points();
+    };
+
+    onMounted(() => {
+      if (render.value) {
+        elementResizeDetectorMaker().listenTo(
+          render.value,
+          (element: HTMLElement) => {
+            if (element) {
+              real_render_width.value = element.clientWidth - 10;
+              real_render_height.value = element.clientHeight - 10;
+              if (z_render) {
+                z_render.resize({
+                  width: element.clientWidth,
+                  height: element.clientHeight,
+                });
+              }
+              width_scaler.value =
+                real_render_width.value / $props.edge_blending_info.width;
+              height_scaler.value =
+                real_render_height.value / $props.edge_blending_info.height;
+              do_render();
+            }
+          }
+        );
+        initialize_zrender();
+      }
+    });
+
+    refresh_grid_items();
+
+    return {
+      render,
+      real_render_width,
+      real_render_height,
+      width_scaler,
+      height_scaler,
+    };
+  },
+});
+</script>

src/components/EdgeBlendingDialog.vue

@@ -0,0 +1,353 @@
+<template>
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @before-hide="resetData"
+    @keydown="
+      (evt) => {
+        if (evt.keyCode == 27) {
+          show_dialog = false;
+        }
+      }
+    "
+  >
+    <q-card class="overflow-hidden" style="max-width: 80vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("edge blending") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                color="red"
+                v-close-popup
+              >
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section class="scroll" style="width: 80vw; height: 70vh">
+          <q-card class="fit">
+            <q-tabs
+              v-model="tab"
+              dense
+              class="text-grey"
+              active-color="primary"
+              indicator-color="primary"
+              align="justify"
+              narrow-indicator
+            >
+              <q-tab name="setting" :label="$t('blending setting')" />
+              <q-tab
+                v-if="!loading"
+                name="point_setting"
+                :label="$t('point correct')"
+              />
+            </q-tabs>
+
+            <q-separator />
+
+            <q-tab-panels v-model="tab" animated class="q-pa-none q-ma-none">
+              <q-tab-panel name="setting"
+                ><q-list>
+                  <q-item>
+                    <q-item-section>
+                      <q-checkbox
+                        v-model="edge_blending_info.enable_blending"
+                        :loading="loading"
+                        :disable="loading"
+                        :label="$t('enable blending')"
+                      />
+                    </q-item-section>
+                    <q-item-section>
+                      <q-checkbox
+                        v-model="edge_blending_info.enable_correct"
+                        :loading="loading"
+                        :disable="loading"
+                        :label="$t('enable correct')"
+                      />
+                    </q-item-section>
+                  </q-item>
+                  <q-item>
+                    <q-item-section avatar class="header_label">
+                      {{ $t("width") }}
+                    </q-item-section>
+                    <q-item-section>
+                      <q-input
+                        type="number"
+                        min="0"
+                        max="65535"
+                        v-model="edge_blending_info.width"
+                        :loading="loading"
+                        :disable="loading"
+                        lazy-rules
+                        :rules="[
+                          (val) =>
+                            (val && val.toString().length > 0) ||
+                            $t('Please type something'),
+                        ]"
+                      />
+                    </q-item-section>
+                    <q-item-section avatar class="header_label_2">
+                      {{ $t("height") }}
+                    </q-item-section>
+                    <q-item-section>
+                      <q-input
+                        min="0"
+                        max="65535"
+                        v-model="edge_blending_info.height"
+                        :loading="loading"
+                        :disable="loading"
+                        lazy-rules
+                        :rules="[
+                          (val) =>
+                            (val && val.toString().length > 0) ||
+                            $t('Please type something'),
+                        ]"
+                      />
+                    </q-item-section>
+                  </q-item>
+                  <q-item>
+                    <q-item-section avatar class="header_label">
+                      {{ $t("row") }}
+                    </q-item-section>
+                    <q-item-section>
+                      <q-input
+                        min="0"
+                        max="65535"
+                        v-model="edge_blending_info.row"
+                        :loading="loading"
+                        :disable="loading"
+                        lazy-rules
+                        :rules="[
+                          (val) =>
+                            (val && val.toString().length > 0) ||
+                            $t('Please type something'),
+                        ]"
+                      />
+                    </q-item-section>
+                    <q-item-section avatar class="header_label_2">
+                      {{ $t("col") }}
+                    </q-item-section>
+                    <q-item-section>
+                      <q-input
+                        min="0"
+                        max="65535"
+                        v-model="edge_blending_info.col"
+                        :loading="loading"
+                        :disable="loading"
+                        lazy-rules
+                        :rules="[
+                          (val) =>
+                            (val && val.toString().length > 0) ||
+                            $t('Please type something'),
+                        ]"
+                      />
+                    </q-item-section>
+                  </q-item>
+                  <q-item>
+                    <q-item-section avatar class="header_label">
+                      {{ $t("correct type") }}
+                    </q-item-section>
+                    <q-item-section>
+                      <q-select
+                        :loading="loading"
+                        :disable="loading"
+                        v-model="edge_blending_info.point_count"
+                        :options="edge_correct_type_options"
+                        emit-value
+                        map-options
+                      />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-tab-panel>
+
+              <q-tab-panel name="point_setting" class="q-pa-none q-ma-none fit">
+                <edge-blending-control
+                  ref="correct_wall"
+                  class="full-width overflow-hidden q-pa-xs"
+                  style="height: 62vh"
+                  :edge_blending_info="edge_blending_info"
+                  :all_points="points"
+                >
+                </edge-blending-control>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-card>
+        </q-card-section>
+        <q-separator v-if="tab == 'setting'" />
+        <q-card-actions align="right" v-if="tab == 'setting'">
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            :loading="loading"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.header_label {
+  width: 10%;
+}
+.header_label_2 {
+  width: 10%;
+  align-items: center;
+}
+</style>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  Ref,
+  watch,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+} from "vue";
+import { useStore } from "src/store";
+import { useQuasar, copyToClipboard } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+import EdgeBlendingControl from "src/components/EdgeBlendingControl.vue";
+
+import {
+  EdgeBlendingInfo,
+  EdgeBlendingPoint,
+} from "src/entities/EdgeBlendingEntities";
+
+export default defineComponent({
+  name: "ComponentEdgeBlendingDialog",
+  components: { EdgeBlendingControl },
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let loading = ref(false);
+    let tab = ref("setting");
+    const correct_wall: Ref<any> = ref(null);
+    const points: Ref<EdgeBlendingPoint[]> = ref([]);
+
+    const edge_blending_info = ref(new EdgeBlendingInfo());
+    const edge_bending_points = ref([new EdgeBlendingPoint()]);
+    const edge_correct_type_options = ref([
+      {
+        label: $t.t("4 point plane correct"),
+        value: 4,
+      },
+      {
+        label: $t.t("9 point surface correct"),
+        value: 9,
+      },
+    ]);
+
+    return {
+      show_dialog,
+      loading,
+      tab,
+      edge_blending_info,
+      edge_bending_points,
+      edge_correct_type_options,
+      correct_wall,
+      points,
+      copyToClipboard,
+      loga(a: any) {
+        console.log(a);
+      },
+      async showDialog() {
+        show_dialog.value = true;
+        loading.value = true;
+        try {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getEdgeBlendingInfo();
+          if (response) {
+            edge_blending_info.value.enable_blending = response.enable_blending;
+            edge_blending_info.value.enable_correct = response.enable_correct;
+            edge_blending_info.value.width = response.width;
+            edge_blending_info.value.height = response.height;
+            edge_blending_info.value.col = response.col;
+            edge_blending_info.value.row = response.row;
+            edge_blending_info.value.point_count = response.point_count;
+            points.value = response.points;
+          } else {
+            throw $t.t("get edge blending data failed") + "!";
+          }
+        } catch {
+          $q.dialog({
+            title: $t.t("Error"),
+            message: $t.t("get edge blending data failed") + "!",
+            cancel: true,
+          }).onDismiss(() => {
+            show_dialog.value = false;
+          });
+        }
+
+        loading.value = false;
+      },
+      resetData() {
+        loading.value = false;
+      },
+
+      async onSubmit() {
+        loading.value = true;
+        let success = false;
+
+        try {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setEdgeBlendingInfo(
+              edge_blending_info.value.enable_blending,
+              edge_blending_info.value.enable_correct,
+              parseInt(edge_blending_info.value.width.toString()),
+              parseInt(edge_blending_info.value.height.toString()),
+              parseInt(edge_blending_info.value.col.toString()),
+              parseInt(edge_blending_info.value.row.toString()),
+              parseInt(edge_blending_info.value.point_count.toString())
+            );
+          if (response) {
+            success = response.success;
+          } else {
+            throw $t.t("set edge blending data failed") + "!";
+          }
+        } catch {
+          success = false;
+        }
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("set edge blending data") +
+            (success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>

src/components/RegisterDialog.vue

@@ -219,17 +219,6 @@ export default defineComponent({
         } catch {}
         loading.value = false;
       },
-      toggleFullScreen(e: any) {
-        console.log(e);
-        const target = e.target.parentNode.parentNode.parentNode;
-        console.log(target);
-        $q.fullscreen
-          .toggle(target)
-          .then(() => {})
-          .catch((err) => {
-            console.error(err);
-          });
-      },
     };
   },
 });

src/components/SystemSettingDialog.vue

@@ -49,13 +49,13 @@
         >
           <q-tab
             name="network"
-            icon="language"
+            :icon="/*language*/ 'img:new_icon/network_setting.png'"
             :label="$t('network setting')"
             :disable="loading"
           />
           <q-tab
             name="graphics"
-            icon="picture_in_picture_alt"
+            :icon="/*picture_in_picture_alt*/ 'img:new_icon/graphics_setting.png'"
             :label="$t('graphics setting')"
             :disable="loading"
           />
@@ -308,7 +308,9 @@
                             </p>
                             <p>
                               {{
-                                $t("FOCEOUTPUT(CUSTOM): uses the specified timing output")
+                                $t(
+                                  "FOCEOUTPUT(CUSTOM): uses the specified timing output"
+                                )
                               }}
                             </p>
                           </q-tooltip>

src/entities/EdgeBlendingEntities.ts

@@ -0,0 +1,17 @@
+export class EdgeBlendingInfo {
+  enable_blending: boolean = false;
+  enable_correct: boolean = false;
+  width: number = 0;
+  height: number = 0;
+  col: number = 0;
+  row: number = 0;
+  point_count: number = 0;
+}
+
+export class EdgeBlendingPoint {
+  point_index: number = 0;
+  row: number = 0;
+  col: number = 0;
+  x: number = 0;
+  y: number = 0;
+}

src/entities/WSProtocol.ts

@@ -5,6 +5,7 @@ import { ModeEntity } from "./ModeEntity";
 import { PlanEntity } from "./PlanEntity";
 import SubtitleEntity from "./SubtitleEntity";
 import { PollingEntity, PollingGroupEntity } from "./PollingEntity";
+import { EdgeBlendingPoint } from "./EdgeBlendingEntities";
 
 export namespace Protocol {
   export class Commands {
@@ -337,6 +338,19 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcGetUsbDevices";
     }
 
+    public static get kRpcGetEdgeBlendingInfo() {
+      return Commands.PROTOCOL_PREFIX + "RpcGetEdgeBlendingInfo";
+    }
+    public static get kRpcSetEdgeBlendingInfo() {
+      return Commands.PROTOCOL_PREFIX + "RpcSetEdgeBlendingInfo";
+    }
+    public static get kSetEdgeBlendingPoint() {
+      return Commands.PROTOCOL_PREFIX + "SetEdgeBlendingPoint";
+    }
+    public static get kRpcSetDevicePowerMode() {
+      return Commands.PROTOCOL_PREFIX + "RpcSetDevicePowerMode";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -419,6 +433,10 @@ export namespace Protocol {
       Commands.kDesktopDisconnectNotify,
       Commands.kRpcGetSystemTimes,
       Commands.kRpcGetUsbDevices,
+      Commands.kRpcGetEdgeBlendingInfo,
+      Commands.kRpcSetEdgeBlendingInfo,
+      Commands.kSetEdgeBlendingPoint,
+      Commands.kRpcSetDevicePowerMode,
     ]);
 
     public static get AllCommands() {
@@ -1998,4 +2016,82 @@ export namespace Protocol {
   export class PollingGroupEditNotifyEntity extends Protocol.PacketEntity {
     polling_group: PollingGroupEntity = new PollingGroupEntity();
   }
+
+  export class GetEdgeBlendingInfoRequestEntity extends PacketEntity {
+    timestamp = new Date().getMilliseconds();
+
+    constructor(rpcid?: number) {
+      super();
+      this.rpc_id = rpcid ?? 0;
+      this.command = Commands.kRpcGetEdgeBlendingInfo;
+    }
+  }
+
+  export class GetEdgeBlendingInfoResponseEntity extends PacketEntity {
+    enable_blending = false;
+    enable_correct = false;
+    width = 0;
+    height = 0;
+    col = 0;
+    row = 0;
+    point_count = 0;
+
+    points: EdgeBlendingPoint[] = [];
+    constructor() {
+      super();
+      this.command = Commands.kRpcGetEdgeBlendingInfo;
+    }
+  }
+
+  export class SetEdgeBlendingInfoRequestEntity extends PacketEntity {
+    enable_blending = false;
+    enable_correct = false;
+    width = 0;
+    height = 0;
+    col = 0;
+    row = 0;
+    point_count = 0;
+
+    constructor(
+      enable_blending: boolean,
+      enable_correct: boolean,
+      width: number,
+      height: number,
+      col: number,
+      row: number,
+      point_count: number,
+      rpcid?: number
+    ) {
+      super();
+      this.rpc_id = rpcid ?? 0;
+      this.command = Commands.kRpcSetEdgeBlendingInfo;
+      this.enable_blending = enable_blending;
+      this.enable_correct = enable_correct;
+      this.width = width;
+      this.height = height;
+      this.col = col;
+      this.row = row;
+      this.point_count = point_count;
+    }
+  }
+
+  export class SetEdgeBlendingInfoResponseEntity extends PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Commands.kRpcSetEdgeBlendingInfo;
+    }
+  }
+
+  export class SetEdgeBlendingPointRequestEntity extends PacketEntity {
+    point: EdgeBlendingPoint;
+
+    constructor(point: EdgeBlendingPoint, rpcid?: number) {
+      super();
+      this.rpc_id = rpcid ?? 0;
+      this.command = Commands.kSetEdgeBlendingPoint;
+      this.point = point;
+    }
+  }
 }

src/i18n/zh-CN/index.ts

@@ -376,4 +376,22 @@ export default {
   copy: "拷贝",
   "register dialog": "注册对话框",
   "active code": "激活码",
+  "9 point surface correct": "9点曲面矫正",
+  "4 point plane correct": "4点平面矫正",
+  "edge blending": "边缘融合",
+  "blending setting": "融合设置",
+  "point correct": "点矫正",
+  "enable blending": "启用融合",
+  "enable correct": "启用矫正",
+  row: "行",
+  col: "列",
+  "correct type": "矫正类型",
+  Error: "错误",
+  "get edge blending data failed": "获取边缘融合数据失败",
+  "set edge blending data": "设置边缘融合数据",
+  "signal polling": "信号轮询",
+  "win top": "置顶",
+  "win lower": "置底",
+  "clean screen": "清屏",
+  "CN/EN switch": "中英文切换",
 };

src/pages/Index.vue

@@ -65,6 +65,7 @@ export default defineComponent({
     );
 
     const checkRegistered = () => {
+      if (GlobalData.getInstance().getCurrentClient()?.is_connected) {
         let register: any =
           GlobalData.getInstance().applicationConfig?.registered;
         try {
@@ -100,8 +101,10 @@ export default defineComponent({
             timeout: 2500,
           });
         }
+      }
     };
     setInterval(checkRegistered, 5000);
+    checkRegistered();
 
     return {
       register_dialog,

src/pages/LeftToolBar.vue

@@ -11,7 +11,7 @@
       style="color: red"
     >
       <q-tab name="signal_source" :label="$t('signal source')" />
-      <q-tab name="polling" :label="$t('polling')" />
+      <q-tab name="polling" :label="$t('signal polling')" />
     </q-tabs>
     <q-separator />
 

src/pages/TopToolBar.vue

@@ -50,7 +50,7 @@
         stretch
         flat
         stack
-        icon="settings"
+        :icon="/*settings*/ 'img:new_icon/system_setting.png'"
         :label="$t('system setting')"
         class="q-mr-sm"
         @click="$refs.system_setting_dialog.showDialog()"
@@ -60,7 +60,7 @@
         stretch
         flat
         stack
-        icon="description"
+        :icon="/*description*/ 'img:new_icon/file_manager.png'"
         :label="$t('file manage')"
         class="q-mr-sm"
         @click="$refs.file_manage_dialog.showDialog()"
@@ -69,7 +69,7 @@
         stretch
         flat
         stack
-        icon="grid_on"
+        :icon="/*grid_on*/ 'img:new_icon/grid_setting.png'"
         :label="$t('grid setting')"
         class="q-mr-sm"
         @click="$refs.grid_setting_dialog.showDialog()"
@@ -79,7 +79,7 @@
         stretch
         flat
         stack
-        icon="art_track"
+        :icon="/*art_track*/ 'img:new_icon/subtitle.png'"
         :label="$t('subtitle')"
         class="q-mr-sm"
         @click="$refs.subtitle_dialog.showDialog()"
@@ -90,8 +90,8 @@
         flat
         stack
         :disable="plan_running"
-        icon="vertical_align_top"
+        :icon="/*vertical_align_top*/ 'img:new_icon/top_window.png'"
-        :label="$t('top window')"
+        :label="$t('win top')"
         class="q-mr-sm"
         @click="topWindow"
       />
@@ -101,8 +101,8 @@
         flat
         stack
         :disable="plan_running"
-        icon="vertical_align_bottom"
+        :icon="/*vertical_align_bottom*/ 'img:new_icon/lower_window.png'"
-        :label="$t('lower window')"
+        :label="$t('win lower')"
         class="q-mr-sm"
         @click="lowerWindow"
       />
@@ -112,8 +112,8 @@
         flat
         stack
         :disable="plan_running"
-        icon="close"
+        :icon="/*close*/ 'img:new_icon/close_window.png'"
-        :label="$t('close this window')"
+        :label="$t('close')"
         class="q-mr-sm"
         @click="closeCurrentWindow"
       />
@@ -123,12 +123,23 @@
         flat
         stack
         :disable="plan_running"
-        icon="clear_all"
+        :icon="/*clear_all*/ 'img:new_icon/clean_windows.png'"
-        :label="$t('close all windwos')"
+        :label="$t('clean screen')"
         class="q-mr-sm"
         @click="closeAllWindows"
       />
 
+      <q-btn
+        stretch
+        flat
+        stack
+        icon="border_clear"
+        :label="$t('edge blending')"
+        class="q-mr-sm"
+        v-if="false"
+        @click="$refs.edge_blending_dialog.showDialog()"
+      />
+
       <q-btn
         stretch
         flat
@@ -144,7 +155,7 @@
       <q-btn-dropdown
         stretch
         flat
-        icon="build"
+        :icon="/*build*/ 'img:new_icon/other_setting.png'"
         :label="$t('other setting')"
         class="q-mr-sm"
       >
@@ -155,7 +166,8 @@
             @click="$refs.background_image_dialog.showDialog()"
           >
             <q-item-section avatar>
-              <q-icon name="image" />
+              <!-- <q-icon name="image" /> -->
+              <q-icon name="img:new_icon/background_image.png" />
             </q-item-section>
             <q-item-section>
               {{ $t("background image") }}
@@ -167,7 +179,8 @@
             @click="$refs.recovery_database_dialog.showDialog()"
           >
             <q-item-section avatar>
-              <q-icon name="backup" />
+              <!-- <q-icon name="backup" /> -->
+              <q-icon name="img:new_icon/database_backup.png" />
             </q-item-section>
             <q-item-section>
               {{ $t("database import") }}
@@ -175,7 +188,8 @@
           </q-item>
           <q-item clickable v-close-popup @click="backupDB">
             <q-item-section avatar>
-              <q-icon name="cloud_download" />
+              <!-- <q-icon name="cloud_download" /> -->
+              <q-icon name="img:new_icon/database_recovery.png" />
             </q-item-section>
             <q-item-section>
               {{ $t("database export") }}
@@ -187,7 +201,8 @@
             @click="$refs.upgrade_dialog.showDialog()"
           >
             <q-item-section avatar>
-              <q-icon name="system_update" />
+              <!-- <q-icon name="system_update" /> -->
+              <q-icon name="img:new_icon/upgrade.png" />
             </q-item-section>
             <q-item-section>
               {{ $t("upgrade") }}
@@ -195,19 +210,31 @@
           </q-item>
           <q-item clickable v-close-popup @click="showDeviceInfo">
             <q-item-section avatar>
-              <q-icon name="devices" />
+              <!-- <q-icon name="devices" /> -->
+              <q-icon name="img:new_icon/device_info.png" />
             </q-item-section>
             <q-item-section>
               {{ $t("device info") }}
             </q-item-section>
           </q-item>
+
+          <q-item clickable v-close-popup @click="switchLanguage">
+            <q-item-section avatar>
+              <!-- <q-icon name="info_outline" /> -->
+              <q-icon name="translate" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("CN/EN switch") }}
+            </q-item-section>
+          </q-item>
           <q-item
             clickable
             v-close-popup
             @click="$refs.about_dialog.showDialog()"
           >
             <q-item-section avatar>
-              <q-icon name="info_outline" />
+              <!-- <q-icon name="info_outline" /> -->
+              <q-icon name="img:new_icon/about.png" />
             </q-item-section>
             <q-item-section>
               {{ $t("about") }}
@@ -220,7 +247,8 @@
 
       <q-item>
         <q-item-section avatar style="margin-right: 0px; padding-right: 0px">
-          <q-icon class="text-white rotate" name="img:svgs/fan.svg" />
+          <!-- <q-icon class="text-white rotate" name="img:svgs/fan.svg" /> -->
+          <q-icon class="text-white rotate" name="img:new_icon/fan.png" />
         </q-item-section>
         <q-item-section style="margin-left: -25px">
           {{ $store.state.fan_temp.toFixed(1) }} ℃
@@ -236,6 +264,7 @@
   <file-manage-dialog ref="file_manage_dialog" />
   <system-setting-dialog ref="system_setting_dialog" />
   <about-dialog ref="about_dialog" />
+  <edge-blending-dialog ref="edge_blending_dialog" />
 </template>
 
 <style scoped>
@@ -255,7 +284,8 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from "vue";
+import { defineComponent, ref, Ref, computed } from "vue";
+import { Cookies } from "quasar";
 import { useStore } from "src/store";
 
 import GridSettingDialog from "src/components/GridSettingDialog.vue";
@@ -266,6 +296,7 @@ import FileManageDialog from "src/components/FileManageDialog.vue";
 import SubtitleDialog from "src/components/SubtitleDialog.vue";
 import SystemSettingDialog from "src/components/SystemSettingDialog.vue";
 import AboutDialog from "src/components/AboutDialog.vue";
+import EdgeBlendingDialog from "src/components/EdgeBlendingDialog.vue";
 
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { Protocol } from "src/entities/WSProtocol";
@@ -288,6 +319,7 @@ export default defineComponent({
     SubtitleDialog,
     SystemSettingDialog,
     AboutDialog,
+    EdgeBlendingDialog,
   },
 
   setup() {
@@ -296,6 +328,7 @@ export default defineComponent({
     let $t = useI18n();
 
     let show_advanced_menu = ref(true);
+    const edge_blending_dialog: Ref<any> = ref(null);
 
     let system_run_time = 0;
     let system_idle_time = 0;
@@ -317,6 +350,7 @@ export default defineComponent({
     return {
       show_advanced_menu,
       plan_running,
+      edge_blending_dialog,
 
       async backupDB() {
         let client = GlobalData.getInstance().getCurrentClient();
@@ -388,6 +422,20 @@ export default defineComponent({
           }
         }
       },
+      switchLanguage() {
+        let language = Cookies.get("language");
+        if (!language) {
+          language = "zh-CN";
+        }
+
+        if (language != "zh-CN" && language != "en-US") {
+          language = "zh-CN";
+        } else {
+          language = language == "zh-CN" ? "en-US" : "zh-CN";
+        }
+        Cookies.set("language", language);
+        window.location.reload();
+      },
       logout() {
         SessionStorage.clear();
         window.location.reload();

src/pages/WallPage.vue

@@ -70,7 +70,7 @@
         }"
       >
         <div
-          :ref="'item' + (row - 1) * wall_cols * col"
+          :ref="'item' + (row - 1) * wall_cols + col"
           v-for="col in wall_cols"
           :key="col"
           class="col wall_item wall_item_flag"