mysql -u root -p
CREATE DATABASE SensorPrAzure;
USE SensorPrAzure;
CREATE TABLE sensor_data (
id INT AUTO_INCREMENT PRIMARY KEY,
sensor_value FLOAT NOT NULL,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
);
-- Insertar datos aleatorios de prueba
INSERT INTO sensor_data (sensor_value) VALUES
(35.5), (40.3), (42.0), (37.8), (39.4), (41.7);
-- Verifica los datos insertados
SELECT * FROM sensor_data;
exit;
cd /var/www/html/
sudo nano index.php
<?php
// Conexión a la base de datos
$host = "localhost";
$user = "root"; // Ajusta el usuario
$pass = "admin"; // Ajusta la contraseña si tienes
$dbname = "SensorPrAzure";
$conn = new mysqli($host, $user, $pass, $dbname);
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
// Obtener datos de la base de datos
$sql = "SELECT * FROM sensor_data ORDER BY timestamp DESC LIMIT 10";
$result = $conn->query($sql);
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = ['time' => $row['timestamp'], 'value' => $row['sensor_value']];
}
// Último dato
$lastData = end($data);
$conn->close();
?>
<!DOCTYPE html>
<html>
<head>
<title>Gráficas con Highcharts</title>
<script src="https://code.highcharts.com/11.4.8/highcharts.js"></script>
<script src="https://code.highcharts.com/11.4.8/highcharts-more.js"></script>
<script src="https://code.highcharts.com/11.4.8/modules/solid-gauge.js"></script>
</head>
<body>
<h1>Dashboard de Sensores</h1>
<!-- Gráfica de flecha giratoria -->
<div id="gauge-container" style="width: 300px; height: 300px;"></div>
<!-- Gráfica de línea -->
<div id="line-chart-container" style="width: 500px; height: 300px;"></div>
<!-- Tabla del último dato -->
<h2>Último Dato Registrado</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<th>Tiempo</th>
<th>Valor</th>
</tr>
<tr>
<td><?= $lastData['time']; ?></td>
<td><?= $lastData['value']; ?></td>
</tr>
</table>
<script>
// Gráfica de flecha giratoria
Highcharts.chart('gauge-container', {
chart: {
type: 'solidgauge'
},
title: { text: 'Velocímetro' },
pane: {
startAngle: -150,
endAngle: 150,
background: [{ innerRadius: '60%', outerRadius: '100%', shape: 'arc' }]
},
yAxis: {
min: 0, max: 100,
stops: [[0.5, '#55BF3B'], [0.75, '#DDDF0D'], [1, '#DF5353']],
tickAmount: 2,
title: { text: 'Valor' }
},
series: [{
name: 'Sensor',
data: [<?= $lastData['value']; ?>],
tooltip: { valueSuffix: ' unidades' }
}]
});
// Gráfica de línea
Highcharts.chart('line-chart-container', {
chart: { type: 'line' },
title: { text: 'Últimos Datos' },
xAxis: {
categories: [<?php foreach ($data as $d) echo "'".$d['time']."',"; ?>]
},
yAxis: { title: { text: 'Valor del Sensor' } },
series: [{
name: 'Sensor',
data: [<?php foreach ($data as $d) echo $d['value'].","; ?>]
}]
});
</script>
</body>
</html>
sudo chown apache:apache /var/www/html/index.php
sudo chmod 644 /var/www/html/index.php
sudo systemctl restart httpd
mysql -u root -p
CREATE USER 'phpuser'@'localhost' IDENTIFIED BY 'admin';
GRANT ALL PRIVILEGES ON SensorPrAzure.* TO 'phpuser'@'localhost';
FLUSH PRIVILEGES;
EXIT;
sudo nano /var/www/html/index.php
sudo systemctl restart httpd
http://10.10.10.147/index.php
4 columnas
sudo mysql -u root -p
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
<?php
// Conexión a la base de datos
$host = "localhost";
$user = "root"; // Ajusta tu usuario
$pass = ""; // 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>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<h1>Dashboard de Sensores</h1>
<!-- Gráficos de Registro -->
<h2>Gráficos de Registro</h2>
<div id="line1" style="width: 500px; height: 300px; display: inline-block;"></div>
<div id="line2" style="width: 500px; height: 300px; display: inline-block;"></div>
<div id="line3" style="width: 500px; height: 300px; display: inline-block;"></div>
<div id="line4" style="width: 500px; height: 300px; display: inline-block;"></div>
<!-- Tabla con últimos valores -->
<h2>Últimos Valores de Sensores</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<th>Luminosidad</th>
<th>Distancia</th>
<th>Temperatura</th>
<th>Voltaje</th>
</tr>
<tr>
<td><?= $lastData['luminosidad']; ?></td>
<td><?= $lastData['distancia']; ?></td>
<td><?= $lastData['temperatura']; ?></td>
<td><?= $lastData['voltaje']; ?></td>
</tr>
</table>
<!-- Script para gráficos de línea -->
<script>
// 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 }]
});
}
// 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');
</script>
</body>
</html>
sudo systemctl restart httpdhttp://10.10.10.147/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>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
.chart-container {
width: 300px;
height: 200px;
display: inline-block;
margin: 10px;
}
</style>
</head>
<body>
<h1>Dashboard de Sensores</h1>
<!-- Gráficos de Registro -->
<h2>Gráficos de Registro</h2>
<div id="line1" class="chart-container"></div>
<div id="line2" class="chart-container"></div>
<div id="line3" class="chart-container"></div>
<div id="line4" class="chart-container"></div>
<!-- Tabla con últimos valores -->
<h2>Últimos Valores de Sensores</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<th>Luminosidad</th>
<th>Distancia</th>
<th>Temperatura</th>
<th>Voltaje</th>
</tr>
<tr>
<td><?= $lastData['luminosidad']; ?></td>
<td><?= $lastData['distancia']; ?></td>
<td><?= $lastData['temperatura']; ?></td>
<td><?= $lastData['voltaje']; ?></td>
</tr>
</table>
<!-- Script para gráficos de línea -->
<script>
// 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 }]
});
}
// 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');
</script>
</body>
</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>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<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>
<!-- Gráficos Velocímetro -->
<h2>Indicadores</h2>
<div id="gauge1" class="gauge-container"></div>
<div id="gauge2" class="gauge-container"></div>
<div id="gauge3" class="gauge-container"></div>
<div id="gauge4" class="gauge-container"></div>
<!-- Gráficos de Registro -->
<h2>Gráficos de Registro</h2>
<div id="line1" class="chart-container"></div>
<div id="line2" class="chart-container"></div>
<div id="line3" class="chart-container"></div>
<div id="line4" class="chart-container"></div>
<!-- Tabla con últimos valores -->
<h2>Últimos Valores de Sensores</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<th>Luminosidad</th>
<th>Distancia</th>
<th>Temperatura</th>
<th>Voltaje</th>
</tr>
<tr>
<td><?= $lastData['luminosidad']; ?></td>
<td><?= $lastData['distancia']; ?></td>
<td><?= $lastData['temperatura']; ?></td>
<td><?= $lastData['voltaje']; ?></td>
</tr>
</table>
<!-- Script para gráficos -->
<script>
// 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: [{
name: title,
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>
No hay comentarios.:
Publicar un comentario