增加自定义分辨率，增加未注册相关提示

src/common/Initializer.ts

@@ -162,6 +162,24 @@ export default class Initializer {
       this.initPollingTree();
       this.getCurrentRunningPlan();
       this.getWindows();
+
+      const support_resolutions = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.getSupportResolutions();
+      if (support_resolutions) {
+        this.options.$store.commit(
+          "setDeviceScreenWidth",
+          support_resolutions.screen_width
+        );
+        this.options.$store.commit(
+          "setDeviceScreenHeight",
+          support_resolutions.screen_height
+        );
+        this.options.$store.commit(
+          "setDeviceScreenRefreshRate",
+          support_resolutions.screen_refresh_rate
+        );
+      }
     }
   }
 }

src/common/RemoteDataExangeProcesser.ts

@@ -48,20 +48,25 @@ export default class RemoteDataExangeProcesser {
             if (temp) {
               let global_data = GlobalData.getInstance();
               if (global_data && global_data.applicationConfig) {
-                (<any>GlobalData.getInstance().applicationConfig)[temp.key] =
+                if (temp.key == "registered") {
-                  temp.value;
+                  global_data.applicationConfig.registered = JSON.parse(
-                $store.commit(
+                    temp.value
-                  "setWallCol",
+                  );
-                  global_data.applicationConfig.wall_col
+                } else {
-                );
+                  (<any>global_data.applicationConfig)[temp.key] = temp.value;
-                $store.commit(
+                  $store.commit(
-                  "setWallRow",
+                    "setWallCol",
-                  global_data.applicationConfig.wall_row
+                    global_data.applicationConfig.wall_col
-                );
+                  );
-                $store.commit(
+                  $store.commit(
-                  "setPowerOnPlan",
+                    "setWallRow",
-                  global_data.applicationConfig.power_on_plan
+                    global_data.applicationConfig.wall_row
-                );
+                  );
+                  $store.commit(
+                    "setPowerOnPlan",
+                    global_data.applicationConfig.power_on_plan
+                  );
+                }
               }
             }
           }
@@ -479,14 +484,14 @@ export default class RemoteDataExangeProcesser {
               notify.data
             ) as Protocol.DesktopResolutionChangedNotifyEntity;
             if (temp) {
+              $store.commit("setDeviceScreenConnectState", true);
               $store.commit("setDeviceScreenWidth", temp.width);
               $store.commit("setDeviceScreenHeight", temp.height);
               $store.commit("setDeviceScreenRefreshRate", temp.refresh_rate);
-              $store.commit("setDeviceScreenConnectState", true);
             }
           }
           break;
-        case Protocol.Commands.kDesktopResolutionChangedNotify:
+        case Protocol.Commands.kDesktopDisconnectNotify:
           {
             const temp = JSON.parse(
               notify.data

src/components/BackgroundImageDialog.vue

@@ -203,7 +203,7 @@ export default defineComponent({
         loading.value = true;
         try {
           $q.dialog({
-            title: "Confirm",
+            title: $t.t("Confirm"),
             message: $t.t("use this image to background image") + "?",
             cancel: true,
             persistent: true,

src/components/RecoveryDatabaseDialog.vue

@@ -163,7 +163,7 @@ export default defineComponent({
         loading.value = true;
         try {
           $q.dialog({
-            title: "Confirm",
+            title: $t.t("Confirm"),
             message: $t.t("use this file to recovery data") + "?",
             cancel: true,
             persistent: true,
@@ -184,7 +184,7 @@ export default defineComponent({
           timeout: 1500,
         });
         $q.dialog({
-          title: "Confirm",
+          title: $t.t("Confirm"),
           message:
             $t.t("data changes will take effect after the restart") +
             "!" +

src/components/SystemSettingDialog.vue

@@ -256,9 +256,46 @@
                       </q-item-section>
                     </q-item>
                     <q-item>
-                      <q-item-section avatar class="width_5_2_2">{{
+                      <q-item-section avatar class="width_5_2_2">
-                        $t("device resolution") + ":"
+                        {{ $t("current real resolution") }}:
-                      }}</q-item-section>
+                      </q-item-section>
+                      <q-item-section>
+                        {{ $store.state.device_screen_width }}X
+                        {{ $store.state.device_screen_height }}@{{
+                          $store.state.device_screen_refresh_rate
+                        }}
+                      </q-item-section>
+                      <q-item-section avatar>
+                        <q-btn flat round icon="help" color="green">
+                          <q-tooltip>{{
+                            $t(
+                              "depending on the display device, the actual output resolution may differ from the target resolution"
+                            )
+                          }}</q-tooltip>
+                        </q-btn>
+                      </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section avatar class="width_5_2_2"
+                        >{{ $t("output type") }}:</q-item-section
+                      >
+                      <q-item-section>
+                        <q-select
+                          v-model="device_resolution_type"
+                          :loading="loading"
+                          :disable="loading"
+                          :options="device_resolution_type_options"
+                          emit-value
+                          map-options
+                        />
+                      </q-item-section>
+                    </q-item>
+                    <q-item
+                      v-if="device_resolution_type.toUpperCase() == 'EDID'"
+                    >
+                      <q-item-section avatar class="width_5_2_2"
+                        >{{ $t("target resolution") }}:</q-item-section
+                      >
                       <q-item-section>
                         <q-select
                           v-model="device_resolution"
@@ -268,6 +305,51 @@
                         />
                       </q-item-section>
                     </q-item>
+                    <q-item
+                      v-if="device_resolution_type.toUpperCase() == 'CVT'"
+                    >
+                      <q-item-section avatar class="width_5_2_2"
+                        >{{ $t("target resolution") }}:</q-item-section
+                      >
+                      <q-item-section>
+                        <q-input
+                          v-model="device_resolution"
+                          :rules="[checkResolution]"
+                          :placeholder="$t('for example: ') + '1920x1080@60'"
+                          :hint="$t('for example: ') + '1920x1080@60'"
+                        />
+                      </q-item-section>
+                    </q-item>
+                    <q-item
+                      v-if="device_resolution_type.toUpperCase() == 'CUSTOM'"
+                    >
+                      <q-item-section avatar class="width_5_2_2"
+                        >{{ $t("custom")
+                        }}{{ $t("timing sequence") }}:</q-item-section
+                      >
+                      <q-item-section>
+                        <q-input
+                          v-model="device_resolution_timing"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          :placeholder="
+                            $t('for example: ') +
+                            '1920x1080@60 ' +
+                            $t('or') +
+                            ' 173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync'
+                          "
+                          :hint="
+                            $t('for example: ') +
+                            '1920x1080@60 ' +
+                            $t('or') +
+                            ' 173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync'
+                          "
+                        />
+                      </q-item-section>
+                    </q-item>
                     <q-item>
                       <q-item-section avatar class="width_5_2_2">{{
                         $t("device rotate") + ":"
@@ -755,8 +837,6 @@ export default defineComponent({
     let contrast = ref(0);
     let hue = ref(0);
 
-    let old_resolution: string = "";
-    let old_rotate: number = 0;
     let device_resolution = ref("");
     let device_resolution_options: Ref<string[]> = ref([]);
     let device_rotate = ref(0);
@@ -794,6 +874,17 @@ export default defineComponent({
         value: 7,
       },
     ]);
+    let device_resolution_type = ref("EDID");
+    let device_resolution_type_options = ref([
+      { label: "EDID", value: "EDID" },
+      { label: $t.t("force output") /*+ "(CVT)"*/, value: "CVT" },
+      {
+        label: $t.t("force output") + "(" + $t.t("custom") + ")",
+        value: "CUSTOM",
+      },
+    ]);
+    let device_resolution_timing = ref("");
+
     let output_board_resolution = ref("");
     let output_board_resolution_options = ref(["1", "2", "3"]);
 
@@ -860,27 +951,12 @@ export default defineComponent({
             )) {
               device_resolution_options.value.push(item);
             }
-
+            device_resolution_type.value =
-            {
+              support_resolutions.target_resolution.type;
-              let val = device_resolution_options.value.find(
+            device_resolution.value =
-                (element) =>
+              support_resolutions.target_resolution.name;
-                  element &&
+            device_resolution_timing.value =
-                  element == support_resolutions.current_device_resolution
+              support_resolutions.target_resolution.timing;
-              );
-              if (!val) {
-                device_resolution_options.value.push(
-                  support_resolutions.current_device_resolution
-                );
-              }
-              val = device_resolution_options.value.find(
-                (element) =>
-                  element &&
-                  element == support_resolutions.current_device_resolution
-              );
-              device_resolution.value =
-                val ?? device_resolution_options.value[0];
-              old_resolution = device_resolution.value;
-            }
           }
         }, 1);
 
@@ -889,7 +965,6 @@ export default defineComponent({
         hue.value = parseInt(config.graphics_hue.toString());
 
         device_rotate.value = parseInt(config.device_rotate.toString());
-        old_rotate = device_rotate.value;
       }
     };
 
@@ -1020,67 +1095,53 @@ export default defineComponent({
     };
 
     const applyGraphics = async () => {
-      loading.value = true;
+      const _apply_graphics = async () => {
-      const request = new Protocol.SetSystemGraphicsRequestEntity();
+        loading.value = true;
-      request.brightness = parseInt(brightness.value.toString());
+        const request = new Protocol.SetSystemGraphicsRequestEntity();
-      request.contrast = parseInt(contrast.value.toString());
+        request.brightness = parseInt(brightness.value.toString());
-      request.hue = parseInt(hue.value.toString());
+        request.contrast = parseInt(contrast.value.toString());
-      request.device_resolution = device_resolution.value;
+        request.hue = parseInt(hue.value.toString());
-      request.rotate = parseInt(device_rotate.value.toString());
+        request.target_resolution_type = device_resolution_type.value;
+        request.device_resolution_name = device_resolution.value;
+        request.target_resolution_timing = device_resolution_timing.value;
+        request.rotate = parseInt(device_rotate.value.toString());
 
-      let success = false;
+        let success = false;
-      try {
+        try {
-        await GlobalData.getInstance()
+          const response = await GlobalData.getInstance()
-          .getCurrentClient()
+            .getCurrentClient()
-          ?.setSystemGraphics(request);
+            ?.setSystemGraphics(request);
-        await wait_for(1000 * 3);
+          if (response && response.success) {
-        success = true;
+            success = true;
-        if (
+          }
-          old_resolution != device_resolution.value ||
+        } catch {}
-          old_rotate != device_rotate.value
+        $q.notify({
-        ) {
+          color: success ? "positive" : "negative",
-          try {
+          icon: success ? "done" : "warning",
-            $q.dialog({
+          message:
-              title: "Confirm",
+            $t.t("set system graphics") +
-              message:
+            (success ? $t.t("success") : $t.t("fail")) +
-                $t.t(
+            "!",
-                  "major graphics parameters have been changed and need to be restarted to take effect. Restart the system"
+          position: "top",
-                ) + "?",
+          timeout: 2500,
-              cancel: true,
+        });
-              persistent: true,
+        loading.value = false;
-            }).onOk(async () => {
+      };
-              await GlobalData.getInstance()
+      if (device_resolution_type.value?.toUpperCase() == "CUSTOM") {
-                .getCurrentClient()
+        $q.dialog({
-                ?.restartDevice(1000 * 3);
+          title: $t.t("use custom output"),
-              $q.notify({
+          message:
-                color: "positive",
+            $t.t("are you sure to use the timing force output") +
-                icon: "done",
+            "?" +
-                message:
+            "\n" +
-                  $t.t("restart command send") +
+            $t.t("the screen output may be abnormal") +
-                  $t.t("success") +
+            "!",
-                  "!" +
+          cancel: true,
-                  $t.t("the system will reboot after the setup is complete") +
+          persistent: true,
-                  "!",
+        }).onOk(_apply_graphics);
-                position: "top",
+      } else {
-                timeout: 2500,
+        _apply_graphics();
-              });
+      }
-            });
-          } catch {}
-        }
-      } catch {}
-      $q.notify({
-        color: success ? "positive" : "negative",
-        icon: success ? "done" : "warning",
-        message:
-          $t.t("set system graphics") +
-          (success ? $t.t("success") : $t.t("fail")) +
-          "!",
-        position: "top",
-        timeout: 2500,
-      });
-      old_resolution = device_resolution.value;
-      old_rotate = device_rotate.value;
-      loading.value = false;
     };
 
     const applyOther = async () => {
@@ -1112,7 +1173,7 @@ export default defineComponent({
         if (old_output_audio_card != request.output_audio_card) {
           try {
             $q.dialog({
-              title: "Confirm",
+              title: $t.t("Confirm"),
               message:
                 $t.t(
                   "the sound card takes effect only after it is restarted. Restart the system"
@@ -1227,6 +1288,9 @@ export default defineComponent({
       device_rotate_options,
       device_resolution,
       device_resolution_options,
+      device_resolution_type,
+      device_resolution_type_options,
+      device_resolution_timing,
       output_board_resolution,
       output_board_resolution_options,
       output_audio_card,
@@ -1287,6 +1351,15 @@ export default defineComponent({
       isMacAddress(str: string) {
         return /([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}/.test(str);
       },
+      checkResolution(str: string) {
+        const reg = /([0-9]{1,5})[x|X]([0-9]{1,5}@[0-9]{1,3}$)/;
+        return (
+          reg.test(str) ||
+          $t.t("the resolution format is incorrect,") +
+            $t.t("for example: ") +
+            "1920x1080@60"
+        );
+      },
     };
   },
 });

src/components/UpgradeDialog.vue

@@ -211,7 +211,7 @@ export default defineComponent({
               ? uploader_software.value
               : uploader_rootfs.value;
           $q.dialog({
-            title: "Confirm",
+            title: $t.t("Confirm"),
             message: $t.t("use this file to upgrade") + "?",
             cancel: true,
             persistent: true,

src/entities/ApplicationConfigEntity.ts

@@ -25,4 +25,5 @@ export default class ApplicationConfigEntity {
   output_audio_card: string = "";
   application_data_dir: string = "";
   runtime_os: string = "";
+  registered: boolean = false;
 }

src/entities/WSProtocol.ts

@@ -1503,7 +1503,9 @@ export namespace Protocol {
     contrast: number = 100;
     hue: number = 100;
     rotate: number = 0;
-    device_resolution: string = "3840x2160@60";
+    target_resolution_type: string = "EDID";
+    device_resolution_name: string = "3840x2160@60";
+    target_resolution_timing: string = "";
 
     constructor(rcp_id?: number) {
       super();
@@ -1513,8 +1515,7 @@ export namespace Protocol {
   }
 
   export class SetSystemGraphicsResponseEntity extends Protocol.PacketEntity {
-    timestamp = new Date().getMilliseconds();
+    success: boolean = false;
-
     constructor() {
       super();
       this.command = Protocol.Commands.kRpcSetSystemGraphics;
@@ -1557,10 +1558,18 @@ export namespace Protocol {
     }
   }
 
+  export class TargetResolutionEntity {
+    type: string = "EDID";
+    name: string = "3840X2160@30";
+    timing: string = "";
+  }
   export class GetSupportResolutionsResponseEntity extends Protocol.PacketEntity {
     device_support_resolutions: Object = {};
     current_device_resolution: string = "";
-
+    screen_width = 0;
+    screen_height = 0;
+    screen_refresh_rate = 0;
+    target_resolution: TargetResolutionEntity = new TargetResolutionEntity();
     constructor() {
       super();
       this.command = Protocol.Commands.kRpcGetSupportResolutions;

src/i18n/zh-CN/index.ts

@@ -350,4 +350,20 @@ export default {
   SS: "秒",
   "open window": "开窗",
   "replace window": "替换窗口",
+  custom: "自定义",
+  "force output": "强制输出",
+  "output type": "输出类型",
+  "current real resolution": "当前真实分辨率",
+  "target resolution": "目标分辨率",
+  "for example: ": "例: ",
+  "the resolution format is incorrect,": "分辨率格式错误",
+  "timing sequence": "时序",
+  "use custom output": "使用自定义时序",
+  "are you sure to use the timing force output": "确定使用当前时序强制输出吗",
+  "the screen output may be abnormal": "错误的时序可能导致画面输出异常",
+  "depending on the display device, the actual output resolution may differ from the target resolution":
+    "由于显示设备的不同，实际输出分辨率可能与目标分辨率有出入",
+  or: "或者",
+  "not registered": "未注册",
+  register: "注册",
 };

src/pages/Index.vue

@@ -59,6 +59,41 @@ export default defineComponent({
       GlobalData.getInstance().getCurrentClientName()
     );
 
+    const checkRegistered = () => {
+      let register: any =
+        GlobalData.getInstance().applicationConfig?.registered;
+      try {
+        register = JSON.parse(register);
+      } catch {
+        register = false;
+      }
+      if (!register) {
+        $q.notify({
+          color: "negative",
+          icon: "report_problem",
+          message:
+            "<span class='text-h4'>" +
+            $t.t("not registered") +
+            "!!!" +
+            "</span>",
+          position: "center",
+          actions: [
+            {
+              label: $t.t("register"),
+              color: "blue",
+              handler: () => {
+                // TODO show register dialog
+                console.log("show register dialog");
+              },
+            },
+          ],
+          html: true,
+          timeout: 2500,
+        });
+      }
+    };
+    setInterval(checkRegistered, 5000);
+
     return {};
   },
 });

src/pages/WallPage.vue

@@ -255,7 +255,8 @@ export default defineComponent({
         wall?.value?.parentElement?.offsetWidth ?? 0 / wall_cols.value;
       if (wall.value && wall.value.parentElement) {
         const wv_scaler =
-          $store.state.device_screen_width / $store.state.device_screen_height;
+          /*$store.state.device_screen_width / $store.state.device_screen_height*/ 1920 /
+          1080;
         item_height.value =
           wall.value.parentElement.offsetWidth / wv_scaler / wall_rows.value;
       } else {

src/store/index.ts

@@ -278,9 +278,9 @@ export default store(function (/* { ssrContext } */) {
       plan_tree: [],
       wall_col: 1,
       wall_row: 1,
-      device_screen_width: 1920,
+      device_screen_width: 0,
-      device_screen_height: 1080,
+      device_screen_height: 0,
-      device_screen_refresh_rate: 60,
+      device_screen_refresh_rate: 0,
       device_screen_connect_state: true,
       windows: [],
       windows_sort: [],