Add initial theming to web UI.
This commit is contained in:
Matthew Stratford
parent
642262aa6c
commit
37140cf247
4 changed files with 159 additions and 39 deletions
|
|
@ -1,10 +1,10 @@
|
|||
import multiprocessing
|
||||
import bapsicle_standalone
|
||||
from flask import Flask, render_template
|
||||
from flask import Flask, render_template, send_from_directory
|
||||
import json
|
||||
import sounddevice as sd
|
||||
|
||||
app = Flask(__name__)
|
||||
app = Flask(__name__, static_url_path='')
|
||||
|
||||
channel_to_q = []
|
||||
channel_from_q = []
|
||||
|
|
@ -15,10 +15,16 @@ channel_p = []
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
@app.route("/")
|
||||
def status():
|
||||
def ui_index():
|
||||
data = {
|
||||
'ui_page': "index",
|
||||
"ui_title": ""
|
||||
}
|
||||
return render_template('index.html', data=data)
|
||||
|
||||
@app.route("/status")
|
||||
def ui_status():
|
||||
channel_states = []
|
||||
for i in range(3):
|
||||
channel_states.append(details(i))
|
||||
|
|
@ -35,8 +41,10 @@ def status():
|
|||
data = {
|
||||
'channels': channel_states,
|
||||
'outputs': outputs,
|
||||
'ui_page': "status",
|
||||
"ui_title": "Status"
|
||||
}
|
||||
return render_template('index.html', data=data)
|
||||
return render_template('status.html', data=data)
|
||||
|
||||
|
||||
@app.route("/player/<int:channel>/play")
|
||||
|
|
@ -44,7 +52,7 @@ def play(channel):
|
|||
|
||||
channel_to_q[channel].put("PLAY")
|
||||
|
||||
return status()
|
||||
return ui_status()
|
||||
|
||||
|
||||
@app.route("/player/<int:channel>/pause")
|
||||
|
|
@ -52,7 +60,7 @@ def pause(channel):
|
|||
|
||||
channel_to_q[channel].put("PAUSE")
|
||||
|
||||
return status()
|
||||
return ui_status()
|
||||
|
||||
|
||||
@app.route("/player/<int:channel>/unpause")
|
||||
|
|
@ -60,7 +68,7 @@ def unPause(channel):
|
|||
|
||||
channel_to_q[channel].put("UNPAUSE")
|
||||
|
||||
return status()
|
||||
return ui_status()
|
||||
|
||||
|
||||
@app.route("/player/<int:channel>/stop")
|
||||
|
|
@ -68,7 +76,7 @@ def stop(channel):
|
|||
|
||||
channel_to_q[channel].put("STOP")
|
||||
|
||||
return status()
|
||||
return ui_status()
|
||||
|
||||
|
||||
@app.route("/player/<int:channel>/seek/<int:pos>")
|
||||
|
|
@ -76,13 +84,13 @@ def seek(channel, pos):
|
|||
|
||||
channel_to_q[channel].put("SEEK:" + str(pos))
|
||||
|
||||
return status()
|
||||
return ui_status()
|
||||
|
||||
@app.route("/player/<int:channel>/output/<name>")
|
||||
def output(channel, name):
|
||||
channel_to_q[channel].put("OUTPUT:" + name)
|
||||
channel_to_q[channel].put("LOAD:test"+str(channel)+".mp3")
|
||||
return status()
|
||||
return ui_status()
|
||||
|
||||
|
||||
@app.route("/player/<int:channel>/details")
|
||||
|
|
@ -100,15 +108,19 @@ def details(channel):
|
|||
def all_stop():
|
||||
for channel in channel_to_q:
|
||||
channel.put("STOP")
|
||||
status()
|
||||
ui_status()
|
||||
|
||||
|
||||
@app.route('/static/<path:path>')
|
||||
def send_static(path):
|
||||
return send_from_directory('ui-static', path)
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
||||
for channel in range(3):
|
||||
channel_to_q.append(multiprocessing.Queue())
|
||||
channel_from_q.append(multiprocessing.Queue())
|
||||
channel_to_q[-1].put_nowait("LOAD:test"+str(channel)+".mp3")
|
||||
# channel_to_q[-1].put_nowait("LOAD:test"+str(channel)+".mp3")
|
||||
channel_p.append(
|
||||
multiprocessing.Process(
|
||||
target=bapsicle_standalone.bapsicle,
|
||||
|
|
|
|||
69
templates/base.html
Normal file
69
templates/base.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
{% block head %}{% endblock %}
|
||||
|
||||
<title>BAPSicle {% if data.ui_title %} | {{data.ui_title}}{% endif %}</title>
|
||||
|
||||
<!-- Custom fonts for this template-->
|
||||
<link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template-->
|
||||
<link href="/static/css/sb-admin-2.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body class="bg-gradient-primary">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Outer Row -->
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="col-xl-10 col-lg-12 col-md-9">
|
||||
<div class="mt-5">
|
||||
<a href="/">
|
||||
<h1 class="h1 text-light d-inline">BAPSicle</h1>
|
||||
</a>
|
||||
<div class="d-inline float-right">
|
||||
<a href="/status" class="btn btn-user btn-outline-light btn-primary ml-4 {% if data.ui_page == 'status' %}active{% endif %}">
|
||||
Status
|
||||
</a>
|
||||
<a href="/config" class="btn btn-user btn-outline-light btn-primary ml-4 {% if data.ui_page == 'config' %}active{% endif %}">
|
||||
Config
|
||||
</a>
|
||||
<a href="/logs" class="btn btn-user btn-outline-light btn-primary ml-4 {% if data.ui_page == 'logs' %}active{% endif %}">
|
||||
Logs
|
||||
</a>
|
||||
</div>
|
||||
<div class="card o-hidden border-0 shadow-lg my-3">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Core plugin JavaScript-->
|
||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="js/sb-admin-2.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,26 +1,28 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>BAPSicle</title>
|
||||
<meta http-equiv="refresh" content="2;url=/" />
|
||||
</head>
|
||||
<body>
|
||||
{% if data %}
|
||||
<code>
|
||||
{% for player in data.channels %}
|
||||
<a href="/player/{{player.channel}}/play">Play</a>
|
||||
<a href="/player/{{player.channel}}/stop">Stop</a>
|
||||
<a href="/player/{{player.channel}}/seek/50">Seek 50</a>
|
||||
{{player}}<br>
|
||||
{% endfor %}
|
||||
</code>
|
||||
<br>
|
||||
<code>
|
||||
{% for output in data.outputs %}
|
||||
<a href="/player/0/output/{{output.name}}">Set Channel 0</a> <a href="/player/1/output/{{output.name}}">Set Channel 1</a> <a href="/player/2/output/{{output.name}}">Set Channel 2</a> - {{output.name}}<br>
|
||||
{% endfor %}
|
||||
</code>
|
||||
{% endif %}
|
||||
{% extends 'base.html' %}
|
||||
{% block head %}
|
||||
<meta http-equiv="refresh" content="5;url=/" />
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<div class="card-body p-0">
|
||||
<!-- Nested Row within Card Body -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6 d-none d-lg-block bg-index-image"></div>
|
||||
<div class="col-lg-6">
|
||||
<div class="p-5">
|
||||
<div class="text-center">
|
||||
<h2 class="h1 text-gray-900 mb-4"><small>Welcome to</small><br>BAPSicle!</h2>
|
||||
<p class="h4">The next gen Broadcast and Presenting Suite server!</p>
|
||||
</div>
|
||||
<hr>
|
||||
<p>Wanted the actual playout controller?</p>
|
||||
<a href="#" class="btn btn-primary btn-user btn-block">
|
||||
Open WebStudio
|
||||
</a>
|
||||
<hr>
|
||||
<p>Version: X | Server Name: Studio X</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
37
templates/status.html
Normal file
37
templates/status.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{% extends 'base.html' %}
|
||||
{% block head %}
|
||||
<meta http-equiv="refresh" content="2;url=/status" />
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<div class="card-body p-0">
|
||||
<!-- Nested Row within Card Body -->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="p-5">
|
||||
<div class="text-center">
|
||||
<h2 class="h3 text-gray-900 mb-4">Status</h2>
|
||||
</div>
|
||||
<hr>
|
||||
{% if data %}
|
||||
<code>
|
||||
{% for player in data.channels %}
|
||||
<a href="/player/{{player.channel}}/play">Play</a>
|
||||
<a href="/player/{{player.channel}}/stop">Stop</a>
|
||||
<a href="/player/{{player.channel}}/seek/50">Seek 50</a>
|
||||
{{player}}<br>
|
||||
{% endfor %}
|
||||
</code>
|
||||
<br>
|
||||
<code>
|
||||
{% for output in data.outputs %}
|
||||
<a href="/player/0/output/{{output.name}}">Set Channel 0</a> <a href="/player/1/output/{{output.name}}">Set Channel 1</a> <a href="/player/2/output/{{output.name}}">Set Channel 2</a> - {{output.name}}<br>
|
||||
{% endfor %}
|
||||
</code>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue