feat(settings): voeg Pi HDMI volume controle toe aan UI en API

Deze commit introduceert de mogelijkheid om het HDMI volume van de Raspberry Pi in te stellen via de webapplicatie.

Belangrijkste wijzigingen:
- Toevoeging van een nieuwe invoercontrole (slider) in de instellingenpagina voor het aanpassen van het Pi HDMI volume.
- Implementatie van een backend API endpoint dat het volume instelt via amixer, met validatie en foutafhandeling.
- Testfunctie toegevoegd waarmee gebruikers onmiddellijk het ingestelde volume kunnen testen.
- Automatische HDMI audio configuratie toegevoegd in pi-setup-desktop.sh script.

Dit verbetert de gebruiksvriendelijkheid, doordat gebruikers eenvoudig het audio-uitgangsvolume kunnen beheren en testen zonder directe toegang tot de hardware.

adhan-webapp/app.py

@@ -329,6 +329,20 @@ def instellingen():
         # Hadith instellingen
         settings['hadith_interval_seconds'] = int(request.form.get('hadith_interval_seconds', 30))
         
+        # Pi HDMI volume instelling
+        if 'pi_hdmi_volume' in request.form:
+            pi_volume = int(request.form.get('pi_hdmi_volume', 70))
+            settings['pi_hdmi_volume'] = pi_volume
+            
+            # Stel Pi volume direct in via amixer
+            import subprocess
+            try:
+                subprocess.run(['amixer', 'set', 'PCM', f'{pi_volume}%'], 
+                             check=True, capture_output=True, text=True)
+                print(f"🔊 Pi HDMI volume ingesteld op {pi_volume}%")
+            except subprocess.CalledProcessError as e:
+                print(f"❌ Kon Pi volume niet instellen: {e}")
+            
         settings['zones'] = request.form.getlist('zones')
         settings['audio_clip'] = request.form['audio_clip']
 
@@ -727,5 +741,49 @@ def debug_time():
             'real_time': datetime.now().strftime('%H:%M:%S')
         })
 
+@app.route('/api/set-pi-volume', methods=['POST'])
+def set_pi_volume():
+    """API endpoint om Pi HDMI volume in te stellen"""
+    try:
+        data = flask_request.get_json()
+        volume = data.get('volume', 70)
+        
+        # Valideer volume (0-100)
+        if not isinstance(volume, int) or volume < 0 or volume > 100:
+            return jsonify({'success': False, 'error': 'Volume moet tussen 0 en 100 zijn'}), 400
+        
+        # Stel Pi volume in via amixer
+        import subprocess
+        try:
+            # Stel PCM volume in (HDMI audio)
+            subprocess.run(['amixer', 'set', 'PCM', f'{volume}%'], 
+                         check=True, capture_output=True, text=True)
+            
+            # Sla volume op in settings voor persistentie
+            settings = load_settings()
+            settings['pi_hdmi_volume'] = volume
+            
+            with open(SETTINGS_PATH, 'w') as f:
+                json.dump(settings, f, indent=2)
+            
+            print(f"🔊 Pi HDMI volume ingesteld op {volume}%")
+            
+            return jsonify({
+                'success': True,
+                'message': f'Pi HDMI volume ingesteld op {volume}%',
+                'volume': volume
+            })
+            
+        except subprocess.CalledProcessError as e:
+            print(f"❌ Amixer fout: {e}")
+            return jsonify({
+                'success': False, 
+                'error': f'Kon volume niet instellen: {e.stderr if e.stderr else str(e)}'
+            }), 500
+            
+    except Exception as e:
+        print(f"❌ Volume API fout: {e}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=80)

adhan-webapp/templates/settings.html

@@ -73,6 +73,30 @@
               </div>
             </div>
 
+            <div class="form-group">
+              <label>
+                <span class="material-icons">tv</span>
+                Pi HDMI Volume:
+              </label>
+              <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
+                Stel het HDMI audio volume van de Raspberry Pi in (0-100%). Dit beïnvloedt het volume van de browser audio via HDMI.
+              </p>
+              <div class="form-row">
+                <div class="form-group">
+                  <input type="range" name="pi_hdmi_volume" id="piVolumeSlider" 
+                         value="{{ settings.pi_hdmi_volume or 70 }}" min="0" max="100" 
+                         oninput="updateVolumeDisplay(this.value)" />
+                  <span id="volumeDisplay">{{ settings.pi_hdmi_volume or 70 }}%</span>
+                </div>
+                <div class="form-group">
+                  <button type="button" class="btn btn-secondary" onclick="testPiVolume()">
+                    <span class="material-icons">volume_up</span>
+                    Test Volume
+                  </button>
+                </div>
+              </div>
+            </div>
+
             <div class="form-row">
               <div class="form-group">
                 <label for="day_start">
@@ -394,6 +418,45 @@
         }
       }
     }
+
+    // Pi HDMI Volume functies
+    function updateVolumeDisplay(value) {
+      document.getElementById('volumeDisplay').textContent = value + '%';
+    }
+
+    function testPiVolume() {
+      const volume = document.getElementById('piVolumeSlider').value;
+      
+      // Verstuur volume naar backend
+      fetch('/api/set-pi-volume', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ volume: parseInt(volume) })
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          console.log('Pi volume ingesteld op', volume + '%');
+          
+          // Test audio afspelen
+          const audio = document.getElementById('previewAudio');
+          if (audio && audio.src) {
+            audio.play().catch(e => {
+              console.log('Audio test mislukt:', e);
+              alert('Volume ingesteld, maar audio test mislukt. Controleer HDMI verbinding.');
+            });
+          } else {
+            alert(`Pi HDMI volume ingesteld op ${volume}%`);
+          }
+        } else {
+          alert('Fout bij instellen volume: ' + data.error);
+        }
+      })
+      .catch(error => {
+        console.error('Netwerk fout:', error);
+        alert('Kon volume niet instellen. Controleer verbinding.');
+      });
+    }
   </script>
 </body>
 </html>

done

@@ -70,3 +70,6 @@ Wed May 28 14:02:31 CEST 2025: Debug tijd synchronisatie toegevoegd tussen debug
 2025-05-28 19:24:17 - Docker volume mounts toegevoegd voor app.py, config.py en adhan_cron.py - wijzigingen worden nu direct doorgevoerd zonder rebuild
 2025-05-28 19:25:13 - ✅ Docker containers succesvol herstart met nieuwe volume mounts - IP adres probleem zou nu definitief opgelost moeten zijn
 2025-05-28 19:29:15 - HDMI audio ondersteuning toegevoegd: kiosk script forceert HDMI audio, browser autoplay enabled, audio test functies in debug pagina
+2025-05-28 19:33:00 - Instructie gegeven: pi-setup-desktop.sh opnieuw uitvoeren op Pi voor HDMI audio configuratie
+2025-05-28 19:59:48 - ✅ HDMI audio automatisch configureren toegevoegd aan pi-setup-desktop.sh - nieuwe installaties hebben automatisch HDMI audio
+2025-05-28 20:02:25 - ✅ Pi HDMI volume controle toegevoegd aan webapp UI - slider, test functie, API endpoint, automatisch opslaan via amixer

pi-setup-desktop.sh

@@ -22,6 +22,10 @@ fi
 echo "🌐 Browser controleren..."
 sudo apt install -y chromium-browser
 
+# Configureer HDMI audio automatisch
+echo "🔊 HDMI audio automatisch configureren..."
+sudo raspi-config nonint do_audio 1  # 0=auto, 1=hdmi, 2=headphones
+
 # Maak kiosk script voor DESKTOP gebruik
 echo "📝 Desktop kiosk script aanmaken..."
 cat > /home/$USER/kiosk.sh << 'KIOSK_EOF'