lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加旋转界面

This commit is contained in:
fangxiang 2021-12-22 08:24:26 +08:00
parent c3a549f46d
commit 810f213bc2
6 changed files with 304 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/ClientConnection.ts
View File

@ -189,6 +189,8 @@ export default class ClientConnection {
if (packet) {
if (packet.has_exception) {
console.error(ev.data);
this.rpc_map.get(packet.rpc_id)?.reject();
this.rpc_map.delete(packet.rpc_id);
}
if (Protocol.Commands.AllCommands.has(packet.command)) {
if (

1
src/common/Initializer.ts
View File

@ -85,7 +85,6 @@ export default class Initializer {
global_data.applicationConfig = (
await global_data.getCurrentClient()?.getApplicationSettins()
)?.config;
console.log(global_data.applicationConfig);
const options = this.options;
let $store = options.$store;

410
src/components/SystemSettingDialog.vue
View File

@ -66,7 +66,7 @@
<q-tab-panel name="network" class="_panel">
<q-card class="fit">
<q-card-section>
<q-form ref="network_form">
<q-form ref="network_form" @submit="applyNetwork">
<q-list>
<q-item>
<q-item-section avatar class="width_5_1">{{
@ -179,7 +179,7 @@
<q-tab-panel name="graphics" class="_panel">
<q-card class="fit">
<q-card-section>
<q-form ref="graphics_form">
<q-form ref="graphics_form" @submit="applyGraphics">
<q-list>
<q-item>
<q-item-section avatar class="width_5_2">{{
@ -191,6 +191,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -204,6 +212,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -217,6 +233,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -233,6 +257,21 @@
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_2_2">{{
$t("device rotate") + ":"
}}</q-item-section>
<q-item-section>
<q-select
v-model="device_rotate"
:loading="loading"
:disable="loading"
:options="device_rotate_options"
emit-value
map-options
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_2_2">{{
$t("output board resolution") + ":"
@ -255,7 +294,7 @@
<q-tab-panel name="other" class="_panel">
<q-card class="fit">
<q-card-section>
<q-form ref="other_form">
<q-form ref="other_form" @submit="applyOther">
<q-list>
<q-item>
<q-item-section avatar class="width_5_3">{{
@ -279,6 +318,12 @@
v-model="ntp_server"
:loading="loading"
:disable="loading"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -292,6 +337,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -305,6 +358,12 @@
:loading="loading"
:disable="loading"
type="date"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
<q-item-section>
@ -313,6 +372,12 @@
:loading="loading"
:disable="loading"
type="time"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -339,7 +404,7 @@
<q-card class="fit">
<q-card-section>
<q-scroll-area style="height: 55vh">
<q-form ref="output_board_form">
<q-form ref="output_board_form" @submit="applyOutputBoard">
<q-list>
<q-item>
<q-item-section avatar class="width_5_4">{{
@ -351,6 +416,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -364,6 +437,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -390,6 +471,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -403,6 +492,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -431,6 +528,14 @@
:loading="loading"
:disable="loading"
type="number"
:rules="[
(val) =>
(val != null &&
val != undefined &&
val.toString().length > 0) ||
$t('Please type something'),
]"
lazy-rules
/>
</q-item-section>
</q-item>
@ -587,8 +692,45 @@ 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(["11", "22", "33"]);
let device_rotate = ref(0);
let device_rotate_options = ref([
{
label: "0°",
value: 0,
},
{
label: "90°",
value: 1,
},
{
label: "180°",
value: 2,
},
{
label: "270°",
value: 3,
},
{
label: $t.t("horizontal flipped"),
value: 4,
},
{
label: $t.t("horizontal flipped") + "90°",
value: 5,
},
{
label: $t.t("horizontal flipped") + "180°",
value: 6,
},
{
label: $t.t("horizontal flipped") + "270°",
value: 7,
},
]);
let output_board_resolution = ref("");
let output_board_resolution_options = ref(["1", "2", "3"]);
@ -680,9 +822,14 @@ export default defineComponent({
}
}, 1);
brightness.value = config.graphics_brightness;
contrast.value = config.graphics_contrast;
hue.value = config.graphics_hue;
brightness.value = parseInt(config.graphics_brightness.toString());
contrast.value = parseInt(config.graphics_contrast.toString());
hue.value = parseInt(config.graphics_hue.toString());
device_rotate.value = parseInt(config.device_rotate.toString());
old_resolution = device_resolution.value;
old_rotate = device_rotate.value;
}
};
@ -734,113 +881,123 @@ export default defineComponent({
};
const applyNetwork = async () => {
const ret = await network_form.value.validate();
if (ret) {
let request = new Protocol.SetSystemNetworkRequestEntity();
request.auto_ip = auto_ip.value == $t.t("enable");
request.ip_address = ip_address.value;
request.gtateway = gateway.value;
request.net_mask = netmask.value;
request.mac_address = mac_address.value;
const request = new Protocol.SetSystemNetworkRequestEntity();
request.auto_ip = auto_ip.value == $t.t("enable");
request.ip_address = ip_address.value;
request.gtateway = gateway.value;
request.net_mask = netmask.value;
request.mac_address = mac_address.value;
let success = false;
try {
setTimeout(() => {
if (request.ip_address != $store.state.device_ip_address) {
setTimeout(() => {
SessionStorage.clear();
if (
window.location.hostname.toLowerCase() == "192.168.1.1" ||
window.location.hostname.toLowerCase() == "localhost"
) {
window.location.reload();
} else {
window.location.hostname = request.ip_address;
}
}, 1500);
}
}, 1000 * 10);
/*await*/ GlobalData.getInstance()
.getCurrentClient()
?.setSystemNetwork(request);
success = true;
} catch {}
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("set system network") +
(success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
}
let success = false;
try {
await GlobalData.getInstance()
.getCurrentClient()
?.setSystemNetwork(request);
setTimeout(() => {
if (request.ip_address != $store.state.device_ip_address) {
setTimeout(() => {
SessionStorage.clear();
if (
window.location.hostname.toLowerCase() == "192.168.1.1" ||
window.location.hostname.toLowerCase() == "localhost"
) {
window.location.reload();
} else {
window.location.hostname = request.ip_address;
}
}, 2500);
}
}, 1000 * 10);
success = true;
} catch {}
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("set system network") +
(success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
};
const applyGraphics = async () => {
const ret = await graphics_form.value.validate();
if (ret) {
let request = new Protocol.SetSystemGraphicsRequestEntity();
request.brightness = brightness.value;
request.contrast = contrast.value;
request.hue = hue.value;
request.output_board_resolution = output_board_resolution.value;
request.device_resolution = device_resolution.value;
const request = new Protocol.SetSystemGraphicsRequestEntity();
request.brightness = brightness.value;
request.contrast = contrast.value;
request.hue = hue.value;
request.output_board_resolution = output_board_resolution.value;
request.device_resolution = device_resolution.value;
request.rotate = device_rotate.value;
let success = false;
let success = false;
try {
await GlobalData.getInstance()
.getCurrentClient()
?.setSystemGraphics(request);
success = true;
} 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: 1000,
});
if (
old_resolution != device_resolution.value ||
old_rotate != device_rotate.value
) {
try {
await GlobalData.getInstance()
.getCurrentClient()
?.setSystemGraphics(request);
success = true;
$q.dialog({
title: "Confirm",
message:
$t.t(
"major graphics parameters have been changed and need to be restarted to take effect. Restart the system"
) + "?",
cancel: true,
persistent: true,
}).onOk(() => {
GlobalData.getInstance().getCurrentClient()?.restartDevice();
});
} 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: 1000,
});
}
};
const applyOther = async () => {
const ret = await other_form.value.validate();
if (ret) {
let request = new Protocol.SetSystemOtherRequestEntity();
request.use_ntp = use_ntp.value == $t.t("enable");
request.ntp_sync_delay = ntp_sync_delay.value;
request.ntp_server = ntp_server.value;
request.time_zone = time_zone_options.value.findIndex(
(element) => element && element == time_zone.value
);
if (request.time_zone < 0) {
request.time_zone =
GlobalData.getInstance().applicationConfig?.time_zone ?? 21;
}
request.datetime = current_date.value + " " + current_time.value;
let success = false;
try {
await GlobalData.getInstance()
.getCurrentClient()
?.setSystemOther(request);
success = true;
} catch {}
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("set system other") +
(success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
const request = new Protocol.SetSystemOtherRequestEntity();
request.use_ntp = use_ntp.value == $t.t("enable");
request.ntp_sync_delay = ntp_sync_delay.value;
request.ntp_server = ntp_server.value;
request.time_zone = time_zone_options.value.findIndex(
(element) => element && element == time_zone.value
);
if (request.time_zone < 0) {
request.time_zone =
GlobalData.getInstance().applicationConfig?.time_zone ?? 21;
}
request.datetime = current_date.value + " " + current_time.value;
let success = false;
try {
await GlobalData.getInstance()
.getCurrentClient()
?.setSystemOther(request);
success = true;
} catch {}
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("set system other") +
(success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
};
const applyOutputBoard = async () => {
@ -860,21 +1017,38 @@ export default defineComponent({
.getCurrentClient()
?.setOutputBoardSetting(request);
success = true;
} catch {
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("set output board") +
(success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
} catch {}
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("set output board") +
(success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
};
const apply = () => {
switch (tab.value) {
case "network":
network_form.value.submit();
break;
case "graphics":
graphics_form.value.submit();
break;
case "other":
other_form.value.submit();
break;
case "output_board":
output_board_form.value.submit();
break;
}
};
const apply = async () => {
const apply1 = async () => {
loading.value = true;
try {
switch (tab.value) {
@ -913,6 +1087,8 @@ export default defineComponent({
brightness,
contrast,
hue,
device_rotate,
device_rotate_options,
device_resolution,
device_resolution_options,
output_board_resolution,
@ -940,6 +1116,10 @@ export default defineComponent({
refresh_all,
apply,
restoreOutputBoard,
applyNetwork,
applyGraphics,
applyOther,
applyOutputBoard,
loga(a: any) {
console.log(a);
},

1
src/entities/ApplicationConfigEntity.ts
View File

@ -21,4 +21,5 @@ export default class ApplicationConfigEntity {
graphics_brightness: number = 100;
graphics_contrast: number = 100;
graphics_hue: number = 100;
device_rotate: number = 0;
}

1
src/entities/WSProtocol.ts
View File

@ -1176,6 +1176,7 @@ export namespace Protocol {
brightness: number = 100;
contrast: number = 100;
hue: number = 100;
rotate: number = 0;
device_resolution: string = "3840x2160@60";
output_board_resolution: string = "1920x1080";

5
src/i18n/zh-CN/index.ts
View File

@ -258,4 +258,9 @@ export default {
"update file upload": "升级文件上传",
"the system automatically restarts after the upgrade is complete":
"系统将在升级完成后自动重启",
"device rotate": "旋转",
"horizontal flipped": "水平翻转",
"set output board": "设置输出板",
"major graphics parameters have been changed and need to be restarted to take effect. Restart the system":
"重要图形参数已更改，需要重启后生效，是否重启",
};