Diese Seite ist statisches HTML und am besten betrachtet mit Java-Script eingeschaltet!
Lautstärke steuern für das Webradio über Mobile ist der nächste Schritt
Es sollte ein Schieberegler sein. Ich hatte den hier gefunden - das Problem war, den gewählten Wert zum Server zu übertragen. Wie bekommt man eine Javascript-Variable “submitted”? Ich habe gefunden, dass es mit einer Funktion aufgerufen durch ein onclick geht, ganz ohne Formular.
Hier ist das serverseitige Script audiocontrol.sh:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
#!/bin/sh
PERCENT = 66
if [ -s /tmp/web.feedback ] ; then
if [ $( cat /tmp/web.feedback | wc -l) -eq 1 ] ; then
if [ $( cat /tmp/web.feedback | wc -c ) -lt 12 ] ; then
grep -q "Volume=" /tmp/web.feedback && \
. /tmp/web.feedback && \
PERCENT = " $Volume "
fi
fi
fi
GOBACKTO = "http://<NUC IP>/cgi-bin/acback.sh"
cat << EOF
Content-type: text/html
<!DOCTYPE html>
<html lang="de-de">
<head>
<meta charset="utf-8"><script type="application/ld+json">
</script>
<title>Nucbian</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: $PERCENT%;
background: #04AA6D;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: $PERCENT%;
background: #04AA6D;
cursor: pointer;
}
</style>
</head>
<link rel="stylesheet" href="/nucbian/css/vendor.min.SOME_ADDRESS-CODE.css" integrity="sha=SOME_KEY-CODE">
<body class="text-center">
<main role="main" class="container">
<h1>Audio Volume: <span id="demo"></span>%</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="$PERCENT" class="slider" id="myRange">
</div>
<script>
function newDoc() {
window.location.assign("$GOBACKTO?Volume=" + slider.value)
}
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<div id="iconList" class="card-columns mt-3">
<div id="iconListEntry" class="card">
<div class="card-body cursorPointer" onclick="newDoc()">
<p class="card-text">Submit</p>
</div>
</div>
</div>
</main>
</body>
</html>
EOF
Dadrin sind zusammengebaut der Schieberegler Code von w3schools, der Funktionscode, den ich in irgendeinem Forum gefunden hatte und ein wenig Gerüst vom Startup-Theme, damit ich im Stil bleibe.
Das serverseitige script acback.sh:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#!/bin/sh
REFRESH = "http://<NUC IP>/nucbian/"
echo "Content-type: text/html\n\n"
echo "<head>"
echo "<meta http-equiv=\"refresh\" content=\"0; URL= $REFRESH \">"
echo "</head>"
echo "<html><body>"
if [ ! -z " $QUERY_STRING " ] ; then
echo $QUERY_STRING > /tmp/web.feedback
else
rm /tmp/web.feedback
fi
echo "<h1>Thanks</h1>"
echo "</body></html>"
Dieses serverseitige Script nimmt die Information entgegen und beschreibt damit die Datei /tmp/web.feedback.
Das user script web.feedback.sh wertet das aus:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#!/bin/sh
sudo inotifywait -m -e modify \
/proc/` pidof -s /usr/sbin/apache2` /root/tmp/ \
| while read dir action; do
#echo "File $file changed via $action in dir $dir"
if [ " $action " = "MODIFY web.feedback" ] ; then
sudo cp /proc/` pidof -s /usr/sbin/apache2` /root/tmp/web.feedback /tmp
if [ $( cat /tmp/web.feedback | wc -l) -eq 1 ] ; then
if [ $( cat /tmp/web.feedback | wc -c ) -lt 12 ] ; then
grep -q "Volume=" /tmp/web.feedback && \
. /tmp/web.feedback
sudo rm /tmp/web.feedback
amixer -q -D default -- sset Master playback $Volume %
fi
fi
fi
done
Screenshots vom Smartphone:
Screenshot Smartphone :
Smartphone PC-Fernsteuerung Lautstärke Aufruf
Screenshot Smartphone :
Smartphone PC-Fernsteuerung Lautstärke aufgerufen