init
This commit is contained in:
commit
b51b2db8db
|
|
@ -0,0 +1,276 @@
|
||||||
|
#!/usr/bin/env python
|
||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
#
|
||||||
|
import sys, os
|
||||||
|
import http.client
|
||||||
|
import xml.etree.ElementTree as ET
|
||||||
|
from flask import Flask, render_template, request, make_response, jsonify
|
||||||
|
from waitress import serve
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
DEBUG = 0
|
||||||
|
video_folder = "/home/pi"
|
||||||
|
media_ext = [ "mp4", "avi", "mkv" ]
|
||||||
|
# ~ video_folder = "/media/"
|
||||||
|
## base64 encoded ":secret""
|
||||||
|
# import base64
|
||||||
|
# passwd = "foo"
|
||||||
|
# passswd64 = str(base64.b64encode(passwd.encode('utf-8')), 'utf-8')
|
||||||
|
auth = "OnNlY3JldA=="
|
||||||
|
cmd_auth = "OnNlY3JldA=="
|
||||||
|
hosts = [ "10.42.0.135", "10.42.0.156" ]
|
||||||
|
# VLC http LUA port
|
||||||
|
port = 8080
|
||||||
|
# Clients cmd port
|
||||||
|
cmd_port = 5000
|
||||||
|
|
||||||
|
hosts_available, hosts_unavailable = [],[]
|
||||||
|
|
||||||
|
# Map vlc cmds
|
||||||
|
# See https://github.com/videolan/vlc/blob/1336447566c0190c42a1926464fa1ad2e59adc4f/share/lua/http/requests/README.txt
|
||||||
|
cmd = {
|
||||||
|
"play" : "pl_play",
|
||||||
|
"resume" : "pl_forceresume",
|
||||||
|
"pause" : "pl_forcepause",
|
||||||
|
"tpause" : "pl_pause",
|
||||||
|
"previous" : "pl_previous",
|
||||||
|
"next" : "pl_next",
|
||||||
|
"stop" : "pl_stop",
|
||||||
|
"enqueue" : "in_enqueue",
|
||||||
|
"add" : "in_play",
|
||||||
|
"clear" : "pl_empty",
|
||||||
|
"delete" : "pl_delete",
|
||||||
|
"loop" : "pl_loop",
|
||||||
|
"repeat" : "pl_repeat",
|
||||||
|
"random" : "pl_random",
|
||||||
|
"move" : "pl_move",
|
||||||
|
"sort" : "pl_sort",
|
||||||
|
"seek" : "seek",
|
||||||
|
"sync" : "sync",
|
||||||
|
"status" : "status.xml",
|
||||||
|
"list" : "playlist.xml",
|
||||||
|
#"volume" : "volume",
|
||||||
|
#"ratio" : "aspectratio",
|
||||||
|
#"dir" : "?dir=<uri>",
|
||||||
|
#"command" : "?command=<cmd>",
|
||||||
|
#"key" : "key=",
|
||||||
|
#"browse" : "browse.xml?uri=file://~"
|
||||||
|
# System commands :
|
||||||
|
"rssi" : "rssi",
|
||||||
|
"blink" : "blink",
|
||||||
|
"poweroff" : "poweroff",
|
||||||
|
"reboot" : "reboot",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
# Network/link utilities
|
||||||
|
# https://www.metageek.com/training/resources/understanding-rssi/
|
||||||
|
|
||||||
|
def isup(host_l, port):
|
||||||
|
global DEBUG
|
||||||
|
import socket
|
||||||
|
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
|
||||||
|
try:
|
||||||
|
s.settimeout(3.0)
|
||||||
|
s.connect((host_l, port))
|
||||||
|
if DEBUG:
|
||||||
|
print( "Port " + str(port) + " reachable")
|
||||||
|
return 1
|
||||||
|
except (socket.error, socket.timeout) as e:
|
||||||
|
if DEBUG:
|
||||||
|
print("Error on connect to " + host_l + ": %s" % e)
|
||||||
|
return 0
|
||||||
|
finally:
|
||||||
|
s.close()
|
||||||
|
|
||||||
|
def checkHosts(host_l):
|
||||||
|
hostdown, hostup = [], []
|
||||||
|
hosts_number = str(len(host_l))
|
||||||
|
for lhost in host_l:
|
||||||
|
if not isup(lhost, 8080):
|
||||||
|
hostdown.append(lhost)
|
||||||
|
else:
|
||||||
|
hostup.append(lhost)
|
||||||
|
if DEBUG:
|
||||||
|
print( str(len(hostup)) + " of " + hosts_number + " hosts found.")
|
||||||
|
return hostup, hostdown
|
||||||
|
|
||||||
|
# File utilities
|
||||||
|
|
||||||
|
def listMediaFiles(folder):
|
||||||
|
files = os.listdir(folder);
|
||||||
|
medias = []
|
||||||
|
for fd in files:
|
||||||
|
if len(fd.split('.')) > 1:
|
||||||
|
if fd.split('.')[1] in media_ext:
|
||||||
|
medias.append(fd)
|
||||||
|
return medias
|
||||||
|
|
||||||
|
# /requests/status.xml?command=in_enqueue&input=file:///home/pi/tst1.mp4
|
||||||
|
def writeM3U(m3u_content : str, host : str):
|
||||||
|
filename = host.replace(".", "_") + ".m3u"
|
||||||
|
fd = open(filename, "w")
|
||||||
|
fd.write(m3u_content)
|
||||||
|
fd.close()
|
||||||
|
return 1
|
||||||
|
|
||||||
|
# String utilities
|
||||||
|
|
||||||
|
def escapeStr(uri):
|
||||||
|
return uri.replace(" ", "%20")
|
||||||
|
|
||||||
|
def sec2min(duration):
|
||||||
|
return('%02d:%02d' % (duration / 60, duration % 60))
|
||||||
|
|
||||||
|
# VLC lua utilities
|
||||||
|
|
||||||
|
def sendCommand(host, arg0, arg1, arg2):
|
||||||
|
#conn = http.client.HTTPConnection( host + ":" + str(port), timeout=3 )
|
||||||
|
portl = port
|
||||||
|
# Build request
|
||||||
|
req = "/requests/status.xml"
|
||||||
|
if arg0 == "list" :
|
||||||
|
req = "/requests/playlist.xml"
|
||||||
|
elif arg0 == "rssi":
|
||||||
|
req = "/rssi"
|
||||||
|
portl = cmd_port
|
||||||
|
elif arg0 == "reboot":
|
||||||
|
req = "/reboot"
|
||||||
|
portl = cmd_port
|
||||||
|
elif arg0 == "poweroff":
|
||||||
|
req = "/poweroff"
|
||||||
|
portl = cmd_port
|
||||||
|
elif arg0 != "status" :
|
||||||
|
req = req + "?command=" + cmd[arg0]
|
||||||
|
if arg1 != "null" :
|
||||||
|
if (arg0 == "play") or (arg0 == "delete") or (arg0 == "sort") or (arg0 == "move"):
|
||||||
|
req = req + "&id=" + arg1
|
||||||
|
if (arg0 == "sort") or (arg0 == "move") :
|
||||||
|
# val possible values : id, title, title nodes first, artist, genre, random, duration, title numeric, album
|
||||||
|
# https://github.com/videolan/vlc/blob/3.0.17.4/modules/lua/libs/playlist.c#L353-L362
|
||||||
|
req = req + "&val=" + escapeStr(arg2)
|
||||||
|
elif arg0 == "seek" :
|
||||||
|
req = req + "&val=" + arg1
|
||||||
|
elif (arg0 == "enqueue") or (arg0 == "add") :
|
||||||
|
req = req + "&input=file://" + video_folder + "/" + arg1
|
||||||
|
# Send request
|
||||||
|
conn = http.client.HTTPConnection( host + ":" + str(portl), timeout=3 )
|
||||||
|
try:
|
||||||
|
conn.request( "GET", req, headers={"Authorization":"Basic " + auth} )
|
||||||
|
except:
|
||||||
|
return "Connection to " + host + " was refused on port " + str(portl)
|
||||||
|
resp = conn.getresponse()
|
||||||
|
# Parse response
|
||||||
|
data = resp.read()
|
||||||
|
|
||||||
|
if arg0 == "rssi":
|
||||||
|
if DEBUG:
|
||||||
|
print(data)
|
||||||
|
response_dict = {
|
||||||
|
'host': host,
|
||||||
|
'rssi': str(data, 'UTF-8')
|
||||||
|
}
|
||||||
|
return response_dict
|
||||||
|
|
||||||
|
xml = ET.fromstring(data)
|
||||||
|
|
||||||
|
if arg0 != "list" :
|
||||||
|
meta = xml.findall("./information/category/")
|
||||||
|
if meta:
|
||||||
|
for leaf in meta:
|
||||||
|
if leaf.get("name") == "filename":
|
||||||
|
filename = leaf.text
|
||||||
|
else:
|
||||||
|
filename = "N/A"
|
||||||
|
cur_length = int(xml.find('length').text)
|
||||||
|
cur_time = int(xml.find('time').text)
|
||||||
|
cur_length_fmtd = sec2min(cur_length)
|
||||||
|
cur_time_fmtd = sec2min(cur_time)
|
||||||
|
response_dict = {
|
||||||
|
'host': host,
|
||||||
|
'file': filename,
|
||||||
|
'time': cur_time_fmtd,
|
||||||
|
'leng': cur_length_fmtd,
|
||||||
|
'pos': xml.find('position').text,
|
||||||
|
'loop': xml.find('loop').text,
|
||||||
|
'repeat': xml.find('repeat').text,
|
||||||
|
}
|
||||||
|
return response_dict
|
||||||
|
|
||||||
|
else:
|
||||||
|
# Build M3U file from playlist
|
||||||
|
playlist = []
|
||||||
|
playlist_duration = 0
|
||||||
|
m3u_hdr = "#EXTM3U\n"
|
||||||
|
m3u_prefix = "#EXTINF:"
|
||||||
|
item_list = []
|
||||||
|
if xml.find("./node") and xml.find("./node").get('name') == "Playlist":
|
||||||
|
m3u_content = m3u_hdr
|
||||||
|
playlist = xml.findall("./node/leaf")
|
||||||
|
#item_list = []
|
||||||
|
for item in playlist:
|
||||||
|
m3u_content += m3u_prefix + item.get("duration") + ", " + item.get("name") + "\n" + item.get("uri") + "\n"
|
||||||
|
playlist_duration += int(item.get("duration"))
|
||||||
|
# ~ item_info = item.get("id") + " : " + item.get("name") + " - " + sec2min( int( item.get("duration") ) )
|
||||||
|
item_info = item.get("id") + ";" + item.get("name") + ";" + sec2min( int( item.get("duration") ) )
|
||||||
|
item_list.append(item_info)
|
||||||
|
|
||||||
|
playlist_overview = {
|
||||||
|
"host" : host,
|
||||||
|
"leng" : str(len(playlist)),
|
||||||
|
"duration" : sec2min(playlist_duration),
|
||||||
|
"items" : item_list
|
||||||
|
}
|
||||||
|
return playlist_overview
|
||||||
|
|
||||||
|
status_message = "Idle"
|
||||||
|
|
||||||
|
@app.route("/")
|
||||||
|
def main():
|
||||||
|
global hosts
|
||||||
|
status_message = "Searching network for live hosts..."
|
||||||
|
# ~ hosts_available, hosts_unavailable = checkHosts(hosts)
|
||||||
|
templateData = {
|
||||||
|
'hosts' : hosts,
|
||||||
|
'status_message' : status_message
|
||||||
|
}
|
||||||
|
return render_template('main.html', **templateData)
|
||||||
|
|
||||||
|
@app.route("/scan")
|
||||||
|
def scan():
|
||||||
|
global hosts_available, hosts_unavailable
|
||||||
|
hosts_available, hosts_unavailable = checkHosts(hosts)
|
||||||
|
hosts_status = [hosts_available, hosts_unavailable]
|
||||||
|
return hosts_status
|
||||||
|
|
||||||
|
@app.route("/browse")
|
||||||
|
def browse():
|
||||||
|
files = listMediaFiles("../");
|
||||||
|
return files;
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/<host>/<arg0>/", defaults = { "arg1": "null", "arg2": "null" })
|
||||||
|
@app.route("/<host>/<arg0>/<arg1>/", defaults = { "arg2": "null" })
|
||||||
|
@app.route("/<host>/<arg0>/<arg1>/<arg2>")
|
||||||
|
def action(host, arg0, arg1, arg2):
|
||||||
|
status_message = "Idle"
|
||||||
|
if arg0 not in cmd:
|
||||||
|
# ~ return "<p>Wrong command</p>"
|
||||||
|
status_message = "<p>Wrong command</p>"
|
||||||
|
elif host == "all":
|
||||||
|
resp = []
|
||||||
|
for hostl in hosts_available:
|
||||||
|
resp.append( sendCommand(hostl, arg0, arg1, arg2) )
|
||||||
|
status_message = resp
|
||||||
|
elif host not in hosts_available:
|
||||||
|
status_message = "<p>Host is not reachable</p>"
|
||||||
|
else:
|
||||||
|
status_message = sendCommand(host, arg0, arg1, arg2)
|
||||||
|
if DEBUG:
|
||||||
|
print(status_message)
|
||||||
|
return status_message
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
app.run()
|
||||||
|
# ~ serve(app, host='127.0.0.1', port=8080)
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
var scanInterval = 3000;
|
||||||
|
// Bouttons de commande
|
||||||
|
addEventListener("DOMContentLoaded", function() {
|
||||||
|
sendCmd("/scan");
|
||||||
|
sendCmd("/browse");
|
||||||
|
sendCmd("/all/rssi");
|
||||||
|
// Tous les elements avec la classe ".command"
|
||||||
|
var commandButtons = document.querySelectorAll(".command");
|
||||||
|
for (var i=0, l=commandButtons.length; i<l; i++) {
|
||||||
|
var button = commandButtons[i];
|
||||||
|
// Sur un click
|
||||||
|
button.addEventListener("click", function(event) {
|
||||||
|
// On intercepte le signal
|
||||||
|
event.preventDefault();
|
||||||
|
// On recupere la valeur de value="" sur le bouton
|
||||||
|
var clickedButton = event.currentTarget;
|
||||||
|
var command = clickedButton.value;
|
||||||
|
if (( command == "/10.42.0.135/reboot" ) || ( command == "/10.42.0.135/poweroff" )) {
|
||||||
|
if ( !confirm("Êtes vous certain de vouloir effectuer cette action ?") ) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
} else if ( command == "/scan" ) {
|
||||||
|
document.getElementById("status_all").innerHTML = "Searching network for live hosts...";
|
||||||
|
} else if ( command.indexOf("/sort") > -1 ){
|
||||||
|
if (command.indexOf('/1/') > -1 ) {
|
||||||
|
clickedButton.value = clickedButton.value.replace('/1/','/0/')
|
||||||
|
} else {
|
||||||
|
clickedButton.value = clickedButton.value.replace('/0/','/1/')
|
||||||
|
}
|
||||||
|
} else if ( command.indexOf("/move") > -1 ) {
|
||||||
|
const test_array = [5,6,7,8];
|
||||||
|
for (i=test_array.length, l=0;i>l;i--){
|
||||||
|
console.log(test_array[i-1]);
|
||||||
|
sendCmd("/all/move/" + test_array[i-1] + "/1");
|
||||||
|
|
||||||
|
};
|
||||||
|
//setInterval( sendCmd, scanInterval, "/all/move/16/1");
|
||||||
|
};
|
||||||
|
|
||||||
|
// On envoie la commande en AJAX
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
if ( command == "/scan" ) {
|
||||||
|
request.onload = refreshInfos(command);
|
||||||
|
}
|
||||||
|
// On construit la commande
|
||||||
|
request.open("GET", command, true);
|
||||||
|
// et on l'envoie
|
||||||
|
request.send();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
// Affichage des infos
|
||||||
|
function parseResult(command, infos_array) {
|
||||||
|
//~ var request = new XMLHttpRequest();
|
||||||
|
//~ request.onload = function() {
|
||||||
|
//~ if (request.readyState === request.DONE) {
|
||||||
|
//~ if (request.status === 200) {
|
||||||
|
//~ // responseText is a string, use parse to get an array.
|
||||||
|
//~ const infos_array = JSON.parse(request.responseText);
|
||||||
|
switch (command) {
|
||||||
|
case "/all/status":
|
||||||
|
// Iterate over array
|
||||||
|
for (var i = 0, l=infos_array.length; i<l; i++) {
|
||||||
|
document.getElementById("status_"+infos_array[i].host).innerHTML = "Playing " + infos_array[i].file + " : " + infos_array[i].time + " / " + infos_array[i].leng;
|
||||||
|
if (infos_array[i].loop == "true") { document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
|
||||||
|
if (infos_array[i].repeat == "true") { document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case "/all/list":
|
||||||
|
for (var i = 0, l=infos_array.length; i<l; i++) {
|
||||||
|
document.getElementById("playlist_"+infos_array[i].host).innerHTML = infos_array[i].leng + " item(s) in playlist - " + infos_array[i].duration;
|
||||||
|
var items_array = Array.from(infos_array[i].items);
|
||||||
|
var html_table = "<table>" +
|
||||||
|
"<tr>" +
|
||||||
|
"<th>Id</th>" +
|
||||||
|
"<th>Filename</th>" +
|
||||||
|
"<th>Duration</th>" +
|
||||||
|
"</tr>";
|
||||||
|
for (var j = 0, k=items_array.length; j<k; j++) {
|
||||||
|
item_meta = items_array[j].split(';');
|
||||||
|
html_table += "<tr>" +
|
||||||
|
"<td>" + item_meta[0] + "</td>" +
|
||||||
|
"<td>" + item_meta[1] + "</td>" +
|
||||||
|
"<td>" + item_meta[2] + "</td>" +
|
||||||
|
"</tr>" ;
|
||||||
|
}
|
||||||
|
html_table += "</table>";
|
||||||
|
document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table;
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case "/scan":
|
||||||
|
var host_up = infos_array[0];
|
||||||
|
var host_down = infos_array[1];
|
||||||
|
for ( var i=0, l=host_up.length; i<l; i++){
|
||||||
|
document.getElementById(host_up[i]).style.display = 'initial';
|
||||||
|
}
|
||||||
|
for ( var i=0, l=host_down.length; i<l; i++){
|
||||||
|
document.getElementById(host_down[i]).style.display = 'none';
|
||||||
|
}
|
||||||
|
//~ if (host_up.length) {
|
||||||
|
//~ scanInterval = 10000;
|
||||||
|
//~ document.getElementById("status_all").innerHTML = "Scan intarvel set to " + scanInterval;
|
||||||
|
//~ }
|
||||||
|
document.getElementById("status_all").innerHTML = host_up.length + " client(s) found.";
|
||||||
|
break;
|
||||||
|
case "/browse":
|
||||||
|
var html_table = "<table>" +
|
||||||
|
"<tr>" +
|
||||||
|
"<th>Filename</th>" +
|
||||||
|
"<th>Duration</th>" +
|
||||||
|
"</tr>";
|
||||||
|
for (var j = 0, k=infos_array.length; j<k; j++) {
|
||||||
|
html_table += "<tr>" +
|
||||||
|
"<td>" + infos_array[j] + "</td>" +
|
||||||
|
"<td>" + "00:00" + "</td>" +
|
||||||
|
"</tr>" ;
|
||||||
|
}
|
||||||
|
html_table += "</table>";
|
||||||
|
document.getElementById("filelist").innerHTML += html_table;
|
||||||
|
break;
|
||||||
|
case "/all/rssi":
|
||||||
|
var signal_color = 40;
|
||||||
|
var best_rssi = 30;
|
||||||
|
var worst_rssi = 70;
|
||||||
|
for (var j = 0, k=infos_array.length; j<k; j++) {
|
||||||
|
var rssi_norm = Math.ceil( (worst_rssi - parseInt(infos_array[j].rssi) ) / ( worst_rssi - best_rssi ) * 4 );
|
||||||
|
signal_color = (rssi_norm-1) * signal_color;
|
||||||
|
// Reset to grey
|
||||||
|
for (i=0, l=4; i<l;i++) {
|
||||||
|
document.getElementById("wl_"+i).style.backgroundColor = "hsl(0, 0%, 65%)";
|
||||||
|
};
|
||||||
|
// Color it
|
||||||
|
for (i=0, l=rssi_norm; i<l;i++) {
|
||||||
|
document.getElementById("wl_"+i).style.backgroundColor = "hsl(" + signal_color + ", 100%, 50%)";
|
||||||
|
};
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}; // End switch case
|
||||||
|
//~ };
|
||||||
|
//~ };
|
||||||
|
//~ };
|
||||||
|
//~ // On construit la commande
|
||||||
|
//~ request.open("GET", command, true);
|
||||||
|
//~ // et on l'envoie
|
||||||
|
//~ request.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
function sendCmd(command) {
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.onload = function() {
|
||||||
|
if (request.readyState === request.DONE) {
|
||||||
|
if (request.status === 200) {
|
||||||
|
// responseText is a string, use parse to get an array.
|
||||||
|
var infos_array = JSON.parse(request.responseText);
|
||||||
|
//console.log(infos_array);
|
||||||
|
parseResult(command, infos_array);
|
||||||
|
//return infos_array;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// On construit la commande
|
||||||
|
request.open("GET", command, true);
|
||||||
|
// et on l'envoie
|
||||||
|
request.send();
|
||||||
|
};
|
||||||
|
setInterval( sendCmd, 500, "/all/status");
|
||||||
|
setInterval( sendCmd, 1000, "/all/list");
|
||||||
|
setInterval( sendCmd, scanInterval, "/scan");
|
||||||
|
setInterval( sendCmd, 10000, "/all/rssi");
|
||||||
|
|
||||||
|
|
||||||
|
/* TODO :
|
||||||
|
* Change scanInterval after first results are in (3 to 30 seconds)
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
body {color:#fff;background-color:#666;}
|
||||||
|
h2 {margin:0;}
|
||||||
|
table {background-color: #555;margin:.5em;}
|
||||||
|
td {padding: .2em .5em;}
|
||||||
|
th {background-color: #aaa;}
|
||||||
|
tr:nth-child(2n+1) {background-color: #888;}
|
||||||
|
|
||||||
|
#master_remote {background-color:#222;min-height: 20em;}
|
||||||
|
#master_remote .right_col {background-color:transparent;}
|
||||||
|
.client_container {border-bottom: #bbb solid 4px;display:none;}
|
||||||
|
.client_container .button{}
|
||||||
|
.timeline {height: 3em;background-color: #0f0;margin: 2em 0;}
|
||||||
|
.right_col {width: 78%;display: inline-block;background-color:#888;}
|
||||||
|
.client_container:nth-child(2n+1) {background-color:#444;}
|
||||||
|
.command {margin: 0 !important;}
|
||||||
|
.buttons {width:75%;margin:auto;text-align: center;padding: 2em;}
|
||||||
|
.btn {
|
||||||
|
margin:auto;
|
||||||
|
width:4em;
|
||||||
|
height: 4em;
|
||||||
|
display:inline-block;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.42857143;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
-ms-touch-action: manipulation;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
background-image: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.btn_txt {display: block;font-size: small;}
|
||||||
|
/*Left column*/
|
||||||
|
.left_col {width: 20%;display: inline-block;float: left;clear: left;}
|
||||||
|
.left_col button {
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
.left_col button .btn_txt {display:none;position: absolute;left: 5%;color:#fff;font-weight:bold;font-size: medium;}
|
||||||
|
.left_col button:hover .btn_txt {display:initial;}
|
||||||
|
.col_1 {
|
||||||
|
width: 50%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.col_2 {
|
||||||
|
width: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
.indicator {display:inline-block;background-color: #f00;}
|
||||||
|
.wl_indicator {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #bbb;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin: 0 1px;
|
||||||
|
padding: 0;
|
||||||
|
height: .5em;
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
#wl_0 {height:.5em;}
|
||||||
|
#wl_1 {height:.65em;}
|
||||||
|
#wl_2 {height:.80em;}
|
||||||
|
#wl_3 {height:.95em;}
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<title>RPi Web Server</title>
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
||||||
|
<!--
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
|
||||||
|
-->
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="master_remote">
|
||||||
|
<div class="left_col">
|
||||||
|
<h2>Videopi commander</h2>
|
||||||
|
<p id="status_all">{{status_message}}</p>
|
||||||
|
<p id="filelist">No files.</p>
|
||||||
|
</div>
|
||||||
|
<div class="right_col">
|
||||||
|
<p class="buttons">
|
||||||
|
<button value="/scan" class="command btn btn-block btn-lg btn-default" role="button">🔍<span class="btn_txt">Scan<br/>réseau</span></button>
|
||||||
|
<button value="/all/previous" class="command btn btn-block btn-lg btn-default" role="button">⏮<span class="btn_txt">Préc.</span></button>
|
||||||
|
<button value="/all/play" class="command btn btn-block btn-lg btn-default" role="button">⏵<span class="btn_txt">Lecture</span></button>
|
||||||
|
<button value="/all/pause" class="command btn btn-block btn-lg btn-default" role="button">⏸<span class="btn_txt">Pause</span></button>
|
||||||
|
<button value="/all/stop" class="command btn btn-block btn-lg btn-default" role="button">⏹<span class="btn_txt">Stop</span></button>
|
||||||
|
<button value="/all/next" class="command btn btn-block btn-lg btn-default" role="button">⏭<span class="btn_txt">Suivant</span></button>
|
||||||
|
<button value="/all/repeat" class="command btn btn-block btn-lg btn-default" role="button">🔂<span class="btn_txt">Répéter<br/>élem.</span></button>
|
||||||
|
<button value="/all/loop" class="command btn btn-block btn-lg btn-default" role="button">🔁<span class="btn_txt">Boucler<br/>liste</span></button>
|
||||||
|
<button value="/all/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>listes</span></button>
|
||||||
|
<button value="/all/enqueue/tst.mp4" class="command btn btn-block btn-lg btn-default" role="button">β<span class="btn_txt">tst.mp4</span></button>
|
||||||
|
<button value="/all/enqueue/tst1.mp4" class="command btn btn-block btn-lg btn-default" role="button">β<span class="btn_txt">tst1.mp4</span></button>
|
||||||
|
<button value="/move" class="command btn btn-block btn-lg btn-default" role="button">β<span class="btn_txt">movePl</span></button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% for host in hosts %}
|
||||||
|
<div class="client_container" id="{{ host }}">
|
||||||
|
<div class="left_col">
|
||||||
|
<div class="col_1">
|
||||||
|
<h2>{{ host }}</h2>
|
||||||
|
<button value="/{{host}}/poweroff" class="command btn btn-block btn-lg btn-default" role="button">⏻<span class="btn_txt">Éteindre</span></button>
|
||||||
|
<button value="/{{host}}/reboot" class="command btn btn-block btn-lg btn-default" role="button">↺<span class="btn_txt">Redémarrer</span></button>
|
||||||
|
<p id="status_{{ host }}">{{status_message}}</p>
|
||||||
|
<p id="signal_{{ host }}">
|
||||||
|
<span style="">Signal:</span>
|
||||||
|
<span class="wl_indicator" id="wl_0"></span>
|
||||||
|
<span class="wl_indicator" id="wl_1"></span>
|
||||||
|
<span class="wl_indicator" id="wl_2"></span>
|
||||||
|
<span class="wl_indicator" id="wl_3"></span>
|
||||||
|
</p>
|
||||||
|
<p id="loop_ind_{{ host }}" class="indicator">Loop</p>
|
||||||
|
<p id="repeat_ind_{{ host }}" class="indicator">Repeat</p>
|
||||||
|
</div>
|
||||||
|
<div class="col_2">
|
||||||
|
<p id="playlist_{{ host }}">No files queued.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_col">
|
||||||
|
<div class="timeline"></div>
|
||||||
|
<p class="buttons">
|
||||||
|
<button value="/{{host}}/previous" class="command btn btn-block btn-lg btn-default" role="button">⏮<span class="btn_txt">Préc.</span></button>
|
||||||
|
<button value="/{{host}}/play" class="command btn btn-block btn-lg btn-default" role="button">⏵<span class="btn_txt">Lecture</span></button>
|
||||||
|
<button value="/{{host}}/pause" class="command btn btn-block btn-lg btn-default" role="button">⏸<span class="btn_txt">Pause</span></button>
|
||||||
|
<button value="/{{host}}/stop" class="command btn btn-block btn-lg btn-default" role="button">⏹<span class="btn_txt">Stop</span></button>
|
||||||
|
<button value="/{{host}}/next" class="command btn btn-block btn-lg btn-default" role="button">⏭<span class="btn_txt">Suivant</span></button>
|
||||||
|
<button value="/{{host}}/repeat" class="command btn btn-block btn-lg btn-default" role="button">🔂<span class="btn_txt">Répéter<br/>élem.</span></button>
|
||||||
|
<button value="/{{host}}/loop" class="command btn btn-block btn-lg btn-default" role="button">🔁<span class="btn_txt">Boucler<br/>liste</span></button>
|
||||||
|
<button value="/{{host}}/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>liste</span></button>
|
||||||
|
<button id="toggle_val_{{host}}}" value="/{{host}}/sort/1/id" class="command btn btn-block btn-lg btn-default" role="button">🔀<span class="btn_txt">Trier<br/>liste</span></button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</body>
|
||||||
|
<script type="text/javascript" src="{{url_for('static', filename='script.js')}}"></script>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue