Controlar un led con ESP8266, php y Arduino JSON

Archivo led.json

Un archivo JSON almacena los valores de datos en formato json. En este caso se almacena el valor del led.

				{"led":255}
			

Página web Frontend

_{Parte 1}: Veamos la codificación al iniciar la página web.

Valor de led

Primero se debe obtener el valor de led del archivo led.json, para comprobar la información de la intensidad, el apagado o encendido del led.

				 
				  $obj = json_decode(file_get_contents("json/led.json"));
				  $led = $obj->{'led'};
				  $ledswitch = $led <= 0 ? "unchecked" : "checked";
				?>
			

• file_get_contents: Devuelve el valor del archivo en un String.
• json_decode: Decodifica un String de formato JSON.
• $led: Valor numérico del led.
• $ledswitch: Valor del estado de input checkbox.

Input checkbox

Luego se debe cambiar el estado del input checkbox entre seleccionado y deseleccionado.

				<input type="checkbox" id="led"  echo $ledswitch; ?>>
			

Difuminado de la imagen

Luego con el valor numérico del led vamos a establecer el difuminado en la imagen SVG del led, para simular la intensidad del led.

				<feGaussianBlur id="blur" stdDeviation=" echo ($led/255)*40; ?>" result="blur"/>
			

Input range

Luego se debe establecer el valor del input range al igual mostrar el valor del led en porcentajes a través de un span.

				<input type="range" value=" echo $led; ?>" class="slider" max="255">
				<span class="info"> echo round(($led/255)*100); ?>%span>
			

_{Parte 2}: Administración del valor de Led mediante JS

Variables generales

Primero se establecen las variables generales como se puede ver a continuación.

				var rangeElement = document.querySelector('input[type="range"]');
				var infoElement = $(".info");
				var switchElement = $("#led");
			

• rangeElement: Instancia el elemento input range.
• infoElement: Instancia el elemento span
• switchElement: Instancia el elemento input checkbox

Input range al deslizar

				var rangeValue = function(){
				  var newValue = rangeElement.value;
				
				  calculePercent(newValue)
				
				  if(Number(newValue)>=1){
				    switchElement.prop("checked", true);
				  }else {
				    switchElement.prop("checked", false);
				  }
				
				  sendData(newValue);
				  setBlur(newValue);
				  updateRange(rangeElement);
				
				}
				
				rangeElement.addEventListener("input", rangeValue);
			

• newValue: Valor numérico del input range
• calculePercent: Función que actualiza el valor del en porcentajes del span
• checked: Estado seleccionado del input checkbox
• checked: Estado seleccionado del input checkbox
• sendData Función que se encargar de enviar los datos al backend de la web.
• setBlur: Función que se encargar de actualizar el difuminado del led
• updateRange: Función que se encargar de actualizar el deslizamiento del input range

Seleccionar y deseleccionar input checkbox

Se puede ver la función para seleccionar y deseleccionar el input checkbox, en el diseño simula el aspecto de un switch.

				switchElement.on('change', function() {
				  if ($(this).is(':checked') ) {
				
				    infoElement.text("100%");
				    rangeElement.value = 255;
				    updateRange(rangeElement);
				    sendData(255);
				    setBlur(255)
				
				  } else {
				
				    infoElement.text("0%");
				    rangeElement.value = 0;
				    updateRange(rangeElement);
				    sendData(0);
				    setBlur(0)
				
				  }
				});
			

Porcentaje del valor de led

Se calcular el valor del led en porncentajes, para actualizar el nuevo valor en el span.

				function calculePercent(value){
				  percent = (Number(value)/255*100).toFixed();
				  $(".info").text(percent+"%");
				}
			

Difuminación del led

Con la siguiente función se difumina el led según el valor actual del led.

				function setBlur(value){
				  blur=(Number(value)/255*40).toFixed();
				  $("#blur").attr('stdDeviation', blur);
				}
			

Envió del valor de led al backend

Con la siguiente función se envía el valor de led a través de Ajax por el método POST

				function sendData(value){
				  $.ajax({
				    url: "led.php",
				    type: "POST",
				    data:{ led: value}
				  });     
				}
			

Página web Backend

Veamos la codificación en el backend de la web para administrar los valores del led.

				$led=$_POST["led"];
				$Obj = new stdClass;
				$Obj->led = intval($led);
				file_put_contents("json/led.json", json_encode($Obj));
			

• led: El valor del led enviado desde el Frontend por el método POST
• stdClass: Clase predifinidad para crear un objecto.
• $Obj->led: Se crea el objecto led para su escritura.
• intval: Define como un valor entero al valor del led.
• file_put_contents: Escribe el valor del led en el archivo led.json.
• json_encode: Establece en formato JSON el valor del led en la escritura.

Desarrollo en el Arduino IDE

Variables generales

A continuación, se muestra las variables generale.

				// Se Definine la conexion a punto de acceso wifi
				#define WIFI_SSID "Developer"
				#define WIFI_PASSWORD "developer-1234"
				
				WiFiClient client;
			

• WIFI_SSID: Se define el nombre del wifi.
• WIFI_PASSWORD : Se define la contraseña del Wifi.
• WiFiClient: Cliente Wifi que sirve para realizar peticiones y envíos http a un servidor web.

Conexión a una red wifi

A continuación, se muestra la codificación para realizar una conexión a punto de acceso Wifi desde el NodeMCU ESP8266.

				WiFi.begin (WIFI_SSID, WIFI_PASSWORD);
				while (WiFi.status() != WL_CONNECTED) {
				  delay(500);
				  Serial.print(".");
				}
				
				Serial.println ("");
				Serial.println ("Se conectó al wifi!");
				Serial.println(WiFi.localIP());
			

• WiFi.begin: Inicializa la conexión al Wifi con el nombre y contraseña.
• WiFi.status: Estado de la conexión Wifi.
• WiFi.localIP: Dirección IP del NodeMCU ESP8266.

Conexión al servidor local XAMPP

La conexión se realiza a través de la dirección IP y del puerto del Servidor.

				if (client.connect("192.168.43.16",80)) { // Preguntamos se si conectó a la IP del servidor
			

Envió de HTTP request a la Web

Para obtener el valor del led se envía una solicitud HTTP al archivo led.json que está en la página web.

				// Send HTTP request
				client.println(F("GET /ledcontrolweb/json/led.json HTTP/1.0"));
				client.println(F("Host: arduinojson.org"));
				client.println(F("Connection: close"));
			

Valor del led

El valor del led se obtiene en un valor entero como se puede ver a continuación.

				// Extract values
				Serial.println(F("Response:"));
				Serial.println(doc["led"].as());
				
				int dato=doc["led"].as();
				analogWrite(LED, dato);
			

analogWrite: Escribe un valor analógico para la salida del voltaje del pin que controla el led.