JavaScript ile IoT'ye bağlı sensörlerden gelen verilerin SVG grafiklerini oluşturun ve değiştirin

Çizim üzerine makaleler serisinin bu son bölümünde Nesnelerin İnternetine bağlı sensörlerden gelen verileri içeren grafiklerile nasıl oluşturulacağı veya değiştirileceği hakkında konuşmanın zamanı geldi JavaScript formatındaki çizimler SVG ve bazı elementler HTML kap görevi gören veya grafiklere tamamlayıcı bilgiler sunan.

İçindekiler

Nesnelerin İnterneti (IoT)'ye bağlı sensörlerden gelen veri grafikleri JavaScript ile oluşturulması ve değiştirilmesi

Bu eğitimin hedef kullanıcılarının bir elektronik ve bilgisayar programlama profili oluşturması gerekmektedir. mikrodenetleyicileraşina olmayabilirler HTML, CSS o SVG; Bu nedenle önceki bölümlerde dile veya ilgili teknolojiye kısa bir giriş yapıldı. Bu son kısımda yaklaşım biraz farklı, okuyucular mutlaka programlamayı bildikleri için dili kullanmaları mümkün. C + + bu nasıl JavaScript, temel sözdizimini şununla paylaşır: C ve temel programlama kavramlarının çoğunu atlamak ve böylece farklılıklara ve IoT'de sensör grafikleri oluşturmak için bizi ilgilendiren spesifik kullanıma odaklanmak için bir referans olarak kullanılabilir.

İsim ilk farka dair ipucu veriyor: JavaScript Bir programlama dilidir senaryo (tire) ve bu nedenle yorumlanır, derlemeye gerek yoktur; hangi bağlamda senaryo (örneğin bir web tarayıcısı) emirleri okuyacak, tercüme edecek ve uygulayacaktır. Kesin olmak gerekirse, çoğu durumda bir çalışma zamanı derlemesi (JIT), ancak kod yazma işlemi için JavaScript Bu bizi etkilemiyor, sadece kodu yazıyoruz ve çalışabiliyor.

İsim aynı zamanda ilk karışıklığı da içeriyor: JavaScript ile en ufak bir ilişkisi yok Java. Başlangıçta geliştirildiğinde Netscape tarayıcısı için önce Mocha, ardından daha az kafa karıştırıcı olan LiveScript olarak adlandırıldı. Tarayıcılarda başarılı bir şekilde uygulanıp onları aştıktan sonra şu şekilde standartlaştırıldı: ECMAScript (Için ECMA-262, sürüm 6 Bunu uygulayan tarayıcılara karşı tarafsız olmak için bu yazının yazıldığı sırada). Şu anda da bir standart var ISO sürüm 5, 2011'den itibaren (ISO / IEC 16262: 2011 makalenin yazıldığı sırada)

JavaScript'te değişkenler, temel veri türleri ve nesneler

Örneğin, olanlardan farklı olarak C + +, en JavaScript Bir değişken bildirilirken veri türü dahil edilmez ve ayrıca bir değişkenle ilişkili tür sabit değildir, programın yürütülmesi boyunca farklı türde bir değer atamak mümkündür.

<br />
var cosa;<br />
cosa=”texto”;<br />
console.log(typeof cosa); // Debería mostrar string en la consola<br />
cosa=123;<br />
console.log(typeof cosa); // Debería mostrar number en la consola<br />
cosa={temperatura:22,corriente:1.5};<br />
console.log(typeof cosa); // Debería mostrar object en la consola

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

Önceki örnekte, "şey" değişkeni bildirildi (veri tipi belirtilmeden), ardından farklı tipte bir veri atanır ve ona başvurulur. typeof şu tip JavaScript yorumladığını söyledi. Kodun hatalarını ayıklamak için bunu web tarayıcısının denetçi konsoluna (web'in sunumunu etkilemeyecektir) yazabilirsiniz. console.log().

Verilerin belirli bir türe, özellikle de metinden sayısala dönüştürülmesini zorlamak için aşağıdaki gibi işlevleri kullanabilirsiniz: parseInt() o parseFloat() bunlar sırasıyla tam sayılara veya kayan noktalı sayılara dönüştürülür. Ters dönüşüm şu şekilde yapılabilir: String(), ancak otomatik dönüştürme genellikle yeterli olduğundan gerekli olması pek olası değildir. İle parseFloat()Örneğin, bir web sayfası özelliğinin, birimleri içeren bir nesnenin genişliği veya yüksekliği gibi değerini alabilirsiniz; Bu şekilde ifade parseFloat("50px"); sonuç olarak sayısal bir değer olan 50 değerini döndürecektir.

En JavaScript çift ve tek tırnak arasında fark yoktur; Her iki durumda da veri türü stringve her biri kaçış kodlarına ihtiyaç duymadan diğerini içerebilir.

<br />
var texto;<br />
console.log(typeof texto); // Debería mostrar string en la undefined<br />
texto=”esto es un texto”;<br />
console.log(typeof texto); // Debería mostrar string en la consola<br />
texto=’A’;<br />
console.log(typeof texto); // Debería mostrar string en la consola<br />
texto=”esto es un ‘texto'”;<br />
console.log(typeof texto); // Debería mostrar string en la consola<br />
texto='”A”‘;<br />
console.log(typeof texto); // Debería mostrar string en la consola

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

Önceki örnekte, bir değişkenin bildirildiği (var olduğu) ancak herhangi bir değer atanmadığı zaman, tanımlanmamış bir veri türü içerdiği görülebilir (undefined). Atanmamış bir nesnenin değeri vardır null; Yani nesne vardır ama değeri yoktur; ona referans veren bir değişkenin typeof undefined Çin object. Bir nesne aynı zamanda boş olabilir, yani boş olmayabilir ancak herhangi bir özelliğe sahip olmayabilir.

Daha içinde bir nesne tanımlayın JavaScript parantez içine alınır ({ y }) iki nokta üst üste işaretiyle ayrılmış özellikler veya yöntemler (:) özellik adı özellik değeri ve virgülle (,) farklı özellikler. Bir nesnenin bu şekilde ifade edilmesi hakkında daha fazla bilgiyi şu makalede bulabilirsiniz: JSON biçimi.

Aksini düşünmenize yol açabilecek sözdizimini kullanabilseniz de, en JavaScript Sınıflar yok ama prototipler varYani, bir nesnenin özellikleri ve yöntemleri miras alması için, diğerlerinin (çocukların) referans olarak kullandığı başka bir nesne (prototip) oluşturulur. Stiline en yakın sözdizimi JavaScript bir prototip kullanmak Object.create kullanılması da mümkün (ve bazen faydalı) olmasına rağmen new diğer nesne yönelimli dillerde olduğu gibi.

<br />
var perro=new Mamifero(); // Esto funciona, pero no es exactamente el nuevo estilo JavaScript<br />
console.log(perro instanceof Mamifero);<br />
var gato=Object.create(Mamifero); // Crear un objeto usando un prototipo al estilo JavaScript<br />
console.log(Mamifero.isPrototypeOf(gato));

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));

Daha bir nesnenin diğerinin örneği olup olmadığını sorgula, eğer onu prototip olarak kullanırsanız, özelliklerini miras alırsanız, kısacası kullanabilirsiniz. instanceof (ile oluşturuldu new) o isPrototypeOf (ile oluşturuldu Object.create) nesne prototipi kullandığında true, kullanmadığında false olarak değerlendirilecektir.

Bir nesne bir başka nesneyi prototip olarak kullanarak yaratıldığında, yani bir nesne bir kez başlatıldığında, yeni özellikler ekleyin veya prototip özelliklerini geçersiz kılın olduğu gibi nokta sözdizimini kullanma gato.peso=2.5.

La diziler JavaScript Muhtemelen tanıdığınız kişilerden farklılar C. Başlangıç olarak uzunluklarını belirtmeye gerek kalmadan sadece köşeli parantezlerin açma ve kapama işaretleri ile bildirilirler ([ y ]), bileşenler heterojen olabilir (aynı dizide farklı veri türleri) ve yeni öğeler bir sınırla sınırlandırılmadan eklenebilir. matrisleri JavaScript aslında öğelerin listeleridir (koleksiyonlarıdır) sayısal bir indeks veya bir isimle referans verilir. Bir dizi aynı anda sayısal dizinler ve öğe adları içerebilir, ancak ikinci türden yararlanmak için nesnelerin (özelliklerin) kullanılması yaygındır.

<br />
// Declarar matrices (arrays)<br />
var preparada=[]; // La matriz ha sido declarada pero (todavía) no contiene valores<br />
var cosas=[“silla”,”mesa”,”caja”]; // Matriz declarada con componentes formada por cadenas de texto<br />
var valores=[200,”lleno”,0.5,true,”simple”,false,false,10]; // Matriz declarada con componentes heterogéneos<br />
var ramas=[20,”abc”,[1,2,3],false,[10,20,[“uno”,”dos”]]]; // Matriz que contiene matrices<br />
var demode=new Array(10,20,30,4,3,2,1); // La sintaxis con new no es la preferida de JavaScript aunque funciona…<br />
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</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>// Acceder a los valores de la matriz<br />
preparada.push(33.33); // Añade un nuevo valor al final de la matriz<br />
console.log(“La matriz ‘preparada’ contiene “+preparada.length+” elementos”); // Ahora contine 1 elemento<br />
console.log(cosas[0]); // Muestra en la consola el primer valor de la matriz (las matrices empiezan en el índice cero)<br />
cosas[2]=”tarro”;<br />
preparada[10]=50; // Los índices no tienen que ser consecutivos<br />
console.log(“La matriz ‘preparada’ contiene “+preparada.length+” elementos”); // Ahora contine 11 elementos<br />
console.log(“Elemento sexto: “+preparada[5]); // undefined</p>
<p>// Verificar si una variable es (apunta a) una matriz<br />
console.log(Array.isArray(cosas)); // Nuevas versiones de JavaScript (ECMAScript versión 5 o superior)<br />
console.log(cosas instanceof Array); // Implementaciones de JavaScript (ECMAScript) más viejas</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>// Para esto es mejor usar objetos<br />
var frutas=[];<br />
frutas[“peras”]=20;<br />
frutas[“manzanas”]=30;<br />
frutas[4]=10;<br />
console.log(frutas.peras);<br />
console.log(frutas[“manzanas”]);<br />
console.log(frutas[4]);<br />
console.log(frutas[3]); // undefined<!-- Ezoic - wp_incontent_9 - incontent_9 --><div id="ezoic-pub-ad-placeholder-719" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_9 - incontent_9 --><!-- Ezoic - wp_incontent_9 - incontent_9 --><div id="ezoic-pub-ad-placeholder-122" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_9 - incontent_9 --><!-- Ezoic - wp_incontent_9 - incontent_9 --><div id="ezoic-pub-ad-placeholder-122" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_9 - incontent_9 -->

// 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

Önceki örnekte görülebileceği gibi, bir değişkenin bir dizi örneğine (bu bir dizi nesnesidir) karşılık gelip gelmediğini bilmek için şunu kullanabilirsiniz: instanceofgenel nesnelerde veya daha yeni sürümlerde zaten kullanıldığı gibi JavaScript başvurabilirsin Array.isArray()

Dizinin elemanlarına erişmek için indeksini kullanabilirsiniz (matriz[7]) veya köşeli parantez içindeki adla birlikte özellik adına göre (matriz["nombre"]) veya nesneler için olağan nokta sözdizimi ile (matriz.nombre). Ad bir metin dizesi olduğundan, onu oluşturmak için değişkenleri içeren bir ifade kullanılabilir. Özelliklere sahip bir dizide döngü yapmak için formata sahip bir döngü kullanılabilir for(propiedad in matriz).

<br />
var matriz=[];<br />
matriz[“color”]=”verde”;<br />
matriz[“grosor”]=10;<br />
matriz[“estado”]=”nuevo”;<br />
matriz[0]=25.0;<br />
matriz[1]=”uno”;<br />
for(propiedad in matriz)<br />
{<br />
  console.log(propiedad+” valor “+matriz[propiedad]);<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>/* El resultado en la consola será:</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>0 valor 25<br />
1 valor uno<br />
color valor verde<br />
grosor valor 10<br />
estado valor nuevo</p>
<p>*/<!-- Ezoic - wp_incontent_12 - incontent_12 --><div id="ezoic-pub-ad-placeholder-125" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_12 - incontent_12 --><!-- Ezoic - wp_incontent_12 - incontent_12 --><div id="ezoic-pub-ad-placeholder-125" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_12 - incontent_12 --><!-- Ezoic - wp_incontent_12 - incontent_12 --><div id="ezoic-pub-ad-placeholder-722" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_12 - incontent_12 -->

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

Tedavi etme amacımız açısından ilginç nesne Datetarih ve saati temsil edecek ve yönetecek olan JavaScript. Nesne veri olmadan oluşturulabilir, dolayısıyla geçerli tarih ve saati alır veya 1 Ocak 1970'ten bu yana milisaniye cinsinden bir değer olarak bir tarih belirtilerek oluşturulabilir (örneğin, Unix zamanı veya POSIX zamanı ancak saniye yerine milisaniye cinsinden ifade edilir) veya yıl, ay, gün, saat gibi ayrı değerler belirtilerek...

Nesne tam bir dizi içerir tarih ve saati sorgulama veya ayarlama yöntemleri:

now()
1 Ocak 1970'den bu yana milisaniye cinsinden ifade edilen geçerli tarih ve saati döndürür
getTime() | setTime()
1 Ocak 1970'den bu yana milisaniye cinsinden zaman değerini sırasıyla alır veya değiştirir. valueOf()Çoğu nesnede bulunan bir yöntem olan, karşılık gelen Date nesnesinin değeri de elde edilir; getTime() ile Unix zamanı veya POSIX zamanı ms cinsinden ifade edilir.
getMilliseconds() | setMilliseconds()
Nesnenin kesirli milisaniye kısmını sorgulamak veya ayarlamak için kullanılır Date üzerinde yürütülür. Başvurulursa elde edilen değer 0 ile 999 arasındadır ancak toplam tarih ve saatte birikecek daha büyük değerler atanabilir, böylece diğer get yöntemleri gibi nesnenin değerini artırmaya hizmet eder. Date (veya negatif değerler kullanılıyorsa azaltın).

getSeconds() | setSeconds()
Nesnenin saniye değerini sırasıyla döndürür veya değiştirir Date.
getMinutes() | setMinutes()
Nesnenin tutanaklarına danışmak veya ayarlamak için kullanılır Date.
getHours() | setHours()
Nesnenin saatlerine (0'dan 23'e kadar) bakmanıza veya değiştirmenize olanak tanır Date.

getDay()
Tarihe ilişkin haftanın gününü, 0'dan 6'ya (Pazar'dan Cumartesi'ye) kadar bir değer olarak ifade ederek döndürür.
getDate() | setDate()
Nesnenin ayın gününü döndürür veya değiştirir Date hangisinde uygulanır.
getMonth() | setMonth()
Nesnenin ay numarasını incelemek veya değiştirmek için kullanılır Date.

getFullYear() | setFullYear()
Tarih ve saati içeren nesnedeki yıl değerini sorgular veya ayarlar.

Daha önceki yöntemler Date bir sürüm ekle UTC ara hesaplamalar yapmaya gerek kalmadan doğrudan evrensel zamanla çalışabilmek. Bu anlamda örneğin getHours() bir sürümü var getUTCHours() o getMilliseconds() bir alternatif getUTCMilliseconds() resmi (yasal) veya evrensel zamanla alternatif olarak çalışmak. İle getTimezoneOffset() Evrensel saat ile yerel resmi saat arasındaki farkı biliyorsunuz.

<br />
var dia_semana=[“domingo”,”lunes”,”martes”,”miércoles”,”jueves”,”viernes”,”sábado”];<br />
var nombre_mes=[“enero”,”febrero”,”marzo”,”abril”,”mayo”,”junio”,”julio”,”agosto”,”septiembre”,”octubre”,”noviembre”,”diciembre”];<br />
var digitos_hora;<br />
var hoy=new Date();<br />
var texto_hoy=””;<br />
texto_hoy+=”Hoy es “;<br />
texto_hoy+=dia_semana[hoy.getDay()];<br />
texto_hoy+=”, “;<br />
texto_hoy+=hoy.getDate();<br />
texto_hoy+=” de “;<br />
texto_hoy+=nombre_mes[hoy.getMonth()];<br />
texto_hoy+=” de “;<br />
texto_hoy+=hoy.getFullYear();<br />
texto_hoy+=” y son las “;<br />
digitos_hora=hoy.getHours();<br />
texto_hoy+=digitos_hora>9?digitos_hora:”0″+digitos_hora;<br />
texto_hoy+=”:”;<br />
digitos_hora=hoy.getMinutes();<br />
texto_hoy+=digitos_hora>9?digitos_hora:”0″+digitos_hora;<br />
texto_hoy+=”:”;<br />
digitos_hora=hoy.getSeconds();<br />
texto_hoy+=digitos_hora>9?digitos_hora:”0″+digitos_hora;

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 işlevleri

Eğer bunu okuyorsanız kesinlikle nasıl programlanacağını biliyorsunuzdur. mikrodenetleyiciler en C içinde C + + ve fonksiyon kavramını bilir. Temel fikir aynı olsa da JavaScript Tanımlanma ve kullanılma şekilleri biraz farklıdır. Başlangıç olarak, zaten söylendi, JavaScript Açıkça veri türlerini kullanmadığından, işlevi tanımlarken belirtmenize gerek yoktur.. Takip etmek, Bir işlevin bir isme sahip olması zorunlu değildir; anonim olabilirler. Bunları çağırmak için bir değişkenle ilişkilendirilebilirler ancak bazen gerekli olmayabilir, çünkü bazen parantezlerin ve parametrelerin fonksiyonun tanımından sonra eklendiği hemen çağırmak yararlı olabilir.

Bir işlevi tanımlamak için önek function, mümkünse adı, argümanları (fonksiyona iletilen parametreler) parantez içine ve fonksiyon çağrıldığında yürütülecek kodu parantez içine yazın.

<br />
function doble(numero)<br />
{<br />
  var resultado=numero*2;<br />
  return resultado;<br />
}

function doble(numero)

{

var resultado=numero*2;

return resultado;

}

Elbette, önceki örnekte "sonuç" değişkenine hiç ihtiyaç duyulmamıştı, ancak bu, şunu hatırlamak için iyi bir bahanedir: değişken kapsam, beklediğiniz gibi çalışır: "sonuç" değişkeni yalnızca "double" işlevi içinde bulunur. İçinde JavaScript ayrıca kullanılabilir letyerine var, bir değişkeni kod bloğu bağlamına dahil etmek için (küme parantezleri içine alınmış, { y })

Önceki bölümde nesnelerden bahsederken temel bir şey eksikti: özellikler tanımlanmış ancak yöntemler tanımlanmamıştı. Beklenildiği gibi, nesne yöntemleri işlevlerdir, adları yoktur ve nesne tanımı tarafından atanan (özellik) adından kullanılır (çağrılır).

<br />
var<br />
termostato=<br />
{<br />
  temperatura_actual:0.0,<br />
  temperatura_frio:18.5,<br />
  temperatura_calor:22.0,<br />
  consumo:0,<br />
  ver_temperatura:<br />
  function()<br />
  {<br />
    console.log(“Temperatura actual: “+this.temperatura_actual+” °C”);<br />
  }<br />
}

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”);

}

Önceki örnekte, konsol aracılığıyla "current_temperature" özelliğinin değerini görüntüleyen "view_temperature" adında bir yöntem zaten mevcuttur. Pek kullanışlı değil ama bir nesnenin tanımının neye benzediğine dair daha eksiksiz bir fikir veriyor. JavaScript.

Bir nesnenin (işlevlerin) yöntemlerine özelliklerine erişmek için şunu kullanın: this11. satırdaki önceki örnekte olduğu gibi, "current_temperature" özelliğini kullanırken.

Belge Nesne Modeline (DOM) JavaScript ile erişme

. JavaScript Sistem kaynaklarına olmasa da, üzerinde çalıştığı web sayfasının içeriğine ve o sayfayı görüntüleyen tarayıcının bazı özelliklerine erişebilirsiniz. Erişilen özellikleri ve yöntemleri destekleyen veri yapısı JavaScript pencere nesnesinin bir kısmı, özellikle nesnenin içeriği (belge HTML) nesneye karşılık gelir document. Bazen netlik sağlamak için kullanılsa da, yöntem veya özelliklere atıfta bulunmak için bunların önüne pencere koymak gerekli değildir, örneğin şunu kullanmak yeterlidir: documentolduğu gibi kök nesnenin adını yazmaya gerek yoktur. window.documentGeçerli pencereye başvurulduğu sürece.

En çok kullanılan şekli belgede bir nesne bulma HTML Bu yöntem sayesinde getElementById(), kod oluşturulurken belirtilen kimliğin argüman olarak iletildiği yer HTML. Önceki bölümlerde anlatılanlardan, nesnenin içindeki bileşenlere de erişebileceğinizi varsaymak kolaydır. document nokta sözdizimini kullanarak (document.componente) veya parantez içinde hem adı (document["componente"]), sayısal dizin gibi en kullanışlı olanı, manuel olarak oluşturulmuş bir web sayfasının içeriğine erişirken kullanımı zor ve pratik değildir.

ile JavaScript yapabilirsiniz başka bir öğe içeren öğeyi alın (öğe veya ana düğüm) mülkünüzle ilgili danışmanlık parentNode veya mülkünüz parentElementfark, ana öğenin (parentElement) dizenin son elemanının KARAR Bu boş (null) ve ana düğüm (parentNode) belgenin kendisidir (document).

Daha bir öğenin içeriğini değiştirmek HTMLörneğin bir etiketinki <div>, Kullanılabilir innerHTML ve özelliklerini değiştirmek için ona farklı bir sınıf atamayı seçebilirsiniz. className veya özelliklerini tek tek değiştirin style. Web sayfasındaki bir öğe tarafından görüntülenen stile bakmak her zaman yararlı olmayabilir style çünkü çeşitli faktörlere bağlı olabilir veya açıkça belirtilmemiş olabilir. Sonunda web sayfasında görüntülenen bir öğenin stilini kontrol etmek için getComputedStyle yöntemi kullanılır..

Bir belge öğesine HTML Görünümünü ve davranışını belirlemek için ona birkaç sınıf atanabilir. bir nesnenin sınıflarının listesini yönetmek JavaScript başvurabilirsin classList yöntemleri sunan add Listeye yeni bir sınıf eklemek için, remove onu kaldırmak için, toggle onu değiştirmek veya bir öğenin sınıf listesinin içeriğine bakmak için item ve containslistede belirli bir konumu kaplayan sınıfı ve bir değeri döndürür true o false Belirli bir sınıfın listede olup olmadığı.

<br />
var contenedor_temperatura=document.getElementById(“temperatura”); // Encontrar el div con id=”temperatura”<br />
contenedor_temperatura.innerHTML=””; // Eliminar el contenido provisionalmente para que no se vean los cambios<br />
contenedor.className=”bloque_temperatura”; // Asignar una nueva clase<br />
if(temperatura>20) // Si la temperatura es mayor que 20 °C…<br />
{<br />
  contenedor.style.color=”#FF6666″; // …usar el color rojo en lugar del color normal de la clase<br />
}<br />
contenedor_temperatura.innerHTML=”La temperatura es “+temperatura+” °C”; // Cuando el aspecto esté preparado mostrar el valor<br />
if(document[“titulo”].classList.contains(“estilo_titulo”)) // Si el objeto “titulo” tiene la clase “estilo_titulo”…<br />
{<br />
  if(document[“titulo”].classList.contains(“general”)) // …y la clase “general”…<br />
  {<br />
    document[“titulo”].classList.remove(“general”);  // …quitar la clase “general”<br />
  }<br />
}<br />
else // Si el objeto “titulo” no tiene la clase “estilo_titulo”…<br />
{<br />
  document[“titulo”].classList.add(“estilo_titulo”); // …añadir la clase “estilo_titulo” (da igual que tenga o no la clase “general”)<br />
}

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”)

}

Önceki örnekte şu konumda bulunur: getElementById işlemek istediğiniz nesne (bir öğe <div> onun için id), görünümü değiştirmeden önce içerik ile atanarak silinir. innerHTML boş bir metin dizesi, yeni bir sınıfa atanır className ve stili şu şekilde değiştirildi: style içeriğin değerine (sıcaklığa) bağlı olarak, varsa özellik aracılığıyla rengin değiştirilmesi color. Görünüm oluşturulduktan sonra değer tekrar kullanılarak yazılır. innerHTML.

Yukarıdaki örneğin ikinci bölümünde (9'dan 19'a kadar olan satırlar) bir kod öğesine erişilir. HTML sözdizimini kullanarak document[] ve mülk id Bu yöntemle sınıf listesini değiştirmek için öğenin classList.remove() ve yöntemleclassList.add()kullanarak karşılaştırdıkları, koşullu yürütmelerde gerçekleştirilen birkaç sorgunun sonucuna dayalıdır. classList.contains().

Ne zaman gidiyor bir öğeye atıfta bulunmak HTML varias kod boyunca kere JavaScript, Birazcık onu bir değişkene atamak daha verimli veya isim yerine indeksini kullanın, aksi takdirde kullanacağınız yöntem JavaScript bunu her seferinde elde etmek, adının aranmasını gerektirir ve bir değişkene erişildiğinden biraz daha fazla zaman harcar.

Daha belgeye yeni nesneler ekleme HTML, yöntemle ilk önce oluşturulabilirler createElement de document ve daha sonra bunları ağacın gerekli olduğu noktada geri kalan öğelere dahil edin. appendChild. Bir nesne oluşturmak için XMLnesneler gibi SVG IoT sensörlerinin grafiğini çizmek için kullandığımız createElementNS (NS için ad alanı). Format hakkında konuşurken açıklandığı gibi SVG, ona karşılık gelen ad alanı (geçerli sürüm için) http://www.w3.org/2000/svg, iletilmesi gereken createElementNS öğe türüyle birlikte bir argüman olarak, svg, bu durumda.

bir alternatif innerHTML bir belge öğesine içerik olarak metin eklemek için HTML yöntem bu createTextNode() nesne document. Bu alternatifle şunları yapabilirsiniz: yeni metin oluştur (bir değişkene atanırsa daha sonra erişilir) yöntemle nesne ağacına dahil edilir appendChild(). olarak alternatif appendChild()Yeni içeriği, eklendiği düğümde zaten mevcut olanın sonuna ekleyen, kullanabilirsiniz yöntem insertBefore(), mevcut bir nesnenin önüne yeni bir nesne ekler. Giymek insertBefore() yerine appendChild() örneğin aşağıdakilere hizmet eden bir yöntem sağlar: yeni nesneleri mevcut nesnelerin önüne sıralayın bir öğenin diğerinin önünde olması (bir listede olduğu gibi) veya ön plana veya arka plana daha yakın öğelerin bulunduğu bir grafik yapıyı kaplaması veya kaplaması gerektiğinde.

Etkinliklere JavaScript ile tepki verme

Ne zaman yolu IoT bağlantılı sensör grafikleri için bir web sayfasını kapsayıcı olarak kullanma kullanılmış onload Etikette <body> Grafiği çizmeye başlamak için. Kod nesneleriyle ilişkili bu özellik HTML, şuna atıfta bulunur: Etkinlikler JavaScript. Daha önce açıklandığı gibi sayfa yüklendiğinde bir işlevi çalıştırır. Her ne kadar kodla ilişkilendirilmiş olsa da HTML daha akılda tutmak için kodda yazılmış olabilir JavaScript olarak body.onload=dibujar; olma dibujar web sayfası yüklendiğinde başlatılması gereken fonksiyonun adı.

En son sürümlerinde JavaScript olaylar işlevlerle ilişkilendirilebilir. addEventListener format ile objeto.addEventListener(evento,función); veya sözdizimini kullanarak objeto.evento=función; bu aynı zamanda eski uygulamalarda da işe yarar. Etkinlikle ilişkili işlevin bağlantısını kaldırmak için, removeEventListener ile aynı formata sahip olan addEventListener.

JavaScript Bir web sayfasında meydana gelebilecek çok sayıda olaya tepki verme yeteneğine sahiptir. Örneğin bir öğeye ne zaman tıklandığını algılayabilir HTML ile onmousedownveya ile tıklandığında onclickile bir tuşa basıldığında onkeydownkaydırma çubuğunu kullanarak onscroll. Amacımız açısından bu bizim için yeterli ile sayfa yükünü tespit et onload ve yeniden boyutlandırılması onresize. Bu olayları nesnelerle ilişkilendireceğiz. body y window del KARAR sırasıyla. İlki kodda atanabilir HTML, görüldüğü gibi ve koddaki ikinci JavaScript ilk tarafından çağrılan fonksiyonun içinde ve formatta window.onresize=redimensionar; olma redimensionar pencerenin boyutu her değiştiğinde çağrılacak işlev.

Belirli bir zaman aralığından sonra çalıştır

JavaScript için iki kaynağı var ertelenmiş yürütme: setTimeout, belirli bir zaman aralığından sonra bir işlevi yürütür ve setInterval her belirli zaman aralığında bir işlevi yürütecek olan. Her iki yöntem de parametre olarak (1) çağrılan işlevi ve (2) milisaniye cinsinden ifade edilen zaman aralığını gerektirir. İşlemlerini durdurmak için, bu işlevler tarafından döndürülen sonucu değişkenlere atayabilir ve bunları argüman olarak iletebilirsiniz. clearTimeout oa clearInterval onları tekrar çağırmak istemediğinizde (veya ilk kez çalıştırılmalarını istemediğinizde) setTimeout o setInterval sırasıyla.

<br />
var cuenta_atras=setTimeout(descansar,1000*60*20); // Recordar que hay que descansar cuando pasen 20 minutos<br />
var repeticion=setInterval(consultar_correo,1000*60*5); // Revisar el correo cada 5 minutos</p>
<p>function descansar()<br />
{<br />
  alert(“Puedes descansar un rato”); // Esto solamente aparecerá una vez<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function consultar_correo()<br />
{<br />
  alert(“Revisa el correo electrónico”); // Esto aparecerá cada cinco minutos<br />
}</p><!-- Ezoic - wp_incontent_35 - incontent_35 --><div id="ezoic-pub-ad-placeholder-745" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_35 - incontent_35 --><!-- Ezoic - wp_incontent_35 - incontent_35 --><div id="ezoic-pub-ad-placeholder-148" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_35 - incontent_35 --><!-- Ezoic - wp_incontent_35 - incontent_35 --><div id="ezoic-pub-ad-placeholder-148" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_35 - incontent_35 --><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>function detener_cuenta_atras() // No utiliza argumentos sino la variable global<br />
{<br />
  clearTimeout(cuenta_atras); // Detener la cuenta atrás para avisar a los 20 minutos<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function no_avisar_lectura_correo() // No utiliza argumentos sino la variable global<br />
{<br />
  clearInterval(repeticion); // Dejar de avisar cada 5 minutos<br />
}

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

}

Önceki örnekte yöntem tanıtılmıştır. alert bir uyarı işareti göstermeye yarar. Geçmişte yaygın olarak kullanılmasına rağmen şu anda neredeyse koddan yasaklanmıştır. JavaScript web sayfasını bir iletişim kutusuyla kaplamanın ne kadar agresif (müdahaleci) olduğu nedeniyle.

için yazılmış bir programda mikrodenetleyici küçük bir serinin (tabaktaki gibi) Arduino Uno) önceki örnekte olduğu gibi global değişkenlerin kullanılması yaygındır. JavaScript, kod kısa olduğundan ve özellikle kafa karıştırıcı olmadığından, çoğu zaman işlevler geçici olarak uygulandığından ve küresel değişkenlerin kullanımı, az kaynağa sahip sistemlerde kritik olan, bellek kullanımını çok basit ve sezgisel bir şekilde tahmin etmeyi mümkün kıldığından . Yerine, en JavaScript Küresel değişkenlerin kullanımını mümkün olan en aza indirmek yaygındır. çünkü normal bir şekilde çalıştığı için bellek kullanımını aceleye getirmesi gerekmez. işlemci sahip olduğundan çok daha üstün kaynaklara sahip MCU, müdahale etmeden çalışması gereken birçok üçüncü taraf koduyla bir arada bulunması muhtemel olduğundan ve açık bir sistem olduğundan gelecekteki yürütme bağlamı tahmin edilemez (bir programın programı). mikrodenetleyici Small, çalışmaya başladıktan sonra daha fazla kod eklemeden çalışmasını tamamen belirler) ve uygulamaların boyutları, kodun çalışmasını kapsamaması durumunda okumayı zorlaştırabileceğinden, yöntemleri mümkün olduğunca kendi kendine yeten hale getirir.

JavaScript Math nesnesiyle matematiksel işlemler

Daha karmaşık matematiksel hesaplamaların matematiksel işlemleri nesnede gruplandırılmıştır. Math. Bu nesne doğrudan kullanılır; içerdiği yöntemleri veya özellikleri (sabitleri) kullanmak için nesnenin başlatılmasına gerek yoktur.

Math.abs(n) N parametresinin mutlak değeri
Math.acos(n) N parametresinin arkkosinüsü (radyan cinsinden sonuç)

Math.asin(n) N parametresinin ark sinüsü (radyan cinsinden sonuç)
Math.atan(n) N parametresinin arktanjantı (radyan cinsinden sonuç)
Math.atan2(n,m) N/m'nin arktanjantı (radyan cinsinden sonuç)

Math.ceil(n) Parametreyi yukarıya doğru en yakın tam sayıya yuvarlayın
Math.cos(α) α parametresinin kosinüsü (radyan cinsinden α)
Math.E e numarası (≃2.718281828459045)

Math.exp(n) e parametresine yükseltildi n: eⁿ
Math.floor(n) N parametresini en yakın aşağı tam sayıya yuvarlayın
Math.log(n) N parametresinin doğal logaritması (e tabanı)

Math.LN2 2'nin doğal logaritması (e tabanı) (≃0.6931471805599453)
Math.LN10 10'nin doğal logaritması (e tabanı) (≃2.302585092994046)
Math.LOG2E e'nin 2 tabanlı logaritması (≃1.4426950408889634)

Math.LOG10E e'nin 10 tabanlı logaritması (≃0.4342944819032518)
Math.max(a,b,c,…) Geçirilen parametreler listesinin en büyük değeri
Math.min(a,b,c,…) Geçirilen parametreler listesinin en küçük değeri

Math.PI Sayı π (≃3.141592653589793)
Math.pow(n,m) Birinci parametre n, ikinci parametre m'ye yükseltildi: n^m
Math.random() (Neredeyse) 0.0 ile 1.0 arasında rastgele sayı

Math.round(n) N parametresini en yakın tam sayıya yuvarlayın
Math.sin(α) α parametresinin sinüsü (radyan cinsinden α)
Math.sqrt(n) N parametresinin karekökü

Math.SQRT1_2 1/2'nin karekökü (≃0.7071067811865476)
Math.SQRT2 2'nin karekökü (≃1.4142135623730951)
Math.tan(α) α parametresinin tanjantı (radyan cinsinden α)

AJAX ile sunucudan veri yükleme

IoT'de saklanan bilgilerin çizilmesi için izlenen yöntem, verilerin zaman zaman sunucudan yüklenmesi ve bunların temsil edildiği grafiğin yeniden çizilmesinden oluşur. Sunucudan veri okumak için teknoloji kullanılır AJAX (Eşzamansız JavaScript ve XML) bir nesne aracılığıyla XMLHttpRequest de JavaScript. Veri grafiğinin çizilmesi bir nesnenin yeniden kullanılmasıyla yapılır SVG bu zaten kodda var HTML ve yüklenen yeni verilere karşılık gelecek şekilde koordinatları değiştirilen bir çizim içerir.

Bu öneri örneğinde, çizimin güncellenmesinin yanı sıra, web sayfasında her grafik için son ölçülen verinin tarihini ve değerini gösteren bir metin de güncellenmektedir.

Sunucu tarafında bilgilerin yer aldığı bir veritabanı bulunmaktadır. IoT'ye bağlı sensörlerin izlediğini. Bu veritabanı nesne isteği tarafından okunur XMLHttpRequest kodlanmış bilgilerle yanıt vermek JSON biçimi, kullanılan yöntemin adı formatla bir ilişki olduğunu düşündürse de XML.

Polaridad.es'in ilk eğitiminde Nesnelerin İnterneti veri depolama Nesnelerin İnterneti'ne bağlı cihazların sağladığı bilgilerin sunucu tarafından yönetilmesine yönelik bir altyapı örneğini görebilirsiniz. Bu makale serisinde kaynak olarak bir sunucu kullanılıyor Apache programlama dilini kullanabileceğiniz PHP bir veritabanına erişmek için MySQL o MariaDB. IoT'yi desteklemek için kullanılan sunucularda veritabanları bulmak çok yaygındır. MongoDB (NoSQL) ve programlama dili JavaScript üzerinde node.js Yazılım altyapısı olarak.

Bir sonraki işlev, sunucudaki sensörlerden birinden en son verilerin talep edilmesinden sorumludur. İşlev çağrısında nesne argüman olarak kullanılır JavaScript çizilen verileri destekleyen. Aynı grafik birkaç değeri temsil ediyorsa, örneğin görsel olarak bir korelasyon aramak için, sunucuya aynı anda birden fazla değer döndürmesi için bir istekte bulunulabilir; bu, sunucunun çalışma şekli nedeniyle daha uygun bir yöntemdir. HTTP protokolü.

<br />
function consultar_ultimo_valor_sensores(objeto_grafico)<br />
{<br />
  var consulta=”zona=”+objeto_grafico.sufijo_nombre;<br />
  var pagina=”ultimo_valor_sensor.php”;<br />
  var resultado;<br />
  var ajax;<br />
  if(window.XMLHttpRequest)<br />
  {<br />
    ajax=new XMLHttpRequest(); // ajax=Object.create(XMLHttpRequest);<br />
  }<br />
  else // Versiones antiguas de MS Internet Explorer<br />
  {<br />
    ajax=new ActiveXObject(“Microsoft.XMLHTTP”);<br />
  }<br />
  ajax.onreadystatechange=<br />
  function()<br />
  {<br />
    if(ajax.readyState==4&&ajax.status==200&&ajax.responseType==”json”)<br />
    {<br />
      resultado=JSON.parse(ajax.responseText);<br />
      if(resultado.fecha>objeto_grafico.fecha[objeto_grafico.fecha.length-1])<br />
      {<br />
        // Normalmente se gestionará la respuesta utilizando el objeto<br />
        redibujar_grafico(objeto_grafico,resultado);<br />
        // Si los datos son sencillos y tienen una estructura clara puede ser más práctico usarla directamente<br />
        // redibujar_grafico(objeto_grafico,[resultado.fecha,resultado.temperatura]);<br />
      }<br />
    }<br />
  }<br />
  ajax.open(“POST”,pagina);<br />
  ajax.setRequestHeader(“Method”,”POST “+pagina+” HTTP/1.1″);<br />
  ajax.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);<br />
  ajax.setRequestHeader(“Content-length”,consulta.length);<br />
  ajax.setRequestHeader(“Connection”,”close”);<br />
  ajax.send(consulta);<br />
}

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);

}

Önceki örneğin üçüncü satırında, sunucuya yapılacak sorguda, izlenen yerin adı veya kodu olacak "zone" argümanının iletileceği sorgu hazırlanır. Aynı veri tabanında farklı sensörler (örneğin farklı odalardaki sıcaklığı ölçen termometreler) bir arada bulunabilir. Önceki işleve iletilen parametrenin, yani grafik verilerinin bulunduğu nesnenin, oda adını ("name_suffix") içeren bir özelliği içermesi beklenir.

Önceki kodun 7. ve 14. satırları arasında, nesne XMLHttpRequest "ajax" değişkeninde saklanır. Nesnenin nasıl oluşturulacağını seçmeden önce arama yaparsınız window kendi kendine XMLHttpRequest mevcut değildi (Microsoft Explorer'ın eski sürümlerinde olan bir şeydi ve çok geride olmasına rağmen, nesneyi (daha yerel) sözdizimini kullanarak oluşturmak için alternatiflerin bir örneği olarak hizmet ediyor) Object.create o newdiğer nesne yönelimli dillerdekine benzer.

Yanıtı anında yönetebilmek için, sunucuya istek yapılmadan önce 15'ten 26'ya kadar olan satırlarda onu işleyen kod hazırlanır.

Yolu sorguyu gerçekleştir HTTP sunucuya oluşur bir bağlantı aç ile open türü ve sayfayı belirten (isteğe bağlı olarak kullanıcı adı ve şifre), başlıkları hazırla ile protokolün setRequestHeader y isteği gönder ile send. Başlık HTTP Content-length kullanılarak hesaplanan sorgunun uzunluğunu (karakter sayısı) bilmeniz gerekir. length.

Talep ne zaman AJAX hazır olduğunda, olayla ilişkili işlev yürütülür onreadystatechange. Önceki örnekte, bir işlev atamak yerine, sunucudan gelen verilerin alımını yönetecek anonim bir işlev anında tanımlanmıştır. Öncelikle 18. satırda isteğin durumunun "tamamlandı" olduğu doğrulanır, bu da değere karşılık gelir. 4 mülkün readyStatedurumunun "Tamam" olduğunu HTTP protokolü (kod 200) mülkten edinilebilecek status ve gelen veriler şöyle JSON biçimi, mülk danışmanlığı responseType.

Yanıtın durumunun beklendiği gibi olduğu doğrulandıktan sonra, önceki örneğin 20. satırında sonucu içeren bir nesne oluşturur, metni dönüştürür JSON. Yanıt, döndürülecek bir tarih sağlar; bu, sunucunun gönderdiği sonucun daha önce grafikte temsil edilip edilmediğini görmemize olanak tanır ve bu, 21. satırda doğrulanır. Veriler yeniyse, 23. satırda. Grafiğin yeni bilgilerle yeniden çizilmesinden sorumludur denir.

Bu okuma yöntemini önerirken amaç, verilerin çok sık yenilenmesidir. Sunulan bilgi uzun bir döneme karşılık geliyorsa (bir günün veya bir haftanın sıcaklıkları gibi), mevcut tüm verileri toplayan bir ilk talep uygulanabilir ve ardından örnektekine benzer şekilde bu verileri güncelleyen bir talep uygulanabilir. Dönem muhabiri.

Test için rastgele veriler oluşturun

Tüm sunucu ve istemci altyapısı hazır olduğunda, önceki bölümdeki gibi bir fonksiyon veriyi okumaktan ve onunla grafiği çizmekten sorumlu olacak, ancak Test aşamasında kontrollü bir aralıktaki rastgele sayıları kullanmak daha pratik olabilir yazılan kodun doğru olup olmadığını görmek için Aşağıdaki fonksiyon, son uygulamayı oluştururken veri elde etmek için örnek teşkil edebilir.

<br />
function consultar_ultimo_valor_sensores<br />
(<br />
  objeto_grafico,// Objeto dentro del elemento SVG que representa el trazado<br />
  valor_maximo,  // Valor máximo<br />
  valor_minimo,  // Valor mínimo<br />
  margen_valor   // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo<br />
)<br />
{<br />
  // La forma más genérica es usar objetos<br />
  /*<br />
  var nuevo_valor_inventado=<br />
  {<br />
    fecha:Math.round(Date.now()+Math.random()*1000),<br />
    temperatura:Math.random()*Math.abs(valor_maximo-valor_minimo)+valor_minimo<br />
  };<br />
  */<br />
  // En este caso concreto, como son pocos datos y con una estructura concreta es más práctico usar un vector<br />
  var nuevo_valor_inventado=<br />
  [<br />
    Math.round(Date.now()+Math.random()*1000),<br />
    Math.random()*Math.abs(valor_maximo-valor_minimo)+valor_minimo<br />
  ];<br />
  redibujar_grafico(objeto_grafico,nuevo_valor_inventado);<br />
}

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);

}

Yukarıdaki örnek, bilgileri bir veritabanından okumak yerine, bunları rastgele oluşturur ve grafiği çizmekten sorumlu fonksiyona iletir. İcat edilen veri, milisaniye cinsinden değer olarak ifade edilen bir tarih, sensör bilgilerinin kaydedildiği an ve maksimum değer ile minimum değer arasındaki izlenen verilerden oluşan bir vektördür.

Bu örnekte bir tarih üretilirken, buluş tarihindeki tarihe göre bir saniyeye (1000 milisaniye) kadar geciktirilebilmektedir. Gibi Math.random() 0.0 ile 1.0 arasında bir sayı üretir, bu sayının 1000 ile çarpılması 0 ile 1000 arasında bir sayı üretir ve bu sayı daha sonra bir tam sayıya dönüştürülür. Aynı şekilde rastgele sayının aralıkla (maksimum eksi minimum) çarpılıp minimumun eklenmesiyle değer elde edilir.

IoT sensörleri grafiğini SVG grafiğiyle çizin

Temsil etmek istediğimiz değerleri (örnekte sıcaklık) ve bunların koordinat şeklinde birlikte ifade edilebilecek zamansal konumlarını nasıl elde edebileceğimizi gördüğümüz için, aşağıdaki örnekte bir yol çizme fonksiyonu gösterilmektedir. bu noktaları birleştiren ve isteğe bağlı olarak üstteki o çizgiyle sınırlandırılan renkli bir alan. Sonuç aşağıdaki resimdeki gibi olacaktır.

IoT sensörlerinden gelen verileri temsil etmek için SVG ve JavaScript ile oluşturulan bir grafik örneği

Grafiğin yatay ekseni (X) zamanı, dikey ekseni (Y) ise IoT'ye bağlı sensörlerin izlediği değerleri temsil eder. Yatay aralık birkaç saniyedir, çünkü bu öneride grafik, sensörlerin durumu hakkında neredeyse gerçek zamanlı bilgi sağlamak üzere çok sık (örneğin her saniyede) güncellenmektedir.

<br />
function actualizar_grafico<br />
(<br />
  grafico, // Objeto SVG con el que se dibuja la gráfico<br />
  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<br />
  tiempo_total_representado, // Tiempo total representado por la gráfico (en milisegundos)<br />
  valor_maximo, // Valor máximo aceptable antes de emitir una alarma<br />
  valor_minimo, // Valor mínimo aceptable antes de emitir una alarma<br />
  margen_valor, // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo<br />
  parametro_cerrado, // Valor booleano que indica si el trazado se cierra o no (por defecto false)<br />
  parametro_ancho_caja, // Ancho de la caja que contiene la gráfico (por defecto 100.0)<br />
  parametro_alto_caja // Alto de la caja que contiene la gráfico (por defecto 100.0)<br />
)<br />
{<br />
  var cerrado=parametro_cerrado||false; // Valor booleano que indica si el trazado se cierra o no (por defecto false)<br />
  var ancho_caja=parametro_ancho_caja||100.0; // Ancho de la caja que contiene la gráfico (por defecto 100.0)<br />
  var alto_caja=parametro_alto_caja||100.0; // Alto de la caja que contiene la gráfico (por defecto 100.0)</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  var coordenadas_trazado=”M “; // Cadena de texto que representa la propiedad “d” del trazado SVG<br />
  var desplazamiento=[]; // Desplazamientos X e Y para posicionar el tiempo y el valor representado dentro del rango del gráfico<br />
  var escala=[]; // Coeficientes X e Y para calcular el tamaño al representar el gráfico<br />
  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)</p>
<p>  var contador_valor=coordenada.length-1; // Variable para recorrer los valores (índice)<br />
  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</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  escala[0]=ancho_caja/tiempo_total_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X<br />
  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<br />
  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<br />
  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)<br />
  if(cerrado) // Si se dibuja un path (trazado) cerrado…<br />
  {<br />
    coordenadas_trazado+=ancho_caja+”,”+alto_caja+” L “; // …se empieza por la parte inferior de la caja<br />
  }<br />
  while(contador_valor>=0&&sin_recortar) // Mientras queden valores por representar y no se haya llegado al borde izquierdo del gráfico…<br />
  {<br />
    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<br />
    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)<br />
    coordenadas_trazado+=posicion[0]+”,”+posicion[1]; // Formar la coordenada con la X y la Y<br />
    if(posicion[0]>0) // Si no se ha rebasado el margen izquierdo…<br />
    {<br />
      coordenadas_trazado+=contador_valor>0?” L “:””; // …y quedan valores que represntar, añadir una nueva línea (código L) para el próximo<br />
      contador_valor–; // Pasar al siguiente valor<br />
    }<br />
    else // Si se ha rebasado el margen izquierdo…<br />
    {<br />
      sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)<br />
    }<br />
  }<br />
  if(cerrado) // Si se dibuja un trazado (path) cerrado…<br />
  {<br />
    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<br />
  }<br />
  grafico.setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado<br />
}

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

}

Önceki kodda iki ilginç yön vardır; ilki, hesaplamaya izin veren hesaplamadır. temsil edilen değer aralığını uyarlayın ve ikincisi mülk inşaatı d düzendeki noktaların koordinatlarını gösteren (path).

Temsil edilen değer aralığını uyarlamak için, bunlar minimumdan hareket ettirilir ve görünür büyüklük grafiğin boyutuna karşılık gelecek şekilde ölçeklendirilir.. Zaman durumunda, uzaklık, görüntülemek istediğiniz aralığın en uzun zamandan (geçerli olana en yakın tarih ve saat) (örnekte 20 saniye) çıkarılmasıyla elde edilir. Sıcaklık değerlerinin yer değiştirmesi, alt aralıktan (bir derece) eksi en düşük değere eşittir, böylece aşağıda gösterilen veriler izin verilen en düşük değere en çok benzeyendir ancak izin verilenleri takdir etmemize izin veren bir marj bırakır. . geçmek

Grafiğin yatay koordinatlarını elde etmek için zaman değerlerini çarpan katsayı, grafiğin toplam genişliğinin (örnekte 100 birim) temsil edilen zaman aralığına (örnekte 20 saniye) bölünmesiyle elde edilir. Skaler sıcaklık değerleriyle katsayıyı elde etmek için, temsil edilen aralığın minimum değerin altındaki bir marjdan maksimumun üzerindeki bir marja (her iki durumda da bir derece) kadar gittiği unutulmamalıdır. Bu şekilde dikey ölçek katsayısı, grafiğin yüksekliğinin (örnekte 100 birim) maksimum değer eksi minimum artı üst ve alt kenar boşluğuna bölünmesiyle elde edilir. Bu değerler tamamen negatif sıcaklıklarda gelişebileceğinden, Math.abs() farkın mutlak değerini kullanmak.

Özellikler d nesne path Bir metindeki noktaların koordinatlarının birleştirilmesiyle oluşturulur.. Her koordinat çiftinin önünde bir kod bulunur SVG LGeçerli konumdan koordinatlarla gösterilen mutlak değere bir çizgi çizen. X ve Y değerleri virgülle ayrılır ve her işlem SVG diğerinden bir boşlukla ayrılır.

Düzeni başlatmak için kodu kullanın M (mutlak bir koordinata gidin). Kapalı ve dolu grafik durumunda sağ alttan başlarsınız, veri profilini çizen açık grafik durumunda temsil edilen son değerle (en yeni) başlarsınız. Kapalı düzeni tamamlamak için kod kullanılır Z son nokta olarak, çizginin son noktasıyla aynı X koordinat değerine sahip olanı ve Y koordinatı olarak temsil edilen en küçük değeri ekler.

<br />
function dibujar_grafico()<br />
{<br />
  var tiempo_mostrado=20000; // Se representan 20 segundos (20000 milisegundos)<br />
  var valor_maximo=10; // 10 grados sobre cero<br />
  var valor_minimo=-5; // Cinco grados bajo cero<br />
  var fecha_hora=Date.now(); // Hora actual<br />
  var matriz_de_coordenadas_de_prueba=[]; // Preparar el vector de coordenadas<br />
  for(var contador=0;contador<20;contador++)<br />
  {<br />
    fecha_hora+=500+1500*Math.random(); // Añadir medio segundo a la hora anterior y entre 0 y segundo y medio aleatoriamente<br />
    matriz_de_coordenadas_de_prueba[contador]=[]; // Preparar el siguiente punto del vector de coordenadas<br />
    matriz_de_coordenadas_de_prueba[contador][0]=fecha_hora; // En la coordenada horizontal, situar la hora<br />
    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<br />
  }<br />
  actualizar_grafico<br />
  (<br />
    document.getElementById(“relleno_temperatura”), // Trazado para el relleno definido en el código HTML<br />
    matriz_de_coordenadas_de_prueba,<br />
    tiempo_mostrado,<br />
    valor_maximo, // Diez grados de valor máximo<br />
    valor_minimo, // Cinco grados bajo cero como valor mínimo<br />
    1, // Un grado por encima y por debajo de las temperatura mínimas y máximas respectivamente<br />
    true // Cerrar el trazado para representar el área rellena<br />
  );<br />
  actualizar_grafico<br />
  (<br />
    document.getElementById(“linea_temperatura”), // Trazado para el relleno definido en el código HTML<br />
    matriz_de_coordenadas_de_prueba,<br />
    tiempo_mostrado,<br />
    valor_maximo, // Diez grados de valor máximo<br />
    valor_minimo, // Cinco grados bajo cero como valor mínimo<br />
    1, // Un grado por encima y por debajo de las temperatura mínimas y máximas respectivamente<br />
    false // No cerrar el trazado para representar la linea que une los puntos que representan las temperaturas<br />
  );<br />
}

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

);

}

Bu örnekte fonksiyon dibujar_grafico()sayfa yükleme çağrısı olan , test edilecek başlangıç değerlerini alır (son gerçek zamanlı değeri değil) ve verilerin oluşturulacağı aralığı hazırlar: Yatay olarak 20 saniye (20000 ms) ve sıcaklıkta 15°C. -5°C ile +10°C arası dikey, bir derece üst ve alt kenar boşluğu. İki arama yapın actualizar_grafico(), ilk geçişte true grafiğin doldurulmuş bir alanı temsil edecek şekilde kapatılması gerektiğini belirten bir argüman olarak ve ikinci çağrıda geçer false çizgiyi çizmek için. Her durumda nesne path değiştirilmiş, ilk durumda dolgulu ve kenarlıksız, ikinci durumda ise belirli bir çizgi kalınlığı olan ve dolgusuz, karşılık gelen görünüme sahip olandır.

İşlevi actualizar_grafico() bir nesne üzerinde çalışmak SVG aşağıdaki kodu konteyner olarak kullanan HTML. Nesne SVG biri çizgiyi çizmek için, diğeri ise doldurulmuş alanı çizmek için iki yol içerir. Web sayfasını yüklerken öğeden <body> önceki işlev otomatik olarak çağrılır, dibujar_grafico() etkinlik sayesinde JavaScript onload.

<br />
<!DOCTYPE html><br />
<html lang=”es”><br />
  <head><br />
    <meta charset=”utf-8″><br />
    <title>Temperatura</title><br />
    <script type=”text/javascript” src=”https://polaridad.es/javascript-grafico-svg-sensor-internet-de-las-cosas-iot/grafico.js”></script><br />
  </head><br />
  <body onload=”dibujar_grafico();” style=”margin:0;”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript dibujar_grafico() –><br />
    <div id=”temperatura”><br />
      <div id=”bloque_temperatura” style=”width:820px;height:150px”><br />
        <svg<br />
          id=”grafico_temperatura”<br />
          width=”100%”<br />
          height=”100%”<br />
          viewBox=”0 0 100 100″<br />
          preserveAspectRatio=”none”><br />
          <path<br />
            id=”relleno_temperatura”<br />
            d=””<br />
            style=”fill:#A8C3EA;stroke:none;”<br />
            vector-effect=”non-scaling-stroke”<br />
          /><br />
          <path<br />
            id=”linea_temperatura”<br />
            d=””<br />
            style=”fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;”<br />
            vector-effect=”non-scaling-stroke”<br />
          /><br />
        </svg><br />
      </div><br />
    </div><br />
  </body><br />
</html>

<!DOCTYPE html>

<head>

<title>Temperatura</title>

</head>

<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>

</body>

</html>

Kodun 10. satırında HTML yukarıda, stilde 820 piksellik bir genişlik (örnek olarak) ve 150 piksellik bir yükseklik belirlenmiştir (son versiyonda bunun bir sınıf ve bir belge ile yapılması tavsiye edilecektir) CSS). 13 ve 14. satırların nesnenin boyutunu tanımlaması garip görünüyor SVG %100 genişlik ve yükseklik gibi (pencere boyutlarına en iyi uyan, 100×100). Daha önce de belirttiğimiz gibi bunu yapmanın nedeni her zaman bilinen boyutlarla çalışmak ve temsil edilen değerleri ona göre ayarlamaktır. Diğer alternatifler ise her seferinde grafiğin alanını hesaplamak ve ardından değerleri yeniden ayarlamak veya belgenin uyması gereken grafik için sabit boyutları zorlamak olacaktır.

Koda göre boyutları değişen bir grafik tercih etmiş olmak HTMLözelliği dahil etmek gerekir vector-effect değeri ile non-scaling-stroke önceki teklifte olduğu gibi, grafiğin görüntülendiği web sayfasında seçilen 1:1 oranlarını korumaması durumunda çizgi kalınlıklarının deforme olmasını önlemek için.

Grafiği "kırpmak" ve yalnızca seçtiğiniz alanı göstermek için şunu kullanın: viewBox. Bu durumda grafiğin 0,0'dan başlayan (sol üst köşe) ve aşağı ve sağa doğru 100x100 ölçüsündeki kısmını görmeyi seçtik. Çizimin negatif değerli veya 100'den büyük koordinatlarda yer alan kısmı, nesnede bulunsa dahi web sayfasında görüntülenmeyecektir. SVG

SVG çizimine yeni öğeler ekleme

Önceki örnekte fonksiyon actualizar_grafico() bir düzen kullan SVG sahipliğin değiştirildiği yer dKoordinat zincirini ifade eden şey budur. Alternatif, her yeniden çizildiğinde nesnenin tamamını oluşturmak olabilir. İlk seçeneğin avantajı grafik görünümünün (kalınlık veya renk gibi) kodda tanımlanmış olmasıdır. HTMLsınırlaması nesnelerin önceden oluşturulmuş olması gerektiğidir.

SVG nesneleri oluşturmak için şunu kullanın: createElementNS()dahil edilmesini sağlayan ad alanı. Aşağıdaki örnekte yeni bir metin nesnesi yaratılmıştır (text) ve bir öğeyle ilişkilidir SVG kodda zaten mevcut olan HTML web sitesinin. Yeni eleman oluşturulduktan sonra özellikleri şu şekilde atanır: setAttribute() ve eklenir SVG ile appendChild().

<br />
function<br />
rotular<br />
(<br />
  objeto_grafico,<br />
  texto,<br />
  inicio=[0,0],<br />
  altura=10.0,<br />
  tipo_letra=”SircuitoRegularMedium”,<br />
  color_texto=”#000000″,<br />
  color_fondo=”#FFFFFF”<br />
)<br />
{<br />
  nuevo_objeto_svg=document.createElementNS(“http://www.w3.org/2000/svg”,”text”);<br />
  nuevo_objeto_svg.setAttribute(“x”,inicio[0]);<br />
  nuevo_objeto_svg.setAttribute(“y”,inicio[1]);<br />
  nuevo_objeto_svg.setAttribute(“font-family”,tipo_letra);<br />
  nuevo_objeto_svg.setAttribute(“font-size”,altura);<br />
  nuevo_objeto_svg.setAttribute(“fill”,color_texto);<br />
  nuevo_objeto_svg.textContent=texto;<br />
  objeto_grafico.appendChild(nuevo_objeto_svg);<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>//rotular(document.getElementById(“cosa_svg”),”HOLA”,[10,10]);

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]);

Çizim öğelerinin oranını değiştirin

Bir önceki bölümdeki örnekte yer alan fonksiyonla etiketlemeyi denediyseniz, web sayfasındaki nesnenin oranı (orantısı) bozulduğunda metnin deforme göründüğünü görmüşsünüzdür.width y height kodun HTML) temsil edilen alanınkine eşit değildir (viewBox). Orantıyı ayarlamak için nesnenin ölçülerini bilmek gerekir. SVG bunun için nesnenin veya kabın stiline başvurabilirsiniz HTMLeğer nesne SVG bu mülkü devredin. Sahiplik atama transform nesnelere SVG Orana bağlı olarak deformasyon ölçeklendirme işlemi uygulanarak düzeltilebilir. scale() burada X'teki katsayı Y'dekinden farklıdır.

<br />
function<br />
rotular<br />
(<br />
  objeto_grafico,<br />
  texto,<br />
  inicio=[0,0],<br />
  altura=10.0,<br />
  proporcion=1.0,<br />
  tipo_letra=”SircuitoRegularMedium”,<br />
  color_texto=”#000000″,<br />
  color_fondo=”#FFFFFF”<br />
)<br />
{<br />
  var escala_horizontal=parseFloat(getComputedStyle(objeto_grafico).height)/parseFloat(getComputedStyle(objeto_grafico).width);<br />
  nuevo_objeto_svg=document.createElementNS(“http://www.w3.org/2000/svg”,”text’);<br />
  nuevo_objeto_svg.setAttribute(“transform”,”scale(“+escala_horizontal+”,1.0)”); // scale permite cambiar la escala en X e Y<br />
  //nuevo_objeto_svg.setAttribute(“transform”,”scaleX(“+escala_horizontal+”)”); // Como se sabe que sólo cambia la escala en X, se puede usar scaleX<br />
  nuevo_objeto_svg.setAttribute(“x”,inicio[0]);<br />
  nuevo_objeto_svg.setAttribute(“y”,inicio[1]);<br />
  nuevo_objeto_svg.setAttribute(“font-family”,tipo_letra);<br />
  nuevo_objeto_svg.setAttribute(“font-size”,altura);<br />
  nuevo_objeto_svg.setAttribute(“fill”,color_texto);<br />
  nuevo_objeto_svg.textContent=texto;<br />
  objeto_grafico.appendChild(nuevo_objeto_svg);<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>//rotular(document.getElementById(“cosa_svg”),”HOLA”,[10,10]);

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 özellikleri de destekleyen yeni bir kompozit eleman oluşturacak şekilde birçok nesnenin gruplandırılmasına olanak tanır, basit nesneler gibi. Aynı dönüşümü her nesneyi ayrı ayrı uygulamak yerine bir dizi nesneye aynı anda uygulamak için bunları bu kaynağa göre gruplandırabilir ve tek bir özellik uygulayabilirsiniz. transform hepsine.

Bahsederken açıklandığı gibi SVG formatı, bir grubun elemanları etiketlerin içine alınır <g> y </g>. Şuradan eklemek için: JavaScript bir gruba ait öğeler SVG Önceki örnekte görüldüğü gibi kullanılır, appendChild() yeni nesne tanımlandıktan sonra.

Dönüşümleri uygularken bir orijin oluşturmak için bu özellik nesneler üzerinde kullanılabilir. SVG transform-originDeğeri dönüşümün başladığı noktanın X ve Y koordinatlarıdır. Dönüşümün orijini için bir değer açıkça belirtilmemişse (web tarayıcısında), koordinatların merkezi kullanılır. Ne yazık ki, bu yazının yazıldığı sırada, dönüşümlerin davranışını varsayılan kaynak dışında bir kaynak kullanarak belirlemek, tarayıcılar arasında homojen değildir ve dikkatli kullanılmalıdır.

Ölçek dönüşümüyle birlikte scale Rotasyon gibi başkaları da var rotation ve onunla birlikte hareket translate, bir teklif grafik temsiline alternatif: Yeni koordinatlar elde etmek yerine bunları kendi uzaylarında temsil edebilir ve grafiği temsil etmek istediğiniz formata uyacak şekilde dönüştürebilirsiniz.

Grafiğe referanslar ekleyin

Artık grafiğin ana kısmı, değerlerin profil ve dolu alanla çizilmesiyle çözüldüğüne göre, okunmasına yardımcı olacak referanslarla tamamlanabilir. Örnek olarak, istenen değerin yanı sıra kabul edilebilir maksimum ve minimum değerleri işaretleyen bazı yatay referanslar (çizgiler) çizerek başlayalım. Açıklandığı gibi, nesneleri listeye eklemeyi seçebilirsiniz. SVG doğrudan JavaScript veya bunları manuel olarak koda ekleyin HTML ve bunları daha sonra şununla değiştirin: JavaScript.

<br />
var CONTENEDOR_SVG; // Objeto SVG que contiene el gráfico que representa los valores monitorizados por los sensores en la IoT<br />
var NS=”http://www.w3.org/2000/svg”; // Nombre del espacio de nombres (name space NS)<br />
var ANCHO_CAJA=100.0; // Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones<br />
var ALTO_CAJA=100.0; // Alto del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones<br />
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<br />
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<br />
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<br />
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</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function inicializar_grafico()<br />
{<br />
  CONTENEDOR_SVG=document.getElementById(“contenedor_svg”);<br />
  crear_referencia_horizontal_svg(VALOR_MAXIMO,”#FF0000″);<br />
  crear_referencia_horizontal_svg(VALOR_DESEADO,”#00FF00″);<br />
  crear_referencia_horizontal_svg(VALOR_MINIMO,”#0000FF”);<br />
}</p>
<p>function crear_referencia_horizontal_svg<br />
(<br />
  altura=0.0,<br />
  color=”#000000″,<br />
  grosor=0.5,<br />
  opacidad=1.0<br />
)<br />
{<br />
  var altura_corregida=ALTO_CAJA-(altura+MARGEN_VALOR-VALOR_MINIMO)*ALTO_CAJA/(Math.abs(VALOR_MAXIMO-VALOR_MINIMO)+MARGEN_VALOR*2);<br />
  var referencia_horizontal=document.createElementNS(NS,’line’);<br />
  referencia_horizontal.setAttribute(“x1”,0.0);<br />
  referencia_horizontal.setAttribute(“x2”,ANCHO_CAJA);<br />
  referencia_horizontal.setAttribute(“y1”,altura_corregida);<br />
  referencia_horizontal.setAttribute(“y2”,altura_corregida);<br />
  referencia_horizontal.style.stroke=color;<br />
  referencia_horizontal.style.strokeWidth=grosor;<br />
  referencia_horizontal.style.strokeOpacity=opacidad;<br />
  CONTENEDOR_SVG.appendChild(referencia_horizontal);<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>//inicializar_grafico();

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();

Bu yatay referansları temsil ettikleri değeri açıklayan bir metinle etiketlemek mantıklı görünüyor. Metni vurgulamak için arka plandan ve grafikten öne çıkacak dikdörtgenler kullanabilirsiniz. Deformasyonu telafi etmek için metinlerin ölçeklendirilmesi gerekeceğinden, bunların tümü ölçeğin uygulanacağı bir nesne halinde gruplandırılabilir; Bunu bu şekilde yapmanın temel avantajı, grafik kabı (tarayıcı penceresi) yeniden boyutlandırıldığında ve ölçeğin düzelttiği oranı değiştirdiğinde bunları tek bir işlemle değiştirebilmektir.

<br />
// 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</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>var CONTENEDOR_SVG; // Objeto SVG que contiene el gráfico que representa los valores monitorizados por los sensores en la IoT</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>var NS=”http://www.w3.org/2000/svg”; // Nombre del espacio de nombres (name space NS)</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>var ANCHO_CAJA=100.0; // Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones<br />
var ALTO_CAJA=100.0; // Alto del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones</p>
<p>var TIEMPO_REPRESENTADO=30000; // Milisegundos visibles en el gráfico empezando en el valor mayor (fecha y hora del último valor monitorizado)</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>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<br />
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<br />
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<br />
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</p>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://polaridad.es/cc-comprobacion-de-continuidad-guia-practica-de-electronica/" target="_blank" rel="dofollow" class="sa98268c0922ec025c504008639792b56"><!-- INLINE RELATED POSTS 1/1 //--><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Te interesa: </span>  <span class="postTitle">CC: Comprobación de continuidad - Guía práctica de electrónica</span></div></a></div><p>var desplazamiento_valor=desplazamiento(Date.now());<br />
var escala_valor=escala();</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>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)<br />
var ALTURA_TEXTO=10.0; // Altura de los textos en valor absoluto (píxeles)</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>var COLOR_MINIMO=”#621D87″; // Color de la referencia que indica el valor mínimo<br />
var COLOR_OPTIMO=”#1D8762″; // Color de la referencia que indica el valor máximo<br />
var COLOR_MAXIMO=”#871E35″; // Color de la referencia que indica el valor óptimo<br />
var COLOR_TIPOGRAFIA=”#A8C3EA”; // Color del tipo de letra con que se rotulan las referencias</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>var GROSOR_REFERENCIA=0.5; // Grosor de la línea que se dibuja como referencia en valor absoluto (píxeles)<br />
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<br />
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)<br />
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)<br />
var ANCHO_FONDO_REFERENCIA=34.0; // Medida horizontal del rectángulo que hace de fondo al texto de la referencia medido en valor absoluto</p>
<p>function proporcion_grafico()<br />
{<br />
  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<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function medida_grafico()<br />
{<br />
  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<br />
  proporcion[0]=ANCHO_CAJA/parseFloat(getComputedStyle(CONTENEDOR_SVG).width);<br />
  proporcion[1]=ALTO_CAJA/parseFloat(getComputedStyle(CONTENEDOR_SVG).height);<br />
  return proporcion;<br />
}</p>
<p>function desplazamiento(valor_mayor)<br />
{<br />
  var desplazamiento_valor=[];<br />
  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<br />
  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)<br />
  return desplazamiento_valor;<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function escala()<br />
{<br />
  var escala_valor=[];<br />
  escala_valor[0]=ANCHO_CAJA/TIEMPO_REPRESENTADO; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X<br />
  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<br />
  return escala_valor;<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>function crear_referencia_horizontal_svg<br />
(<br />
  posicion=0.0,<br />
  color_dibujo=”#000000″,<br />
  grosor_linea=GROSOR_REFERENCIA,<br />
  opacidad_linea=OPACIDAD_REFERENCIA,<br />
  color_texto=COLOR_TIPOGRAFIA,<br />
  altura_texto=ALTURA_TEXTO<br />
)<br />
{<br />
  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<br />
  var coeficiente_medida=medida_grafico();<br />
  var posicion_corregida=ALTO_CAJA-(posicion+desplazamiento_valor[1])*escala_valor[1];<br />
  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)<br />
  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<br />
  var texto_referencia=document.createElementNS(NS,’text’); // El texto se creará en último lugar para que quede sobre los otros objetos</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  referencia_horizontal.setAttribute(“x1”,0.0);<br />
  referencia_horizontal.setAttribute(“x2”,ANCHO_CAJA);<br />
  referencia_horizontal.setAttribute(“y1”,posicion_corregida);<br />
  referencia_horizontal.setAttribute(“y2”,posicion_corregida);<br />
  referencia_horizontal.style.stroke=color_dibujo;<br />
  referencia_horizontal.style.strokeWidth=grosor_linea*coeficiente_medida[1];<br />
  referencia_horizontal.style.strokeOpacity=opacidad_linea;<br />
  CONTENEDOR_SVG.appendChild(referencia_horizontal); // Añadir la línea de referencia lo más abajo</p>
<p>  fondo_referencia.setAttribute(“x”,MARGEN_FONDO_REFERENCIA*coeficiente_medida[0]);<br />
  fondo_referencia.setAttribute(“y”,posicion_corregida-(ALTURA_TEXTO+RELLENO_FONDO_REFERENCIA*2.0)*coeficiente_medida[1]/2.0);<br />
  fondo_referencia.setAttribute(“width”,ANCHO_FONDO_REFERENCIA*coeficiente_medida[0]);<br />
  fondo_referencia.setAttribute(“height”,(ALTURA_TEXTO+RELLENO_FONDO_REFERENCIA*2.0)*coeficiente_medida[1]);<br />
  fondo_referencia.style.fill=color_dibujo;<br />
  fondo_referencia.style.fillOpacity=1.0;<br />
  fondo_referencia.style.strokeWidth=0;<br />
  CONTENEDOR_SVG.appendChild(fondo_referencia);</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  texto_referencia.setAttribute(“x”,(MARGEN_FONDO_REFERENCIA+RELLENO_FONDO_REFERENCIA)*coeficiente_medida[0]/proporcion_horizontal);<br />
  texto_referencia.setAttribute(“y”,posicion_corregida+ALTURA_TEXTO/2.0*coeficiente_medida[1]);<br />
  texto_referencia.setAttribute(“font-family”,TIPOGRAFIA);<br />
  texto_referencia.setAttribute(“font-size”,ALTURA_TEXTO*coeficiente_medida[1]);<br />
  texto_referencia.setAttribute(“fill”,COLOR_TIPOGRAFIA);<br />
  texto_referencia.setAttribute(“transform”,”scale(“+proporcion_horizontal+”,1.0)”);<br />
  texto_referencia.textContent=(posicion>=0?”+”:””)+posicion;<br />
  CONTENEDOR_SVG.appendChild(texto_referencia);<br />
}</p>
<p>function inicializar_grafico()<br />
{<br />
  CONTENEDOR_SVG=document.getElementById(“contenedor_svg”);<br />
  crear_referencia_horizontal_svg(VALOR_MAXIMO,COLOR_MAXIMO);<br />
  crear_referencia_horizontal_svg(VALOR_OPTIMO,COLOR_OPTIMO);<br />
  crear_referencia_horizontal_svg(VALOR_MINIMO,COLOR_MINIMO);<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>//inicializar_grafico();

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();

Yukarıdaki örnek kodda birkaç ilginç yön vardır. Her şeyden önce, örneği programlamadan gelen kullanıcılar için daha okunaklı hale getirmek için sabitlerin (global değişkenler) kullanıldığını yorumlayın. mikrodenetleyiciler en C içinde C + +. Daha sonra görüleceği gibi, onu programlamanın en uygun yolu JavaScript Bir üretim sisteminde bu değerleri içerecek nesnelerin ve bu örnekteki referansları veya genel olarak grafiği yönetecek yöntemlerin kullanılması olacaktır.

Öte yandan, daha genel bir kod geliştirilerek, metni ayarlamak için grafiğin oranını düzelten farklı katsayıları hesaplayan ayrı işlevler geliştirilmiştir. proporcion_grafico(), aralıklarına bağlı olarak değerlerin ölçeği escala() ve referanslardaki ölçümler gibi mutlak değeri bilinen ölçümler için bir düzeltme faktörü medida_grafico().

Bu kodun okunması, grafikleri gerçek zamanlı olarak çizen ve çeşitli grafik bağlamlarında (en azından çeşitli boyut ve oranlarda) sunulmak üzere esnek olması gereken bunun gibi bir uygulamanın çalıştığı bağlamın netleştirilmesine yardımcı olacaktır. Her şeyden önce nesnelerin oluşturulması gerekir. SVG, kodda "manuel olarak" HTML, kod aracılığıyla JavaScript ve her durumda, bu nesnelere yapılan referanslar, bunları manipüle etmek için daha sonra elde edilmelidir. JavaScript böylece yeni grafikler çizilebilir ve önceden çizilmiş bir grafiğin temsili, sunulduğu ortamdaki bir değişikliğe uyarlanabilir.

Bir grafiğin kolayca yorumlanmasına yardımcı olabilecek diğer bir referans, belirli değerleri temsil eden noktalardır (doğrunun düğümleri). Tek bir büyüklüğü temsil ettiğimiz bu örnekte, bir sembolün seçimi kritik değildir, ancak korelasyon aramak için birkaç farklı değer üst üste bindirilirse, renk gibi diğer kaynakları kullanmanın yanı sıra ayırt etmek ilginç olabilir. , farklı semboller çizerek. Çizgi düğümü için kullanılan grafiklerin boyutları ve oranları, örneğin metinlerde olduğu gibi değiştirilmelidir, böylece boyutları mutlak olur ve içerdiği kutunun oranları grafiği değiştirse bile oranları korunur.

Önceki örnekte, çizimin oranını yeniden ölçeklendirmek ve düzeltmek için farklı katsayıların nasıl hesaplanacağını zaten gördük; Grafiğin düğümlerinin veya köşelerinin sembollerinin yönetiminin nasıl uygulanacağına ilişkin olası bir çözüm, nesnelerin saklanması olabilir. SVG bir vektöre dönüştürün ve grafik yeni bir değer okunarak güncellendiğinde veya kapsayıcı yeniden boyutlandırılarak yeniden çizildiğinde konumunu değiştirin. İlk durumda konumunun değiştirilmesi, ikinci durumda ise mülkle olan oranının değiştirilmesi gerekecektir. transform ve değeri scale. Aşağıdaki kod işlevin bir modifikasyonudur actualizar_grafico() grafiğin köşe sembollerinin yeniden konumlandırılmasını dahil etmek.

<br />
function actualizar_grafico_puntos<br />
(<br />
  grafico, // Objeto SVG con el que se dibuja la gráfico<br />
  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<br />
  puntos, // Matriz con los objetos SVG que se representan en los nodos de la línea (los valores reales)<br />
  tiempo_total_representado, // Tiempo total representado por la gráfico (en milisegundos)<br />
  valor_maximo, // Valor máximo aceptable antes de emitir una alarma<br />
  valor_minimo, // Valor mínimo aceptable antes de emitir una alarma<br />
  margen_valor, // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo<br />
  parametro_cerrado, // Valor booleano que indica si el trazado se cierra o no (por defecto false)<br />
  parametro_ancho_caja, // Ancho de la caja que contiene la gráfico (por defecto 100.0)<br />
  parametro_alto_caja // Alto de la caja que contiene la gráfico (por defecto 100.0)<br />
)<br />
{<br />
  var cerrado=parametro_cerrado||false; // Valor booleano que indica si el trazado se cierra o no (por defecto false)<br />
  var ancho_caja=parametro_ancho_caja||100.0; // Ancho de la caja que contiene la gráfico (por defecto 100.0)<br />
  var alto_caja=parametro_alto_caja||100.0; // Alto de la caja que contiene la gráfico (por defecto 100.0)</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  var coordenadas_trazado=”M “; // Cadena de texto que representa la propiedad “d” del trazado SVG<br />
  var desplazamiento=[]; // Desplazamientos X e Y para posicionar el tiempo y el valor representado dentro del rango del gráfico<br />
  var escala=[]; // Coeficientes X e Y para calcular el tamaño al representar el gráfico<br />
  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)</p>
<p>  var contador_valor=coordenada.length-1; // Variable para recorrer los valores (índice)<br />
  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</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  escala[0]=ancho_caja/tiempo_total_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X<br />
  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<br />
  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<br />
  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)<br />
  if(cerrado) // Si se dibuja un path (trazado) cerrado…<br />
  {<br />
    coordenadas_trazado+=ancho_caja+”,”+alto_caja+” L “; // …se empieza por la parte inferior de la caja<br />
  }<br />
  while(contador_valor>=0&&sin_recortar) // Mientras queden valores por representar y no se haya llegado al borde izquierdo del gráfico…<br />
  {<br />
    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<br />
    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)<br />
    punto[contador_valor].setAttribute(“cx”,posicion[0]);<br />
    punto[contador_valor].setAttribute(“cy”,posicion[1]);<br />
    coordenadas_trazado+=posicion[0]+”,”+posicion[1]; // Formar la coordenada con la X y la Y<br />
    if(posicion[0]>0) // Si no se ha rebasado el margen izquierdo…<br />
    {<br />
      coordenadas_trazado+=contador_valor>0?” L “:””; // …y quedan valores que represntar, añadir una nueva línea (código L) para el próximo<br />
    }<br />
    else // Si se ha rebasado el margen izquierdo…<br />
    {<br />
      sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)<br />
    }<br />
    contador_valor–; // Pasar al siguiente valor<br />
  }<br />
  if(cerrado) // Si se dibuja un trazado (path) cerrado…<br />
  {<br />
    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<br />
  }<br />
  grafico.setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado<br />
  for(;contador_valor>=0;contador_valor–)<br />
  {<br />
    punto[contador_valor].setAttribute(“cx”,-10000);<br />
    punto[contador_valor].setAttribute(“cy”,0);<br />
  }<br />
}

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)