Add presets.yaml and to web ui

This commit is contained in:
Brett Williams
2022-12-11 14:19:59 -08:00
parent 10dd5b4295
commit 9f291a1282
3 changed files with 102 additions and 30 deletions

View File

@@ -10,6 +10,7 @@ from datetime import datetime
from zipfile import ZipFile
import requests
import yaml
from flask import Flask, request, render_template, send_file, after_this_request, Response, redirect, url_for, abort
from werkzeug.utils import secure_filename
@@ -42,8 +43,12 @@ def sorted_jobs(all_jobs, sort_by_date=True):
@server.route('/')
@server.route('/index')
def index():
with open('utilities/presets.yaml') as f:
presets = yaml.load(f, Loader=yaml.FullLoader)
return render_template('index.html', all_jobs=sorted_jobs(RenderQueue.job_queue), hostname=RenderQueue.host_name,
renderer_info=renderer_info())
renderer_info=renderer_info(), render_clients=RenderQueue.render_clients, preset_list=presets)
@server.route('/ui/job/<job_id>/full_details')

View File

@@ -9,7 +9,7 @@
<script src="https://kit.fontawesome.com/698705d14d.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename = 'modals.js') }}"></script>
</head>
<body onload="configureDropDownLists(document.getElementById('renderer'), document.getElementById('export_format'))">
<body onload="rendererChanged(document.getElementById('renderer'))">
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
@@ -26,13 +26,18 @@
<div class="navbar-end">
<div class="navbar-item">
<button class="button is-primary is-outlined js-modal-trigger" data-target="add-job-modal">Submit Job</button>
<button class="button is-primary is-outlined js-modal-trigger" data-target="add-job-modal">
<span class="icon">
<i class="fa-solid fa-plus"></i>
</span>
<span>Submit Job</span>
</button>
</div>
</div>
</nav>
<div class="table-container">
<table class="table is-bordered is-striped is-hoverable is-fullwidth">
<table class="table is-bordered is-striped is-hoverable is-fullwidth is-narrow">
<thead>
<tr>
<th>Preview</th>
@@ -107,9 +112,10 @@
<section class="modal-card-body">
<!-- File Uploader -->
<label class="label">Upload File</label>
<div id="file-uploader" class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" name="file">
<input class="file-input is-small" type="file" name="file">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
@@ -132,7 +138,19 @@
fileName.textContent = fileInput.files[0].name;
}
}
function configureDropDownLists(ddl1, ddl2) {
const presets = {
{% for preset in preset_list: %}
{{preset}}: {
name: '{{preset_list[preset]['name']}}',
renderer: '{{preset_list[preset]['renderer']}}',
args: '{{preset_list[preset]['args']}}',
},
{% endfor %}
};
function rendererChanged(ddl1) {
var renderers = {
{% for renderer in renderer_info: %}
{% if renderer_info[renderer]['supported_export_formats']: %}
@@ -143,13 +161,26 @@
],
{% endif %}
{% endfor %}
}
};
var selectedRenderer = ddl1.value;
var ddl3 = document.getElementById('preset_list');
ddl3.options.length = 0;
createOption(ddl3, '-Presets-', '');
for (var preset_name in presets) {
if (presets[preset_name]['renderer'] == selectedRenderer) {
createOption(ddl3, presets[preset_name]['name'], preset_name);
};
};
document.getElementById('raw_args').value = "";
var ddl2 = document.getElementById('export_format');
ddl2.options.length = 0;
var options = renderers[ddl1.value]
var options = renderers[selectedRenderer];
for (i = 0; i < options.length; i++) {
createOption(ddl2, options[i], options[i]);
}
};
}
function createOption(ddl, text, value) {
@@ -158,39 +189,57 @@
opt.text = text;
ddl.options.add(opt);
}
function addPresetTextToInput(presetfield, textfield) {
var p = presets[presetfield.value];
textfield.value = p['args'];
}
</script>
<!-- Renderer -->
<div class="field">
<!-- Renderer & Priority -->
<div class="field is-grouped">
<p class="control">
<label class="label">Renderer</label>
<div class="control">
<div class="select">
<select id="renderer" name="renderer" onchange="configureDropDownLists(this, document.getElementById('export_format'))">
<span class="select">
<select id="renderer" name="renderer" onchange="rendererChanged(this)">
{% for renderer in renderer_info: %}
<option name="renderer" value="{{renderer}}">{{renderer}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<!-- Priority -->
<div class="control">
</span>
</p>
<p class="control">
<label class="label">Client</label>
<span class="select">
<select name="client">
<option name="client" value="">First Available</option>
{% for client in render_clients: %}
<option name="client" value="{{client}}">{{client}}</option>
{% endfor %}
</select>
</span>
</p>
<p class="control">
<label class="label">Priority</label>
<label class="radio"><input type="radio" name="priority" value="1">1</label>
<label class="radio"><input type="radio" name="priority" value="2" checked>2</label>
<label class="radio"><input type="radio" name="priority" value="3">3</label>
<span class="select">
<select name="priority">
<option name="priority" value="1">1</option>
<option name="priority" value="2" selected="selected">2</option>
<option name="priority" value="3">3</option>
</select>
</span>
</p>
</div>
<br>
<!-- Output Path -->
<label class="label">Output</label>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input is-success" type="text" placeholder="Output Name" name="output_path">
<input class="input is-small" type="text" placeholder="Output Name" name="output_path">
</div>
<p class="control">
<span class="select">
<span class="select is-small">
<select id="export_format" name="export_format">
<option value="ar">option</option>
</select>
@@ -206,8 +255,18 @@
<!-- </div>-->
<!-- </div>-->
<div class="control">
<input class="input" type="text" placeholder="Custom Args" name="raw_args">
<label class="label">Command Line Arguments</label>
<div class="field has-addons">
<p class="control">
<span class="select is-small">
<select id="preset_list" onchange="addPresetTextToInput(this, document.getElementById('raw_args'))">
<option value="preset-placeholder">presets</option>
</select>
</span>
</p>
<p class="control is-expanded">
<input class="input is-small" type="text" placeholder="Args" id="raw_args" name="raw_args">
</p>
</div>
<!-- End Add Form -->

8
utilities/presets.yaml Normal file
View File

@@ -0,0 +1,8 @@
fast_preview_ffmpeg:
name: "Fast Preview - Full Res"
renderer: "ffmpeg"
args: "-vf format=yuv420p -preset ultrafast"
fast_preview_ffmpeg_720:
name: "Fast Preview - 720p"
renderer: "ffmpeg"
args: "-vf format=yuv420p,scale=720:-2 -preset ultrafast"