Generera och modifiera SVG-grafik av data från sensorer anslutna till IoT med JavaScript
I denna sista del av artikelserien om teckning grafik med data från sensorer anslutna till Internet of Things, är det dags att prata om hur man genererar eller modifierar med JavaScript ritningar i format SVG och några av elementen html som fungerar som en behållare eller som presenterar kompletterande information till grafiken.
Målanvändarna av denna handledning är tänkta att bilda en elektronik- och datorprogrammeringsprofil. mikrokontroller, kanske de inte är bekanta med html, CSS o SVG; Av denna anledning gjordes i de tidigare avsnitten en kort introduktion till språket eller motsvarande teknik. I denna sista del är tillvägagångssättet lite annorlunda, eftersom läsarna säkert vet hur man programmerar, är det möjligt att använda språket C + + det, liksom JavaScript, delar grundläggande syntax med C och det kan användas som referens för att hoppa över de flesta av de grundläggande programmeringskoncepten och därmed fokusera på skillnaderna och den specifika användningen som intresserar oss för att skapa sensorgrafik i IoT.
Namnet ger en ledtråd till den första skillnaden: JavaScript Det är ett programmeringsspråk skript (bindestreck) och som sådan är det tolkas, det finns inget behov av att kompilera det; det sammanhang i vilket skript (en webbläsare, till exempel) kommer att läsa, översätta och utföra beställningarna. För att vara exakt finns det i de flesta fall en runtime compilation (JIT), men för kodskrivningsprocessen JavaScript Det påverkar oss inte, vi skriver helt enkelt koden och det kan fungera.
Namnet innehåller också den första förvirringen: JavaScript har inte det minsta förhållande till java. Inledningsvis när det utvecklades Netscape för sin webbläsare kallades den först Mocha och sedan det mindre förvirrande LiveScript. Efter dess framgångsrika implementering i webbläsare, och överskridande av dem, standardiserades den som ECMAScript (Vid ECMA-262, version 6 i skrivande stund) för att bli neutral med avseende på webbläsare som implementerar det. För närvarande finns det också en standard ISO från version 5, 2011 (ISO / IEC 16262: 2011 vid tidpunkten för att skriva artikeln)
Variabler, grundläggande datatyper och objekt i JavaScript
Till skillnad från vad som händer till exempel i C + +, en JavaScript datatyp som inte ingår när en variabel deklareras och även typen som är associerad med en variabel inte är fixerad, är det möjligt att tilldela ett värde av en annan typ under hela programmets körning.
|
1
2
3
4
5
6
7
|
var cosa;
cosa=“texto”;
console.log(typeof cosa); // Debería mostrar string en la consola
cosa=123;
console.log(typeof cosa); // Debería mostrar number en la consola
cosa={temperatura:22,corriente:1.5};
console.log(typeof cosa); // Debería mostrar object en la consola
|
I det föregående exemplet har variabeln "sak" deklarerats (utan att ange datatyp) sedan tilldelas data av en annan typ och den konsulteras med typeof typen som JavaScript som han har tolkat. För att felsöka koden kan du skriva den i webbläsarens inspektörskonsol (vilket inte kommer att påverka presentationen av webben) med console.log().
För att tvinga fram konvertering av data till en specifik typ, speciellt text till numerisk, kan du använda funktioner som t.ex parseInt() o parseFloat() som omvandlas till heltal respektive flyttal. Den motsatta konverteringen kan göras med String(), även om det är osannolikt att det är nödvändigt eftersom automatisk konvertering vanligtvis räcker. Med parseFloat()Du kan till exempel få värdet på en webbsideegenskap, som bredd eller höjd på ett objekt, som inkluderar enheter; På detta sätt uttrycket parseFloat("50px"); kommer att returnera 50, ett numeriskt värde, som ett resultat.
En JavaScript det finns ingen skillnad mellan dubbla och enkla citattecken; Datatypen i båda fallen är string, och var och en av dem kan inkludera den andra utan behov av escape-koder.
|
1
2
3
4
5
6
7
8
9
10
|
var texto;
console.log(typeof texto); // Debería mostrar string en la undefined
texto=“esto es un texto”;
console.log(typeof texto); // Debería mostrar string en la consola
texto=‘A’;
console.log(typeof texto); // Debería mostrar string en la consola
texto=“esto es un ‘texto'”;
console.log(typeof texto); // Debería mostrar string en la consola
texto=‘”A”‘;
console.log(typeof texto); // Debería mostrar string en la consola
|
I föregående exempel kan man se att en variabel, när den har deklarerats (finns) men inte har tilldelats något värde, innehåller en odefinierad datatyp (undefined). Ett otilldelat objekt har värdet null; Det vill säga objektet existerar, men utan värde; en variabel som refererade till den skulle inte ha en typeof undefined men object. Ett objekt kan också vara tomt, det vill säga inte null men inte ha några egenskaper.
till definiera ett objekt i JavaScript är inneslutna i hängslen ({ y }) egenskaperna eller metoderna, åtskilda av kolontecknet (:) egenskapens namn egenskapens värde och med kommatecken (,) de olika egenskaperna. Du kan hitta mer information om detta sätt att uttrycka ett objekt i artikeln om JSON-format.
Även om du kan använda syntax som kan få dig att tänka annorlunda, en JavaScript Det finns inga klasser utan prototyperDet vill säga för att ett objekt ska ärva egenskaper och metoder skapas ett annat objekt (prototypen) som de andra (barnen) använder som referens. Syntaxen närmast stilen av JavaScript att använda en prototyp är Object.create även om det också är möjligt (och ibland användbart) att använda new som i andra objektorienterade språk.
|
1
2
3
4
|
var perro=new Mamifero(); // Esto funciona, pero no es exactamente el nuevo estilo JavaScript
console.log(perro instanceof Mamifero);
var gato=Object.create(Mamifero); // Crear un objeto usando un prototipo al estilo JavaScript
console.log(Mamifero.isPrototypeOf(gato));
|
till fråga om ett objekt är en instans av ett annat, om du använder den som en prototyp, om du ärver dess egenskaper, kort sagt, du kan använda instanceof (skapat med new) Eller isPrototypeOf (skapat med Object.create) som kommer att utvärderas till sant när objektet använder prototypen och till falskt när det inte gör det.
När ett objekt väl har skapats med ett annat som prototyp, det vill säga när ett objekt har instansierats, kan det vara lägga till nya egenskaper eller åsidosätta prototypegenskaper använder punktsyntax som i gato.peso=2.5.
La arrayer i JavaScript De skiljer sig från dem du förmodligen känner i C. Till att börja med deklareras de utan att deras längd behöver anges, endast med tecknen på att öppna och stänga hakparenteser ([ y ]), kan komponenter vara heterogena (olika datatyper i samma array) och nya element kan läggas till utan att begränsas till en gräns. Matriserna för JavaScript är faktiskt listor (samlingar) av element till vilka refereras av ett numeriskt index eller med ett namn. En array kan samtidigt innehålla numeriska index och elementnamn, men det är vanligt att använda objekt (egenskaper) för att utnyttja den andra typen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// Declarar matrices (arrays)
var preparada=[]; // La matriz ha sido declarada pero (todavía) no contiene valores
var cosas=[“silla”,“mesa”,“caja”]; // Matriz declarada con componentes formada por cadenas de texto
var valores=[200,“lleno”,0.5,true,“simple”,false,false,10]; // Matriz declarada con componentes heterogéneos
var ramas=[20,“abc”,[1,2,3],false,[10,20,[“uno”,“dos”]]]; // Matriz que contiene matrices
var demode=new Array(10,20,30,4,3,2,1); // La sintaxis con new no es la preferida de JavaScript aunque funciona…
var peligrosa=new Array(10); // …pero con el riesgo de confundir índices con elementos: la matriz peligrosa tiene 10 elementos, no un elemento de valor 10
// Acceder a los valores de la matriz
preparada.push(33.33); // Añade un nuevo valor al final de la matriz
console.log(“La matriz ‘preparada’ contiene “+preparada.length+” elementos”); // Ahora contine 1 elemento
console.log(cosas[0]); // Muestra en la consola el primer valor de la matriz (las matrices empiezan en el índice cero)
cosas[2]=“tarro”;
preparada[10]=50; // Los índices no tienen que ser consecutivos
console.log(“La matriz ‘preparada’ contiene “+preparada.length+” elementos”); // Ahora contine 11 elementos
console.log(“Elemento sexto: “+preparada[5]); // undefined
// Verificar si una variable es (apunta a) una matriz
console.log(Array.isArray(cosas)); // Nuevas versiones de JavaScript (ECMAScript versión 5 o superior)
console.log(cosas instanceof Array); // Implementaciones de JavaScript (ECMAScript) más viejas
// Para esto es mejor usar objetos
var frutas=[];
frutas[“peras”]=20;
frutas[“manzanas”]=30;
frutas[4]=10;
console.log(frutas.peras);
console.log(frutas[“manzanas”]);
console.log(frutas[4]);
console.log(frutas[3]); // undefined
|
Som kan ses i föregående exempel, för att veta om en variabel motsvarar en instans av en array (det är ett array-objekt) kan du använda instanceof, som redan har använts med generiska objekt eller, i nyare versioner av JavaScript du kan ta till Array.isArray()
För att komma åt elementen i arrayen kan du använda dess index (matriz[7]) eller av egenskapens namn med namnet inom hakparenteser (matriz["nombre"]) eller med den vanliga punktsyntaxen för objekt (matriz.nombre). Eftersom namnet är en textsträng kan ett uttryck, inklusive variabler, användas för att komponera det. För att gå igenom en array med egenskaper kan en loop med formatet användas for(propiedad in matriz).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var matriz=[];
matriz[“color”]=“verde”;
matriz[“grosor”]=10;
matriz[“estado”]=“nuevo”;
matriz[0]=25.0;
matriz[1]=“uno”;
for(propiedad in matriz)
{
console.log(propiedad+” valor “+matriz[propiedad]);
}
/* El resultado en la consola será:
0 valor 25
1 valor uno
color valor verde
grosor valor 10
estado valor nuevo
*/
|
Det är intressant för vårt mål att behandla objektet Date, för att representera och hantera datum och tid i JavaScript. Objektet kan instansieras utan data, så det kommer att ta aktuellt datum och tid, eller så kan det skapas genom att ange ett datum som ett värde, antingen i millisekunder sedan 1 januari 1970 (t.ex. Unix-tid eller POSIX-tid men uttryckt i millisekunder istället för sekunder) eller ange separata värden för år, månad, dag, timme...
Objektet innehåller en komplett serie av metoder för att fråga eller ställa in datum och tid:
-
now()
Returnerar aktuellt datum och tid uttryckt i millisekunder sedan 1 januari 1970 -
getTime()|setTime()
Hämtar respektive ändrar tidsvärdet i millisekunder sedan 1 januari 1970. AnvändavalueOf(), vilket är en metod som finns i de flesta objekt, erhålls också värdet av motsvarande Date-objekt, som t.exgetTime()med Unix-tid eller POSIX-tid uttryckt i ms. -
getMilliseconds()|setMilliseconds()
Används för att fråga eller ställa in bråkdels millisekundsdelen av objektetDatepå vilken den utförs. Om det konsulteras är det erhållna värdet mellan 0 och 999 men större värden kan tilldelas som kommer att ackumuleras i det totala datumet och tiden så, liksom resten av get-metoderna, tjänar det till att öka värdet på objektetDate(eller minska den om negativa värden används). -
getSeconds()|setSeconds()
Returnerar respektive ändrar värdet på objektets sekunderDate. -
getMinutes()|setMinutes()
Används för att konsultera eller ställa in protokollet för objektetDate. -
getHours()|setHours()
Låter dig konsultera eller ändra timmarna (från 0 till 23) för objektetDate. -
getDay()
Returnerar veckodagen för datumet, uttryckt som ett värde från 0 till 6 (söndag till lördag). -
getDate()|setDate()
Returnerar eller ändrar dagen i månaden för objektetDatepå vilken den tillämpas. -
getMonth()|setMonth()
Används för att konsultera eller ändra objektets månadsnummerDate. -
getFullYear()|setFullYear()
Frågar eller ställer in årsvärdet på objektet som innehåller datum och tid.
De tidigare metoderna för Date inkludera en version UTC att direkt kunna arbeta med universell tid utan att behöva göra mellanberäkningar. I den meningen har t.ex. getHours() har en version getUTCHours() o getMilliseconds() ett alternativ getUTCMilliseconds() att arbeta alternativt med den officiella (lagliga) eller universella tiden. Med getTimezoneOffset() Du kan känna till skillnaden som finns mellan universell tid och lokal officiell tid.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var dia_semana=[“domingo”,“lunes”,“martes”,“miércoles”,“jueves”,“viernes”,“sábado”];
var nombre_mes=[“enero”,“febrero”,“marzo”,“abril”,“mayo”,“junio”,“julio”,“agosto”,“septiembre”,“octubre”,“noviembre”,“diciembre”];
var digitos_hora;
var hoy=new Date();
var texto_hoy=“”;
texto_hoy+=“Hoy es “;
texto_hoy+=dia_semana[hoy.getDay()];
texto_hoy+=“, “;
texto_hoy+=hoy.getDate();
texto_hoy+=” de “;
texto_hoy+=nombre_mes[hoy.getMonth()];
texto_hoy+=” de “;
texto_hoy+=hoy.getFullYear();
texto_hoy+=” y son las “;
digitos_hora=hoy.getHours();
texto_hoy+=digitos_hora>9?digitos_hora:“0”+digitos_hora;
texto_hoy+=“:”;
digitos_hora=hoy.getMinutes();
texto_hoy+=digitos_hora>9?digitos_hora:“0”+digitos_hora;
texto_hoy+=“:”;
digitos_hora=hoy.getSeconds();
texto_hoy+=digitos_hora>9?digitos_hora:“0”+digitos_hora;
|
JavaScript-funktioner
Om du läser detta vet du säkert hur man programmerar. mikrokontroller en C in C + + och känna till funktionsbegreppet. Även om grundidén är densamma, i JavaScript Sättet de definieras och används på är lite annorlunda. Till att börja med har det redan sagts, JavaScript Den använder inte explicit datatyper så du behöver inte ange det när du definierar funktionen. Att följa, Det är inte obligatoriskt för en funktion att ha ett namn, de kan vara anonyma. De kan associeras med en variabel för att anropa dem, men det kanske inte heller är nödvändigt eftersom det ibland är användbart att anropa dem omedelbart, för vilka parenteser och parametrar läggs till efter definitionen av funktionen.
För att definiera en funktion, prefix function, om tillämpligt, skriv namnet, argumenten (parametrarna som skickas till funktionen) inom parentes och koden som kommer att köras när funktionen anropas inom klammerparenteser.
|
1
2
3
4
5
|
function doble(numero)
{
var resultado=numero*2;
return resultado;
}
|
Visst, i det föregående exemplet behövdes inte variabeln "resultat", men det är en bra ursäkt för att komma ihåg varierande omfattning, vilket fungerar som du förväntar dig: "resultat"-variabeln finns bara inom "dubbel"-funktionen. I JavaScript kan också användas letistället för var, för att omfånga en variabel till en kodblockskontext (omsluten av hängslen, { y })
När man pratade om objekt i föregående avsnitt saknades något grundläggande: egenskaper har definierats men metoder har inte definierats. Som förväntat, objektmetoder är funktioner, de har inget namn och används (anropas) från (egenskaps)namnet som tilldelas av objektdefinitionen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
termostato=
{
temperatura_actual:0.0,
temperatura_frio:18.5,
temperatura_calor:22.0,
consumo:0,
ver_temperatura:
function()
{
console.log(“Temperatura actual: “+this.temperatura_actual+” °C”);
}
}
|
I det föregående exemplet finns det redan en metod, "view_temperature", som visar värdet för egenskapen "current_temperature" genom konsolen. Det är inte särskilt användbart, men det ger en mer komplett uppfattning om hur definitionen av ett objekt är JavaScript.
För att komma åt metoderna för ett objekt (funktioner) till dess egenskaper, använd this, som i föregående exempel på rad 11, när du använder egenskapen "current_temperature".
Få åtkomst till Document Object Model (DOM) med JavaScript
från JavaScript Du har tillgång till innehållet på webbsidan som den körs på, samt vissa aspekter av webbläsaren som visar den sidan, dock inte till systemresurser. Datastrukturen som stöder egenskaperna och metoderna som nås från JavaScript del av fönsterobjektet, specifikt innehållet i objektet (dokumentet html) motsvarar objektet document. Även om det ibland används för tydlighetens skull, är det inte nödvändigt att föregå fönster till metoderna eller egenskaperna för att referera till dem, det räcker till exempel att använda document, det finns inget behov av att skriva namnet på rotobjektet som i window.document, så länge det aktuella fönstret refereras.
Den mest använda formen av hitta ett objekt i dokumentet html Det är genom metoden getElementById(), till vilket det id som angavs när koden skapades skickas som ett argument html. Av det som förklarats i tidigare avsnitt är det lätt att anta att du även kan komma åt komponenterna inuti objektet document använder punktsyntax (document.componente) eller parenteser med både namnet (document["componente"]), den mest användbara, såsom det numeriska indexet, svår att använda och opraktisk när du kommer åt innehållet på en manuellt sammansatt webbsida.
med JavaScript kan hämta elementet som innehåller ett annat element (element eller överordnad nod) konsultera din fastighet parentNode eller din egendom parentElement, skillnaden är att det överordnade elementet (parentElement) av det sista elementet i strängen DOM Den är null (null) och föräldernoden (parentNode) är själva dokumentet (document).
till ändra innehållet i ett element htmlt.ex. en etikett <div>, Det kan användas innerHTML och för att ändra dess egenskaper kan du välja att tilldela den en annan klass className eller ändra dess egenskaper individuellt med style. Att konsultera stilen som visas av ett element på webbsidan är inte nödvändigtvis användbart style eftersom det kan bero på flera faktorer eller helt enkelt inte har specificerats uttryckligen. För att kontrollera stilen på ett element som slutligen visas på webbsidan, används metoden getComputedStyle.
Till ett dokumentelement html Flera klasser kan tilldelas den för att bestämma dess utseende och beteende hantera listan med klasser för ett objekt från JavaScript du kan ta till classList som erbjuder metoderna add för att lägga till en ny klass till listan, remove att ta bort det, toggle för att ersätta den eller konsultera innehållet i klasslistan för ett element med item och contains, som returnerar klassen som har en viss position i listan och ett värde true o false om en viss klass finns på listan eller inte.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var contenedor_temperatura=document.getElementById(“temperatura”); // Encontrar el div con id=”temperatura”
contenedor_temperatura.innerHTML=“”; // Eliminar el contenido provisionalmente para que no se vean los cambios
contenedor.className=“bloque_temperatura”; // Asignar una nueva clase
if(temperatura>20) // Si la temperatura es mayor que 20 °C…
{
contenedor.style.color=“#FF6666”; // …usar el color rojo en lugar del color normal de la clase
}
contenedor_temperatura.innerHTML=“La temperatura es “+temperatura+” °C”; // Cuando el aspecto esté preparado mostrar el valor
if(document[“titulo”].classList.contains(“estilo_titulo”)) // Si el objeto “titulo” tiene la clase “estilo_titulo”…
{
if(document[“titulo”].classList.contains(“general”)) // …y la clase “general”…
{
document[“titulo”].classList.remove(“general”); // …quitar la clase “general”
}
}
else // Si el objeto “titulo” no tiene la clase “estilo_titulo”…
{
document[“titulo”].classList.add(“estilo_titulo”); // …añadir la clase “estilo_titulo” (da igual que tenga o no la clase “general”)
}
|
I föregående exempel är den placerad med getElementById objektet du vill manipulera (ett element <div> för hans id), innan du ändrar utseende, raderas innehållet genom att tilldela med innerHTML en tom textsträng, den tilldelas en ny klass med className och dess stil är modifierad med style beroende på innehållets värde (temperatur), ändra färgen, om tillämpligt, genom fastigheten color. När aspekten är etablerad skrivs värdet med igen innerHTML.
I den andra delen av exemplet ovan (rad 9 till 19) nås ett kodelement html använder syntaxen document[] och fastigheten id av elementet för att ändra dess klasslista med metoden classList.remove() och med metodenclassList.add(), baserat på resultatet av flera frågor som utförs i villkorliga körningar, som de jämför med classList.contains().
När kommer det att hänvisa till ett element html flera gånger genom hela koden JavaScript, det är lite mer effektivt att tilldela den till en variabel eller använd dess index istället för namnet eftersom annars metoden du skulle använda JavaScript För att få det varje gång skulle det krävas att man sökte efter dess namn, vilket skulle ta lite mer tid än om en variabel hade åtkomst.
till lägga till nya objekt i dokumentet html, kan de skapas först med metoden createElement de document och senare införliva dem med resten av elementen vid den punkt av trädet som är nödvändigt med appendChild. Att skapa ett objekt XML, som föremål SVG som vi använder för att rita grafen över IoT-sensorerna kan du använda createElementNS (NS för namnutrymme). Som förklarat när vi pratar om formatet SVG, namnutrymmet som motsvarar det (för den aktuella versionen) är http://www.w3.org/2000/svg, som bör skickas till createElementNS som ett argument tillsammans med elementtypen, svg, I detta fall.
en alternativ till innerHTML för att lägga till text som innehåll i ett dokumentelement html är metoden createTextNode() av objektet document. Med detta alternativ kan du skapa ny text (som senare nås om den tilldelas en variabel) som införlivas i objektträdet med metoden appendChild(). som alternativ till appendChild(), som lägger till det nya innehållet i slutet av det som redan finns i noden som det läggs till, kan du använda metoden insertBefore(), som lägger till ett nytt objekt framför ett befintligt. ha på sig insertBefore() istället för appendChild() tillhandahåller en metod som tjänar till att t.ex sortera nya objekt framför befintliga när ett element måste vara framför ett annat (som i en lista) eller täcka eller vara täckt i en grafisk struktur där det finns element närmare förgrunden eller bakgrunden.
Reagera på händelser med JavaScript
När sättet att använd en webbsida som en behållare för IoT-anslutna sensorgrafer den användes onload I etiketten <body> för att börja rita grafen. Denna egenskap, associerad med kodobjekten html, hänvisar till Händelser JavaScript. Som redan förklarats kör den en funktion när sidan har laddats. Även om det har associerats med koden html för att ha det mer i åtanke kunde det ha skrivits i koden JavaScript som body.onload=dibujar; vara dibujar namnet på funktionen som ska startas när webbsidan laddas.
I de senaste versionerna av JavaScript händelser kan associeras med funktioner som använder addEventListener med formatet objeto.addEventListener(evento,función); eller använda syntaxen objeto.evento=función; som fungerar även i äldre implementeringar. För att ta bort länken till funktionen som är kopplad till händelsen har du removeEventListener som har samma format som addEventListener.
JavaScript Det är kapabelt att reagera på en mängd händelser som kan inträffa på en webbsida. Till exempel kan den upptäcka när ett element klickas html med onmousedown, eller när du klickar med onclick, när en tangent trycks ned med onkeydown, genom att manövrera rullningslisten med onscroll. För vårt syfte räcker det för oss upptäcka sidladdning med onload och dess storleksändring med onresize. Vi kommer att associera dessa händelser med objekten body y window del DOM respektive. Den första kan tilldelas i koden html, som sett och den andra i koden JavaScript inuti funktionen som anropas av den första och med formatet window.onresize=redimensionar; vara redimensionar funktionen som kommer att anropas varje gång fönstret ändrar storlek.
Kör efter ett tidsintervall
JavaScript har två resurser för uppskjuten utförande: setTimeout, som utför en funktion efter ett tidsintervall och setInterval som kommer att utföra en funktion varje visst tidsintervall. Båda metoderna kräver som parametrar (1) den anropade funktionen och (2) tidsintervallet uttryckt i millisekunder. För att stoppa deras operation kan du tilldela resultatet som returneras av dessa funktioner till variabler och skicka dem som ett argument till clearTimeout honom clearInterval när du inte vill anropa dem igen (eller när du inte vill att de ska köras för första gången) setTimeout o setInterval respektive.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var cuenta_atras=setTimeout(descansar,1000*60*20); // Recordar que hay que descansar cuando pasen 20 minutos
var repeticion=setInterval(consultar_correo,1000*60*5); // Revisar el correo cada 5 minutos
function descansar()
{
alert(“Puedes descansar un rato”); // Esto solamente aparecerá una vez
}
function consultar_correo()
{
alert(“Revisa el correo electrónico”); // Esto aparecerá cada cinco minutos
}
function detener_cuenta_atras() // No utiliza argumentos sino la variable global
{
clearTimeout(cuenta_atras); // Detener la cuenta atrás para avisar a los 20 minutos
}
function no_avisar_lectura_correo() // No utiliza argumentos sino la variable global
{
clearInterval(repeticion); // Dejar de avisar cada 5 minutos
}
|
I det föregående exemplet introduceras metoden alert som tjänar till att visa en varningsskylt. Även om det användes flitigt tidigare, är det för närvarande nästan förbjudet från koden JavaScript på grund av hur aggressivt (påträngande) det är att täcka webbsidan med en dialogruta.
I ett program skrivet för en mikrokontroller av en liten serie (som den på tallriken Arduino Uno) är det vanligt att använda globala variabler, som i föregående exempel i JavaScript, eftersom koden är kort och inte särskilt förvirrande, eftersom funktionerna många gånger implementeras ad hoc och för att användningen av globala variabler gör att minnesanvändningen kan förutsägas på ett mycket enkelt och intuitivt sätt, vilket är avgörande i system med få resurser. Istället, en JavaScript Det är vanligt att minska användningen av globala variabler till ett minimum. eftersom det inte behöver skynda på minnesanvändningen, eftersom det körs normalt på en CPU med resurser som är mycket överlägsna en MCU, eftersom det sannolikt kommer att samexistera med mycket tredjepartskod som det måste fungera med utan att störa och eftersom det är ett öppet system kan det framtida exekveringskontextet inte förutsägas (programmet för en mikrokontroller small bestämmer helt dess funktion utan att lägga till mer kod när den väl är i bruk) och eftersom dimensionerna på applikationerna kan göra läsning svår om koden inte kapslar in dess funktion, vilket gör metoderna så fristående som möjligt.
Matematiska operationer med JavaScript Math-objektet
De matematiska operationerna för mer komplicerade matematiska beräkningar är grupperade i objektet Math. Detta objekt används direkt, det är inte nödvändigt att instansiera det för att använda metoderna eller egenskaperna (konstanter) som det innehåller.
Math.abs(n)Absolutvärde för parameter nMath.acos(n)Arccosinus för parameter n (resultat i radianer)Math.asin(n)Arcsinus för parameter n (resultat i radianer)Math.atan(n)Arktangens för parameter n (resultat i radianer)Math.atan2(n,m)Arktangens av n/m (resultat i radianer)Math.ceil(n)Avrunda parametern till närmaste heltal uppåtMath.cos(α)Cosinus för parameter α (α i radianer)Math.Ee-nummer (≃2.718281828459045)Math.exp(n)e höjt till parametern n: enMath.floor(n)Avrunda parameter n till närmaste heltal nedåtMath.log(n)Naturlig logaritm (bas e) för parameter nMath.LN2Naturlig logaritm (bas e) av 2 (≃0.6931471805599453)Math.LN10Naturlig logaritm (bas e) av 10 (≃2.302585092994046)Math.LOG2EBas 2-logaritm av e (≃1.4426950408889634)Math.LOG10EBas 10-logaritm av e (≃0.4342944819032518)Math.max(a,b,c,…)Största värdet i listan över parametrar som har passeratsMath.min(a,b,c,…)Det minsta värdet i listan med parametrar som skickatsMath.PINummer π (≃3.141592653589793)Math.pow(n,m)Första parametern n höjd till den andra parametern m: nmMath.random()(Nästan) slumptal mellan 0.0 och 1.0Math.round(n)Avrunda parameter n till närmaste heltalMath.sin(α)Sinus för parameter α (α i radianer)Math.sqrt(n)Kvadratroten av parameter nMath.SQRT1_2Kvadratroten av 1/2 (≃0.7071067811865476)Math.SQRT2Kvadratroten ur 2 (≃1.4142135623730951)Math.tan(α)Tangent för parameter α (α i radianer)
Ladda data från servern med AJAX
Metoden som följs för att rita informationen som lagras i IoT består av att då och då ladda data från servern och rita om grafen som de representeras med. För att läsa data från servern används teknik AJAX (asynkron JavaScript och XML) genom ett föremål XMLHttpRequest de JavaScript. Att plotta datagrafen görs genom att återanvända ett objekt SVG som redan finns i koden html och som innehåller en plot vars koordinater är modifierade för att få dem att motsvara den nya data som laddas.
I exemplet med detta förslag uppdateras, förutom uppdatering av ritningen, även en text på webbsidan som visar datum och värde för senast uppmätta data för varje graf.
På serversidan finns en databas som innehåller informationen att sensorer kopplade till IoT har övervakat. Denna databas läses av objektbegäran XMLHttpRequest svarar med information kodad i JSON-format, även om namnet på den använda metoden antyder ett samband med formatet XML.
I den första polaridad.es handledning om IoT-datalagring Du kan se ett exempel på en infrastruktur för att hantera, från serversidan, informationen som tillhandahålls av enheter anslutna till Internet of Things. I denna artikelserie används en server som en resurs Apache där du kan använda programmeringsspråket PHP för att komma åt en databas MySQL o mariadb. På servrar som används för att stödja IoT är det mycket vanligt att hitta databaser MongoDB (NoSQL) och programmeringsspråket JavaScript på node.js som mjukvaruinfrastruktur.
Nästa funktion ansvarar för att begära de senaste data från en av sensorerna från servern. I funktionsanropet används objektet som ett argument JavaScript som stöder den data som ritas. Om samma graf representerar flera värden, till exempel för att visuellt söka efter en korrelation, kan en begäran göras till servern att returnera flera samtidigt, en mer optimal metod på grund av hur servern fungerar. HTTP-protokoll.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
function consultar_ultimo_valor_sensores(objeto_grafico)
{
var consulta=‘zona=”+objeto_grafico.sufijo_nombre;
var pagina=“ultimo_valor_sensor.php”;
var resultado;
var ajax;
if(window.XMLHttpRequest)
{
ajax=new XMLHttpRequest(); // ajax=Object.create(XMLHttpRequest);
}
else // Versiones antiguas de MS Internet Explorer
{
ajax=new ActiveXObject(“Microsoft.XMLHTTP”);
}
ajax.onreadystatechange=
function()
{
if(ajax.readyState==4&&ajax.status==200&&ajax.responseType==“json”)
{
resultado=JSON.parse(ajax.responseText);
if(resultado.fecha>objeto_grafico.fecha[objeto_grafico.fecha.length–1])
{
// Normalmente se gestionará la respuesta utilizando el objeto
redibujar_grafico(objeto_grafico,resultado);
// Si los datos son sencillos y tienen una estructura clara puede ser más práctico usarla directamente
// redibujar_grafico(objeto_grafico,[resultado.fecha,resultado.temperatura]);
}
}
}
ajax.open(“POST”,pagina);
ajax.setRequestHeader(“Method”,“POST “+pagina+” HTTP/1.1″);
ajax.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
ajax.setRequestHeader(“Content-length”,consulta.length);
ajax.setRequestHeader(“Connection”,“close”);
ajax.send(consulta);
}
|
I den tredje raden i föregående exempel förbereds frågan som kommer att göras till servern, där "zon"-argumentet kommer att skickas, vars värde kommer att vara namnet eller koden för den övervakade platsen eftersom information om område kan samexistera i samma databas olika sensorer (till exempel termometrar som mäter temperaturen i olika rum). Parametern som skickas till föregående funktion, objektet med diagramdata, förväntas inkludera en egenskap med namnet på rummet ("namnsuffix").
Mellan raderna 7 och 14 i den föregående koden visas objekt XMLHttpRequest som lagras i variabeln "ajax". Innan du väljer hur du ska skapa objektet söker du window om XMLHttpRequest var inte tillgänglig (något som hände i gamla versioner av Microsofts explorer och även om det ligger långt efter, fungerar det som ett exempel på alternativ för att skapa objektet med hjälp av (mer inbyggd) syntax) Object.create o new, liknande det för andra objektorienterade språk.
För att kunna hantera svaret omedelbart förbereds koden som hanterar det på rad 15 till 26 innan begäran görs till servern.
Vägen till utföra frågan HTTP till servern består av öppna en anslutning med open anger typ och sida (valfritt användarnamn och lösenord), förbereda rubrikerna av protokollet med setRequestHeader y skicka förfrågan med send. Rubriken HTTP Content-length du måste veta längden på frågan (antal tecken) som beräknas med hjälp av length.
När begäran AJAX är klar, exekveras funktionen som är kopplad till händelsen onreadystatechange. Istället för att tilldela en funktion, definieras i föregående exempel en anonym funktion i farten som kommer att hantera mottagningen av data som kommer från servern. Först och främst, på rad 18, verifieras att statusen för begäran är "klar", vilket motsvarar värdet 4 av fastigheten readyState, att statusen är "OK" för HTTP-protokoll (koda 200) som kan erhållas från fastigheten status och att de uppgifter som har kommit är JSON-format, konsultera fastigheten responseType.
När du har verifierat att statusen för svaret är som förväntat, i rad 20 i föregående exempel skapar ett objekt med resultatet och konverterar texten JSON. Svaret tillhandahåller ett datum som ska returneras, detta gör att vi kan se om resultatet som servern skickar redan tidigare varit representerat i grafen, som verifieras på rad 21. Om data är ny, på rad 23 Funktionen som ansvarar för att rita om grafen med den nya informationen kallas.
Tanken när man föreslår denna läsmetod är att uppgifterna kommer att uppdateras mycket ofta. Om informationen som presenteras motsvarar en lång sikt (som temperaturerna för en dag eller en vecka), kan en första begäran implementeras som samlar in all tillgänglig data och sedan en, liknande den i exemplet, som uppdaterar den i periodkorrespondenten.
Generera slumpmässiga data för testning
När all server- och klientinfrastruktur är klar kommer en funktion som den i föregående avsnitt att ansvara för att läsa data och rita grafen med den, men I testfasen kan det vara mer praktiskt att använda slumptal inom ett kontrollerat område för att se om koden som skrivs är korrekt. Följande funktion kan fungera som ett exempel för att hämta data när du bygger den slutliga applikationen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function consultar_ultimo_valor_sensores
(
objeto_grafico,// Objeto dentro del elemento SVG que representa el trazado
valor_maximo, // Valor máximo
valor_minimo, // Valor mínimo
margen_valor // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo
)
{
// La forma más genérica es usar objetos
/*
var nuevo_valor_inventado=
{
fecha:Math.round(Date.now()+Math.random()*1000),
temperatura:Math.random()*Math.abs(valor_maximo-valor_minimo)+valor_minimo
};
*/
// En este caso concreto, como son pocos datos y con una estructura concreta es más práctico usar un vector
var nuevo_valor_inventado=
[
Math.round(Date.now()+Math.random()*1000),
Math.random()*Math.abs(valor_maximo–valor_minimo)+valor_minimo
];
redibujar_grafico(objeto_grafico,nuevo_valor_inventado);
}
|
Istället för att läsa informationen från en databas genererar exemplet ovan dem slumpmässigt och skickar dem till funktionen som ansvarar för att rita grafen. Den uppfunna datan är en vektor som bildas av ett datum uttryckt som ett värde i millisekunder, ögonblicket för registrering av sensorinformationen och den övervakade datan, som ligger mellan ett maxvärde och ett minimivärde.
I det här exemplet, när ett datum genereras kan det fördröjas upp till en sekund (1000 millisekunder) i förhållande till datumet vid tidpunkten för uppfinningen. Som Math.random() genererar ett tal mellan 0.0 och 1.0, multiplicera det med 1000 ger ett tal mellan 0 och 1000 som sedan omvandlas till ett heltal. På samma sätt erhålls värdet genom att multiplicera slumptalet med intervallet (max minus minimum) och lägga till minimum.
Rita grafen för IoT-sensorer med ett SVG-diagram
Eftersom vi har sett hur vi kan erhålla de värden som vi vill representera (temperatur, i exemplet) och deras tidsmässiga läge, som kan uttryckas tillsammans i form av koordinater, visar exemplet nedan en funktion för att rita en bana som förenar dessa punkter och eventuellt ett färgat område avgränsat av den linjen längst upp. Resultatet skulle bli som på följande bild.
Den horisontella axeln (X) i grafen representerar tid och den vertikala axeln (Y) de värden som sensorerna anslutna till IoT har övervakat. Det horisontella intervallet är några sekunder eftersom grafen i detta förslag uppdateras mycket ofta (till exempel varje sekund) för att ge nästan realtidsinformation om sensorernas status.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
function actualizar_grafico
(
grafico, // Objeto SVG con el que se dibuja la gráfico
coordenada, // Matriz con las coordenadas del trazado formada por pares [tiempo,valor] ordenados primero el más antiguo (tiempo menor) último el más nuevo
tiempo_total_representado, // Tiempo total representado por la gráfico (en milisegundos)
valor_maximo, // Valor máximo aceptable antes de emitir una alarma
valor_minimo, // Valor mínimo aceptable antes de emitir una alarma
margen_valor, // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo
parametro_cerrado, // Valor booleano que indica si el trazado se cierra o no (por defecto false)
parametro_ancho_caja, // Ancho de la caja que contiene la gráfico (por defecto 100.0)
parametro_alto_caja // Alto de la caja que contiene la gráfico (por defecto 100.0)
)
{
var cerrado=parametro_cerrado||false; // Valor booleano que indica si el trazado se cierra o no (por defecto false)
var ancho_caja=parametro_ancho_caja||100.0; // Ancho de la caja que contiene la gráfico (por defecto 100.0)
var alto_caja=parametro_alto_caja||100.0; // Alto de la caja que contiene la gráfico (por defecto 100.0)
var coordenadas_trazado=“M “; // Cadena de texto que representa la propiedad “d” del trazado SVG
var desplazamiento=[]; // Desplazamientos X e Y para posicionar el tiempo y el valor representado dentro del rango del gráfico
var escala=[]; // Coeficientes X e Y para calcular el tamaño al representar el gráfico
var sin_recortar=true; // False si la gráfico se sale de la caja (si se sale, si recorta, se hace false para no seguir dibujando puntos)
var contador_valor=coordenada.length–1; // Variable para recorrer los valores (índice)
var posicion=[]; // Variable intermedia (para hacer más legible el código) con la que calcular la posición horizontal y vertical de un punto del trazado
escala[0]=ancho_caja/tiempo_total_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X
escala[1]=alto_caja/(Math.abs(valor_maximo–valor_minimo)+margen_valor*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y
desplazamiento[0]=coordenada[coordenada.length–1][0]–tiempo_total_representado; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado
desplazamiento[1]=margen_valor–valor_minimo; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)
if(cerrado) // Si se dibuja un path (trazado) cerrado…
{
coordenadas_trazado+=ancho_caja+“,”+alto_caja+” L “; // …se empieza por la parte inferior de la caja
}
while(contador_valor>=0&&sin_recortar) // Mientras queden valores por representar y no se haya llegado al borde izquierdo del gráfico…
{
posicion[0]=(coordenada[contador_valor][0]–desplazamiento[0])*escala[0]; // Calcular la X restando al tiempo el desplazamiento y convirtiéndolo a la escala del gráfico con el coeficiente horizontal
posicion[1]=alto_caja–(coordenada[contador_valor][1]+desplazamiento[1])*escala[1]; // Calcular la Y restando del alto de la caja (la Y crece hacia abajo en SVG)
coordenadas_trazado+=posicion[0]+“,”+posicion[1]; // Formar la coordenada con la X y la Y
if(posicion[0]>0) // Si no se ha rebasado el margen izquierdo…
{
coordenadas_trazado+=contador_valor>0?” L “:“”; // …y quedan valores que represntar, añadir una nueva línea (código L) para el próximo
contador_valor—; // Pasar al siguiente valor
}
else // Si se ha rebasado el margen izquierdo…
{
sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)
}
}
if(cerrado) // Si se dibuja un trazado (path) cerrado…
{
coordenadas_trazado+=” L “+posicion[0]+“,”+alto_caja+” Z”; // …se termina por la parte inferior de la caja y se añade Z para cerrarlo en SVG
}
grafico.setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado
}
|
I föregående kod finns två intressanta aspekter, för det första beräkningen som tillåter anpassa intervallet av värden som är representerade och för det andra fastighetsbyggande d som anger koordinaterna för punkterna på layouten (path).
För att anpassa intervallet av representerade värden flyttas de från ett minimum och skalas så att den synliga storleken motsvarar storleken på grafen. När det gäller tid erhålls förskjutningen genom att subtrahera det intervall som du vill visa från den längsta tiden (datumet och tiden närmast den aktuella) (20 sekunder i exemplet). Förskjutningen av temperaturvärdena är den för det lägre intervallet (en grad) minus det lägsta värdet, så att data som visas nedan är mest lik det lägsta tillåtna värdet men lämnar en marginal som gör att vi kan uppskatta vad som är passerat
Koefficienten som multiplicerar tidsvärdena för att erhålla grafens horisontella koordinater erhålls genom att dividera den totala bredden på grafen (100 enheter i exemplet) med tidsintervallet som representeras (20 sekunder i exemplet). För att erhålla koefficienten med de skalära temperaturvärdena måste man komma ihåg att det representerade området går från en marginal under minimivärdet till en marginal över maximum, en grad i båda fallen. På detta sätt resulterar den vertikala skalkoefficienten från att dividera höjden på grafen (100 enheter i exemplet) med maxvärdet, minus minimum plus övre och nedre marginalen. Eftersom dessa värden kan utvecklas helt vid negativa temperaturer använder vi Math.abs() att använda skillnadens absoluta värde.
Egendomen d av objektet path Den är konstruerad genom att sammanfoga punkternas koordinater i en text. Varje koordinatpar föregås av en kod SVG L, som drar en linje från den aktuella positionen till ett absolut värde som indikeras av koordinaterna. X- och Y-värdena separeras med kommatecken och varje operation SVG separeras med ett mellanslag från nästa.
För att starta layouten, använd koden M (flytta till en absolut koordinat). När det gäller den stängda och fyllda tomten börjar man längst ner till höger, vid den öppna tomten som ritar dataprofilen börjar man med det sist representerade värdet (det senaste). För att avsluta den stängda layouten används koden Z lägga till som sista punkt den som har samma X-koordinatvärde som den sista punkten på linjen och som Y-koordinat det minsta representerade värdet.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
function dibujar_grafico()
{
var tiempo_mostrado=20000; // Se representan 20 segundos (20000 milisegundos)
var valor_maximo=10; // 10 grados sobre cero
var valor_minimo=–5; // Cinco grados bajo cero
var fecha_hora=Date.now(); // Hora actual
var matriz_de_coordenadas_de_prueba=[]; // Preparar el vector de coordenadas
for(var contador=0;contador<20;contador++)
{
fecha_hora+=500+1500*Math.random(); // Añadir medio segundo a la hora anterior y entre 0 y segundo y medio aleatoriamente
matriz_de_coordenadas_de_prueba[contador]=[]; // Preparar el siguiente punto del vector de coordenadas
matriz_de_coordenadas_de_prueba[contador][0]=fecha_hora; // En la coordenada horizontal, situar la hora
matriz_de_coordenadas_de_prueba[contador][1]=Math.random()*Math.abs(valor_maximo–valor_minimo)+valor_minimo; // En la coordenada vertical situar el valor del sensor
}
actualizar_grafico
(
document.getElementById(“relleno_temperatura”), // Trazado para el relleno definido en el código HTML
matriz_de_coordenadas_de_prueba,
tiempo_mostrado,
valor_maximo, // Diez grados de valor máximo
valor_minimo, // Cinco grados bajo cero como valor mínimo
1, // Un grado por encima y por debajo de las temperatura mínimas y máximas respectivamente
true // Cerrar el trazado para representar el área rellena
);
actualizar_grafico
(
document.getElementById(“linea_temperatura”), // Trazado para el relleno definido en el código HTML
matriz_de_coordenadas_de_prueba,
tiempo_mostrado,
valor_maximo, // Diez grados de valor máximo
valor_minimo, // Cinco grados bajo cero como valor mínimo
1, // Un grado por encima y por debajo de las temperatura mínimas y máximas respectivamente
false // No cerrar el trazado para representar la linea que une los puntos que representan las temperaturas
);
}
|
I det här exemplet är funktionen dibujar_grafico(), som är anropet vid sidladdning, får de initiala värdena att testa (inte det sista realtidsvärdet) och förbereder intervallet inom vilket data kommer att renderas: 20 sekunder (20000 ms) horisontellt och 15°C i vertikal från -5°C till +10°C med en grads topp- och bottenmarginal. Ring två samtal till actualizar_grafico(), i första passet true som ett argument, som indikerar att diagrammet ska stängas för att representera ett fyllt område, och vid det andra anropet passerar det false att dra gränsen. I varje fall objektet path modifierad är den som har motsvarande utseende, med en fyllning och ingen kant i det första fallet och med en viss linjetjocklek och ingen fyllning i det andra.
Funktionen actualizar_grafico() arbeta på ett föremål SVG som använder följande kod som en behållare html. Objektet SVG innehåller två banor, en för att rita linjen och en annan för att rita det fyllda området. När du laddar webbsidan, från elementet <body> föregående funktion anropas automatiskt, dibujar_grafico() tack vare evenemanget JavaScript onload.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<title>Temperatura</title>
<script type=“text/javascript” src=“https://polaridad.es/javascript-grafico-svg-sensor-internet-de-las-cosas-iot/grafico.js”></script>
</head>
<body onload=“dibujar_grafico();” style=“margin:0;”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript dibujar_grafico() –>
<div id=“temperatura”>
<div id=“bloque_temperatura” style=“width:820px;height:150px”>
<svg
id=“grafico_temperatura”
width=“100%”
height=“100%”
viewBox=“0 0 100 100”
preserveAspectRatio=“none”>
<path
id=“relleno_temperatura”
d=“”
style=“fill:#A8C3EA;stroke:none;”
vector-effect=“non-scaling-stroke”
/>
<path
id=“linea_temperatura”
d=“”
style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;”
vector-effect=“non-scaling-stroke”
/>
</svg>
</div>
</div>
</body>
</html>
|
På rad 10 i koden html ovan har en bredd (som ett exempel) på 820 px och en höjd av 150 px fastställts i stilen (något som i den slutliga versionen kommer att vara tillrådligt att göra med en klass och ett dokument CSS). Det verkar konstigt att raderna 13 och 14 definierar storleken på föremålet SVG som 100% bredd och höjd (som bäst matchar fönstermåtten, 100×100). Som redan nämnts är anledningen till att göra detta att alltid arbeta med kända dimensioner och anpassa de representerade värdena till det. De andra alternativen skulle vara att beräkna utrymmet på grafen varje gång och justera värdena senare eller tvinga fasta dimensioner för grafen, som dokumentet måste följa.
Efter att ha valt en graf vars dimensioner ändras enligt koden html, är det nödvändigt att inkludera fastigheten vector-effect med värdet non-scaling-stroke för att förhindra att linjetjocklekar deformeras när grafen inte bibehåller de valda proportionerna 1:1 på webbsidan som den visas på, vilket inträffade i det tidigare förslaget.
För att "beskära" grafen och visa endast det område du väljer, använd viewBox. I det här fallet har vi valt att se den del av grafen som börjar på 0,0 (övre vänstra hörnet) och mäter 100x100 ner och till höger. Den del av ritningen som ligger i koordinater med negativa värden eller större än 100 kommer inte att visas på webbsidan även om de finns i objektet SVG
Lägg till nya element till SVG-ritning
I föregående exempel, funktionen actualizar_grafico() använda en layout SVG till vilket ägandet ändras d, vilket är det som uttrycker koordinatkedjan. Alternativet skulle vara att skapa hela objektet varje gång det ritas om. Fördelen med det första alternativet är att det grafiska utseendet (som tjocklek eller färg) definieras i koden html, begränsningen är att objekten måste skapas tidigare.
För att skapa SVG-objekt, använd createElementNS(), vilket gör det möjligt att inkludera namnutrymme. I exemplet nedan skapas ett nytt textobjekt (text) och är associerad med ett element SVG som redan finns i koden html av webbplatsen. När det nya elementet har skapats tilldelas dess egenskaper setAttribute() och läggs till SVG med appendChild().
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function
rotular
(
objeto_grafico,
texto,
inicio=[0,0],
altura=10.0,
tipo_letra=“SircuitoRegularMedium”,
color_texto=“#000000”,
color_fondo=“#FFFFFF”
)
{
nuevo_objeto_svg=document.createElementNS(“http://www.w3.org/2000/svg”,“text”);
nuevo_objeto_svg.setAttribute(“x”,inicio[0]);
nuevo_objeto_svg.setAttribute(“y”,inicio[1]);
nuevo_objeto_svg.setAttribute(“font-family”,tipo_letra);
nuevo_objeto_svg.setAttribute(“font-size”,altura);
nuevo_objeto_svg.setAttribute(“fill”,color_texto);
nuevo_objeto_svg.textContent=texto;
objeto_grafico.appendChild(nuevo_objeto_svg);
}
//rotular(document.getElementById(“cosa_svg”),”HOLA”,[10,10]);
|
Ändra andelen ritningselement
Om du har provat att märka med funktionen i exemplet i föregående avsnitt har du sett att texten ser deformerad ut när objektets andel på webbsidan (width y height Av kod html) är inte lika med det representerade området (viewBox). För att anpassa proportionen är det nödvändigt att känna till objektets mått SVG för vilken du kan konsultera stilen på objektet eller behållaren html, om objektet SVG överlåta denna egendom. Tilldela ägande transform till föremål SVG som beror på proportionen kan deformationen korrigeras genom att tillämpa en skalningsoperation scale() där koefficienten i X skiljer sig från den i Y.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
function
rotular
(
objeto_grafico,
texto,
inicio=[0,0],
altura=10.0,
proporcion=1.0,
tipo_letra=“SircuitoRegularMedium”,
color_texto=“#000000”,
color_fondo=“#FFFFFF”
)
{
var escala_horizontal=parseFloat(getComputedStyle(objeto_grafico).height)/parseFloat(getComputedStyle(objeto_grafico).width);
nuevo_objeto_svg=document.createElementNS(“http://www.w3.org/2000/svg”,‘text’);
nuevo_objeto_svg.setAttribute(“transform”,“scale(“+escala_horizontal+“,1.0)”); // scale permite cambiar la escala en X e Y
//nuevo_objeto_svg.setAttribute(“transform”,”scaleX(“+escala_horizontal+”)”); // Como se sabe que sólo cambia la escala en X, se puede usar scaleX
nuevo_objeto_svg.setAttribute(“x”,inicio[0]);
nuevo_objeto_svg.setAttribute(“y”,inicio[1]);
nuevo_objeto_svg.setAttribute(“font-family”,tipo_letra);
nuevo_objeto_svg.setAttribute(“font-size”,altura);
nuevo_objeto_svg.setAttribute(“fill”,color_texto);
nuevo_objeto_svg.textContent=texto;
objeto_grafico.appendChild(nuevo_objeto_svg);
}
//rotular(document.getElementById(“cosa_svg”),”HOLA”,[10,10]);
|
SVG gör att flera objekt kan grupperas och bilda ett nytt sammansatt element som också stöder egenskaper, som enkla föremål. För att tillämpa samma transformation på en serie objekt samtidigt istället för varje objekt separat, kan du gruppera dem enligt denna resurs och tillämpa en enskild egenskap transform till dem alla.
Som förklarat när man pratar om SVG-format, är elementen i en grupp inneslutna i etiketterna <g> y </g>. Att lägga till från JavaScript element till en grupp SVG används, som sett i föregående exempel, appendChild() när det nya objektet har definierats.
För att fastställa ett ursprung vid tillämpning av transformationer kan egenskapen användas på objekt SVG transform-origin, vars värde är X- och Y-koordinaterna för den punkt från vilken transformationen börjar. Om ett värde för ursprunget för transformationen inte uttryckligen anges (i webbläsaren), används koordinatcentrum. Tyvärr, i skrivande stund, är det inte homogent mellan olika webbläsare att specificera beteendet för transformationer med en annan källa än standardkällan och bör användas med försiktighet.
Tillsammans med skalomvandlingen med scale Det finns andra, såsom rotation med rotation och rörelsen med translate, som erbjuder en alternativ till grafrepresentation: istället för att få nya koordinater kan du representera dem i deras eget utrymme och transformera grafen så att den passar formatet som du vill representera dem i.
Lägg till referenser till diagrammet
Nu när huvuddelen av grafen är löst genom att plotta värdena med en profil och ett ifyllt område, kan den kompletteras med referenser som hjälper dess läsning. Som ett exempel, låt oss börja med att rita några horisontella referenser (linjer) som markerar de högsta och lägsta acceptabla värdena samt ett önskat värde. Som förklarat kan du välja att lägga till objekten i SVG direkt från JavaScript eller inkludera dem manuellt i koden html och ändra dem senare med JavaScript.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
var CONTENEDOR_SVG; // Objeto SVG que contiene el gráfico que representa los valores monitorizados por los sensores en la IoT
var NS=“http://www.w3.org/2000/svg”; // Nombre del espacio de nombres (name space NS)
var ANCHO_CAJA=100.0; // Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones
var ALTO_CAJA=100.0; // Alto del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones
var VALOR_MAXIMO=10.0; // Mayor valor admisible en el gráfico SVG. Los valores mayores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia
var VALOR_MINIMO=–5.0; // Menor valor admisible en el gráfico SVG. Los valores menores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia
var VALOR_DESEADO=5.0; // Mejor valor del parámetro medido (temperatura). Sirve para tener una idea rápida de cómo de correcto es el estado del sistema
var MARGEN_VALOR=1.0; // Zona por encima del valor mayor y por debajo del valor menor que se representa para tener una idea aproximada de la tendencia cuando los datos monitorizados rebasen los valores máximo y/o mínimo
function inicializar_grafico()
{
CONTENEDOR_SVG=document.getElementById(“contenedor_svg”);
crear_referencia_horizontal_svg(VALOR_MAXIMO,“#FF0000”);
crear_referencia_horizontal_svg(VALOR_DESEADO,“#00FF00”);
crear_referencia_horizontal_svg(VALOR_MINIMO,“#0000FF”);
}
function crear_referencia_horizontal_svg
(
altura=0.0,
color=“#000000”,
grosor=0.5,
opacidad=1.0
)
{
var altura_corregida=ALTO_CAJA–(altura+MARGEN_VALOR–VALOR_MINIMO)*ALTO_CAJA/(Math.abs(VALOR_MAXIMO–VALOR_MINIMO)+MARGEN_VALOR*2);
var referencia_horizontal=document.createElementNS(NS,‘line’);
referencia_horizontal.setAttribute(“x1”,0.0);
referencia_horizontal.setAttribute(“x2”,ANCHO_CAJA);
referencia_horizontal.setAttribute(“y1”,altura_corregida);
referencia_horizontal.setAttribute(“y2”,altura_corregida);
referencia_horizontal.style.stroke=color;
referencia_horizontal.style.strokeWidth=grosor;
referencia_horizontal.style.strokeOpacity=opacidad;
CONTENEDOR_SVG.appendChild(referencia_horizontal);
}
//inicializar_grafico();
|
Det verkar logiskt att märka dessa horisontella referenser med text som tydliggör värdet de representerar. För att markera texten kan du använda rektanglar som sticker ut från bakgrunden och grafiken. Eftersom texterna måste skalas för att kompensera för deformationen, kan de alla grupperas i ett objekt som skalan ska appliceras på; Den största fördelen med att göra det på detta sätt är att kunna modifiera dem i en enda operation om grafbehållaren (webbläsarfönstret) ändras och ändrar den proportion som skalan korrigerar.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
// Este código de ejemplo usa constantes para hacerlo más legible a desarrolladores de aplicaciones para microcontroladores de series pequeñas. La opción más recomendable, y más propia del estilo JavaScript, es crear un objeto cuyas propiedades serían las constantes y que incluiría los métodos (aquí funciones) que generan o modifican el gráfico o en este caso las referencias
var CONTENEDOR_SVG; // Objeto SVG que contiene el gráfico que representa los valores monitorizados por los sensores en la IoT
var NS=“http://www.w3.org/2000/svg”; // Nombre del espacio de nombres (name space NS)
var ANCHO_CAJA=100.0; // Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones
var ALTO_CAJA=100.0; // Alto del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones
var TIEMPO_REPRESENTADO=30000; // Milisegundos visibles en el gráfico empezando en el valor mayor (fecha y hora del último valor monitorizado)
var VALOR_MAXIMO=10.0; // Mayor valor admisible en el gráfico SVG. Los valores mayores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia
var VALOR_MINIMO=–5.0; // Menor valor admisible en el gráfico SVG. Los valores menores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia
var VALOR_OPTIMO=5.0; // Mejor valor del parámetro medido (temperatura). Sirve para tener una idea rápida de cómo de correcto es el estado del sistema
var MARGEN_VALOR=2.0; // Zona por encima del valor mayor y por debajo del valor menor que se representa para tener una idea aproximada de la tendencia cuando los datos monitorizados rebasen los valores máximo y/o mínimo
var desplazamiento_valor=desplazamiento(Date.now());
var escala_valor=escala();
var TIPOGRAFIA=“SircuitoRegularMedium”; // Tipografía con la que se rotula todo el gráfico (se usa una constante buscando la uniformidad, pero se puede rotular usando diferentes tipos de letra si es necesario)
var ALTURA_TEXTO=10.0; // Altura de los textos en valor absoluto (píxeles)
var COLOR_MINIMO=“#621D87”; // Color de la referencia que indica el valor mínimo
var COLOR_OPTIMO=“#1D8762”; // Color de la referencia que indica el valor máximo
var COLOR_MAXIMO=“#871E35”; // Color de la referencia que indica el valor óptimo
var COLOR_TIPOGRAFIA=“#A8C3EA”; // Color del tipo de letra con que se rotulan las referencias
var GROSOR_REFERENCIA=0.5; // Grosor de la línea que se dibuja como referencia en valor absoluto (píxeles)
var OPACIDAD_REFERENCIA=1.0; // Opacidad de la línea de referencia. Si se dibuja sobre el gráfico con cierta transparencia permite ver el dibujo bajo ella
var RELLENO_FONDO_REFERENCIA=4.0; // Margen entre el fondo de la referencia y el texto medido en valor absoluto (la línea empieza en el margen izquierdo y recorre todo el gráfico)
var MARGEN_FONDO_REFERENCIA=10.0; // Separación de la referencia y el borde izquierdo del gráfico medido en valor absoluto (la línea empieza en el margen izquierdo y recorre todo el gráfico)
var ANCHO_FONDO_REFERENCIA=34.0; // Medida horizontal del rectángulo que hace de fondo al texto de la referencia medido en valor absoluto
function proporcion_grafico()
{
return parseFloat(getComputedStyle(CONTENEDOR_SVG).height)/parseFloat(getComputedStyle(CONTENEDOR_SVG).width); // La escala debe calcularse cada vez ya que no se sabe si se ha redimensionado el objeto HTML que contiene al objeto SVG y que le da el tamaño
}
function medida_grafico()
{
var proporcion=[]; // Coeficiente que calcula la medida absoluta en píxeles en función del ancho/alto base del gráfico y de la representación en la página web // Coeficiente que calcula la medida absoluta en píxeles en función del ancho/alto base del gráfico y de la representación en la página web
proporcion[0]=ANCHO_CAJA/parseFloat(getComputedStyle(CONTENEDOR_SVG).width);
proporcion[1]=ALTO_CAJA/parseFloat(getComputedStyle(CONTENEDOR_SVG).height);
return proporcion;
}
function desplazamiento(valor_mayor)
{
var desplazamiento_valor=[];
desplazamiento_valor[0]=valor_mayor–TIEMPO_REPRESENTADO; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado
desplazamiento_valor[1]=MARGEN_VALOR–VALOR_MINIMO; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)
return desplazamiento_valor;
}
function escala()
{
var escala_valor=[];
escala_valor[0]=ANCHO_CAJA/TIEMPO_REPRESENTADO; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X
escala_valor[1]=ALTO_CAJA/(Math.abs(VALOR_MAXIMO–VALOR_MINIMO)+MARGEN_VALOR*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y
return escala_valor;
}
function crear_referencia_horizontal_svg
(
posicion=0.0,
color_dibujo=“#000000”,
grosor_linea=GROSOR_REFERENCIA,
opacidad_linea=OPACIDAD_REFERENCIA,
color_texto=COLOR_TIPOGRAFIA,
altura_texto=ALTURA_TEXTO
)
{
var proporcion_horizontal=proporcion_grafico(); // La escala debe calcularse cada vez ya que no se sabe si se ha redimensionado el objeto HTML que contiene al objeto SVG y que le da el tamaño
var coeficiente_medida=medida_grafico();
var posicion_corregida=ALTO_CAJA–(posicion+desplazamiento_valor[1])*escala_valor[1];
var referencia_horizontal=document.createElementNS(NS,‘line’); // El orden en el que se crean los objetos determina qué tapa (lo último) y que es tapado (lo primero)
var fondo_referencia=document.createElementNS(NS,‘rect’); // El rectángulo (opaco) se creará después de la línea (que puede ser un poco transparente) para definir con claridad el fondo del texto
var texto_referencia=document.createElementNS(NS,‘text’); // El texto se creará en último lugar para que quede sobre los otros objetos
referencia_horizontal.setAttribute(“x1”,0.0);
referencia_horizontal.setAttribute(“x2”,ANCHO_CAJA);
referencia_horizontal.setAttribute(“y1”,posicion_corregida);
referencia_horizontal.setAttribute(“y2”,posicion_corregida);
referencia_horizontal.style.stroke=color_dibujo;
referencia_horizontal.style.strokeWidth=grosor_linea*coeficiente_medida[1];
referencia_horizontal.style.strokeOpacity=opacidad_linea;
CONTENEDOR_SVG.appendChild(referencia_horizontal); // Añadir la línea de referencia lo más abajo
fondo_referencia.setAttribute(“x”,MARGEN_FONDO_REFERENCIA*coeficiente_medida[0]);
fondo_referencia.setAttribute(“y”,posicion_corregida–(ALTURA_TEXTO+RELLENO_FONDO_REFERENCIA*2.0)*coeficiente_medida[1]/2.0);
fondo_referencia.setAttribute(“width”,ANCHO_FONDO_REFERENCIA*coeficiente_medida[0]);
fondo_referencia.setAttribute(“height”,(ALTURA_TEXTO+RELLENO_FONDO_REFERENCIA*2.0)*coeficiente_medida[1]);
fondo_referencia.style.fill=color_dibujo;
fondo_referencia.style.fillOpacity=1.0;
fondo_referencia.style.strokeWidth=0;
CONTENEDOR_SVG.appendChild(fondo_referencia);
texto_referencia.setAttribute(“x”,(MARGEN_FONDO_REFERENCIA+RELLENO_FONDO_REFERENCIA)*coeficiente_medida[0]/proporcion_horizontal);
texto_referencia.setAttribute(“y”,posicion_corregida+ALTURA_TEXTO/2.0*coeficiente_medida[1]);
texto_referencia.setAttribute(“font-family”,TIPOGRAFIA);
texto_referencia.setAttribute(“font-size”,ALTURA_TEXTO*coeficiente_medida[1]);
texto_referencia.setAttribute(“fill”,COLOR_TIPOGRAFIA);
texto_referencia.setAttribute(“transform”,“scale(“+proporcion_horizontal+“,1.0)”);
texto_referencia.textContent=(posicion>=0?“+”:“”)+posicion;
CONTENEDOR_SVG.appendChild(texto_referencia);
}
function inicializar_grafico()
{
CONTENEDOR_SVG=document.getElementById(“contenedor_svg”);
crear_referencia_horizontal_svg(VALOR_MAXIMO,COLOR_MAXIMO);
crear_referencia_horizontal_svg(VALOR_OPTIMO,COLOR_OPTIMO);
crear_referencia_horizontal_svg(VALOR_MINIMO,COLOR_MINIMO);
}
//inicializar_grafico();
|
Det finns flera intressanta aspekter i ovanstående exempelkod. Kommentera först och främst att konstanter (globala variabler) har använts för att göra exemplet mer läsbart för användare som kommer från programmering. mikrokontroller en C in C + +. Som kommer att ses senare, det optimala sättet att programmera in den JavaScript Det skulle vara att använda objekt som skulle innehålla dessa värden och metoder som skulle hantera referenserna i detta exempel eller grafen i allmänhet i ett produktionssystem.
Å andra sidan, för att avancera vad den mer generiska koden skulle vara, har separata funktioner utvecklats som beräknar de olika koefficienterna som korrigerar proportionen av grafen för att justera texten proporcion_grafico(), skalan för värdena beroende på deras intervall escala() och en korrektionsfaktor för mätningar som är kända i absoluta värden, såsom mätningar i referenser medida_grafico().
Att läsa den här koden bör hjälpa till att förtydliga i vilket sammanhang en applikation som denna fungerar, som ritar grafik i realtid och måste vara flexibel för att kunna presenteras i olika grafiska sammanhang (åtminstone olika storlekar och proportioner). Först och främst måste objekten genereras SVG, antingen "manuellt" i koden html, antingen genom kod JavaScript och i alla fall måste hänvisningar till dessa objekt senare erhållas för att manipulera dem från JavaScript så att nya grafer kan ritas och representationen av en redan ritad graf kan anpassas till en förändring i mediet där den presenteras.
En annan referens som kan hjälpa till att enkelt tolka en graf är punkterna som representerar specifika värden (linjens noder). I det här exemplet, där vi representerar en enstaka magnitud, är valet av en symbol inte kritiskt, men om flera olika värden är överlagrade för att leta efter korrelation är det intressant att särskilja, förutom att använda andra resurser som färg , genom att rita olika symboler. Grafiken som används för linjenoden måste modifieras i storlek och proportion, vilket sker till exempel med texter, så att dess dimensioner är absoluta och så att dess proportioner bibehålls även om de i rutan den innehåller ändrar grafiken.
I det föregående exemplet såg vi redan hur man beräknar de olika koefficienterna för att skala om och korrigera andelen av ritningen; När det gäller hur man implementerar hanteringen av symbolerna för grafens noder eller hörn, kan en möjlig lösning vara att lagra objekten SVG in i en vektor och ändra dess position när grafen uppdateras genom att läsa ett nytt värde, eller när den ritas om genom att ändra storlek på behållaren. I det första fallet skulle dess position behöva ändras och i det andra dess proportion till fastigheten transform och värdet av scale. Följande kod är en modifiering av funktionen actualizar_grafico() att inkludera ompositionering av grafens vertexsymboler.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
function actualizar_grafico_puntos
(
grafico, // Objeto SVG con el que se dibuja la gráfico
coordenada, // Matriz con las coordenadas del trazado formada por pares [tiempo,valor] ordenados primero el más antiguo (tiempo menor) último el más nuevo
puntos, // Matriz con los objetos SVG que se representan en los nodos de la línea (los valores reales)
tiempo_total_representado, // Tiempo total representado por la gráfico (en milisegundos)
valor_maximo, // Valor máximo aceptable antes de emitir una alarma
valor_minimo, // Valor mínimo aceptable antes de emitir una alarma
margen_valor, // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo
parametro_cerrado, // Valor booleano que indica si el trazado se cierra o no (por defecto false)
parametro_ancho_caja, // Ancho de la caja que contiene la gráfico (por defecto 100.0)
parametro_alto_caja // Alto de la caja que contiene la gráfico (por defecto 100.0)
)
{
var cerrado=parametro_cerrado||false; // Valor booleano que indica si el trazado se cierra o no (por defecto false)
var ancho_caja=parametro_ancho_caja||100.0; // Ancho de la caja que contiene la gráfico (por defecto 100.0)
var alto_caja=parametro_alto_caja||100.0; // Alto de la caja que contiene la gráfico (por defecto 100.0)
var coordenadas_trazado=“M “; // Cadena de texto que representa la propiedad “d” del trazado SVG
var desplazamiento=[]; // Desplazamientos X e Y para posicionar el tiempo y el valor representado dentro del rango del gráfico
var escala=[]; // Coeficientes X e Y para calcular el tamaño al representar el gráfico
var sin_recortar=true; // False si la gráfico se sale de la caja (si se sale, si recorta, se hace false para no seguir dibujando puntos)
var contador_valor=coordenada.length–1; // Variable para recorrer los valores (índice)
var posicion=[]; // Variable intermedia (para hacer más legible el código) con la que calcular la posición horizontal y vertical de un punto del trazado
escala[0]=ancho_caja/tiempo_total_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X
escala[1]=alto_caja/(Math.abs(valor_maximo–valor_minimo)+margen_valor*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y
desplazamiento[0]=coordenada[coordenada.length–1][0]–tiempo_total_representado; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado
desplazamiento[1]=margen_valor–valor_minimo; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)
if(cerrado) // Si se dibuja un path (trazado) cerrado…
{
coordenadas_trazado+=ancho_caja+“,”+alto_caja+” L “; // …se empieza por la parte inferior de la caja
}
while(contador_valor>=0&&sin_recortar) // Mientras queden valores por representar y no se haya llegado al borde izquierdo del gráfico…
{
posicion[0]=(coordenada[contador_valor][0]–desplazamiento[0])*escala[0]; // Calcular la X restando al tiempo el desplazamiento y convirtiéndolo a la escala del gráfico con el coeficiente horizontal
posicion[1]=alto_caja–(coordenada[contador_valor][1]+desplazamiento[1])*escala[1]; // Calcular la Y restando del alto de la caja (la Y crece hacia abajo en SVG)
punto[contador_valor].setAttribute(“cx”,posicion[0]);
punto[contador_valor].setAttribute(“cy”,posicion[1]);
coordenadas_trazado+=posicion[0]+“,”+posicion[1]; // Formar la coordenada con la X y la Y
if(posicion[0]>0) // Si no se ha rebasado el margen izquierdo…
{
coordenadas_trazado+=contador_valor>0?” L “:“”; // …y quedan valores que represntar, añadir una nueva línea (código L) para el próximo
}
else // Si se ha rebasado el margen izquierdo…
{
sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)
}
contador_valor—; // Pasar al siguiente valor
}
if(cerrado) // Si se dibuja un trazado (path) cerrado…
{
coordenadas_trazado+=” L “+posicion[0]+“,”+alto_caja+” Z”; // …se termina por la parte inferior de la caja y se añade Z para cerrarlo en SVG
}
grafico.setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado
for(;contador_valor>=0;contador_valor—)
{
punto[contador_valor].setAttribute(“cx”,–10000);
punto[contador_valor].setAttribute(“cy”,0);
}
}
|
Ändringar gjorda i funktionen actualizar_grafico() för att få den nya funktionen actualizar_grafico_puntos() Det är de som är markerade i koden i föregående exempel. Först, på rad 5, tar vi en vektor av objekt SVG som en parameter. Denna vektor kommer att innehålla de symboler som behöver flyttas om i de nya noderna i grafen.
På raderna 39 och 40 tilldelas centrumets nya koordinater, cx y cy, till de av de värden som representeras. Om symbolen inte var baserad på mitten, kommer det förmodligen att vara nödvändigt att lägga till en offset cx halva bredden och in cy av halva höjden för att flytta dem exakt på grafnoden.
På raderna 57 till 61 flyttas de punkter som motsvarar koordinater som inte är ritade eftersom de är avskurna av vänsterkanten utanför grafen. Koordinaten för cy till noll och att av cx till ett negativt tal (större än själva punkten) så att det inte visas när det skärs, som den vänstra delen av grafen, av fönstret i SVG.
Hantera diagrammet från ett objekt med JavaScript
Alla operationer som har förklarats hittills kan integreras i ett objekt för att hantera grafen med en stil som är mer typisk för de nya versionerna av JavaScript. Detta implementeringsalternativ har den extra fördelen att det förenklar införlivandet av flera grafer, med olika värden, på samma webbsida.
Innan vi diskuterar implementeringen, låt oss se över de vanligaste sätten att skapa objekt med JavaScript och några av särdragen hos funktionerna som påverkar förslaget att rita IoT-sensorgrafik.
Det var redan förklarat att det nya sättet att skapa objekt i JavaScript (tillgänglig sedan version 5 av ECMAScript) består av att använda Object.create, som borde vänja sig vid att använda istället för "klassikern" new, vilket naturligtvis fortfarande fungerar korrekt, även om dess syfte är mer att simulera språkens stil med klassbaserade objekt (JavaScript baserar skapandet av objekt på prototyper) än ett fungerande alternativ.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<title>Crear objetos con new o con Objetct.create</title>
<script type=“text/javascript” src=“https://polaridad.es/javascript-grafico-svg-sensor-internet-de-las-cosas-iot/crear_objetos.js”></script>
</head>
<body onload=“empezar();”>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
function Objeto_clasico(primero,segundo)
{
this.primero=primero||1;
this.segundo=segundo||2;
this.hacer_algo=function()
{
console.log(“El objeto clásico le saluda (primero=”+this.primero+” y segundo=”+this.segundo+“)”);
}
}
var Objeto_ES5=
{
primero:10,
segundo:20,
hacer_algo:
function()
{
console.log(“El objeto ES5 le saluda (primero=”+this.primero+” y segundo=”+this.segundo+“)”);
}
}
var objeto_clasico=new Objeto_clasico();
var objeto_ES5=Object.create(Objeto_ES5);
function empezar()
{
console.log(“Objeto clásico (“+objeto_clasico.primero+“,”+objeto_clasico.segundo+“)”);
console.log(“Objeto ES5 (“+objeto_ES5.primero+“,”+objeto_ES5.segundo+“)”);
objeto_clasico.hacer_algo();
objeto_ES5.hacer_algo();
}
|
Den tidigare koden låter dig komma ihåg skillnaderna mellan att skapa objekten med Object.create med new. Det tjänar också till att betona det, medan den funktion som objektet skapas med new kan finnas var som helst i koden måste objektet redan existera innan det kan instansieras med Object.create (ES5_Object-objekt är inte en funktion).
På rad 3 och 4, för att ställa in ett standardvärde för egenskaperna i funktionen som skapar objektet med new, tilldelas varje egenskap till värdet av motsvarande argument eller (||), om inga argument har skickats, det vill säga om de är odefinierade (undefined), som den omständigheten bedöms som false, tilldelas standardvärdet.
Kontexten i vilken en funktion exekveras JavaScript tar upp två frågor som är viktiga att tänka på och som också kan vara förvirrande när man använder detta programmeringsspråk efter att ha arbetat med andra, som t.ex. C o C + +, i vårat fall. Kontexten inkluderar de variabler som definieras i omfånget av funktionen (och de globala) som för övrigt väcker ett intressant koncept, "stängningarna" som etablerar en hel programmeringsstil i JavaScript. Som sagt, det kunde man förvänta sig this, som refererar till objektet när det används inom koden som definierar det, exekveringskontexten i vilken det har definierats bibehålls, men den som används är kontexten från vilken funktionen anropas. Detta beteende är transparent i de flesta fall, men det finns två omständigheter där det kan vara förvirrande: en funktion definierad i en annan funktion och en metod som anropas från en händelse av objektet. window.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
var primero=“Primero global”;
var segundo=“Segundo global”;
var Contexto=
{
primero:“Primero en contexto”,
segundo:“Segundo en contexto”,
probar:
function()
{
console.log(“Primero en contexto: “+this.primero);
console.log(“Segundo en contexto: “+this.segundo);
function probar_dentro()
{
console.log(“Primero dentro: “+this.primero);
console.log(“Segundo dentro: “+this.segundo);
}
probar_dentro();
}
}
var probador=Object.create(Contexto);
probador.probar();
/*
Primero en contexto: Primero en contexto
Segundo en contexto: Segundo en contexto
Primero dentro: Primero global
Segundo dentro: Segundo global
*/
|
När den föregående koden körs visas den kommenterade texten i slutet i konsolen. De två markerade linjerna återspeglar beteende som kan vara förvirrande: funktionsexekveringskontexten probar_dentro() inte probar(), som man kan förvänta sig, men window, som visar de globala variablerna och inte egenskaperna med samma namn. Om du inte vill ha detta beteende, skapa helt enkelt en variabel i funktionen på högsta nivån och tilldela den till this, som i följande kod.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var primero=“Primero global”;
var segundo=“Segundo global”;
var Contexto=
{
primero:“Primero en contexto”,
segundo:“Segundo en contexto”,
probar:
function()
{
var esto=this;
console.log(“Primero en contexto: “+esto.primero);
console.log(“Segundo en contexto: “+esto.segundo);
function probar_dentro()
{
console.log(“Primero dentro: “+esto.primero);
console.log(“Segundo dentro: “+esto.segundo);
}
probar_dentro();
}
}
var probador=Object.create(Contexto);
probador.probar();
/*
Primero en contexto: Primero en contexto
Segundo en contexto: Segundo en contexto
Primero dentro: Primero en contexto
Segundo dentro: Segundo en contexto
*/
|
För att styra exekveringskontexten när en metod anropas från en händelse window, till exempel genom att ändra storlek på webbläsarfönstret, en annan egenhet med JavaScript: möjligheten att programmera "funktionsfabriker", det vill säga funktioner som genererar andra funktioner, returnera dem med return.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var Contexto=
{
prueba:“objeto”, // La propiedad prueba es de los objetos Contexto
llamar:
function()
{
esto=this;
return function()
{
console.log(“H + “+(Date.now()–hora)+” Contexto: “+esto.prueba);
};
}
}
var prueba=“global”; // Esta variable prueba es global (window.prueba)
var hora=Date.now();
var probador=Object.create(Contexto);
var cosa=probador.llamar();
var pesadez=setInterval(cosa,3000);
setTimeout(function(){clearInterval(pesadez)},30100); // Desactivar la llamada periódica
|
I exempelkoden ovan, metoden llamar() av föremålen Contexto Den gör inte jobbet utan returnerar en anonym funktion som tar hand om det. För att verifiera att allt fungerar som förväntat finns det en global variabel med samma namn som egenskapen som funktionen visar i konsolen; Om sammanhanget är korrekt kommer värdet på egenskapen att visas och inte för den globala variabeln.
JavaScript Försök att korrigera semikolontecknen som vi utelämnar i slutet av meningarna. Detta möjliggör en avslappnad skrivstil men är ett tveeggat svärd som måste behandlas varsamt. I de flesta fall, för att undvika de oönskade effekter som detta ger i uttryck som upptar flera rader, kan du använda parenteser eller föregå sättet som JavaScript kommer att tolka koden; Det är därför rad 8 i exemplet innehåller function på baksidan av return, om jag hade använt en annan rad skulle betydelsen vara väldigt annorlunda. Enligt min mening är den mest läsbara lösningen att använda en intermediär (dispenserbar) variabel som i följande version; Uppenbarligen, när beteendet är förstått, motsvarar beslutet programmeraren.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
var Contexto=
{
prueba:“objeto”, // La propiedad prueba es de los objetos Contexto
llamar:
function()
{
esto=this;
var variable_auxiliar=
function()
{
console.log(“H + “+(Date.now()–hora)+” Contexto: “+esto.prueba);
};
return variable_auxiliar;
}
}
var prueba=“global”; // Esta variable prueba es global (window.prueba)
var hora=Date.now();
var probador=Object.create(Contexto);
var cosa=probador.llamar();
var pesadez=setInterval(cosa,3000);
setTimeout(function(){clearInterval(pesadez)},30100);
|
I samma mening som att utvärdera ett uttryck som en funktion, det vill säga returnera en funktion och inte värdet som funktionen returnerar; på rad 21 i det senaste exemplet (det var på rad 19 i det föregående) slutar det med clearInterval funktionen som kallas med setInterval. För att den ska agera i 30 sekunder skjuts stoppet upp med setTimeout, som i sin tur behöver en funktion som första argument; att leverera exekveringen som en parameter clearInterval med variabeln som innehåller det periodiska anropet (och inte funktionen clearInterval) är vad den anonyma funktionen i sista raden skapas för.
Valet mellan att skriva koden som integrerar funktionsdefinitionen, mer kompakt (som i rad 21) eller att använda en hjälpvariabel, enligt min mening, mer läsbar (som på rad 19 och 20) varierar lite i prestanda och beror på mer stil och läsbarhet för underhåll.
För att testa koden, innan du har data på servern, kan du använda en generator av slumpmässiga värden i det önskade intervallet eller förbereda tabeller med kontrollerade värden som simulerar drift under önskade förhållanden. Följande exempel använder en enkel datagenerator över hela intervallet, vilket är anledningen till att de verkar lite överdrivna.
För att testa kan du ladda ner hela koden för exemplet bildas av en webbsida skriven i html, stilen CSS och koden JavaScript. Det senare är det mest relevanta, eftersom de andra komponenterna endast är minimalt med stöd, mycket förenklade och är mycket mer utvecklade i artiklarna i motsvarande avsnitt.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<title>Temperatura</title>
<script type=“text/javascript” src=“https://polaridad.es/javascript-grafico-svg-sensor-internet-de-las-cosas-iot/grafico.js”></script>
<link rel=“stylesheet” href=“estilo.css” type=“text/css” media=“all”>
</head>
<body onload=“iniciar_grafico(‘grafico’,’valor’,’fecha’);”>
<div id=“temperatura”>
<div id=“ultimo_valor”>
<div id=“fecha”></div>
<div id=“valor”></div>
</div>
<div id=“grafico”></div>
</div>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
body
{
margin:0px 0px 0px 0px;
}
#ultimo_valor
{
box–sizing:border–box;
width:100%;
height:40px;
padding:8px 0px 8px 14px;
font–family:monospaced;
font–size:18px;
color:#205587;
background–color:#86A7D0;
}
#fecha
{
float:left;
margin–right:15px;
}
#valor
{
float:left;
}
#grafico
{
width:100%;
height:200px;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
|
var Grafico=
{
contenedor_svg:void(0), // Objeto SVG con el que se dibuja el gráfico. Se inicializa con void(0) para asegurarse de que es === undefined al principio
contenedor_html:void(0), // Objeto HTML que contiene al objeto SVG con el gráfico (seguramente un div). Se inicializa con void(0) para asegurarse de que es === undefined al principio
contenedor_valor:void(0), // Objeto HTML en el que se muestra el último valor cargado del servidor
contenedor_fecha:void(0), // Objeto HTML para mostrar la fecha del último valor
pagina_servidor:“ultimo_valor_sensor.php”, // página en la que se consultan los datos
consulta:“fr1”, // Valor del parámetro con el que se consulta el servidor. La URL sería algo como http://servidoriot.com/ultimo_valor_sensor.php?zona=fr1
NS:“http://www.w3.org/2000/svg”, // Nombre del espacio de nombres (name space NS)
MINIMO:0, // Índice del menor valor admisible en el gráfico SVG. Los valores menores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia
OPTIMO:1, // Índice del mejor valor del parámetro medido. Valor deseado para el parámetro monitorizado. Sirve para tener una idea rápida de cómo de correcto es el estado del sistema
MAXIMO:2, // Índice del mayor valor admisible en el gráfico SVG. Los valores mayores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia
maximo_puntos:0, // Número máximo de vértices representados (pueden dibujarse menos si se recortan por la parte izquierda)
valor:[], // Últimos valores cargados del servidor
trazado:[], // Trazados representados (en principio se trata de representar uno con relleno y otro con línea)
cerrado:true, // Cuando vale true se dibuja el perfil y el área (la línea del gráfico y una zona rellena debajo). Cuando vale false solo se dibuja la línea
simbolo:[], // Objetos SVG utilizados para marcar los vértices de la línea (círculos)
linea_referencia:[], // Líneas horizontales en los valores de referencia
texto_referencia:[], // Objetos texto que rotulan los valores de referencia
fondo_referencia:[], // Rectángulos bajo los textos de los valores de referencia
medida_caja_svg:[100.0,100.0], // Ancho,Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones ya que se dimensiona al 100% de su contenedor
correccion_caja_svg:[1.0,1.0], // Coeficientes para calcular la medida en el gráfico de un objeto del que se sabe el valor absoluto (Se usa el píxel como unidad)
tiempo_representado:0, // Milisegundos visibles en el gráfico empezando en el valor mayor (fecha y hora del último valor monitorizado)
valor_referencia:[0,0,0], // Valores de referencia [mínimo,óptimo,máximo]
margen_valor:0, // Zona por encima del valor mayor y por debajo del valor menor que se representa para tener una idea aproximada de la tendencia cuando los datos monitorizados rebasen los valores máximo y/o mínimo
escala_valor:[1.0,1.0], // Coeficientes que multiplican el valor monitorizado (y almacenado en el servidor) para calcular el representado según las dimensiones del gráfico
desplazamiento_valor:[0.0,0.0], // Desplazamiento que se suma al tiempo (X) y al valor (Y) para representarlo en el rango especificado para el gráfico
area_bajo_linea:true, // True para dibujar una zona rellena además del perfil (línea) del gráfico
medida_simbolo:[5,5], // Valor absoluto (en píxeles) del ancho y el alto del dibujo que se hace en los vértices de la línea del gráfico
tipografia:“sans-serif”, // Tipo de letra usado para rotular el gráfico (se usa solamente una tipografía por uniformidad)
altura_texto:10.0, // Altura de los textos en valor absoluto (píxeles). No todos los navegadores soportan todos los valores intermedios, será necesario coordinarlo con los valores que estén relacionados
escala_horizontal_texto:1, // Transformación que se aplica al texto para corregir la que implica la proporción del gráfico
color_fondo:“”, // Color de fondo del contenedor HTML del objeto SVG (Si es una cadena vacía no se cambia)
color_simbolos:“#000000”, // Color de los símbolos que se dibujan en los vértices de la línea del gráfico
color_referencia:[“#000000”,“#000000”,“#000000”], // Color de la referencia que indica el valor [mínimo,óptimo,máximo]
color_tipografia:“#FFFFFF”, // Color del tipo de letra con que se rotulan las referencias
grosor_trazado:4, // Grosor de la línea del gráfico
color_trazado:“#000000”, // Color de la línea del gráfico
color_relleno:“#000000”, // Color del relleno del gráfico
opacidad_relleno:1.0, // Opacidad del relleno del gráfico
grosor_referencia:0.5, // Grosor de la línea que se dibuja como referencia en valor absoluto (píxeles)
opacidad_referencia:1.0, // Opacidad de la línea de referencia. Si se dibuja sobre el gráfico con cierta transparencia permite ver el dibujo bajo ella
relleno_fondo_referencia:7.0, // Margen entre el fondo de la referencia y el texto medido en valor absoluto (la línea empieza en el margen izquierdo y recorre todo el gráfico)
margen_fondo_referencia:10.0, // Separación de la referencia y el borde izquierdo del gráfico medido en valor absoluto (la línea empieza en el margen izquierdo y recorre todo el gráfico)
ancho_fondo_referencia:50.0, // Medida horizontal del rectángulo que hace de fondo al texto de la referencia medido en valor absoluto
texto_valor:[“temperatura: “,” °C”], // Prefijo y sufico con los que se rotula el valor monitorizado
texto_hora:[“hora “,“”], // Prefijo y sufijo con los que se rotula la hora (cuando solamente se rotula la hora)
texto_fecha:[“”,“”], // Prefijo y sufijo con los que se rotula la fecha (cuando solamente se rotula la fecha)
texto_fecha_hora:[“el “,” a las “,” | “], // Prefijo con el que se rotula la hora, separador de fecha y hora y sufjo de la hora cuando se rotula la fecha y la hora
HORA:0, // Constante que representa la hora para el modo de la fecha/hora
FECHA:1, // Constante que representa la fehca para el modo de la fecha/hora
FECHA_Y_HORA:2, // Constante que representa rotular la fecha y la hora (para el modo de fecha/hora)
modo_fecha:2, // 0->hora, 1-> fecha 2-> fecha y hora
repetir:null, // Función llamada por setInterval
nueva_proporcion: // Calcular la nueva proporción (al iniciar y al redimensionar el contenedor del gráfico) para transformar el texto
function()
{
if(this.contenedor_svg!==undefined) // Se entiende que si no es undefined se ha asignado un objeto
{
if(this.contenedor_svg.nodeName===“svg”) // Si el objeto asignado es un SVG
{
this.escala_horizontal_texto=parseFloat(getComputedStyle(this.contenedor_svg).height)/parseFloat(getComputedStyle(this.contenedor_svg).width); // La escala debe calcularse cada vez ya que no se sabe si se ha redimensionado el objeto HTML que contiene al objeto SVG y que le da el tamaño
}
}
},
nueva_correccion_caja_svg:
function()
{
if(this.contenedor_svg!==undefined) // Se entiende que si no es undefined se ha asignado un objeto
{
if(this.contenedor_svg.nodeName.toLowerCase()===“svg”) // Si el objeto asignado es un SVG
{
this.correccion_caja_svg[0]=this.medida_caja_svg[0]/parseFloat(getComputedStyle(this.contenedor_svg).width);
this.correccion_caja_svg[1]=this.medida_caja_svg[1]/parseFloat(getComputedStyle(this.contenedor_svg).height);
}
}
},
nueva_escala:
function()
{
if(this.tiempo_representado>0) // Antes de inicializar el objeto el tiempo representado es cero
{
this.escala_valor[0]=this.medida_caja_svg[0]/this.tiempo_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X
this.escala_valor[1]=this.medida_caja_svg[1]/(Math.abs(this.valor_referencia[this.MAXIMO]–this.valor_referencia[this.MINIMO])+this.margen_valor*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y
}
},
nuevo_desplazamiento:
function()
{
if(this.tiempo_representado>0) // Antes de inicializar el objeto el tiempo representado es cero
{
this.desplazamiento_valor[0]=this.valor[this.valor.length–1][0]–this.tiempo_representado; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado
this.desplazamiento_valor[1]=this.margen_valor–this.valor_referencia[this.MINIMO]; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)
}
},
crear_svg: // Crear el objeto SVG dentro del objeto HTML
function()
{
if(this.contenedor_html!==null&&this.contenedor_html!==undefined) // Ya se ha asignado el objeto HTML
{
if(this.contenedor_html.nodeType===1) // Es un objeto HTML válido
{
// Color de fondo del objeto HTML
if(this.color_fondo!==“”)
{
this.contenedor_html.style.backgroundColor=this.color_fondo;
}
// Contenedor SVG
this.contenedor_svg=document.createElementNS(this.NS,“svg”); // Crear un objeto SVG
this.contenedor_svg.setAttribute(“width”,“100%”); // Ancho del objeto SVG
this.contenedor_svg.setAttribute(“height”,“100%”); // Alto del objeto SVG
this.contenedor_svg.setAttribute(“viewBox”,“0 0 “+this.medida_caja_svg[0]+” “+this.medida_caja_svg[1]); // Zona del SVG que se muestra
this.contenedor_svg.setAttribute(“preserveAspectRatio”,“none”); // No preservar la proporción para ocupar todo el objeto HTML que hace de contenedor
this.contenedor_html.appendChild(this.contenedor_svg); // Añadir al contenedor HTML el objeto SVG (que será el contenedor del gráfico)
// Trazado
this.trazado[0]=document.createElementNS(this.NS,“path”); // Crear el trazado que soporta el relleno
this.trazado[0].style.fill=this.color_relleno;
this.trazado[0].style.fillOpacity=this.opacidad_relleno;
this.trazado[0].style.stroke=“none”;
this.contenedor_svg.appendChild(this.trazado[0]); // Añadir el relleno al SVG
this.trazado[1]=document.createElementNS(this.NS,“path”); // Crear el trazado que soporta el perfil
this.trazado[1].setAttribute(“vector-effect”,“non-scaling-stroke”); // No mantener la proporción en el trazado (no deformarlo)
this.trazado[1].style.fill=“none”;
this.trazado[1].style.stroke=this.color_trazado;
this.trazado[1].style.strokeWidth=this.grosor_trazado;
//this.trazado[1].style.strokeOpacity=1.0; // La opacidad por defecto es 1.0
this.contenedor_svg.appendChild(this.trazado[1]); // Añadir el perfil al SVG
// Símbolos para los vértices
var ahora=Date.now()–30000; // Fecha y hora actual menos 30 segundos
for(var contador_vertices=0;contador_vertices<this.maximo_puntos;contador_vertices++)
{
this.valor[contador_vertices]=[];
this.valor[contador_vertices][0]=ahora; // Inicializar los valores a la fecha y hora actual menos 30 segundos
this.valor[contador_vertices][1]=this.valor_referencia[this.OPTIMO]; // Inicializar los valores al óptimo
this.simbolo[contador_vertices]=document.createElementNS(this.NS,“ellipse”); // Crear una elipse (círculo) para cada vértice
this.simbolo[contador_vertices].style.fill=this.color_simbolos;
this.simbolo[contador_vertices].style.fillOpacity=1.0;
this.simbolo[contador_vertices].style.stroke=“none”;
this.contenedor_svg.appendChild(this.simbolo[contador_vertices]); // Añadir el símbolo al SVG
}
//this.nuevo_desplazamiento(); // Necesario si se asignaran las alturas de las referencias
for(var contador_referencia=0;contador_referencia<this.valor_referencia.length;contador_referencia++)
{
// Línea de referencia
//var posicion_corregida=this.medida_caja_svg[1]-(this.valor_referencia[contador_referencia]+this.desplazamiento_valor[1])*this.escala_valor[1]; // Necesario si se asignaran las alturas de las referencias
this.linea_referencia[contador_referencia]=document.createElementNS(this.NS,“line”); // Crear la línea que representa el valor mínimo
this.linea_referencia[contador_referencia].style.stroke=this.color_referencia[contador_referencia];
this.linea_referencia[contador_referencia].style.strokeWidth=this.grosor_referencia;
this.linea_referencia[contador_referencia].style.strokeOpacity=this.opacidad_referencia;
this.linea_referencia[contador_referencia].setAttribute(“x1”,0.0); // Las líneas de referencia empiezan en el borde izquierdo…
this.linea_referencia[contador_referencia].setAttribute(“x2”,this.medida_caja_svg[0]); // …y terminan en el derecho
//this.linea_referencia[contador_referencia].setAttribute(“y1”,posicion_corregida); // Ambos extremos a la altura correspondiente a la referencia [mínimo,óptimo,máximo]
//this.linea_referencia[contador_referencia].setAttribute(“y2”,posicion_corregida); // Ambos extremos a la altura correspondiente a la referencia [mínimo,óptimo,máximo]
this.contenedor_svg.appendChild(this.linea_referencia[contador_referencia]);
// Rectángulo de fondo del texto que indica el valor de referencia
this.fondo_referencia[contador_referencia]=document.createElementNS(this.NS,‘rect’);
this.fondo_referencia[contador_referencia].style.fill=this.color_referencia[contador_referencia];
this.fondo_referencia[contador_referencia].style.fillOpacity=1.0;
this.fondo_referencia[contador_referencia].style.stroke=“none”;
this.contenedor_svg.appendChild(this.fondo_referencia[contador_referencia]);
// Texto de referencia
this.texto_referencia[contador_referencia]=document.createElementNS(this.NS,“text”); // Crear el texto para rotular la referencia
this.texto_referencia[contador_referencia].setAttribute(“font-family”,this.tipografia); // Asignar el tipo de letra
this.texto_referencia[contador_referencia].setAttribute(“fill”,this.color_tipografia); // Asignar el color
//this.texto_referencia[contador_referencia].textContent=””+(this.valor_referencia[contador_referencia]>=0?”+”:””)+this.valor_referencia[contador_referencia]; // Texto que se rotula (los valores máximo, óptimo y mínimo ya deben estar asignados)
this.contenedor_svg.appendChild(this.texto_referencia[contador_referencia]);
}
}
}
},
ajustar_prporcion:
function()
{
this.nueva_proporcion();
this.nueva_correccion_caja_svg();
var posicion_corregida;
for(var contador_vertices=0;contador_vertices<this.simbolo.length;contador_vertices++)
{
this.simbolo[contador_vertices].setAttribute(“rx”,this.medida_simbolo[0]*this.correccion_caja_svg[0]);
this.simbolo[contador_vertices].setAttribute(“ry”,this.medida_simbolo[1]*this.correccion_caja_svg[1]);
}
for(var contador_referencia=0;contador_referencia<this.valor_referencia.length;contador_referencia++)
{
posicion_corregida=this.medida_caja_svg[1]–(this.valor_referencia[contador_referencia]+this.desplazamiento_valor[1])*this.escala_valor[1];
this.fondo_referencia[contador_referencia].setAttribute(“x”,this.margen_fondo_referencia*this.correccion_caja_svg[0]);
this.fondo_referencia[contador_referencia].setAttribute(“y”,posicion_corregida–(this.altura_texto+this.relleno_fondo_referencia*2.0)*this.correccion_caja_svg[1]/2.0);
this.fondo_referencia[contador_referencia].setAttribute(“width”,this.ancho_fondo_referencia*this.correccion_caja_svg[0]);
this.fondo_referencia[contador_referencia].setAttribute(“height”,(this.altura_texto+this.relleno_fondo_referencia*2.0)*this.correccion_caja_svg[1]);
this.linea_referencia[contador_referencia].setAttribute(“y1”,posicion_corregida);
this.linea_referencia[contador_referencia].setAttribute(“y2”,posicion_corregida);
this.texto_referencia[contador_referencia].setAttribute(“transform”,“scale(“+this.escala_horizontal_texto+“,1.0)”);
this.texto_referencia[contador_referencia].setAttribute(“font-size”,this.altura_texto*this.correccion_caja_svg[1]);
this.texto_referencia[contador_referencia].setAttribute(“x”,(this.margen_fondo_referencia+this.relleno_fondo_referencia)*this.correccion_caja_svg[0]/this.escala_horizontal_texto);
this.texto_referencia[contador_referencia].setAttribute(“y”,posicion_corregida+this.altura_texto/2.0*this.correccion_caja_svg[1]);
this.texto_referencia[contador_referencia].textContent=(this.valor_referencia[contador_referencia]>=0?“+”:“”)+this.valor_referencia[contador_referencia]; // Texto que se rotula
}
},
rotar_valores:
function()
{
for(var contador_valor=0;contador_valor<this.valor.length–1;contador_valor++)
{
this.valor[contador_valor][0]=this.valor[contador_valor+1][0];
this.valor[contador_valor][1]=this.valor[contador_valor+1][1];
}
},
nuevo_valor_aleatorio:
function()
{
this.rotar_valores();
this.valor[this.valor.length–1][0]=this.valor[this.valor.length–2][0]+1000+Math.random()*1000; // El nuevo tiempo es el anterior más un segundo más un valor entre 0 y un segundo
this.valor[this.valor.length–1][1]=Math.random()*Math.abs(this.valor_referencia[this.MAXIMO]–this.valor_referencia[this.MINIMO])+this.valor_referencia[this.MINIMO]; // Un valor aleatorio entre el máximo y el mínimo
this.nuevo_desplazamiento(); // Cada nuevo valor cambia el desplazamiento en horizontal
this.dibujar_nuevo_valor(true);
this.dibujar_nuevo_valor(false);
this.rotular_nuevo_valor();
this.ritular_nueva_fecha();
},
cargar_nuevo_valor:
function()
{
var consulta=‘zona=”+this.consulta;
var resultado;
var ajax;
if(window.XMLHttpRequest)
{
ajax=new XMLHttpRequest(); // ajax=Object.create(XMLHttpRequest);
}
else // Versiones antiguas de MS Internet Explorer
{
ajax=new ActiveXObject(“Microsoft.XMLHTTP”);
}
ajax.onreadystatechange=
function()
{
if(ajax.readyState==4&&ajax.status==200&&ajax.responseType==“json”)
{
resultado=JSON.parse(ajax.responseText);
if(resultado.fecha>objeto_grafico.fecha[objeto_grafico.fecha.length–1])
{
this.rotar_valores();
this.valor[this.valor.length–1][0]=resultado.fecha;
this.valor[this.valor.length–1][1]=resultado.temperatura;
this.nuevo_desplazamiento(); // Cada nuevo valor cambia el desplazamiento en horizontal
this.dibujar_nuevo_valor(true);
this.dibujar_nuevo_valor(false);
this.rotular_nuevo_valor();
this.ritular_nueva_fecha();
}
}
}
ajax.open(“POST”,this.pagina_servidor);
ajax.setRequestHeader(“Method”,“POST “+this.pagina_servidor+” HTTP/1.1″);
ajax.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
ajax.setRequestHeader(“Content-length”,consulta.length);
ajax.setRequestHeader(“Connection”,“close”);
ajax.send(consulta);
},
rotular_nuevo_valor:
function()
{
var valor_redondeado=Math.round(this.valor[this.valor.length–1][1]*100.0)/100.0;
this.contenedor_valor.innerHTML=this.texto_valor[0]+valor_redondeado+this.texto_valor[1];
},
ritular_nueva_fecha:
function()
{
var fecha_lectura=new Date(this.valor[this.valor.length–1][0]);
var texto_fecha=this.texto_hora[0];
texto_fecha+=(fecha_lectura.getHours()<10?“0”:“”)+fecha_lectura.getHours();
texto_fecha+=“:”;
texto_fecha+=(fecha_lectura.getMinutes()<10?“0”:“”)+fecha_lectura.getMinutes();
texto_fecha+=“:”;
texto_fecha+=(fecha_lectura.getSeconds()<10?“0”:“”)+fecha_lectura.getSeconds();
texto_fecha+=this.texto_hora[1];
this.contenedor_fecha.innerHTML=texto_fecha;
},
dibujar_nuevo_valor: // Dibujar el gráfico cuando llega un nuevo valor (que estará almacenado en el vector valor
function(cerrado)
{
// Si cerrado es undefined se evalúa a false, que se toma como valor por defecto
var contador_valor=this.valor.length–1; // Variable para recorrer los valores (índice)
var sin_recortar=true; // False si la gráfico se sale de la caja (si se sale, si recorta, se hace false para no seguir dibujando puntos)
var posicion=[]; // Variable intermedia (para hacer más legible el código) con la que calcular la posición horizontal y vertical de un punto del trazado
var coordenadas_trazado=“M “; // Cadena de texto que representa la propiedad “d” del trazado SVG
if(cerrado) // Si el trazado que se está dibujando está cerrado (no confundir con this.cerrado que determina si se dibujan los dos trazados, la línea y el relleno)
{
coordenadas_trazado+=this.medida_caja_svg[0]+“,”+this.medida_caja_svg[1]+” L “; // …se empieza por la parte inferior de la caja
}
while(contador_valor>=0&&sin_recortar) // Mientras queden valores por representar y no se haya llegado al borde izquierdo del gráfico…
{
posicion[0]=(this.valor[contador_valor][0]–this.desplazamiento_valor[0])*this.escala_valor[0]; // Calcular la X restando al tiempo el desplazamiento y convirtiéndolo a la escala del gráfico con el coeficiente horizontal
posicion[1]=this.medida_caja_svg[1]–(this.valor[contador_valor][1]+this.desplazamiento_valor[1])*this.escala_valor[1]; // Calcular la Y restando del alto de la caja (la Y crece hacia abajo en SVG)
this.simbolo[contador_valor].setAttribute(“cx”,posicion[0]);
this.simbolo[contador_valor].setAttribute(“cy”,posicion[1]);
coordenadas_trazado+=posicion[0]+“,”+posicion[1]; // Formar la coordenada con la X y la Y
if(posicion[0]>0) // Si no se ha rebasado el margen izquierdo…
{
coordenadas_trazado+=contador_valor>0?” L “:“”; // …y quedan valores que representar, añadir una nueva línea (código L) para el próximo
contador_valor—; // Pasar al siguiente valor
}
else // Si se ha rebasado el margen izquierdo…
{
sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)
}
}
if(cerrado) // Si se dibuja un trazado (path) cerrado…
{
coordenadas_trazado+=” L “+posicion[0]+“,”+this.medida_caja_svg[1]+” Z”; // …se termina por la parte inferior de la caja y se añade Z para cerrarlo en SVG
}
this.trazado[cerrado?0:1].setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado
for(;contador_valor>=0;contador_valor—)
{
this.simbolo[contador_valor].setAttribute(“cx”,–10000);
this.simbolo[contador_valor].setAttribute(“cy”,0);
}
}
}
var temperatura_frigorifico;
function iniciar_grafico(nombre_objeto_grafico,nombre_objeto_valor,nombre_objeto_fecha)
{
temperatura_frigorifico=Object.create(Grafico);
temperatura_frigorifico.contenedor_html=document.getElementById(nombre_objeto_grafico);
temperatura_frigorifico.contenedor_valor=document.getElementById(nombre_objeto_valor);
temperatura_frigorifico.contenedor_fecha=document.getElementById(nombre_objeto_fecha);
temperatura_frigorifico.color_fondo=“#A8C3EA”;
temperatura_frigorifico.color_trazado=“#205587”;
temperatura_frigorifico.grosor_trazado=3;
temperatura_frigorifico.color_relleno=“#205587”;
temperatura_frigorifico.opacidad_relleno=0.5;
temperatura_frigorifico.color_simbolos=“#205587”;
temperatura_frigorifico.color_referencia[Grafico.MINIMO]=“#621D87”;
temperatura_frigorifico.color_referencia[Grafico.OPTIMO]=“#1D8762”;
temperatura_frigorifico.color_referencia[Grafico.MAXIMO]=“#871E35”;
temperatura_frigorifico.grosor_referencia=1.5;
temperatura_frigorifico.opacidad_referencia=0.5;
temperatura_frigorifico.tipografia=“monospaced”;
temperatura_frigorifico.color_tipografia=“#A8C3EA”;
temperatura_frigorifico.cerrado=true; // Dibujar una línea y una zona rellena debajo (true por defecto)
temperatura_frigorifico.maximo_puntos=32; // Un espacio de 30 segundos representados con un intervalo mínimo de 1 segundo necesitan como máximo 31 puntos, se añade uno por seguridad (por si algún valor monitorizado estuviera por debajo del segundo)
temperatura_frigorifico.crear_svg();
temperatura_frigorifico.nueva_correccion_caja_svg();
temperatura_frigorifico.tiempo_representado=30000;
temperatura_frigorifico.valor_referencia[Grafico.MINIMO]=–5;
temperatura_frigorifico.valor_referencia[Grafico.OPTIMO]=5;
temperatura_frigorifico.valor_referencia[Grafico.MAXIMO]=10;
temperatura_frigorifico.margen_valor=3;
temperatura_frigorifico.nueva_escala();
temperatura_frigorifico.nuevo_desplazamiento(); // El desplazamiento se (re)calcula cada vez que se añade un valor
temperatura_frigorifico.ajustar_prporcion();
window.addEventListener(“resize”,function(){temperatura_frigorifico.ajustar_prporcion()}); // Versión moderna
temperatura_frigorifico.repetir=setInterval(function(){temperatura_frigorifico.nuevo_valor_aleatorio()},1000);
}
|
Post kommentar