2024-02-15 22:07:50 +01:00
|
|
|
<?php include ("./link/session.php") ?>
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="uft-8">
|
|
|
|
|
<head>
|
|
|
|
|
<?php include ("./public/head.inc") ?>
|
|
|
|
|
<link href="assets/plugins/nouislider/css/nouislider.min.css" rel="stylesheet">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<?php include ("./public/menu.inc") ?>
|
|
|
|
|
<div data-simplebar>
|
|
|
|
|
<main class="page-content output" id="app" v-cloak>
|
|
|
|
|
<div v-if="Object.keys(hardwareConf).length > 0" :class="['row',{'lp-display-hide':!hardwareConf.function.videoOut}]">
|
|
|
|
|
<div class="col-lg-12 mx-auto">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-header bg-transparent">
|
|
|
|
|
<div class="p-2 mb-0 d-flex align-items-end">
|
|
|
|
|
<cn>接口输出</cn>
|
|
|
|
|
<en>Output Config</en>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body" v-if="defaultConf.length > 0 && mixIndex > -1">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>HDMI输出</cn>
|
|
|
|
|
<en>HDMI Output</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<bs-switch v-model="defaultConf[mixIndex].output.enable" :size="'normal'"></bs-switch>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-lg-6 border-right">
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>接口模式</cn>
|
|
|
|
|
<en>Interface</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select">
|
|
|
|
|
<option value="hdmi">HDMI</option>
|
|
|
|
|
<option value="dvi">DVI</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>分辨率</cn>
|
|
|
|
|
<en>resolution</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select" v-model="defaultConf[mixIndex].output.output">
|
|
|
|
|
<option v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.capability.maxOutput === '4K60'" value="3840x2160_60">4K60</option>
|
|
|
|
|
<option v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.capability.maxOutput === '4K60'" value="3840x2160_50">4K50</option>
|
|
|
|
|
<option v-if="Object.keys(hardwareConf).length > 0 && (hardwareConf.capability.maxOutput === '4K60' || hardwareConf.capability.maxOutput === '4K30')" value="3840x2160_30">4K30</option>
|
|
|
|
|
<option value="1080P60">1080P60</option>
|
|
|
|
|
<option value="1080I60">1080I60</option>
|
|
|
|
|
<option value="1080P50">1080P50</option>
|
|
|
|
|
<option value="1080I50">1080I50</option>
|
|
|
|
|
<option value="1080P30">1080P30</option>
|
|
|
|
|
<option value="1080P25">1080P25</option>
|
|
|
|
|
<option value="1080P24">1080P24</option>
|
|
|
|
|
<option value="720P60">720P60</option>
|
|
|
|
|
<option value="720P50">720P50</option>
|
|
|
|
|
<option value="1920x2160_30">1920x2160_30</option>
|
|
|
|
|
<option value="2560x1600_60">2560x1600_60</option>
|
|
|
|
|
<option value="2560x1440_60">2560x1440_60</option>
|
|
|
|
|
<option value="2560x1440_30">2560x1440_30</option>
|
|
|
|
|
<option value="1920x1200_60">1920x1200_60</option>
|
|
|
|
|
<option value="1680x1050_60">1680x1050_60</option>
|
|
|
|
|
<option value="1600x1200_60">1600x1200_60</option>
|
|
|
|
|
<option value="1440x900_60">1440x900_60</option>
|
|
|
|
|
<option value="1366x768_60">1366x768_60</option>
|
|
|
|
|
<option value="1280x1024_60">1280x1024_60</option>
|
|
|
|
|
<option value="1280x800_60">1280x800_60</option>
|
|
|
|
|
<option value="1024x768_60">1024x768_60</option>
|
|
|
|
|
<option value="800x600_60">800x600_60</option>
|
|
|
|
|
<option value="576P50">576P50</option>
|
|
|
|
|
<option value="480P60">480P60</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>旋转</cn>
|
|
|
|
|
<en>rotate</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select" v-model="defaultConf[mixIndex].output.rotate">
|
|
|
|
|
<option value="0">0</option>
|
|
|
|
|
<option value="90">90</option>
|
|
|
|
|
<option value="180">180</option>
|
|
|
|
|
<option value="270">270</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>左右镜像</cn>
|
|
|
|
|
<en>mirror</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<bs-switch v-model="defaultConf[mixIndex].output.mirror" :size="'normal'"></bs-switch>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>视频源</cn>
|
|
|
|
|
<en>video source</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select" v-model="defaultConf[mixIndex].output.src">
|
|
|
|
|
<option v-for="(item,index) in defaultConf" :key="item.id" :value="item.id">{{item.name}}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>低延时</cn>
|
|
|
|
|
<en>low latency</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<bs-switch v-model="defaultConf[mixIndex].output.lowLatency" :size="'normal'"></bs-switch>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>色域转换</cn>
|
|
|
|
|
<en>CSC</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select" v-model="defaultConf[mixIndex].output.csc.matrix">
|
|
|
|
|
<option value="identity" cn="不转换" en="Identity" v-language-option></option>
|
|
|
|
|
<option value="601_709">601 to 709</option>
|
|
|
|
|
<option value="709_601">709 to 601</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>亮度</cn>
|
|
|
|
|
<en>luma</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<noui-slider v-model="defaultConf[mixIndex].output.csc.luma" :min="0" :max="100" :step="1" :fix="0"></noui-slider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>对比度</cn>
|
|
|
|
|
<en>contrast</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<noui-slider v-model="defaultConf[mixIndex].output.csc.contrast" :min="0" :max="100" :step="1" :fix="0"></noui-slider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>饱和度</cn>
|
|
|
|
|
<en>saturation</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<noui-slider v-model="defaultConf[mixIndex].output.csc.saturation" :min="0" :max="100" :step="1" :fix="0"></noui-slider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>色调</cn>
|
|
|
|
|
<en>hue</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<noui-slider v-model="defaultConf[mixIndex].output.csc.hue" :min="0" :max="100" :step="1" :fix="0"></noui-slider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label v-if="Object.keys(hardwareConf).length > 0">
|
|
|
|
|
{{hardwareConf.capability.extraVo}}
|
|
|
|
|
<cn>开关</cn>
|
|
|
|
|
<en>enable</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<bs-switch v-model="defaultConf[mixIndex].output2.enable" :size="'normal'"></bs-switch>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>分辨率</cn>
|
|
|
|
|
<en>resolution</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select" v-model="defaultConf[mixIndex].output2.output">
|
|
|
|
|
<option value="1080P60">1080P60</option>
|
|
|
|
|
<option value="1080I60">1080I60</option>
|
|
|
|
|
<option value="1080P50">1080P50</option>
|
|
|
|
|
<option value="1080I50">1080I50</option>
|
|
|
|
|
<option value="1080P30">1080P30</option>
|
|
|
|
|
<option value="720P60">720P60</option>
|
|
|
|
|
<option value="720P50">720P50</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>旋转</cn>
|
|
|
|
|
<en>rotate</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select" v-model="defaultConf[mixIndex].output2.rotate">
|
|
|
|
|
<option value="0">0</option>
|
|
|
|
|
<option value="90">90</option>
|
|
|
|
|
<option value="180">180</option>
|
|
|
|
|
<option value="270">270</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>左右镜像</cn>
|
|
|
|
|
<en>mirror</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<bs-switch v-model="defaultConf[mixIndex].output2.mirror" :size="'normal'"></bs-switch>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>视频源</cn>
|
|
|
|
|
<en>video source</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select" v-model="defaultConf[mixIndex].output2.src">
|
|
|
|
|
<option v-for="(item,index) in defaultConf" :key="item.id" :value="item.id">{{item.name}}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>低延时</cn>
|
|
|
|
|
<en>low latency</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<bs-switch v-model="defaultConf[mixIndex].output2.lowLatency" :size="'normal'"></bs-switch>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>色域转换</cn>
|
|
|
|
|
<en>CSC</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<select class="form-select" v-model="defaultConf[mixIndex].output2.csc.matrix">
|
|
|
|
|
<option value="identity" cn="不转换" en="Identity" v-language-option></option>
|
|
|
|
|
<option value="601_709">601 to 709</option>
|
|
|
|
|
<option value="709_601">709 to 601</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>亮度</cn>
|
|
|
|
|
<en>luma</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<noui-slider v-model="defaultConf[mixIndex].output2.csc.luma" :min="0" :max="100" :step="1" :fix="0"></noui-slider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>对比度</cn>
|
|
|
|
|
<en>contrast</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<noui-slider v-model="defaultConf[mixIndex].output2.csc.contrast" :min="0" :max="100" :step="1" :fix="0"></noui-slider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>饱和度</cn>
|
|
|
|
|
<en>saturation</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<noui-slider v-model="defaultConf[mixIndex].output2.csc.saturation" :min="0" :max="100" :step="1" :fix="0"></noui-slider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
|
|
|
|
<label>
|
|
|
|
|
<cn>色调</cn>
|
|
|
|
|
<en>hue</en>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
|
|
|
|
<noui-slider v-model="defaultConf[mixIndex].output2.csc.hue" :min="0" :max="100" :step="1" :fix="0"></noui-slider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row my-5 mb-3">
|
|
|
|
|
<div class="col-lg-12 text-center">
|
|
|
|
|
<button type="button" @click="updateDefaultConf" class="btn border-3 btn-primary px-5 text-center"><cn>保存</cn><en>Save</en></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
<?php include ("./public/foot.inc") ?>
|
|
|
|
|
<script type="module">
|
|
|
|
|
|
|
|
|
|
import { useDefaultConf,useHardwareConf } from "./assets/js/vue.hooks.js";
|
2024-02-15 22:07:54 +01:00
|
|
|
import { ignoreCustomElementPlugin,filterKeywordPlugin,bootstrapSwitchComponent,nouiSliderComponent,languageOptionDirective } from "./assets/js/vue.helper.js"
|
2024-02-15 22:07:50 +01:00
|
|
|
import vue from "./assets/js/vue.build.js";
|
|
|
|
|
|
|
|
|
|
const {createApp,ref,reactive,watchEffect,computed,onMounted} = vue;
|
|
|
|
|
const app = createApp({
|
|
|
|
|
directives:{
|
|
|
|
|
"language-option": languageOptionDirective
|
|
|
|
|
},
|
|
|
|
|
components:{
|
|
|
|
|
"bs-switch" : bootstrapSwitchComponent,
|
|
|
|
|
"noui-slider": nouiSliderComponent
|
|
|
|
|
},
|
|
|
|
|
setup(props,context) {
|
|
|
|
|
|
|
|
|
|
const { defaultConf,updateDefaultConf } = useDefaultConf();
|
|
|
|
|
const { hardwareConf } = useHardwareConf();
|
|
|
|
|
|
|
|
|
|
const state = {
|
|
|
|
|
mixIndex: ref(-1),
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const unwatch = watchEffect(()=>{
|
|
|
|
|
if(defaultConf.length > 0) {
|
|
|
|
|
for(let i=0;i<defaultConf.length;i++) {
|
|
|
|
|
if(defaultConf[i].type !== "mix")
|
|
|
|
|
continue;
|
|
|
|
|
state.mixIndex.value = i;
|
|
|
|
|
}
|
|
|
|
|
unwatch();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return {...state,defaultConf,hardwareConf,updateDefaultConf}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
app.use(ignoreCustomElementPlugin);
|
2024-02-15 22:07:54 +01:00
|
|
|
app.use(filterKeywordPlugin);
|
2024-02-15 22:07:50 +01:00
|
|
|
app.mount('#app');
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
