mirror of https://github.com/Lapikud/Viido.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
6.2 KiB
202 lines
6.2 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
|
<style> |
|
body { |
|
margin: 40px auto; |
|
max-width: 650px; |
|
line-height: 1.6; |
|
font-size: 18px; |
|
color: #444; |
|
padding: 0 10px; |
|
font-family: Helvetica, Arial, Sans-Serif; |
|
} |
|
|
|
h1 { |
|
text-align:center; |
|
} |
|
|
|
.button { |
|
background-color: #4CAF50; /* Green */ |
|
border: none; |
|
color: white; |
|
padding: 16px 0; |
|
text-align: center; |
|
text-decoration: none; |
|
display: inline-block; |
|
font-size: 32px; |
|
margin: 4px -2px; |
|
-webkit-transition-duration: 0.4s; /* Safari */ |
|
transition-duration: 0.4s; |
|
cursor: pointer; |
|
width:100%; |
|
|
|
} |
|
.button1 { |
|
background-color: white; |
|
color: black; |
|
border: 2px solid #4CAF50; |
|
} |
|
|
|
.button2 { |
|
background-color: green; |
|
color: black; |
|
border: 2px solid #4CAF50; |
|
width:33% |
|
} |
|
|
|
.radio-toolbar { |
|
display: flex; |
|
flex-direction: row; |
|
width: 100%; |
|
flex-wrap: wrap; |
|
user-select: none; |
|
-webkit-user-select: none; /* Chrome all / Safari all */ |
|
-moz-user-select: none; /* Firefox all */ |
|
-ms-user-select: none; /* IE 10+ */ |
|
user-select: none; /* Likely future */ |
|
} |
|
|
|
.radio-toolbar input[type="button"] { |
|
display: none; |
|
} |
|
|
|
.radio-toolbar label { |
|
background-color: white; /* RED */ |
|
border: none; |
|
color: black; |
|
padding: 12px 0; |
|
text-align: center; |
|
text-decoration: none; |
|
display: inline-block; |
|
font-size: 32px; |
|
margin: 0 4px; |
|
-webkit-transition-duration: 0.4s; /* Safari */ |
|
transition-duration: 0.4s; |
|
cursor: pointer; |
|
flex: 1 0 auto; |
|
border: 2px solid #4CAF50; |
|
user-select: none; |
|
} |
|
|
|
.rbnt{ |
|
width: 30%; |
|
transition-duration: 0s; |
|
} |
|
|
|
.rbnt:active{ |
|
background-color: #4CAF50; |
|
color: white; |
|
} |
|
.radio-toolbar lable.red { |
|
border: 2px solid #af4c4c; |
|
} |
|
|
|
.button1:hover { |
|
background-color: #4CAF50; |
|
color: white; |
|
} |
|
|
|
.title { |
|
text-align: center; |
|
margin-top: 2em; |
|
} |
|
|
|
#loading |
|
{ |
|
visibility: hidden; |
|
position: fixed; |
|
width: 100%; |
|
height: 100%; |
|
background-image: url("loader.gif"); |
|
background-color: rgba(102, 102, 102, 0.75); |
|
background-position: center center, top; |
|
background-repeat: no-repeat, repeat; |
|
top: 0; |
|
left: 0; |
|
} |
|
</style> |
|
|
|
<script> |
|
function show_loading(visible) |
|
{ |
|
document.getElementById('loading').style.visibility = visible ? 'visible' : 'hidden'; |
|
} |
|
|
|
function send_mode(value) |
|
{ |
|
show_loading(true); |
|
var http = new XMLHttpRequest(); |
|
http.open('POST', '/projektor/status', true); |
|
http.onreadystatechange = function() { |
|
if (http.readyState == 4 && http.status == 200) { |
|
show_loading(false); |
|
} |
|
} |
|
http.send('mode=' + value); |
|
} |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<h1>Viido</h1> |
|
|
|
<a href="iris" class="button button1">Mopidy music</a><br /> |
|
<a href="vnc" class="button button1">VNC remote desktop</a><br /> |
|
|
|
<h2 class="title">Projektori juhtimine</h2> |
|
|
|
<div class="radio-toolbar"> |
|
<input type="button" id="power1" name="power" value="off"> |
|
<label for="power1" class="red">OFF</label> |
|
|
|
<input type="button" id="power2" name="power" value="on"> |
|
<label for="power2">ON</label> |
|
</div> |
|
<h2 class="title">Sisendi juhtimine</h2> |
|
|
|
<div class="radio-toolbar"> |
|
|
|
<input type="button" id="r2" name="receiver" value="viido"> |
|
<label class="rbnt" for="r2">Viido</label> |
|
|
|
<input type="button" id="r3" name="receiver" value="steam"> |
|
<label class="rbnt" for="r3">Steam</label> |
|
|
|
<input type="button" id="v1" name="receiver" value="volumeup"> |
|
<label class="rbnt" for="v1">Vol +</label> |
|
|
|
</div> |
|
<br> |
|
<div class="radio-toolbar"> |
|
<input type="button" id="r4" name="receiver" value="hdmi"> |
|
<label class="rbnt" for="r4">HDMI</label> |
|
|
|
<input type="button" id="r5" name="receiver" value="aux"> |
|
<label class="rbnt" for="r5">AUX</label> |
|
|
|
<input type="button" id="v2" name="receiver" value="volumedown"> |
|
<label class="rbnt" for="v2">Vol -</label> |
|
</div> |
|
<h2 class="title">Linux audio tunnel</h2> |
|
<code> |
|
pacmd load-module module-tunnel-sink-new server=viido |
|
PULSE_SERVER=viido pavucontrol & |
|
pavucontrol & |
|
</code> |
|
|
|
<div id="loading"></div> |
|
<script type="text/javascript"> |
|
var modebuttons = document.querySelectorAll('.radio-toolbar input'); |
|
for (var i = 0; i < modebuttons.length; i++) |
|
{ |
|
modebuttons[i].addEventListener('click', function(event) { |
|
send_mode(event.target.value); |
|
}); |
|
} |
|
</script> |
|
</body> |
|
</html>
|
|
|