var Grafico;
var G_viento;
var G_vientoKm;
var G_presion;
var G_uv;
var G_iluminancia;
//PERMISOS DEL NAVEGADOR ACTUALES SOBRE GEOLOCALIZACION
function Obtener_Permisos_del_Navegador_GPS() {
try {
navigator.permissions.query({ name: "geolocation" }).then(function (result) {
switch (result.state) {
case "granted":
console.log("Geolocalizacion permitida.");
ObtenerGPS_Navegador();
break;
case "prompt":
console.log("Geolocalizacion en preguntar. Se lanza modal.");
$("#ventanaModalGps").modal("show");
break;
case "denied":
console.log("Geolocalizacion denegada.");
var mesg = " Su geolocalización esta denegada!.";
API_EMA.LeerRegistroEstacion(API_EMA.estaciones[0].id_estacion, true);
$("#modal_titulo").html("Permiso de Geolocalizacion Denegada");
$("#modal_cuerpo").html(
"Su Navegador tiene el permiso de Geolocalizacion denegado para este sitio.
Si lo activa, podemos brindarle una mejor experiencia, en caso que no lo desee, tambien lo entendemos y le sugerimos que ignore esta advertencia."
);
$("#modal_botones").html("");
$.notify("Geolocalización del navegador denegada!.", {
position: "right bottom",
className: "warn",
autoHideDelay: 5000,
autoHide: true,
clickToHide: true
});
$(document).on("click", ".notifyjs-corner", function () {
//RESPONDE NO
$("#ventanaModalGps").modal("show");
$(this).trigger("notify-hide");
});
break;
default:
ObtenerGPS_Navegador();
}
});
} catch (error) {
console.log("No pudo consultar los permisos");
ErrorObtiendoGPS("Imposible");
}
}
//POSICION ACTUAL DEL NAVEGADOR
function ObtenerGPS_Navegador() {
if (getCookie("estacion_seleccionada") == null) {
console.log("No hay seleccionada en cookie. Busca la mas cercana en linea.");
navigator.geolocation.getCurrentPosition(
Estacion_Mas_Cercana_GeoDistancia,
ErrorObtiendoGPS,
{ enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);
} else {
if(getCookie("estado_estacion")=="En línea"){
console.log("Estacion registrada en cookie y en linea.");
API_EMA.distancia = getCookie("estacion_distancia");
API_EMA.LeerRegistroEstacion(getCookie("estacion_seleccionada"), true);
}
else{
// que busque la mas cercana en linea
console.log("Estacion en cookie Fuera de linea. Busca la mas cercana en linea...");
$.notify("Buscamos la mas cercana a ella!.", {
position: "right bottom",
className: "success",
autoHideDelay: 5000,
autoHide: true,
clickToHide: true
});
$.notify("La estación preseleccionada se encuentra OFFLINE :(.", {
position: "right bottom",
className: "info",
autoHideDelay: 5000,
autoHide: true,
clickToHide: true
});
navigator.geolocation.getCurrentPosition(
Estacion_Mas_Cercana_GeoDistancia,
ErrorObtiendoGPS,
{ enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);
}
}
}
//DISTANCIA ENTRE LAS ESTACIONES GEOPOSICIONES
function Una_Estacion_GeoDistancia(position) {
console.log("Selecciono una estacion del Menu, busca distancia.");
var estacionMenuId = getCookie("MenuEstacionSeleccion");
Latitud_navegador = position.coords.latitude;
Longitud_navegador = position.coords.longitude;
//console.log("GPS_Navegador: "+ Latitud_navegador +","+Longitud_navegador );
var Bandera = false;
var lon2;
var lat2;
var Estacion;
var R;
var dLat;
var dLong;
var a;
var c;
var dist;
API_EMA.estaciones.forEach(function (registro) {
if (registro.id_estacion == estacionMenuId)
{ Bandera = true;
Estado=registro.estado;
lon2 = registro.longitud;
lat2 = registro.latitud;
Estacion = registro.id_estacion;
rad = function (x) {return (x * Math.PI) / 180;};
R = 6378.137; //Radio de la tierra en km
dLat = rad(lat2 - Latitud_navegador);
dLong = rad(lon2 - Longitud_navegador);
a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(Latitud_navegador)) *
Math.cos(rad(lat2)) *
Math.sin(dLong / 2) *
Math.sin(dLong / 2);
c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
dist = R * c;
dist = dist.toFixed(1); //Retorna un decimales
// console.log("Distancia: "+dist);
API_EMA.distancia = dist;
setCookie("estacion_seleccionada", Estacion);
setCookie("estacion_distancia", dist);
setCookie("estado_estacion", Estado);
API_EMA.LeerRegistroEstacion(Estacion, true);
}
});
if(!Bandera){console.log("No encontro la distancia, de la estacion seleccionada.");
setCookie("estacion_distancia", " - ");
setCookie("estado_estacion", "S/D");
setCookie("estacion_seleccionada", estacionMenuId);
API_EMA.distancia = " - ";
API_EMA.LeerRegistroEstacion(estacionMenuId, true);
}
}
//DISTANCIA ENTRE LAS ESTACIONES GEOPOSICIONES
function Estacion_Mas_Cercana_GeoDistancia(position) {
Latitud_navegador = position.coords.latitude;
Longitud_navegador = position.coords.longitude;
var DistanciaMenor = 9999999;
var Bandera = false;
var EstacionMasCercana;
var EstadoMenor;
var Estado;
var lon2;
var lat2;
var Estacion;
var R;
var dLat;
var dLong;
var a;
var c;
var dist;
API_EMA.estaciones.forEach(function (registro) {
lon2 = registro.longitud;
lat2 = registro.latitud;
Estacion = registro.id_estacion;
Estado = registro.estado;
/*En línea*/
if (Estado=="En línea") {
Bandera = true;
if (Latitud_navegador != 0 && Longitud_navegador != 0) {
if (Latitud_navegador == lat2 && Longitud_navegador == lon2) {
DistanciaMenor = 0;
EstacionMasCercana = Estacion;
} else {
rad = function (x) {
return (x * Math.PI) / 180;
};
R = 6378.137; //Radio de la tierra en km
dLat = rad(lat2 - Latitud_navegador);
dLong = rad(lon2 - Longitud_navegador);
a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(Latitud_navegador)) *
Math.cos(rad(lat2)) *
Math.sin(dLong / 2) *
Math.sin(dLong / 2);
c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
dist = R * c;
dist = dist.toFixed(1); //Retorna un decimales
dist = parseFloat(dist);
if (DistanciaMenor > dist) {
DistanciaMenor = dist;
EstacionMasCercana = Estacion;
EstadoMenor = Estado;
}
}
}
}
});
if(!Bandera)
{ // Si no encuentra ninguna en linea, cercana.
console.log("No hay estaciones en linea en el sistema. Se pone la primera.");
setCookie("estacion_distancia", " - ");
setCookie("estado_estacion", API_EMA.estaciones[0].estado);
setCookie("estacion_seleccionada", API_EMA.estaciones[0].id_estacion);
API_EMA.distancia = " - ";
API_EMA.LeerRegistroEstacion(API_EMA.estaciones[0].id_estacion, true);
}else{
// En linea, mas cercana.
API_EMA.distancia = DistanciaMenor;
setCookie("estacion_seleccionada", EstacionMasCercana);
setCookie("estacion_distancia", DistanciaMenor);
setCookie("estado_estacion", EstadoMenor);
API_EMA.LeerRegistroEstacion(EstacionMasCercana, true);
}
}
function ErrorObtiendoGPS(err) {
$("#myModal").modal("show");
if(getCookie("MenuEstacionSeleccion") != null){
API_EMA.estaciones.forEach(function (registro) {
if (registro.id_estacion == getCookie("MenuEstacionSeleccion"))
{
console.log("Sin Geolocalización y por menu seleccionada.");
setCookie("estacion_distancia", "S/D");
setCookie("estado_estacion", registro.estado);
setCookie("estacion_seleccionada", registro.id_estacion);
API_EMA.distancia = " - ";
API_EMA.LeerRegistroEstacion(registro.id_estacion, true);
}
});
}else{
console.log(err.message);
console.log("Se carga una por defecto: " + API_EMA.estaciones[0].id_estacion);
API_EMA.LeerRegistroEstacion(API_EMA.estaciones[0].id_estacion, true);
}
}
// GRAFICO VIENTOS
function ActualizarGraficos() {
G_viento.value = API_EMA.observaciones[0].viento_direccion;
G_vientoKm.value = API_EMA.observaciones[0].viento_rafagas;
G_presion.value = API_EMA.observaciones[0].presion_absoluta;
G_uv.value = API_EMA.observaciones[0].luxer_uv;
G_iluminancia.value =
parseFloat(API_EMA.observaciones[0].luxer_intencidad);
}
// GRAFICO PRINCIPAL
function Mostrar_Graficos() {
API_EMA.grafico = false;
// GRAFICO DEL TIEMPO CHARTJS
//Se genera el grafico
var labels = API_EMA.estadisticas.map(function (e) {
return moment(e.hora).format("DD/MM/YYYY H") + ":00";
});
var humedadMax = API_EMA.estadisticas.map(function (e) {
return e.humedad_externa_max;
});
var humedadMin = API_EMA.estadisticas.map(function (e) {
return e.humedad_externa_min;
});
var TempMax = API_EMA.estadisticas.map(function (e) {
return e.temperatura_externa_max;
});
var TemMin = API_EMA.estadisticas.map(function (e) {
return e.temperatura_externa_min;
});
var LluviaMax = API_EMA.estadisticas.map(function (e) {
return e.lluvia_acumulado_hora_max;
});
var VientoMax = API_EMA.estadisticas.map(function (e) {
return e.viento_velocidad_max;
});
var LuxerMax = API_EMA.estadisticas.map(function (e) {
return e.luxer_intencidad_max || 0;
});
var LuxerMin = API_EMA.estadisticas.map(function (e) {
return e.luxer_intencidad_min || 0;
});
var UVMax = API_EMA.estadisticas.map(function (e) {
return e.luxer_uv_max || 0;
});
var UVMin = API_EMA.estadisticas.map(function (e) {
return e.luxer_uv_min || 0;
});
var VientoR_Max = API_EMA.estadisticas.map(function (e) {
return e.viento_rafagas_max || 0;
});
var PresionA_Max = API_EMA.estadisticas.map(function (e) {
return e.presion_absoluta_max || 0;
});
labels.reverse();
humedadMax.reverse();
humedadMin.reverse();
TempMax.reverse();
TemMin.reverse();
LluviaMax.reverse();
VientoMax.reverse();
LuxerMax.reverse();
LuxerMin.reverse();
UVMax.reverse();
UVMin.reverse();
VientoR_Max.reverse();
PresionA_Max.reverse();
//console.log(API_EMA.estadisticas);
var ctx = document.getElementById("graph");
if (Grafico != undefined) {
//console.log("borro grafico");
Grafico.destroy();
}
Grafico = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [
{
label: "Humedad_Max",
data: humedadMax,
pointRadius: 1,
backgroundColor: ["rgba(200, 0, 0, 0.2)"],
borderColor: ["rgba(200,0,0,1)"],
borderWidth: 1
},
{
label: "Humedad_Min",
data: humedadMin,
pointRadius: 1,
backgroundColor: ["rgba(100,0,0, 0.6)"],
borderColor: ["rgba(100,0,0,1)"],
borderWidth: 1,
hidden: true
},
{
label: "Lluvia",
data: LluviaMax,
pointRadius: 1,
backgroundColor: ["rgba(100,100,100, 0.6)"],
borderColor: ["rgba(100,100,100,1)"],
borderWidth: 1,
hidden: true
},
{
label: "VientoMax",
data: VientoMax,
pointRadius: 1,
backgroundColor: ["rgba(100,180,0, 0.7)"],
borderColor: ["rgba(100,190,0,1)"],
borderWidth: 1,
hidden: true
},
{
label: "RafagasMax",
data: VientoR_Max,
pointRadius: 1,
backgroundColor: ["rgba(100,80,0, 0.7)"],
borderColor: ["rgba(100,80,0,1)"],
borderWidth: 1,
hidden: true
},
{
label: "Presion_Max",
data: PresionA_Max,
pointRadius: 1,
backgroundColor: ["rgba(10,8,0, 0.2)"],
borderColor: ["rgba(10,9,0,1)"],
borderWidth: 1,
hidden: true
},
{
label: "Temperatura_Max",
data: TempMax,
pointRadius: 1,
backgroundColor: ["rgba(100,80,0, 0.2)"],
borderColor: ["rgba(100,90,0,1)"],
borderWidth: 1
},
{
label: "Temperatura_Min",
data: TemMin,
pointRadius: 1,
backgroundColor: ["rgba(100,80,0, 0.7)"],
borderColor: ["rgba(100,90,0,1)"],
borderWidth: 1,
hidden: true
},
{
label: "UV_Max",
data: UVMax,
pointRadius: 1,
backgroundColor: ["rgba(100,80,200, 0.2)"],
borderColor: ["rgba(100,90,200,1)"],
borderWidth: 1,
hidden: true
},
{
label: "UV_Min",
data: UVMin,
pointRadius: 1,
backgroundColor: ["rgba(100,80,200, 0.7)"],
borderColor: ["rgba(100,90,0,1)"],
borderWidth: 1,
hidden: true
},
{
label: "Luxer_Max",
data: LuxerMax,
pointRadius: 1,
backgroundColor: ["rgba(100,80,100, 0.2)"],
borderColor: ["rgba(100,90,0,1)"],
borderWidth: 1,
hidden: true
},
{
label: "Luxer_Min",
data: LuxerMin,
pointRadius: 1,
backgroundColor: ["rgba(100,80,100, 0.7)"],
borderColor: ["rgba(100,90,0,1)"],
borderWidth: 1,
hidden: true
}
]
},
options: {
elements: { point: { hitRadius: 10, hoverRadius: 10 } },
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
}
}
});
// GRAFICO VIENTO DIRECCION
G_viento = new RadialGauge({
renderTo: "grafico_vientos",
minValue: 0,
maxValue: 360,
majorTicks: ["N", "NE", "E", "SE", "S", "SW", "W", "NW", "N"],
minorTicks: 22,
ticksAngle: 360,
startAngle: 180,
strokeTicks: false,
highlights: false,
colorPlate: "#a33",
colorMajorTicks: "#f5f5f5",
colorMinorTicks: "#ddd",
colorNumbers: "#ccc",
colorNeedle: "rgba(240, 128, 128, 1)",
colorNeedleEnd: "rgba(255, 160, 122, .9)",
valueBox: false,
valueTextShadow: false,
colorCircleInner: "#fff",
colorNeedleCircleOuter: "#ccc",
needleCircleSize: 15,
needleCircleOuter: false,
animationRule: "linear",
needleType: "arrow",
needleStart: -10,
needleEnd: 80,
needleWidth: 4,
borders: true,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 10,
colorBorderOuter: "#ccc",
colorBorderOuterEnd: "#ccc",
colorNeedleShadowDown: "#222",
borderShadowWidth: 0,
animationDuration: 2500
}).draw();
// GRAFICO VIENTO KILOMETROS
G_vientoKm = new RadialGauge({
renderTo: "grafico_vientos_km",
units: "Rafagas",
minValue: 0,
maxValue: 220,
valueTextShadow: false,
valueInt: 1,
valueDec: 2,
colorValueBoxBackground: "#cccccc",
colorValueBoxShadow: true,
colorValueTextShadow: true,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100",
"120",
"140",
"160",
"180",
"200",
"220"
],
minorTicks: 10,
strokeTicks: true,
highlights: [
{
from: 40,
to: 80,
color: "rgba(255, 0, 0, .10)"
},
{
from: 80,
to: 120,
color: "rgba(255, 0, 0, .35)"
},
{
from: 120,
to: 160,
color: "rgba(255, 0, 0, .75)"
},
{
from: 160,
to: 220,
color: "rgba(255, 0, 0, .95)"
}
],
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear"
}).draw();
// GRAFICO PRESION ATMOSFERICA
G_presion = new RadialGauge({
renderTo: "grafico_presion",
units: "Hpa",
minValue: 970,
maxValue: 1050,
majorTicks: [
"970",
"980",
"990",
"1000",
"1010",
"1020",
"1030",
"1040",
"1050"
],
minorTicks: 10,
strokeTicks: true,
highlights: [
{
from: 1015,
to: 1050,
color: "rgba(200, 50, 50, .75)"
}
],
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
valueBox: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear"
}).draw();
// GRAFICO RAYOS UV
G_uv = new RadialGauge({
renderTo: "grafico_uv",
units: "UV",
minValue: 0,
maxValue: 11,
majorTicks: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"],
minorTicks: 1,
strokeTicks: true,
highlights: [
{
from: 0,
to: 2,
color: "rgba(57, 162, 1, 1)"
},
{
from: 2,
to: 5,
color: "rgba(57, 102, 1, 1)"
},
{
from: 5,
to: 7,
color: "rgba(200, 50, 50, 1)"
},
{
from: 7,
to: 9,
color: "rgba(255, 0, 0, 1)"
},
{
from: 9,
to: 11,
color: "rgba(92, 43, 136, 1)"
}
],
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
valueBox: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear"
}).draw();
// GRAFICO DE Iluminacia
G_iluminancia = new RadialGauge({
renderTo: "grafico_iluminancia",
units: "Klux",
minValue: 0,
maxValue: 300,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100",
"120",
"140",
"160",
"180",
"200",
"220",
"240",
"260",
"280",
"300"
],
minorTicks: 5,
strokeTicks: true,
highlights: [
{
from: 0,
to: 40,
color: "rgba(255, 255, 0, .15)"
},
{
from: 40,
to: 80,
color: "rgba(255, 255, 0, .35)"
},
{
from: 80,
to: 120,
color: "rgba(255, 255, 0, .45)"
},
{
from: 120,
to: 160,
color: "rgba(255, 255, 112, 1)"
},
{
from: 160,
to: 300,
color: "rgba(255, 255, 0, 1)"
}
],
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
valueBox: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear"
}).draw();
// Se setea la variable que ya se crearon los graficos
API_EMA.grafico = true;
}
//BUSCADOR DE ESTACIONES - MENU SUPERIOR
function MenuBuqueda (DatosEstaciones) {
var options = {
data: DatosEstaciones,
getValue: function (element) {
return element.ciudad + ", " + element.pais;
},
template: {
type: "custom",
method: function (value, item) {
var Estadospan='danger';
if (item.estado=="En línea") {Estadospan = 'success';}
return " "+item.estado+"
![]() | "+item.ciudad + ", " + item.pais + " Estación: "+item.nombre+" |