sudo apt update && sudo apt upgrade -y

sudo apt install apache2 php libapache2-mod-php php-mysql mysql-server -y

Puedes dejar los valores por defecto que aparecen seleccionados en la pantalla. En este caso:

irqbalance.service, polkit.service y walinuxagent.service ya están seleccionados.
Esto indica que se reiniciarán para aplicar las actualizaciones.

No es necesario cambiar nada, solo selecciona "Ok" y presiona Enter para continuar.

sudo apt install apache2 php libapache2-mod-php php-mysql mysql-server -y

Simplemente presiona Tab para seleccionar <Ok>.

Luego presiona Enter.

sudo mysql -u root

CREATE DATABASE Azuresensores;

USE Azuresensores;

CREATE TABLE sensor_data (

id INT AUTO_INCREMENT PRIMARY KEY,

luminosidad FLOAT NOT NULL,

distancia FLOAT NOT NULL,

temperatura FLOAT NOT NULL,

voltaje FLOAT NOT NULL,

timestamp DATETIME DEFAULT CURRENT_TIMESTAMP

);

-- Insertar datos de ejemplo

INSERT INTO sensor_data (luminosidad, distancia, temperatura, voltaje) VALUES

(200.5, 15.3, 24.8, 3.7),

(180.2, 12.0, 23.5, 3.6),

(210.9, 16.7, 25.3, 3.8),

(190.1, 14.5, 24.0, 3.5);

EXIT;

cd /var/www/html

sudo nano index.php

<?php

// Conexión a la base de datos

$host = "localhost";

$user = "root"; // Ajusta tu usuario

$pass = "admin"; // Ajusta tu contraseña

$dbname = "Azuresensores";

$conn = new mysqli($host, $user, $pass, $dbname);

if ($conn->connect_error) {

die("Conexión fallida: " . $conn->connect_error);

}

// Obtener los últimos 10 registros

$sql = "SELECT * FROM sensor_data ORDER BY timestamp DESC LIMIT 10";

$result = $conn->query($sql);

$data = [];

while ($row = $result->fetch_assoc()) {

$data[] = $row;

}

// Último dato

$lastData = end($data);

$conn->close();

<!DOCTYPE html>

<html>

<head>

<title>Dashboard de Sensores</title>

<style>

.chart-container {

width: 300px;

height: 200px;

display: inline-block;

margin: 10px;

}

.gauge-container {

width: 200px;

height: 200px;

display: inline-block;

margin: 10px;

}

</style>

</head>

<body>

<h1>Dashboard de Sensores</h1>

<h2>Indicadores</h2>

<h2>Gráficos de Registro</h2>

<h2>Últimos Valores de Sensores</h2>

<tr>

<th>Luminosidad</th>

<th>Distancia</th>

<th>Temperatura</th>

<th>Voltaje</th>

</tr>

<tr>

</tr>

</table>

// Función para crear gráficos de línea

function createLineChart(container, data, title) {

Highcharts.chart(container, {

chart: { type: 'line' },

title: { text: title },

xAxis: { categories: [<?php foreach ($data as $d) echo "'".$d['timestamp']."',"; ?>] },

series: [{ name: title, data: data }]

});

}

// Función para crear gráficos tipo velocímetro

function createGaugeChart(container, value, title) {

Highcharts.chart(container, {

chart: {

type: 'solidgauge'

title: { text: title },

pane: {

startAngle: -150,

endAngle: 150,

background: [{

outerRadius: '100%',

innerRadius: '60%',

backgroundColor: Highcharts.color('#DDD').setOpacity(0.3).get(),

borderWidth: 0

}]

yAxis: {

min: 0,

max: 100,

stops: [

[0.5, '#55BF3B'],

[0.75, '#DDDF0D'],

[1, '#DF5353']

title: { text: title }

series: [{

data: [value],

tooltip: { valueSuffix: ' ' }

}]

});

}

// Crear gráficos de línea

createLineChart('line1', [<?php foreach ($data as $d) echo $d['luminosidad'].","; ?>], 'Luminosidad');

createLineChart('line2', [<?php foreach ($data as $d) echo $d['distancia'].","; ?>], 'Distancia');

createLineChart('line3', [<?php foreach ($data as $d) echo $d['temperatura'].","; ?>], 'Temperatura');

createLineChart('line4', [<?php foreach ($data as $d) echo $d['voltaje'].","; ?>], 'Voltaje');

// Crear gráficos tipo velocímetro con el último dato

createGaugeChart('gauge1', <?= $lastData['luminosidad']; ?>, 'Luminosidad');

createGaugeChart('gauge2', <?= $lastData['distancia']; ?>, 'Distancia');

createGaugeChart('gauge3', <?= $lastData['temperatura']; ?>, 'Temperatura');

createGaugeChart('gauge4', <?= $lastData['voltaje']; ?>, 'Voltaje');

</script>

</body>

</html>

sudo chown -R www-data:www-data /var/www/html

sudo chmod -R 755 /var/www/html

sudo systemctl restart apache2

sudo ufw allow 'Apache Full'

sudo ufw enable

http://172.172.28.74/

sudo rm /var/www/html/index.html

sudo nano /var/www/html/index.php

<?php

// Conexión a la base de datos

$host = "localhost";

$user = "root"; // Ajusta tu usuario

$pass = "admin"; // Ajusta tu contraseña

$dbname = "Azuresensores";

$conn = new mysqli($host, $user, $pass, $dbname);

if ($conn->connect_error) {

die("Conexión fallida: " . $conn->connect_error);

}

// Obtener los últimos 10 registros

$sql = "SELECT * FROM sensor_data ORDER BY timestamp DESC LIMIT 10";

$result = $conn->query($sql);

$data = [];

while ($row = $result->fetch_assoc()) {

$data[] = $row;

}

// Último dato

$lastData = end($data);

$conn->close();

<!DOCTYPE html>

<html>

<head>

<title>Dashboard de Sensores</title>

<style>

.chart-container {

width: 300px;

height: 200px;

display: inline-block;

margin: 10px;

}

.gauge-container {

width: 200px;

height: 200px;

display: inline-block;

margin: 10px;

}

</style>

</head>

<body>

<h1>Dashboard de Sensores</h1>

<h2>Indicadores</h2>

<h2>Gráficos de Registro</h2>

<h2>Últimos Valores de Sensores</h2>

<tr>

<th>Luminosidad</th>

<th>Distancia</th>

<th>Temperatura</th>

<th>Voltaje</th>

</tr>

<tr>

</tr>

</table>

// Función para crear gráficos de línea

function createLineChart(container, data, title) {

Highcharts.chart(container, {

chart: { type: 'line' },

title: { text: title },

xAxis: { categories: [<?php foreach ($data as $d) echo "'".$d['timestamp']."',"; ?>] },

series: [{ name: title, data: data }]

});

}

// Función para crear gráficos tipo velocímetro

function createGaugeChart(container, value, title) {

Highcharts.chart(container, {

chart: {

type: 'solidgauge'

title: { text: title },

pane: {

startAngle: -150,

endAngle: 150,

background: [{

outerRadius: '100%',

innerRadius: '60%',

backgroundColor: Highcharts.color('#DDD').setOpacity(0.3).get(),

borderWidth: 0

}]

yAxis: {

min: 0,

max: 100,

stops: [

[0.5, '#55BF3B'],

[0.75, '#DDDF0D'],

[1, '#DF5353']

title: { text: title }

series: [{

data: [value],

tooltip: { valueSuffix: ' ' }

}]

});

}

// Crear gráficos de línea

createLineChart('line1', [<?php foreach ($data as $d) echo $d['luminosidad'].","; ?>], 'Luminosidad');

createLineChart('line2', [<?php foreach ($data as $d) echo $d['distancia'].","; ?>], 'Distancia');

createLineChart('line3', [<?php foreach ($data as $d) echo $d['temperatura'].","; ?>], 'Temperatura');

createLineChart('line4', [<?php foreach ($data as $d) echo $d['voltaje'].","; ?>], 'Voltaje');

// Crear gráficos tipo velocímetro con el último dato

createGaugeChart('gauge1', <?= $lastData['luminosidad']; ?>, 'Luminosidad');

createGaugeChart('gauge2', <?= $lastData['distancia']; ?>, 'Distancia');

createGaugeChart('gauge3', <?= $lastData['temperatura']; ?>, 'Temperatura');

createGaugeChart('gauge4', <?= $lastData['voltaje']; ?>, 'Voltaje');

</script>

</body>

</html>

sudo systemctl restart apache2

sudo apt install phpmyadmin php-mbstring php-zip php-gd php-json php-curl -y

admin

sudo ln -s /usr/share/phpmyadmin /var/www/html/phpmyadmin

sudo phpenmod mbstring

sudo systemctl restart apache2

sudo tail -n 50 /var/log/apache2/error.log

http://172.172.28.74/phpmyadmin

sudo mysql -u root

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'admin';

FLUSH PRIVILEGES;

EXIT;

sudo systemctl restart apache2

con esp32

sudo nano /var/www/html/data_receiver.php

<?php

// Configuración de la base de datos

$host = "localhost";

$user = "root";

$password = "admin";

$dbname = "ESP32AZ";

// Conexión a la base de datos

$conn = new mysqli($host, $user, $password, $dbname);

if ($conn->connect_error) {

die("Conexión fallida: " . $conn->connect_error);

}

// Recibir datos POST

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$luminosidad = $_POST['luminosidad'];

$distancia = $_POST['distancia'];

$temperatura = $_POST['temperatura'];

$voltaje = $_POST['voltaje'];

// Insertar datos en la base de datos

$sql = "INSERT INTO sensor_data (luminosidad, distancia, temperatura, voltaje)

VALUES ('$luminosidad', '$distancia', '$temperatura', '$voltaje')";

if ($conn->query($sql) === TRUE) {

echo "Datos guardados correctamente";

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

}

$conn->close();

sudo mysql -u root -p

CREATE DATABASE ESP32AZ;

USE ESP32AZ;

CREATE TABLE sensor_data (

id INT AUTO_INCREMENT PRIMARY KEY,

luminosidad FLOAT NOT NULL,

distancia FLOAT NOT NULL,

temperatura FLOAT NOT NULL,

voltaje FLOAT NOT NULL,

timestamp DATETIME DEFAULT CURRENT_TIMESTAMP

);

sudo ufw allow 80/tcp

sudo ufw status

sudo nano /var/www/html/comtpc.php

<?php

// Configuración de la base de datos

$host = "localhost";

$user = "root"; // Ajusta tu usuario

$pass = "admin"; // Ajusta tu contraseña

$dbname = "ESP32AZ";

$conn = new mysqli($host, $user, $pass, $dbname);

if ($conn->connect_error) {

die("Conexión fallida: " . $conn->connect_error);

}

// Obtener los últimos 10 registros

$sql = "SELECT * FROM sensor_data ORDER BY timestamp DESC LIMIT 10";

$result = $conn->query($sql);

$data = [];

while ($row = $result->fetch_assoc()) {

$data[] = $row;

}

// Último dato

$lastData = end($data);

$conn->close();

<!DOCTYPE html>

<html>

<head>

<title>Dashboard ESP32AZ</title>

<style>

.chart-container {

width: 300px;

height: 200px;

display: inline-block;

margin: 10px;

}

.gauge-container {

width: 200px;

height: 200px;

display: inline-block;

margin: 10px;

}

</style>

</head>

<body>

<h1>Dashboard de Sensores - ESP32AZ</h1>

<h2>Indicadores</h2>

<h2>Gráficos de Registro</h2>

<h2>Últimos Valores de Sensores</h2>

<tr>

<th>Luminosidad</th>

<th>Distancia</th>

<th>Temperatura</th>

<th>Voltaje</th>

</tr>

<tr>

</tr>

</table>

// Función para crear gráficos de línea

function createLineChart(container, data, title) {

Highcharts.chart(container, {

chart: { type: 'line' },

title: { text: title },

xAxis: { categories: [<?php foreach ($data as $d) echo "'".$d['timestamp']."',"; ?>] },

series: [{ name: title, data: data }]

});

}

// Función para crear gráficos tipo velocímetro

function createGaugeChart(container, value, title) {

Highcharts.chart(container, {

chart: {

type: 'solidgauge'

title: { text: title },

pane: {

startAngle: -150,

endAngle: 150,

background: [{

outerRadius: '100%',

innerRadius: '60%',

backgroundColor: Highcharts.color('#DDD').setOpacity(0.3).get(),

borderWidth: 0

}]

yAxis: {

min: 0,

max: 100,

stops: [

[0.5, '#55BF3B'],

[0.75, '#DDDF0D'],

[1, '#DF5353']

title: { text: title }

series: [{

data: [value],

tooltip: { valueSuffix: ' ' }

}]

});

}

// Crear gráficos de línea

createLineChart('line1', [<?php foreach ($data as $d) echo $d['luminosidad'].","; ?>], 'Luminosidad');

createLineChart('line2', [<?php foreach ($data as $d) echo $d['distancia'].","; ?>], 'Distancia');

createLineChart('line3', [<?php foreach ($data as $d) echo $d['temperatura'].","; ?>], 'Temperatura');

createLineChart('line4', [<?php foreach ($data as $d) echo $d['voltaje'].","; ?>], 'Voltaje');

// Crear gráficos tipo velocímetro con el último dato

createGaugeChart('gauge1', <?= $lastData['luminosidad']; ?>, 'Luminosidad');

createGaugeChart('gauge2', <?= $lastData['distancia']; ?>, 'Distancia');

createGaugeChart('gauge3', <?= $lastData['temperatura']; ?>, 'Temperatura');

createGaugeChart('gauge4', <?= $lastData['voltaje']; ?>, 'Voltaje');

</script>

</body>

</html>

sudo systemctl restart apache2

Azure con ESP32

Código Final para la ESP32

#include <WiFi.h>

#include <HTTPClient.h>

// Configuración WiFi

const char* ssid = "RED DIAZ1";

const char* password = "no tengo clave";

// URL de tu servidor en Azure

const char* serverUrl = "http://172.172.28.74/data_receiver.php";

// Pines del sensor ultrasónico

int trig = 2; // Transmisor (ultrasónico)

int eco = 4; // Receptor (ultrasónico)

int duracion;

int distancia;

// Configuración para los LM35

int lm35_1 = 34; // GPIO 34 para el primer sensor LM35

int lm35_2 = 35; // GPIO 35 para el segundo sensor LM35

float temp1; // Temperatura del primer LM35

float temp2; // Voltaje del segundo LM35 (simulado como temperatura)

// Configuración para la resistencia luminosa (LDR)

int ldrPin = 32; // GPIO 32 para la LDR

int ldrValor; // Valor leído de la LDR

void setup() {

// Inicializar pines

pinMode(trig, OUTPUT);

pinMode(eco, INPUT);

pinMode(lm35_1, INPUT);

pinMode(lm35_2, INPUT);

pinMode(ldrPin, INPUT);

// Inicializar la comunicación Serial y WiFi

Serial.begin(115200);

WiFi.begin(ssid, password);

Serial.print("Conectando a WiFi...");

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

Serial.println("\nConexión exitosa a WiFi");

}

void loop() {

if (WiFi.status() == WL_CONNECTED) {

HTTPClient http;

// --- Lectura del sensor de distancia ultrasónico ---

digitalWrite(trig, HIGH);

delayMicroseconds(10);

digitalWrite(trig, LOW);

duracion = pulseIn(eco, HIGH);

distancia = duracion / 58.2; // Distancia en cm

// --- Lectura de los sensores LM35 ---

temp1 = analogRead(lm35_1) * (3.3 / 4095.0) * 100.0; // LM35: Temperatura en °C

temp2 = analogRead(lm35_2) * (3.3 / 4095.0) * 100.0; // LM35: "Voltaje" simulado

// --- Lectura del sensor LDR ---

ldrValor = analogRead(ldrPin); // Lectura directa

// --- Envío de datos al servidor Azure ---

String postData = "luminosidad=" + String(ldrValor) +

"&distancia=" + String(distancia) +

"&temperatura=" + String(temp1) +

"&voltaje=" + String(temp2);

http.begin(serverUrl); // Configurar URL

http.addHeader("Content-Type", "application/x-www-form-urlencoded");

// Enviar datos

int httpResponseCode = http.POST(postData);

if (httpResponseCode > 0) {

Serial.println("Datos enviados correctamente");

Serial.println("Respuesta del servidor: " + String(httpResponseCode));

} else {

Serial.println("Error enviando los datos: " + http.errorToString(httpResponseCode));

}

http.end();

} else {

Serial.println("Error: WiFi no conectado.");

}

// Imprimir valores en Serial Monitor

Serial.println("----- Valores Medidos -----");

Serial.print("Distancia: ");

Serial.print(distancia);

Serial.println(" cm");

Serial.print("Temperatura 1: ");

Serial.print(temp1);

Serial.println(" °C");

Serial.print("Voltaje: ");

Serial.print(temp2);

Serial.println(" V");

Serial.print("Luminosidad (LDR): ");

Serial.println(ldrValor);

Serial.println("---------------------------");

delay(5000); // Enviar datos cada 5 segundos

}

Modificar el Script PHP

<?php

// Configuración de la base de datos

$host = "localhost";

$user = "root";

$pass = "admin"; // Ajusta tu contraseña

$dbname = "ESP32AZ";

header('Content-Type: application/json');

// Conexión a la base de datos

$conn = new mysqli($host, $user, $pass, $dbname);

if ($conn->connect_error) {

echo json_encode(["error" => "Conexión fallida: " . $conn->connect_error]);

exit();

}

// Obtener los últimos 10 registros

$sql = "SELECT * FROM sensor_data ORDER BY timestamp DESC LIMIT 10";

$result = $conn->query($sql);

$data = [];

while ($row = $result->fetch_assoc()) {

$data[] = $row;

}

echo json_encode($data); // Devolver datos como JSON

$conn->close();

Modificar el HTML

<!DOCTYPE html>

<html>

<head>

<title>Dashboard ESP32AZ - Tiempo Real</title>

<style>

.chart-container {

width: 300px;

height: 200px;

display: inline-block;

margin: 10px;

}

.gauge-container {

width: 200px;

height: 200px;

display: inline-block;

margin: 10px;

}

</style>

</head>

<body>

<h1>Dashboard de Sensores - Actualización en Tiempo Real</h1>

<h2>Indicadores</h2>

<h2>Gráficos de Registro</h2>

let chartLine1, chartLine2, chartLine3, chartLine4;

let gauge1, gauge2, gauge3, gauge4;

// Inicializar Gráficos

function initCharts() {

gauge1 = createGaugeChart('gauge1', 0, 'Luminosidad');

gauge2 = createGaugeChart('gauge2', 0, 'Distancia');

gauge3 = createGaugeChart('gauge3', 0, 'Temperatura');

gauge4 = createGaugeChart('gauge4', 0, 'Voltaje');

chartLine1 = createLineChart('line1', [], 'Luminosidad');

chartLine2 = createLineChart('line2', [], 'Distancia');

chartLine3 = createLineChart('line3', [], 'Temperatura');

chartLine4 = createLineChart('line4', [], 'Voltaje');

fetchData(); // Cargar datos iniciales

setInterval(fetchData, 5000); // Actualizar cada 5 segundos

}

// Crear Gráficos Velocímetro

function createGaugeChart(container, value, title) {

return Highcharts.chart(container, {

chart: { type: 'solidgauge' },

title: { text: title },

pane: { startAngle: -150, endAngle: 150, background: [{ innerRadius: '60%', outerRadius: '100%', shape: 'arc' }] },

yAxis: { min: 0, max: 100, title: { text: title } },

series: [{ name: title, data: [value] }]

});

}

// Crear Gráficos de Línea

function createLineChart(container, data, title) {

return Highcharts.chart(container, {

chart: { type: 'line' },

title: { text: title },

xAxis: { categories: [] },

series: [{ name: title, data: data }]

});

}

// Función para obtener datos del servidor

function fetchData() {

fetch('data_fetch.php') // Llamada AJAX

.then(response => response.json())

.then(data => {

if (data.error) {

console.error(data.error);

return;

}

// Extraer valores

const timestamps = data.map(d => d.timestamp);

const luminosidad = data.map(d => parseFloat(d.luminosidad));

const distancia = data.map(d => parseFloat(d.distancia));

const temperatura = data.map(d => parseFloat(d.temperatura));

const voltaje = data.map(d => parseFloat(d.voltaje));

// Actualizar Gráficos de Línea

chartLine1.series[0].setData(luminosidad);

chartLine2.series[0].setData(distancia);

chartLine3.series[0].setData(temperatura);

chartLine4.series[0].setData(voltaje);

chartLine1.xAxis[0].setCategories(timestamps);

chartLine2.xAxis[0].setCategories(timestamps);

chartLine3.xAxis[0].setCategories(timestamps);

chartLine4.xAxis[0].setCategories(timestamps);

// Actualizar Velocímetros (último valor)

gauge1.series[0].points[0].update(luminosidad[0]);

gauge2.series[0].points[0].update(distancia[0]);

gauge3.series[0].points[0].update(temperatura[0]);

gauge4.series[0].points[0].update(voltaje[0]);

})

.catch(err => console.error("Error al obtener datos: ", err));

}

// Inicializar gráficos al cargar la página

initCharts();

</script>

</body>

</html>

Vision Multiple de Creatividad Basica por K.I.D.S

¿cuanta gente a visto el blog?

FUTURAMENTE SUBIDOS A

Para el Azure

con esp32

Azure con ESP32

Código Final para la ESP32

Modificar el Script PHP

Modificar el HTML

No hay comentarios.:

Publicar un comentario

¿WHAT?

Etiquetas

algunas olvidadas

Quien Soy

Páginas

Sigueme en Facebook

Siganme los buenos

¿cuanta gente a visto el blog?

FUTURAMENTE SUBIDOS A

Para el Azure

con esp32

Azure con ESP32

Código Final para la ESP32

Modificar el Script PHP

Modificar el HTML

No hay comentarios.:

Publicar un comentario

Suscribete

Siganme los buenos