Autodetection settings page
This commit is contained in:
parent
aa4dbc15f6
commit
0cdd70b2d3
@ -4,4 +4,4 @@ var AntiGradientMode = Object.freeze({
|
||||
Strict: 2
|
||||
});
|
||||
|
||||
export default EdgeDetectPrimaryDirection;
|
||||
export default AntiGradientMode;
|
||||
|
||||
@ -110,6 +110,8 @@ import GeneralSettings from './general-settings';
|
||||
import ControlsSettings from './controls-settings/controls-settings';
|
||||
import AddEditActionPopup from './controls-settings/add-edit-action-popup';
|
||||
|
||||
import AutodetectionSettings from './autodetection-settings';
|
||||
|
||||
|
||||
export default {
|
||||
name: "Ultrawidify",
|
||||
@ -133,6 +135,7 @@ export default {
|
||||
GeneralSettings,
|
||||
ControlsSettings,
|
||||
AddEditActionPopup,
|
||||
AutodetectionSettings,
|
||||
},
|
||||
methods: {
|
||||
setSelectedTab(newTab) {
|
||||
|
||||
@ -1,9 +1,388 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<input type="checkbox"
|
||||
v-model="showAdvancedOptions"
|
||||
/>
|
||||
Show advanced options
|
||||
</div>
|
||||
|
||||
<div class="label">Autodetection frequency</div>
|
||||
<div class="description">
|
||||
Determines how often we check for aspect ratio changes.
|
||||
More frequent aspect ratio checks can result in insane RAM usage.
|
||||
Less frequent aspect ratio checks result in bigger delay between aspect ratio change and correction.
|
||||
Delays are given in milliseconds.
|
||||
</div>
|
||||
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Frequency while playing:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
step="any"
|
||||
v-model="settings.active.arDetect.timers.playing"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Frequency while paused:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
step="any"
|
||||
v-model="settings.active.arDetect.timers.paused"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Error timeout:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
step="any"
|
||||
v-model="settings.active.arDetect.timers.error"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate.
|
||||
<a href="#"
|
||||
@click="showAdvancedOptions = true"
|
||||
>Show advanced options</a>
|
||||
</div>
|
||||
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding" v-if="showAdvancedOptions">
|
||||
<div class="flex label-secondary">
|
||||
Tick rate:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
step="any"
|
||||
v-model="settings.active.arDetect.timers.tickrate"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label">Fallback mode</div>
|
||||
<div class="description">
|
||||
Some streaming sites implement stuff (DRM) that prevents us from detecting aspect ratio using our favourite way.
|
||||
Fortunately for us, some browsers (most notably: Firefox) allow us to work around that limitation using an alternative.
|
||||
Said alternative is not without downsides, though:<br />
|
||||
<ul><li> it's less accurate and leaves a thin black edge all around the video</li>
|
||||
<li> Uses bigger image sample, which translates into slightly to moderately increased RAM and CPU usage <small>(increase in resource usage depends on your monitor resolution)</small></li>
|
||||
</ul>
|
||||
This is why fallback mode can be toggled off separately from the main thing.
|
||||
<span v-if="!fallbackModeAvailable">Unfortunately for you, <b>this option doesn't seem to be available in the browser you're using.</b></span>
|
||||
</div>
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="checkbox"
|
||||
v-model="settings.active.arDetect.fallbackMode.enabled"
|
||||
/> Enable fallback mode <span v-if="!fallbackModeAvailable">because I'm super duper sure I'm using firefox right now.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Safety border thickness (in px)
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
step="any"
|
||||
v-model="settings.active.arDetect.fallbackMode.safetyBorderPx"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Don't react if detected edge is less than this many pixels thick:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
step="any"
|
||||
v-model="settings.active.arDetect.fallbackMode.noTriggerZonePx"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label">Letterbox misallignment treshold</div>
|
||||
<div class="description">
|
||||
If top and bottom bar differ by more than this (0 — 0%, 1 — 100%), we do not correct aspect ratio.
|
||||
</div>
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Letterbox misalignment treshold
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type=""
|
||||
v-model="settings.active.arDetect.allowedMisaligned"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label">Sampling options</div>
|
||||
<div class="description">
|
||||
Various sampling related options. Some options may be hidden behind <a href="#" @click="showAdvancedOptions = true">advanced options</a><br/>
|
||||
<b>Static columns:</b> Image is sampled in this many columns, spaced at regular intervals between both edges.<br/>
|
||||
<b>Random columns:</b> (ADVANCED; NOT IMPLEMENTED/PLANNED) In addition to static colums, sample image at this many random columns.<br/>
|
||||
<b>Static rows:</b> (ADVANCED) Image is sampled in this many rows, spaced at regular intervals between both edges.<br/>
|
||||
<b>Sample width, height:</b> (ADVANCED) size of the sample. Bigger -> more accurate aspect ratio detection, but uses more resources.<br/>
|
||||
|
||||
</div>
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Static sample columns:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.sampling.staticCols"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Random sample columns:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.sampling.randomCols"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Static rows:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.sampling.staticRows"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Sample width:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.width"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Static rows:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.height"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label">Blackbar</div>
|
||||
<div class="description">
|
||||
These settings determine what's considered black and what's considered non-black.<br/>
|
||||
<b>Black level:</b> 0-255, where 0 is black. Anything below this number across all RGB components is considered black.
|
||||
Black level can decrease if we detect darker blacks in the video. Lower values —> more accurate edge detection;
|
||||
higher values —> detection is more forgiving to videos with less-than-ideal contrast ratios.<br/>
|
||||
<b>Treshold:</b> If pixel is darker than the sum of black level and this value, it's considered black. In theory, lower -> better.
|
||||
In practice, this value needs to be kept surprisingly high (8 might not be high enough), otherwise compression artifacts in videos
|
||||
start having an adverse effect on quality of automatic detection.
|
||||
<b>Gradient detection:</b> Attempt to discriminate between hard edges and gradients. 'Strict' and 'Lax' prevent aspect ratio
|
||||
changes if we detected gradients instead of a legit edge. This results in fewer false positives, but may cause aspect ratio
|
||||
detection to not work on darker frames.<br/>
|
||||
<b>Image treshold:</b> When gradient detection is enabled, everything that's brighter than the sum of black level, treshold and
|
||||
ths is considered to be non-black.<br/>
|
||||
<b>Gradient treshold:</b> If the distance between last black pixel and the first non-black pixel in a given column is more than this value,
|
||||
we're looking at a gradient. If this happens while gradient detection is on, we don't change aspect ratio.<br/>
|
||||
<b>Gradient sample size:</b> This option is really only relevant when using 'lax' gradient detection. If we don't find a non-black pixel
|
||||
within this distance after last known black pixel when scanning a column, we presume we're not on a gradient.
|
||||
</div>
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Black level:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.blackbar.blackLevel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Treshold:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.blackbar.treshold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Gradient detection:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
TODO: insert select here
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Image treshold
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.blackbar.imageTreshold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Gradient treshold:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.blackbar.gradientTreshold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Gradient sample size:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.blackbar.gradientSampleSize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label">Edge detection</div>
|
||||
<div class="description">
|
||||
alan pls add
|
||||
</div>
|
||||
<div class="indent">
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="showAdvancedOptions">
|
||||
<div class="label">Black frame detection</div>
|
||||
<div class="description">
|
||||
Black frame detection is a quick test that tries to determine whether we're looking at a black frame. This test prevents
|
||||
us from wasting precious time trying to detect aspect ratio on frames that are too dark for reliable aspect ratio detection.<br/>
|
||||
<b>Sample width, height:</b> Sample size. Since we're checking <i>every</i> pixel in this sample, dimensions should be kept small.<br/>
|
||||
<b>Cumulative treshold:</b> If we add the maximum of red, green, blue values of every pixel in the sample and they total more than this, the frame is bright enough.<br/>
|
||||
<b>Black pixel treshold:</b> If more than this fraction of pixels from the sample are "black", we consider the frame black. This overrules cumulative treshold.
|
||||
</div>
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Blackframe sample width:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.canvasDimensions.blackframeCanvas.width"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Blackframe sample height:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.canvasDimensions.blackframeCanvas.height"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Cumulative treshold:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type="number"
|
||||
v-model="settings.active.arDetect.blackframe.cumulativeTreshold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Black pixel treshold:
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type=""
|
||||
v-model="settings.active.arDetect.blackframe.blackPixelsCondition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showAdvancedOptions">
|
||||
<div class="label">Aspect ratio change treshold</div>
|
||||
<div class="description">
|
||||
New and old aspect ratio must differ by at least this much (%, 1=100%) before we trigger aspect ratio correction.
|
||||
</div>
|
||||
<div class="indent">
|
||||
<div class="flex flex-row row-padding">
|
||||
<div class="flex label-secondary">
|
||||
Aspect ratio change treshold.
|
||||
</div>
|
||||
<div class="flex flex-input">
|
||||
<input type=""
|
||||
v-model="settings.active.arDetect.allowedMisaligned"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['settings']
|
||||
props: ['settings'],
|
||||
data() {
|
||||
return {
|
||||
showAdvancedOptions: false,
|
||||
fallbackModeAvailable: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 10;
|
||||
canvas.height = 10;
|
||||
const ctx = canvas.getContext('2d');
|
||||
try {
|
||||
ctx.drawWindow(window,0, 0, 10, 10, "rgba(0,0,0,0)");
|
||||
this.fallbackModeAvailable = true;
|
||||
} catch (e) {
|
||||
console.log("DrawWindow failed:", e)
|
||||
this.fallbackModeAvailable = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user