You are on page 1of 14

HTML

<div id="image_background">

<img id="display_background4" src="https://i.ibb.co/QFqcWCZ/Rojo.jpg" />

<img id="display_background5" src="https://i.ibb.co/34PmhK6/Azul.jpg" />

<img id="display_background6" src="https://i.ibb.co/QFqcWCZ/Rojo.jpg" />

<img id="display_background7" src="https://i.ibb.co/34PmhK6/Azul.jpg" />

<img id="display_background8" src="https://i.ibb.co/fQFD4FZ/Negro.jpg" />

<img id="display_background9" src="https://i.ibb.co/fQFD4FZ/Negro.jpg" />

<p> </p>

<span id="image_background_text">Sin datos</span>

<p1> </p1>

<span id="image_background_text2">Sin datos</span>

<p2> </p2>

<span id="image_background_text3">Sin datos</span>

<p3> </p3>

<span id="image_background_text4">Sin datos</span>

<p4> </p4>

<span id="image_background_text5">Sin datos</span>

<p5> </p5>

<span id="image_background_text6">Sin datos</span>

<p6> </p6>

<span id="image_background_text7">Sin datos</span>


<p7> </p7>
<span id="image_background_text8">Sin datos</span>
<p8> </p8>

<span id="image_background_text9">Sin datos</span>


<p9> </p9>

<span id="image_background_text10">Sin datos</span>

</div>

CSS

/* Add your CSS code below */


@import url('https://fonts.googleapis.com/css?family=Orbitron'); /* se
importa la fuente */

#image_background {

background: url('https://i.ibb.co/sCKMcqj/Curso.jpg') 0 / contain no-repeat;

font-family: "Orbitron";

font-size: 18px;

color:red;

font-weight: 400;

letter-spacing: 5px;

height: 800px;/*1220px*/;

width: 1050px;/*1450px*/;

#image_background p, #image_background_text {

margin: 0;

top: 278px;

left: 110px;
position: absolute;

#image_background p1, #image_background_text2 {

margin: 0;

top: 455px;

left: 315px;

position: absolute;

}
#image_background p2, #image_background_text3 {

margin: 0;

top: 530px;

left: 80px;

position: absolute;

#image_background p3, #image_background_text4 {

margin: 0;

top: 563px;

left: 80px;

position: absolute;

#image_background p4, #image_background_text5 {

margin: 0;
top: 598px;

left: 115px;

position: absolute;

#image_background p5, #image_background_text6 {

margin: 0;

top: 628px;

left: 80px;

position: absolute;

#image_background p6, #image_background_text7 {

margin: 0;

top: 660px;

left: 130px;

position: absolute;

#image_background p7, #image_background_text8 {

margin: 0;

top: 135px;

left: 780px;

position: absolute;

#image_background p8, #image_background_text9 {


margin: 0;

top: 165px;

left: 780px;

position: absolute;

#image_background p9, #image_background_text10 {

margin: 0;

top: 195px;

left: 780px;

position: absolute;

#display_background4 {
height: 30px;
position: absolute;
top:400px;
left:345px;
pointer-events: none;
}

#display_background5 {
height: 30px;
position: absolute;
top:300px;
left:560px;
pointer-events: none;
}

#display_background6 {
height: 30px;
position: absolute;
top:480px;
left:560px;
pointer-events: none;
}

#display_background7 {
height: 30px;
position: absolute;
top:300px;
left:737px;
pointer-events: none;
}
#display_background8 {
height: 30px;
position: absolute;
top:300px;
left:835px;
pointer-events: none;
}
#display_background9 {
height: 30px;
position: absolute;
top:300px;
left:934px;
pointer-events: none;
}

JAVA

// JavaScript code
var $bg4 = $('#display_background4');

var $bg5 = $('#display_background5');

var $bg7 = $('#display_background7');

var $text = $('#image_background_text');

var $text2 = $('#image_background_text2');

var $text3 = $('#image_background_text3');

var $text4 = $('#image_background_text4');

var $text5 = $('#image_background_text5');


var $text6 = $('#image_background_text6');

var $text7 = $('#image_background_text7');

var $text8 = $('#image_background_text8');

var $text9 = $('#image_background_text9');

var $text10 = $('#image_background_text10');

var lastValue = null;

var lastContrast = null;

var TOKEN = 'BBFF-jcJeW8Lhhg7LPmwrUGGymJgBEdPgZT';

var scale = d3.scaleLinear().range([0, 4]).domain([0, 1])

function getLastValue(variableId, token, cb) {

var url = 'https://industrial.api.ubidots.com/api/v1.6/variables/' +


variableId + '/values';

$.get(url, { token: token, page_size: 1 }, function (res) {

if (typeof cb === 'function') cb(res);

});

setInterval(function () {

// Get last value kWhs1

getLastValue('5dcd90381d8472564fd0343c' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {
console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text.text(value);

lastValue = value;

});

//Get last value kWhs2

getLastValue('5dcd923d1d8472574b92555d' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {

console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text2.text(value);

lastValue = value;

}
});
//Get last value alpha

getLastValue('5dcd93b41d84725af23c2458' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {

console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text3.text(value);

lastValue = value;

}
});

//Get last value beta

getLastValue('5dcd95d01d84726189904b29' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {

console.log('No data');

}
if ((lastContrast === null || value !== lastContrast.value) && value !==
null) {

value=value.toFixed(2);

$text4.text(value);

lastValue = value;

}
});

//Get last value TMS

getLastValue('5dcd97951d8472631f659b34' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {

console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text5.text(value);

lastValue = value;

}
});

//Get last value Tiempo

getLastValue('5dcd982a1d847263ce231bbc' , TOKEN, function (res) {

var value = null;


try {

value = res.results[0].value;

} catch (e) {

console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text6.text(value);

lastValue = value;

}
});

//Get last value Contador 51

getLastValue('5dcd99351d8472675688df0e' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {

console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text7.text(value);
lastValue = value;

}
});

//Get last value a

getLastValue('5dcedccb1d847225eef9c9d9' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {

console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text8.text(value);

lastValue = value;

}
});

//Get last value b

getLastValue('5dcedccf1d8472250d565570' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {
console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text9.text(value);

lastValue = value;

}
});

//Get last value C

getLastValue('5dcedcd41d8472223cf58f98' , TOKEN, function (res) {

var value = null;

try {

value = res.results[0].value;

} catch (e) {

console.log('No data');

if ((lastContrast === null || value !== lastContrast.value) && value !==


null) {

value=value.toFixed(2);

$text10.text(value);

lastValue = value;

}
});
// Opacity control image Relevador 51
getLastValue('5dcd90381d8472564fd0343c', TOKEN, function (res) {
var value = null;
try {
value = res.results[0].value;
} catch (e) {
console.log('No data');
}
if ((lastContrast === null || value !== lastContrast.value) && value !==
null) {
$bg4.css('filter', 'opacity(' + scale(value) + ')');
lastContrast = value;
}
});

// Opacity control image Relevador 21


getLastValue('5dcee29d1d847231c4ccc4f9', TOKEN, function (res) {
var value = null;
try {
value = res.results[0].value;
} catch (e) {
console.log('No data');
}
if ((lastContrast === null || value !== lastContrast.value) && value !==
null) {
$bg5.css('filter', 'opacity(' + scale(value) + ')');
$bg7.css('filter', 'opacity(' + scale(value) + ')');
lastContrast = value;
}
});

}, 500);

You might also like