Questo progetto unisce i due progetti precedenti potToPc.html e potToPc.ino da una parte e slidToIno.html e slidToIno.ino dall'altra che svolgevano due diverse operazioni. Il primo permetteva di visualizzare sul broweser i valori in volt della tensione ai capi del led muovendo un potenziometro, il secondo visualizzava gli stessi valori sul broweser muovendo uno slider che pilotava il led su Arduino.
Con questo progetto, come si può vedere dall'interfaccia abbiamo un unico visualizzatore del volaggio e un pulsante che ci permette di attivare o disattivare il potenziometro. Si parte con la configurazione come in figura, l ptenziometro non è attivo, lo slider è attivo e muovendolo potremo vedere il led variare la sua intensità ed i valori in volt si vedranno variare sul visualizzatore. Se clicchiamo sul relativo pulsante potremmo attivare il potenziometro e disattivare lo slider. Ora il controllo passa ad Arduino girando la manopola del potenziometro potremo vedere la luminosità del led variare così pure l'intensità del led.
sliOrPot.html: |
|
1 <!DOCTYPE html> 2 <html lang="it"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Arduino Potenziometro e Controllo LED</title> 7 <link rel="icon" href="https://www.cersil.it/ar/img/favicon.ico"> 8 <link href="../../../css/pag.css" rel="stylesheet" type="text/css" /> 9 <style> 10 @font-face { 11 font-family: 'dsdigit'; 12 src: url('digital-7 (mono italic).ttf') format('truetype'); 13 } 14 body { 15 font-family: Arial, sans-serif; 16 display: flex; 17 flex-direction: column; 18 align-items: center; 19 justify-content: center; 20 } 21 #potValue { 22 font-family: dsdigit, sans-serif; 23 font-size: 150px; 24 font-weight: bolder; 25 margin: 0; 26 } 27 #connectButton { 28 height: 35px; 29 width: 180px; 30 font-size: 20px; 31 padding: 5px; 32 margin-top: 10px; 33 } 34 #togglePotButton { 35 height: 35px; 36 width: 280px; 37 font-size: 20px; 38 padding: 5px; 39 margin-top: 10px; 40 } 41 #slider { 42 width: 300px; 43 margin-top: 20px; 44 } 45 label { 46 margin-top: 20px; 47 } 48 #error { 49 margin-top: 20px; 50 padding: 10px; 51 border: 1px solid #ccc; 52 color: red; 53 border-color: red; 54 } 55 </style> 56 </head> 57 <body> 58 <h1 class="tit3"> </h1> 59 <h1 class="tit3">Arduino Potenziometro e Controllo LED</h1> 60 <p class="corpobold">Differenza di potenziale ai capi del Led:</p> 61 <p class="corpobold" style="font-size: 50px">Volt</p> 62 <p id="potValue">0.00</p> 63 <button id="connectButton">Connetti</button> 64 <button id="togglePotButton" disabled>Attiva il Potenziometro</button> 65 <input type="range" id="slider" min="0" max="255" step="1" value="0"> 66 <div id="error" style="color: red;"></div> 67 68 <script> 69 let port; 70 let reader; 71 let writer; 72 let sendInterval; 73 const interval = 100; 74 let potActive = false; 75 76 document.getElementById('connectButton').addEventListener('click', async () => { 77 try { 78 port = await navigator.serial.requestPort(); 79 await port.open({ baudRate: 9600 }); 80 81 const textDecoder = new TextDecoderStream(); 82 const readableStreamClosed = port.readable.pipeTo(textDecoder.writable); 83 reader = textDecoder.readable.getReader(); 84 85 writer = port.writable.getWriter(); 86 87 document.getElementById('togglePotButton').disabled = false; 88 document.getElementById('error').textContent = ''; 89 90 // Inizia a inviare i dati dello slider subito dopo la connessione 91 sendInterval = setInterval(() => { 92 if (!potActive) { 93 sendSliderValue(); 94 } 95 }, interval); 96 } catch (error) { 97 console.error('Errore durante la connessione ad Arduino:', error); 98 document.getElementById('error').textContent = 'Errore durante ' 99 +'la connessione ad Arduino.'; 100 } 101 }); 102 103 document.getElementById('togglePotButton').addEventListener('click', () => { 104 potActive = !potActive; 105 if (potActive) { 106 document.getElementById('togglePotButton').innerText 107 = 'Disattiva il Potenziometro'; 108 document.getElementById('slider').disabled = true; 109 readSerialData(); 110 } else { 111 document.getElementById('togglePotButton').innerText 112 = 'Attiva il Potenziometro'; 113 document.getElementById('slider').disabled = false; 114 if (reader) { 115 reader.cancel(); 116 } 117 } 118 // Invia il flag a Arduino 119 sendFlag(); 120 }); 121 122 async function sendFlag() { 123 const flag = potActive ? 1 : 0; 124 try { 125 if (!port || !writer) { 126 console.error('Connessione ad Arduino non stabilita.'); 127 document.getElementById('error').textContent 128 = 'Connessione ad Arduino non stabilita. ' 129 +'Premi il pulsante "Connetti".'; 130 clearInterval(sendInterval); 131 return; 132 } 133 134 await writer.write(new TextEncoder().encode('flag:' + flag + '\n')); 135 136 document.getElementById('error').textContent = ''; 137 } catch (error) { 138 console.error('Errore durante l\'invio del flag ad Arduino:', error); 139 document.getElementById('error').textContent = 'Errore durante ' 140 +'l\'invio del flag ad Arduino.'; 141 } 142 } 143 144 async function readSerialData() { 145 let buffer = ''; 146 while (potActive) { 147 const { value, done } = await reader.read(); 148 if (done) { 149 console.log('Reader closed'); 150 break; 151 } 152 if (value) { 153 buffer += value; 154 let lines = buffer.split('\n'); 155 buffer = lines.pop(); 156 157 for (let line of lines) { 158 line = line.trim(); 159 if (line) { 160 const potValue = parseInt(line); 161 const voltage = (potValue / 1023.0 * 1.8).toFixed(2); 162 document.getElementById('potValue').innerText = voltage; 163 } 164 } 165 } 166 } 167 } 168 169 async function sendSliderValue() { 170 const value = document.getElementById("slider").value; 171 try { 172 if (!port || !writer) { 173 console.error('Connessione ad Arduino non stabilita.'); 174 document.getElementById('error').textContent = 'Connessione ' 175 +'ad Arduino non stabilita. Premi il pulsante "Connetti".'; 176 clearInterval(sendInterval); 177 return; 178 } 179 180 await writer.write(new TextEncoder().encode(value + '\n')); 181 const voltValue = (value / 255 * 1.8).toFixed(2); 182 183 document.getElementById('potValue').innerText = voltValue; 184 document.getElementById('error').textContent = ''; 185 } catch (error) { 186 console.error('Errore durante l\'invio del valore ad Arduino:', error); 187 document.getElementById('error').textContent = 'Errore durante ' 188 +'l\'invio del valore ad Arduino.'; 189 } 190 } 191 </script> 192 </body> 193 </html> |
sliOrPot.ino: |
|
const int potPin = A0; // Pin del potenziometro
const int ledPin = 9; // Pin del LED
int flag = 0; // Flag per indicare la modalità di funzionamento
void setup() {
Serial.begin(9600); // Inizializza la comunicazione seriale
pinMode(ledPin, OUTPUT); // Imposta il pin del LED come output
}
void loop() {
if (Serial.available() > 0) {
String input = Serial.readStringUntil('\n'); // Legge la stringa dalla porta seriale
input.trim(); // Rimuove eventuali spazi bianchi
if (input.startsWith("flag:")) { // Se la stringa inizia con "flag:"
// Estrae il valore del flag dalla stringa e lo converte in intero
flag = input.substring(5).toInt();
} else { // Se la stringa non inizia con "flag:", allora è un valore dello slider
int value = input.toInt(); // Converte la stringa in intero
// Assicura che il valore sia nell'intervallo corretto (0-255)
if (value >= 0 && value <= 255) {
// Scrivi il valore dello slider sul pin del LED
analogWrite(ledPin, value);
}
}
}
if (flag == 1) {
// Lettura del valore dal potenziometro
int potValue = analogRead(potPin);
// Mappa il valore del potenziometro (0-1023) alla gamma della luminosità del LED (0-255)
int ledBrightness = map(potValue, 0, 1023, 0, 255);
// Invia il valore del potenziometro sulla porta seriale
Serial.println(potValue);
// Assegna la luminosità calcolata al LED
analogWrite(ledPin, ledBrightness);
}
delay(50);
}
|
CopiaQui |