AFEGIM UN CONTROL LLISCANT AL NOSTRE SERVIDOR
Embedded Files
A diferència dels botons, que permeten definir un senyal de control binari (ON/OFF), els lliscadors permeten definir valors analògics dins d'un interval.
A diferència dels botons, que permeten definir un senyal de control binari (ON/OFF), els lliscadors permeten definir valors analògics dins d'un interval.
Això pot ser útil per controlar senyals PWM, que permetran definir el posicionament dels servos del nostre robot.
Això pot ser útil per controlar senyals PWM, que permetran definir el posicionament dels servos del nostre robot.
Comencem controlant la lluentor d'un LED amb senyals PWM associades als valors d'un control lliscant a una pàgina web. Utilitzem com a base el codi del servidor bàsic que ja hem creat i modifiquem-lo en un nou arxiu. Cal:
Comencem controlant la lluentor d'un LED amb senyals PWM associades als valors d'un control lliscant a una pàgina web. Utilitzem com a base el codi del servidor bàsic que ja hem creat i modifiquem-lo en un nou arxiu. Cal:
- Afegir les classes Pin i PWM del mòdul machine
- Configurar el pin de connexió del LED com a sortida analògica
- Modificar el codi de la pàgina web de resposta
- Definir la interacció amb el LED en funció del valor de la resposta
Funcionament del projecte
- L'ESP32 allotjarà un servidor web que mostra una pàgina web amb un control lliscant.
- Quan moguem el control lliscant, es farà automàticament una sol·licitud GET HTTP a l'ESP32 amb el valor actual del lliscador.
- En rebre la sol·licitud HTTP, l'ESP32 ajustarà el cicle de treball PWM cap el LED en funció del valor rebut.
Format de la sol·licitiud GET:
Format de la sol·licitiud GET:
GET/slider?value=SLIDERVALUE
GET/slider?value=SLIDERVALUE
slider: nom que donarem a l'element lliscador
slider: nom que donarem a l'element lliscador
SLIDERVALUE: número entre 0 i 1023 associat a la posició del lliscador.
SLIDERVALUE: número entre 0 i 1023 associat a la posició del lliscador.
0 a 1023 és l'interval de valors PWM cap al LED.
0 a 1023 és l'interval de valors PWM cap al LED.
.
Comencem construint la pàgina web
Recordeu que la pàgina web es defineix a la funció pag_web( ) com a contingut de la variable html
Recordeu que la pàgina web es defineix a la funció pag_web( ) com a contingut de la variable html
Codi detallat 👇
<html><head><title>ESP32 Servidor Web</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- inserim la llibreria jQuery de JavaScript: --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body><h1>Mi Servidor</h1><p>Hola, """ + addr[0] + """</p><!-- Afegim un paràgraf que contindrà una etiqueta amb el valor actual del control lliscant: --><p><span id="textSliderValue">%SLIDERVALUE%</span></p><!-- l'identificador textSliderValue permetrà fer-hi referència més endavant. %SLIDERVALUE% és un marcador de posició per al valor del control lliscant. Podem canviar el nom -->
<!-- El següent paràgraf conté el control lliscant: --><p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023" step="1" class="slider"></p><--! input type="range": definició del tipus d'element: lliscadoronchange="updateSliderPWM(this)": crida a una funció JavaScript (updateSliderPWM) que actualitzarà la sol·licitud HTTP. this fa referència al valor actual de l'element.id="pwmSlider": identificador que permetrà fer-hi referència més endavantmin="0" max="1023": interval de valorsstep="1": interval entre números vàlids, configurat a 1 (potser és massa poc, podem posar-lo a 10)class="slider": permetrà fer-ne referència per estilitzar l'element -->
<!-- El següent paràgraf conté el control lliscant: --><p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023" step="1" class="slider"></p><--! input type="range": definició del tipus d'element: lliscadoronchange="updateSliderPWM(this)": crida a una funció JavaScript (updateSliderPWM) que actualitzarà la sol·licitud HTTP. this fa referència al valor actual de l'element.id="pwmSlider": identificador que permetrà fer-hi referència més endavantmin="0" max="1023": interval de valorsstep="1": interval entre números vàlids, configurat a 1 (potser és massa poc, podem posar-lo a 10)class="slider": permetrà fer-ne referència per estilitzar l'element -->
<script><!-- dins el <body> afegim codi JavaScript: --><!-- funció que s'executa cada cop que canvia el valor del lliscador: -->function updateSliderPWM(element) { var sliderValue = document.getElementById("pwmSlider").value; <!-- obté el valor actual del control lliscant i el desa a la variable sliderValue --> document.getElementById("textSliderValue").innerHTML = sliderValue; <!-- actualitza el text de l'etiqueta textSliderValue amb el valor desat a la variable sliderValue --> console.log(sliderValue);
<!-- fem la sol·licitud HTTP GET: --> var xhr = new XMLHttpRequest(); xhr.open("GET", "/slider?value="+sliderValue, true); xhr.send(); <!-- quan el control lliscant estigui, p ex, a 100, la sol·icitud GET serà http://IP/slider?value=100 i l'ESP32 rebrà GET/slider?value=100 -->}</script></body></html>
<!-- fem la sol·licitud HTTP GET: --> var xhr = new XMLHttpRequest(); xhr.open("GET", "/slider?value="+sliderValue, true); xhr.send(); <!-- quan el control lliscant estigui, p ex, a 100, la sol·icitud GET serà http://IP/slider?value=100 i l'ESP32 rebrà GET/slider?value=100 -->}</script></body></html>
Definim la interacció amb el LED 👇
while True:conn, addr = servidor.accept()print ('==========')print('Nova connexio des de', str(addr))request = conn.recv(1024)request = request.decode().split()# el mètode split() divideix una cadena en una llista if 'value' in request[1]: # si la petició GET conté la paraula value ...# recordeu: l'ESP32 rebrà GET/slider?value=100valor_lliscador = request[1].split('&')[0].split('=')[1]# & i = son separadors del mètode split() per construir la peticio GETprint(valor_lliscador) # valor rescatat del lliscador del web (en format text) imprimeixo per comprovaciósenyal_led=int(valor_lliscador) # transformo el text resultat en nombre enter. Aquest sera el duty cap al LEDprint(senyal_led) # per comprovació led.duty (senyal_led) # assignació del duty al pin del LED response = pag_web() conn.send('HTTP/1.1 200 OK\n')conn.send('Content-Type: text/html\n')conn.send('Connection: close\n\n')conn.sendall(response)conn.close()
Proposta de millora
Els valors 0 a 1023 del lliscador a la web són poc significatius. Proposo canviar-los per percentatge d'il·luminació (0% a 100%). Caldrà:
Els valors 0 a 1023 del lliscador a la web són poc significatius. Proposo canviar-los per percentatge d'il·luminació (0% a 100%). Caldrà:
- Canviar l'interval de valors del lliscador web: 0 a 100
- Afegir a l'etiqueta del lliscador el text %:
- Al while True no podem associar directament el senyal_led (0 a 1023) al valor_lliscador (0 a 100). Caldrà un factor de conversió: dividir les 1024 possibles sortides entre els 100 possibles valors d'entrada del lliscador, i arrodonir el resultat (PWM ha de ser un nombre enter):
valor_lliscador = int(valor_lliscador) # cal transformar el text resultat en nombre enter
valor_lliscador = int(valor_lliscador) # cal transformar el text resultat en nombre enter
senyal_led = round(valor_lliscador*(1024/100))
senyal_led = round(valor_lliscador*(1024/100))
led.duty (senyal_led)
led.duty (senyal_led)
El resultat:
El resultat:
Makegem-la 👇
<html>
<head>
<title>ESP32 Servidor Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
<!-- propietats de tot el document: -->
html {text-align: center; font-family: Arial;}
<!-- tamany font pel títol i pels paràgrafs: -->
h1 {font-size: 40px;} p {font-size: 20px;}
<!-- fons del lliscador
ample, alt i separació de la resta d'elements. Per canviar l'aparença cal primer invisibilitzar-lo (-webkit-appearance: none;) i definim un color de fons (gris): -->
.slider { width: 360px; height: 25px; margin: 14px; -webkit-appearance: none; background: #CCCCCC; }
<!-- punt del lliscador: -->
.slider::-webkit-slider-thumb {-webkit-appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
</style>
</head>
Page updated
Report abuse