lapikud
/
Viido
mirror of https://github.com/Lapikud/Viido.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6 from Lapikud/year-2022

Browse Source
pull/7/head
Arti Zirk 3 years ago committed by GitHub
parent ffae9ffe4c 018e5e6ad0
commit 29ed5e7617
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 200 additions and 194 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      nginx/default
  2. 199
      www/index.html

3
nginx/default
Unescape View File

@ -96,7 +96,10 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location /projector/ {
proxy_pass http://projektor.kontor.lapikud.ee/cgi-bin/;
}
}

199
www/index.html
Unescape View File

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<html lang="et">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Viido</title>
<style>
body {
margin: 40px auto;
@ -12,92 +12,67 @@
font-size: 18px;
color: #444;
padding: 0 10px;
font-family: Helvetica, Arial, Sans-Serif;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
text-align:center;
button {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.6;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 0;
h1 {
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;
a:any-link {
color: black;
border: 2px solid #4CAF50;
}
.button2 {
background-color: green;
color: black;
border: 2px solid #4CAF50;
width:33%
.center {
text-align: center;
}
.radio-toolbar {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
.button-grid {
display: grid;
grid-auto-columns: 1fr;
gap: 8px;
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;
.button-grid :nth-child(2) {
grid-column: 2;
}
.radio-toolbar label {
background-color: white; /* RED */
border: none;
color: black;
.button-grid :nth-child(3) {
grid-column: 3;
}
.button-grid * {
background-color: transparent;
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{
.button-grid *:hover {
background-color: #4CAF50;
color: white;
}
.radio-toolbar lable.red {
.button-grid *.red {
border: 2px solid #af4c4c;
}
.button1:hover {
background-color: #4CAF50;
color: white;
.button-grid *.red:hover {
background-color: #af4c4c;
}
.title {
@ -105,8 +80,7 @@
margin-top: 2em;
}
#loading
{
#loading {
visibility: hidden;
position: fixed;
width: 100%;
@ -118,21 +92,34 @@
top: 0;
left: 0;
}
@media screen and (prefers-color-scheme: dark) {
body {
background-color: #111;
color: #BBB;
}
button {
color: #BBB;
}
a:any-link {
color: #BBB;
}
}
</style>
<script>
function show_loading(visible)
{
function show_loading(visible) {
document.getElementById('loading').style.visibility = visible ? 'visible' : 'hidden';
}
function send_mode(value)
{
function send_mode(value) {
show_loading(true);
var http = new XMLHttpRequest();
const http = new XMLHttpRequest();
http.open('POST', '/projektor/status', true);
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
if (http.readyState === 4 && http.status === 200) {
show_loading(false);
}
}
@ -143,46 +130,33 @@
<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 />
<div class="button-grid">
<a class="button" href="vnc">VNC remote desktop</a>
</div>
<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 class="button-grid">
<button class="red" name="projektor" value="off">OFF</button>
<button name="projektor" value="on">ON</button>
</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>
<p class="center"><span id="projector_lamp_hours"></span><span id="projector_lamp_remaining"></span></p>
<h2 class="title">Sisendi juhtimine</h2>
<div class="button-grid">
<button name="projektor" value="viido">Viido</button>
<button name="projektor" value="steam">Steam</button>
<button name="projektor" value="volumeup">Vol +</button>
<button name="projektor" value="hdmi">HDMI</button>
<button name="projektor" value="aux">AUX</button>
<button name="projektor" value="volumedown">Vol -</button>
</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>
<h2 class="title"></h2>
<div class="button-grid">
<button id="audio_tunnel_toggle">Linux audio tunnel</button>
</div>
<h2 class="title">Linux audio tunnel</h2>
<code>
<code id="audio_tunnel">
pacmd load-module module-tunnel-sink-new server=viido
PULSE_SERVER=viido pavucontrol &
pavucontrol &
@ -190,13 +164,42 @@ pavucontrol &
<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) {
const audio_tunnel = document.getElementById('audio_tunnel');
audio_tunnel.hidden = true;
document.getElementById('audio_tunnel_toggle').addEventListener('click', function () {
audio_tunnel.hidden = !audio_tunnel.hidden;
});
const modeButtons = document.querySelectorAll('button[name="projektor"]');
for (let i = 0; i < modeButtons.length; i++) {
modeButtons[i].addEventListener('click', function (event) {
send_mode(event.target.value);
});
}
function query_projector(request_string, closure) {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/projector/pjctrl.cgi.elf?D=' + request_string, true)
xhr.overrideMimeType('text/plain');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let data = JSON.parse(xhr.response.replace(',]', ']'));
if ((data[0] & 0x80) === 0) {
closure(data);
}
}
};
xhr.send();
}
query_projector('%07%03%96%00%00%02%00%01H', function (data) {
const used = ((data[10] << 24) | (data[9] << 16) | (data[8] << 8) | data[7]) / 3600;
document.getElementById('projector_lamp_hours').innerText =
'Lambi läbisõit ' + Math.round(used) + 'h. ';
});
query_projector('%07%03%96%00%00%02%00%04H', function (data) {
document.getElementById('projector_lamp_remaining').innerText = 'Alles jäänud ' + data[7] + '%';
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save