Diese Seite ist statisches HTML und am besten betrachtet mit Java-Script eingeschaltet!

Fernbedienung eines Linux-Computers per mobilem Gerät - Lautstärke einstellen

 ·  ☕ 3 Min. Lesen  ·  🤖 SWU

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>&#x25;</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:

Smartphone PC-Fernsteuerung Lautstärke Aufruf
Screenshot Smartphone: Smartphone PC-Fernsteuerung Lautstärke Aufruf

Smartphone PC-Fernsteuerung Lautstärke aufgerufen
Screenshot Smartphone: Smartphone PC-Fernsteuerung Lautstärke aufgerufen


wüsti
Author
SWU
human