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-20 10:34:56 +08:00
parent 56cc1f7712
commit 23bab5c099
6 changed files with 422 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/common/ClientConnection.ts
View File

@ -631,6 +631,36 @@ export default class ClientConnection {
}
}
public async getOutputBoardSetting() {
try {
return await this.doRpc<Protocol.GetOutputBoardSettingResponseEntity>(
new Protocol.GetOutputBoardSettingRequestEntity(0)
);
} catch (e) {
console.error(e);
}
}
public async setOutputBoardSetting(
request: Protocol.SetOutputBoardSettingRequestEntity
) {
try {
return await this.doRpc<Protocol.SetOutputBoardSettingResponseEntity>(
request
);
} catch (e) {
console.error(e);
}
}
public async restoreOutputBoard() {
try {
return await this.doRpc<Protocol.RestoreOutputBoardResponseEntity>(
new Protocol.RestoreOutputBoardRequestEntity(0)
);
} catch (e) {
console.error(e);
}
}
public restartDevice() {
this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
}

236
src/components/SystemSettingDialog.vue
View File

@ -54,6 +54,12 @@
:label="$t('other setting')"
:disable="loading"
/>
<q-tab
name="output_board"
icon="save"
:label="$t('output board setting')"
:disable="loading"
/>
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab" animated>
@ -328,6 +334,134 @@
</q-card-section>
</q-card>
</q-tab-panel>
<q-tab-panel name="output_board" class="_panel">
<q-card class="fit">
<q-card-section>
<q-scroll-area style="height: 55vh">
<q-form ref="output_board_form">
<q-list>
<q-item>
<q-item-section avatar class="width_5_4">{{
$t("wall row") + ":"
}}</q-item-section>
<q-item-section>
<q-input
v-model="output_board_wall_row"
:loading="loading"
:disable="loading"
type="number"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_4">{{
$t("wall col") + ":"
}}</q-item-section>
<q-item-section>
<q-input
v-model="output_board_wall_col"
:loading="loading"
:disable="loading"
type="number"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_4">{{
$t("splicing") + ":"
}}</q-item-section>
<q-item-section>
<q-select
v-model="output_board_splicing"
:loading="loading"
:disable="loading"
:options="[$t('on'), $t('off')]"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_4">{{
$t("vertical blanking") + ":"
}}</q-item-section>
<q-item-section>
<q-input
v-model="output_board_vertical_blanking"
:loading="loading"
:disable="loading"
type="number"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_4">{{
$t("horizon blanking") + ":"
}}</q-item-section>
<q-item-section>
<q-input
v-model="output_board_horizon_blanking"
:loading="loading"
:disable="loading"
type="number"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_4">{{
$t("rotate") + ":"
}}</q-item-section>
<q-item-section>
<q-select
v-model="output_board_rotate"
:loading="loading"
:disable="loading"
:options="output_board_rotate_options"
emit-value
map-options
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_4">{{
$t("volume") + ":"
}}</q-item-section>
<q-item-section>
<q-input
v-model="output_board_volume"
:loading="loading"
:disable="loading"
type="number"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="width_5_4">{{
$t("mute") + ":"
}}</q-item-section>
<q-item-section>
<q-select
v-model="output_board_mute"
:loading="loading"
:disable="loading"
:options="[$t('on'), $t('off')]"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-btn
class="q-mx-xl"
:label="$t('restore output board')"
@click="restoreOutputBoard"
></q-btn>
</q-item-section>
</q-item>
</q-list>
</q-form>
</q-scroll-area>
</q-card-section>
</q-card>
</q-tab-panel>
</q-tab-panels>
</q-card-section>
<q-separator />
@ -382,6 +516,10 @@
width: 20%;
}
.width_5_4 {
width: 20%;
}
._panel {
padding: 3px;
height: 60vh;
@ -468,8 +606,34 @@ export default defineComponent({
let network_form: Ref<any> = ref(null);
let other_form: Ref<any> = ref(null);
let graphics_form: Ref<any> = ref(null);
let output_board_form: Ref<any> = ref(null);
const refresh_all = () => {
let output_board_wall_row = ref(2);
let output_board_wall_col = ref(2);
let output_board_splicing = ref($t.t("on"));
let output_board_vertical_blanking = ref(0);
let output_board_horizon_blanking = ref(0);
let output_board_rotate = ref(0);
const output_board_rotate_options = ref([
{ label: "0°", value: 0 },
{ label: "180°", value: 1 },
]);
let output_board_volume = ref(100);
let output_board_mute = ref($t.t("on"));
const refresh_network = () => {
const config = GlobalData.getInstance()?.applicationConfig;
if (config) {
auto_ip.value =
config.auto_ip_address != "0" ? $t.t("enable") : $t.t("disable");
gateway.value = config.gateway;
netmask.value = config.subnet_mask;
mac_address.value = config.mac_address;
ip_address.value = $store.state.device_ip_address;
}
};
const refresh_graphics = () => {
const config = GlobalData.getInstance()?.applicationConfig;
if (config) {
setTimeout(async () => {
@ -515,17 +679,16 @@ export default defineComponent({
}
}
}, 1);
auto_ip.value =
config.auto_ip_address != "0" ? $t.t("enable") : $t.t("disable");
gateway.value = config.gateway;
netmask.value = config.subnet_mask;
mac_address.value = config.mac_address;
ip_address.value = $store.state.device_ip_address;
brightness.value = config.graphics_brightness;
contrast.value = config.graphics_contrast;
hue.value = config.graphics_hue;
}
};
const refresh_other = () => {
const config = GlobalData.getInstance()?.applicationConfig;
if (config) {
use_ntp.value =
config.use_ntp != "0" ? $t.t("enable") : $t.t("disable");
ntp_server.value = config.ntp_server;
@ -545,6 +708,31 @@ export default defineComponent({
}
};
const refresh_output_board = async () => {
const settings = await GlobalData.getInstance()
.getCurrentClient()
?.getOutputBoardSetting();
if (settings) {
output_board_wall_row.value = settings.wall_row;
output_board_wall_col.value = settings.wall_col;
output_board_splicing.value = settings.splicing
? $t.t("on")
: $t.t("off");
output_board_vertical_blanking.value = settings.vertical_blanking;
output_board_horizon_blanking.value = settings.horizon_blanking;
output_board_rotate.value = settings.rotate;
output_board_volume.value = settings.volume;
output_board_mute.value = settings.mute ? $t.t("on") : $t.t("off");
}
};
const refresh_all = () => {
refresh_network();
refresh_graphics();
refresh_other();
refresh_output_board();
};
const applyNetwork = async () => {
const ret = await network_form.value.validate();
if (ret) {
@ -618,6 +806,7 @@ export default defineComponent({
});
}
};
const applyOther = async () => {
const ret = await other_form.value.validate();
if (ret) {
@ -654,6 +843,21 @@ export default defineComponent({
}
};
const applyOutputBoard = async () => {
const request = new Protocol.SetOutputBoardSettingRequestEntity();
request.wall_col = output_board_wall_col.value;
request.wall_row = output_board_wall_row.value;
request.splicing = output_board_splicing.value == $t.t("on");
request.vertical_blanking = output_board_vertical_blanking.value;
request.horizon_blanking = output_board_horizon_blanking.value;
request.rotate = output_board_rotate.value;
request.volume = output_board_volume.value;
request.mute = output_board_mute.value == $t.t("on");
GlobalData.getInstance()
.getCurrentClient()
?.setOutputBoardSetting(request);
};
const apply = async () => {
loading.value = true;
try {
@ -667,6 +871,9 @@ export default defineComponent({
case "other":
await applyOther();
break;
case "output_board":
await applyOutputBoard();
break;
}
} catch (e) {
console.log(e);
@ -674,6 +881,10 @@ export default defineComponent({
loading.value = false;
};
const restoreOutputBoard = () => {
GlobalData.getInstance().getCurrentClient()?.restoreOutputBoard();
};
return {
show_dialog,
loading,
@ -697,11 +908,22 @@ export default defineComponent({
current_time,
time_zone,
time_zone_options,
output_board_mute,
output_board_volume,
output_board_rotate_options,
output_board_rotate,
output_board_horizon_blanking,
output_board_vertical_blanking,
output_board_splicing,
output_board_wall_col,
output_board_wall_row,
network_form,
other_form,
graphics_form,
output_board_form,
refresh_all,
apply,
restoreOutputBoard,
loga(a: any) {
console.log(a);
},

85
src/entities/WSProtocol.ts
View File

@ -208,6 +208,18 @@ export namespace Protocol {
return Commands.PROTOCOL_PREFIX + "RpcGetSupportResolutions";
}
public static get kRpcGetOutputBoardSetting() {
return Commands.PROTOCOL_PREFIX + "RpcGetOutputBoardSetting";
}
public static get kRpcSetOutputBoardSetting() {
return Commands.PROTOCOL_PREFIX + "RpcSetOutputBoardSetting";
}
public static get kRpcRestoreOutputBoard() {
return Commands.PROTOCOL_PREFIX + "RpcRestoreOutputBoard";
}
static _all_commands = new Set([
Commands.kUnKnowCommand,
Commands.kSearchDevice,
@ -255,6 +267,9 @@ export namespace Protocol {
Commands.kRpcSetSystemGraphics,
Commands.kRpcSetSystemOther,
Commands.kRpcGetSupportResolutions,
Commands.kRpcRestoreOutputBoard,
Commands.kRpcSetOutputBoardSetting,
Commands.kRpcGetOutputBoardSetting,
]);
public static get AllCommands() {
@ -1222,4 +1237,74 @@ export namespace Protocol {
this.command = Protocol.Commands.kRpcGetSupportResolutions;
}
}
export class GetOutputBoardSettingRequestEntity extends Protocol.PacketEntity {
timestamp = new Date().getMilliseconds();
constructor(rcp_id?: number) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcGetOutputBoardSetting;
}
}
export class GetOutputBoardSettingResponseEntity extends Protocol.PacketEntity {
wall_row: number = 2;
wall_col: number = 2;
splicing: boolean = false;
vertical_blanking: number = 0;
horizon_blanking: number = 0;
rotate: number = 0;
volume: number = 0;
mute: boolean = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcGetOutputBoardSetting;
}
}
export class SetOutputBoardSettingRequestEntity extends Protocol.PacketEntity {
wall_row: number = 2;
wall_col: number = 2;
splicing: boolean = false;
vertical_blanking: number = 0;
horizon_blanking: number = 0;
rotate: number = 0;
volume: number = 0;
mute: boolean = false;
constructor(rcp_id?: number) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcSetOutputBoardSetting;
}
}
export class SetOutputBoardSettingResponseEntity extends Protocol.PacketEntity {
timestamp = new Date().getMilliseconds();
constructor() {
super();
this.command = Protocol.Commands.kRpcSetOutputBoardSetting;
}
}
export class RestoreOutputBoardRequestEntity extends Protocol.PacketEntity {
timestamp = new Date().getMilliseconds();
constructor(rcp_id?: number) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcRestoreOutputBoard;
}
}
export class RestoreOutputBoardResponseEntity extends Protocol.PacketEntity {
timestamp = new Date().getMilliseconds();
constructor() {
super();
this.command = Protocol.Commands.kRpcRestoreOutputBoard;
}
}
}

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

@ -243,4 +243,15 @@ export default {
"set system other": "系统参数配置",
"set system network": "系统网络参数配置",
"set system graphics": "系统图像参数配置",
restore: "复位",
mute: "静音",
volume: "音量",
rotate: "旋转",
"horizon blanking": "水平消隐",
"vertical blanking": "垂直消隐",
splicing: "拼接",
"restore output board": "复位输出板",
on: "开",
off: "关",
"output board setting": "输出板设置",
};

68
src/pages/TopToolBar.vue
View File

@ -52,14 +52,7 @@
class="q-mr-sm"
@click="$refs.grid_setting_dialog.showDialog()"
/>
<q-btn
stretch
flat
icon="image"
:label="$t('background image')"
class="q-mr-sm"
@click="$refs.background_image_dialog.showDialog()"
/>
<q-btn
stretch
flat
@ -68,22 +61,6 @@
class="q-mr-sm"
@click="$refs.subtitle_dialog.showDialog()"
/>
<q-btn
stretch
flat
icon="backup"
:label="$t('data import')"
class="q-mr-sm"
@click="$refs.recovery_database_dialog.showDialog()"
/>
<q-btn
stretch
flat
icon="cloud_download"
:label="$t('data export')"
class="q-mr-sm"
@click="backupDB"
/>
<q-btn
stretch
@ -95,6 +72,49 @@
@click="stopPlan"
/>
<q-btn-dropdown
stretch
flat
icon="build"
:label="$t('other setting')"
class="q-mr-sm"
>
<q-list style="background-color: #3e9acd" class="shadow-2 text-white">
<q-item
clickable
v-close-popup
@click="$refs.background_image_dialog.showDialog()"
>
<q-item-section avatar>
<q-icon name="image" />
</q-item-section>
<q-item-section>
{{ $t("background image") }}
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="$refs.recovery_database_dialog.showDialog()"
>
<q-item-section avatar>
<q-icon name="backup" />
</q-item-section>
<q-item-section>
{{ $t("data import") }}
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="backupDB">
<q-item-section avatar>
<q-icon name="cloud_download" />
</q-item-section>
<q-item-section>
{{ $t("data export") }}
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-space />
<q-separator vertical inset />
<q-btn-dropdown

25
src/pages/WallPage.vue
View File

@ -65,7 +65,12 @@
<q-popup-proxy context-menu>
<q-popup-proxy context-menu />
<q-list>
<q-item clickable v-close-popup @click="closeAllWindows">
<q-item
:disable="plan_running"
clickable
v-close-popup
@click="closeAllWindows"
>
<q-item-section avatar>
<q-icon name="close" color="red" />
</q-item-section>
@ -123,6 +128,8 @@ export default defineComponent({
const $store = useStore();
const $t = useI18n();
const plan_running = ref(false);
const windows = computed({
get: () => $store.state.windows,
set: (val) => $store.commit("setWindows", val),
@ -284,6 +291,16 @@ export default defineComponent({
}
}
break;
case Protocol.Commands.kCurrentRunningPlanStateChanged:
{
const temp = JSON.parse(
notify.data
) as Protocol.PlanRunningStateChangeNotifyEntity;
if (temp && temp.plan) {
plan_running.value = temp.running;
}
}
break;
}
} catch {}
}
@ -312,6 +329,7 @@ export default defineComponent({
item_height,
wall_width_scaler,
wall_height_scaler,
plan_running,
onDrop(e: DragEvent) {
e.preventDefault();
let target = e.target as any;
@ -383,6 +401,7 @@ export default defineComponent({
},
onDragEnter(e: DragEvent) {
e.stopPropagation();
let target: HTMLElement | null = e.target as HTMLElement;
if (target && target.draggable !== true) {
while (
@ -403,7 +422,9 @@ export default defineComponent({
},
onDragOver(e: DragEvent) {
e.preventDefault();
if (!plan_running.value) {
e.preventDefault();
}
},
onWallGridsClick(e: MouseEvent) {