This page looks best with JavaScript enabled

Remote control a Linux-Computer via mobile device - Control Volume

 ·  ☕ 3 min read  ·  🤖 SWU

Controlling volume for web radio via mobile is the next step

It should be a slider. I had found the one here - the problem was getting the chosen value to the server. How to get a javascript variable “submitted”? I found that it works with a function called by an onclick, without any form at all.

Here is the audiocontrol.sh server-side script:

 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

Inside is the slider code from w3schools put together, the function code I found on some forum and a bit of scaffolding from the startup theme to keep me in style.

Server-side 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>"

This server-side script receives the information and uses it to write the /tmp/web.feedback file.

The user script web.feedback.sh evaluates this:

 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

Smartphone Screenshots:

Smartphone PC-RemoteControl Volume start
Screenshot Smartphone: Smartphone PC-RemoteControl Volume start

Smartphone PC-RemoteControl Vol.CTRL
Screenshot Smartphone: Smartphone PC-RemoteControl Vol.CTRL


wüsti
WRITTEN BY
SWU
human