الرسوم البيانية لحالة أجهزة الاستشعار المتصلة بإنترنت الأشياء IoT
إحدى مزايا ربط شبكة الاستشعار بإنترنت الأشياء هي القدرة على تحليل البيانات التي تم الحصول عليها. من خلال تمثيل هذه المعلومات بيانيًا، يمكن للشخص (على عكس البرنامج) أن يفهم بشكل حدسي معنى الكميات التي يتم مراقبتها، على سبيل المثال، من خلال مقارنتها مع بعضها البعض أو متابعة تطورها بمرور الوقت.
تبدأ هذه المقالة سلسلة مكونة من أربعة أجزاء، تشرح اقتراحًا بسيطًا للتمثيل الرسومي للبيانات التي تم الحصول عليها بواسطة أجهزة الاستشعار المتصلة بإنترنت الأشياء. وبنفس الفلسفة كما في المقالات الأخرى، فإن الطريقة المقترحة فعالة تمامًا على الرغم من أن الهدف الرئيسي هو تعليمي. كالملف الفني للجمهور الذي مدونة Polaridad.es، وهذا النص يدور حول الإلكترونيات وليس تطوير الويب، وكل قسم من الأقسام بمثابة مقدمة للغات أو التكنولوجيا المستخدمة: HTML, CSS, SVG y جافا سكريبت.
المقالات في السلسلة السابقة حول كيفية تخزين البيانات التي تم الحصول عليها بواسطة الأجهزة المتصلة بإنترنت الأشياء (IoT) وانتهوا بشرح كيفية الوصول إلى المعلومات المخزنة في قواعد البيانات. في أمثلة السلسلة، لتسهيل العملية، تم استخدام خادم الويب كوسيط كان مسؤولاً عن تلقي البيانات من خلال طلبات POST لبروتوكول HTTP، وتخزينها في قاعدة بيانات وعرضها على صفحة ويب.
على الرغم من أن العيب الرئيسي لهذا النظام هو الأداء (والذي يمكن تخفيفه ببدائل مثل Node.js وMongoDB، والتي سيتم شرحها في المقالات المستقبلية)، إلا أنه في المقابل يوفر ميزتين عظيمتين: تنفيذه بسيط للغاية (بما في ذلك التوفر) الخدمات العامة) ويمكنه عرض البيانات في المتصفح، أي أنه لا يحتاج إلى تطبيقات محددة (مثل تطبيق لجهاز محمول) لتقديم المعلومات المخزنة التي من شأنها أن تمثل الحالة التاريخية للأجهزة المتصلة بالإنترنت أشياء.
من خلال استغلال ميزة القدرة على عرض المعلومات التي تم تخزينها مع هذا النظام بسهولة على صفحة الويب حول حالة الأجهزة المتصلة بإنترنت الأشياء، يشرح هذا المقال كيفية عرض هذه المعلومات بيانيًا باستخدام التنسيق SVG من جافا سكريبت لإنشاء صفحة ويب بشكل ديناميكي في HTML.
هناك العديد من المكتبات جافا سكريبت والتي يمكن من خلالها حل العرض الرسومي للبيانات. لا تنوي هذه المقالات تطوير مادة أخرى؛ الغرض من هذا النص هو فهم العملية والقدرة على تطوير تطبيقاتك الخاصة؛ هدف تعليمي وكذلك منتج. إذا كنت مهتمًا باستخدام منتج ما بدلاً من تطويره بنفسك، فإنني أوصيك بإلقاء نظرة على بعض المكتبات الممتازة لإنشاء الرسومات باستخدام جافا سكريبت مع تراخيص مجانية مثل Charts.js, Highcharts, أدوات مخطط جوجل, عصر, رافائيل, بياني (مرتكز على رافائيل), dc.js, Chartist.js, D3.js ( نصيحتي )، C3.js (مرتكز على D3.js), NVD3 (رسومات قابلة لإعادة الاستخدام لـ D3.js) ...
بنية مستند HTML مع رسومات SVG
في اقتراح هذه المقالة لتقديم بيانات المستشعر بيانيًا، تتكون صفحة الويب التي يتم عرضها عليها من:
- تتم كتابة المستند الذي يعمل كحاوية HTML,
- يتم تعريف مظهر الصفحة بالكود CSS,
- يتم رسم الرسم البياني باستخدام اللغة SVG y
- تتم برمجة قراءة البيانات من الخادم وعرض الرسوم البيانية جافا سكريبت
جميع العناصر، وخاصة التعليمات البرمجية HTML من الصفحة، يمكن إنشاؤها على الخادم باستخدام PHP كما هو موضح في المقالة الخاصة بـ لغة برمجة PHP من السلسلة حول تخزين البيانات من الأجهزة المتصلة بإنترنت الأشياء.
الرمز CSS y جافا سكريبت يمكن تحميلها (استيرادها) في التعليمات البرمجية HTML بدلاً من كتابتها مباشرةً كجزء من المستند HTML. ويتميز هذا بالقدرة على إعادة استخدام نفس المستندات على عدة صفحات والقدرة على تحريرها بشكل أكثر راحة؛ ولكن ربما يكون الإزعاج هو استغراق وقت أطول قليلاً للتحميل اعتمادًا على ما إذا كان بإمكانك استخدام الكود الموجود في ذاكرة التخزين المؤقت (التي تم تحميلها في الاستخدام السابق) أو حتى CDN. في مرحلة الإنتاج، من السهل دمج كل التعليمات البرمجية من PHP، وإنشاء مستند واحد فيه HTML مع كافة المعلومات إذا اخترت هذا البديل. طوال هذه السلسلة من المقالات، من أجل الوضوح، يعتبر أننا نعمل مع وثائق منفصلة.
للأغراض التي تهمنا، لاستخدامها كحاوية رسومات، وبشكل تقريبي جدًا، محتوى المستوى الأول من بنية المستند HTML سيكون:
|
1
2
3
4
5
6
7
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español –>
<head>
</head>
<body onload=“funcion();”>
</body>
</html>
|
يعمل السطر الأول على الإشارة لمتصفح الويب إلى أن المستند الذي يقرأه مكتوب فيه HTMLوتحديداً في الإصدار 5 (المعروف باسم HTML5). الإصدارات السابقة من HTML، مرتكز على SGML (لغة الترميز المعممة القياسية)، تتضمن تعريفًا لنوع المستند (DTD) حيث تم الإعلان عن نوع القواعد المستخدمة في اللغة لوصف المستند.
يحتوي السطر الثاني والأخير على الكود HTML بين التوجيهات <html> y </html> والتي تعمل كالفتح والإغلاق على التوالي. التوجيهات HTML وهي تضع الاسم والصفات بين علامتي "أقل من" و"أكبر من" لتشكل نوعاً من علامات "القوس الحاد". العناصر HTML التي تحتوي على المحتوى لها توجيه إغلاق يتضمن الشرطة المائلة أمام الاسم كما في </html>.
يتم فصل خصائص أو سمات العناصر بمسافات عن الاسم وعن بعضها البعض ويتم التعبير عنها كنص عادي أو، في كثير من الأحيان، كنص (اسم الخاصية) متبوعًا بعلامة يساوي وقيمة محاطة بعلامتي اقتباس. في حالة توجيه فتح الكود HTML تم استخدام الممتلكات lang بشجاعة es, lang="es" للإشارة إلى أن نص الوثيقة HTML يستخدم اللغة الاسبانية.
تم تضمين تعليق بعد التوجيه الافتتاحي لرمز HTML. التعليقات في HTML يمكنهم شغل عدة أسطر واستخدام الرمز كعلامة افتتاحية <!-- وكخاتمة -->
الرمز HTML وهي مكونة من كتلتين: الرأس <head> والجسد <body>. يهدف الأول إلى تقديم معلومات عن الوثيقة نفسها، بما في ذلك المعلومات المتعلقة بها (المعلومات الفوقية)، والثاني هو دعم محتوى الوثيقة.
في التوجيه <body> تم تضمين حدث onload التي يمكن من خلالها تنفيذ وظيفة تلقائيًا جافا سكريبت بمجرد تحميل المحتوى. يتيح لك هذا المورد بدء تنفيذ التعليمات البرمجية التي ستحدد الكائنات الرسومية وتحديثها حيث يتم تحميل المعلومات من الخادم حول حالة المستشعرات التي تمثل هذه الرسومات.
من بين جميع المعلومات الوصفية التي يمكن تضمينها في رأس المستند HTML، نحن مهتمون بشكل خاص بمعرفة ما تم وصفه بالتوجيهات التالية:
-
<title>الذي يعمل على إعطاء عنوان للوثيقة. سيظهر عادةً في نافذة المتصفح أو في علامة التبويب المقابلة وسيساعدنا في التعرف على الرسومات التي يحتوي عليها. -
<charset>يعلن مجموعة الأحرف المستخدمة لترميز المستند. إنه مهم بشكل خاص للعلامات "الخاصة" مثل eñes أو اللهجات. -
<link>يسمح بإقامة علاقة بين الوثيقة HTML الحالية وغيرها من الخارجية. وسوف يساعدنا في تحميل ورقة الأنماط بالتنسيق CSS مع ظهور الوثيقة -
<script>يحتوي على برنامج نصي مع التعليمات البرمجية القابلة للتنفيذ. باستخدام هذا التوجيه سنقوم بتحميل الوظائف جافا سكريبت التي يمكن من خلالها إنشاء أو تعديل الرسومات SVG.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
</body>
</html>
|
كما يتبين في مثال HTML أعلاه، اسم (والمسار، إن أمكن) للمستند بالنمط CSS يشار مع السمة href، بينما في حالة الكود جافا سكريبت يتم استخدامه src. كلاهما يتقاسمان الملكية type بشجاعة text/css y text/javascript على التوالي.
وفيما يتعلق بمحتوى الوثيقة، الجزء الذي يتوافق مع العنصر <body>, HTML5 فهو يسمح لك بإنشاء هياكل محددة للمكونات الأكثر شيوعًا على صفحة الويب مثل التذييل أو القسم الجانبي أو شريط التنقل، ولكن ما يهمنا هو استخدام المستند كحاوية رسومات. SVG هي العناصر <div> تعمل ككتل مستقلة تسمح بتحديد البنية الهرمية عن طريق تداخل بعضها <div> داخل الآخرين.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
</html>
|
في المثال السابق تم استخدام عنصر <div> الذي يحتوي على اثنين آخرين. يقدم هذا المثال خاصيتين مهمتين جدًا للاستخدام الذي نريد استخدامه للكود. HTML: id والذي يستخدم لتعيين معرف فريد لعنصر ما HTML (A <div>، في هذه الحالة) و class والتي تم تخصيص فئة سنستخدمها لتحديد المظهر. ليس من الضروري أن تكون الفئة فريدة من نوعها، في الواقع، يكمن جزء كبير من فعاليتها في عدة عناصر تشترك في نفس الجانب.
العنصر (أو العلامة) <p> يعمل على تحديد فقرة تحتوي عادةً على نص (على الرغم من أنه في HTML ليس هناك قيود على هذا). لإنشاء مجموعات ضمن فقرة (أو أ <div>، ولا توجد أيضًا أي قيود) يتم استخدام العلامة <span>. باستخدام هذا العنصر، من الممكن، على سبيل المثال، تضمين نص داخل فقرة لمنحها مظهرًا مختلفًا، مثل وضع خط تحته أو غامق.
تعريف الخصائص الرسومية وبشكل عام السلوك المرتبط بالعنصر HTML يتم إسناد الفصل في الكود CSS; في حالة المثال السابق في المستند aspecto.css.
لتحسين تعيين الخصائص CSS فمن الممكن أن نفس العنصر HTML ينتمي إلى عدة فئات، وبالتالي له المظهر أو السلوك الذي تحدده هذه الفئات. للقيام بهذه المهمة، اكتب أسماء الفئات المختلفة، وافصل بينها بفواصل على يمين العقار. class
|
9
10
11
12
13
14
15
16
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
في المثال السابق العنصر <div> والتي تم تحديدها على أنها primer_hijo تم تعيين ثلاث فئات: aspecto_de_hijo, aspecto_raro y tipografia_grande، والتي من المفترض أن تحدد معًا مظهر العنصر وسلوكه. كما هو موضح في المقال التالي عن تحديد مظهر الويب لرسومات مستشعر إنترنت الأشياء باستخدام CSS، عند استخدام فئات متعددة، إذا تم تعريف أي من الخصائص التي تحدد الجانب في كليهما، فإن الخاصية الأخيرة المشار إليها هي التي تسود.
كما رأينا، العناصر <div> وقد تحتوي على عناصر أخرى، بما في ذلك عناصر أخرى <div>. ستكون الحالة أبسط <div> التي تحتوي على النص. المظهر الذي يحدد الأسلوب CSS سيؤثر أيضًا على النص الموجود في العنصر.
لتحسين تعيين الخصائص CSS فمن الممكن أن نفس العنصر HTML ينتمي إلى عدة فئات، وبالتالي له المظهر أو السلوك الذي تحدده هذه الفئات. للقيام بهذه المهمة، اكتب أسماء الفئات المختلفة، وافصل بينها بفواصل على يمين العقار. class
|
9
10
11
12
13
14
15
16
17
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
في المثال السابق، الفئات الثلاثة المرتبطة بـ <div> primer_hijo من شأنها أن تحدد مظهر العنصر والنص الذي يحتوي عليه، على سبيل المثال، جعل الخط الذي يكتب به كبيرًا (إذا كان الغرض المشار إليه باسمه في الفئة الأخيرة صحيحًا)
منذ الإصدار 5 (HTML5) من الممكن تضمين كود الرسومات بالتنسيق SVG داخل الكود نفسه HTML كعنصر آخر. من وجهة نظر الكود HTML، المحتوى SVG إنه عنصر <svg> الذي يحتوي على العناصر الرسومية المختلفة (الخطوط، الدوائر، المستطيلات...
|
9
10
11
12
13
14
15
16
17
18
19
20
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg id=“dibujo” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
</div>
</body>
|
على الرغم من أنه قيل أن الخصائص الرسومية للعناصر HTML يتم تعريفها في الاسلوب CSS وترتبط بها من خلال صنف، ومن الممكن أيضًا إسناد بعضها مباشرة إلى العناصر بطريقتين. من ناحية، يمكنك استخدام الخاصية style وتعيين الخصائص الرسومية المختلفة للكائن كقيمة له. منطقيًا، من الأفضل استخدام التقنية المذكورة أعلاه لتعيين الجانب لفئة ما، ولكن مع هذه الإمكانية يمكنك إضافة تصحيح صغير لعنصر (استثناء خاص جدًا) دون الحاجة إلى إنشاء فئة جديدة.
ومن ناحية أخرى، بعض العناصر HTML إنها تسمح لك باستخدام خصائص محددة تحدد مظهرها. بشكل عام، حتى لو كانت هذه الخصائص موجودة، فمن الأفضل استخدام الفئات، لكن لسوء الحظ، لا تقدم جميع العناصر هذا البديل، يتوقع البعض الإشارة إلى قيمة معينة مباشرة مع تلك الخصائص المحددة بدلاً من الإشارة إلى الفئة المرتبطة بها. أحد العناصر التي لها هذا النوع من السلوك هو الكود بالتحديد SVG، والتي يجب أن نخصص لها النسبة المئوية للعرض والارتفاع في الخصائص width y heightعلى التوالي، بدلا من الفصل.
كما سيتبين بمزيد من التفصيل في مقال يتحدث عن كود SVG، من أجل استخدام الطريقة البسيطة المقترحة، فمن المستحسن النظر في أبعاد الرسم البياني كنسب مئوية. في حالة الحجم الإجمالي للكائن، من خلال الإشارة إلى 100% في قيمة العرض والارتفاع، ستكون الحاوية هي التي تحدد الأبعاد النهائية ( <div> مع id="dibujo"، في المثال السابق)
في حالة المكونات المختلفة للرسم البياني SVG (خطوط، دوائر، مستطيلات...)، يتم تضمينها في مساحة قياسها 100×100 (أي وحدة) ويتم توسيعها بشكل مستطيل دون الحفاظ على النسبة. الخصائص viewBox y preserveAspectRatio العنصر SVG وهم مسؤولون عن ترسيخ هذه القيم. في الحالة الأولى مع عرض مستطيل ينتقل من نقطة الإحداثيات (0,0) إلى نقطة الإحداثيات (100,100) ويتم التعبير عنه كـ "0 0 100 100" وفي الثانية بالقيمة none.
|
14
15
16
17
18
|
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg viewBox=“0 0 100 100” preserveAspectRatio=“none” width=“100%” height=“100%” id=“dibujo” class=“grafico”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
|
مع كل ما سبق، يمكنك الآن تحديد التعليمات البرمجية الكاملة التي ستكون بمثابة حاوية رسومات. SVG تم إنشاؤها أو تعديلها من جافا سكريبت. يحتوي المثال أدناه على أربع كتل رسومات تستخدم التنسيق HTML لاقتراح التمثيل الذي سنستخدمه.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html lang=“es”> <!– Inicio del documento HTML con el idioma –>
<head> <!– Cabecera del documento HTML –>
<meta charset=“utf-8”> <!– Se utiliza el juego de caracteres UTF8 –>
<title>Temperaturas Nave E1</title> <!– Título del documento y seguramente de la ventana del navegador –>
<link rel=“stylesheet” href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” type=“text/css” media=“all”> <!– Cargar el estilo “https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” guardado en la misma carpeta que este documento HTML –>
<script type=“text/javascript” src=“graficos.js”></script> <!– Cargar el código JavaScript del documento “graficos.js” guardado en la misma carpeta que este documento HTML –>
</head> <!– Final de la cabecera del documento HTML –>
<body onload=“iniciar_graficos();”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript iniciar_graficos() –>
<div id=“temperatura_frigorifico_a” class=“bloque_sensor”> <!– Bloque de datos del primer sensor –>
<div id=“titulo_temperatura_frigorifico_a” class=“bloque_titulo”>Temperatura frigorífico 01A</div> <!– Título del bloque de datos del sensor –>
<div id=“descripcion_temperatura_frigorifico_a” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01A</div> <!– Descripción del bloque de datos del sensor –>
<div id=“fecha_temperatura_frigorifico_a” class=“bloque_fecha”>Cargando emperaturas</div> <!– Fecha de la última lectura de datos del sensor. Por ahora vacío, luego se rellenará con la aplicación JavaScript –>
<div id=“bloque_temperatura_frigorifico_a” class=“bloque_grafico”> <!– Bloque con el gráfico –>
<svg id=“grafico_temperatura_frigorifico_a” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_a” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg> <!– Gráfico de los datos –>
</div> <!– Final del bloque que contiene el gráfico –>
</div> <!– Final del bloque de datos del primer sensor –>
<div id=“temperatura_frigorifico_b” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_b” class=“bloque_titulo”>Temperatura frigorífico 01B</div>
<div id=“descripcion_temperatura_frigorifico_b” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01B</div>
<div id=“fecha_temperatura_frigorifico_b” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_temperatura_frigorifico_b” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_b” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_b” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_c” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_c” class=“bloque_titulo”>Temperatura frigorífico 01C</div>
<div id=“descripcion_temperatura_frigorifico_c” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01C</div>
<div id=“fecha_temperatura_frigorifico_c” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_c” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_c” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_c” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_d” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_d” class=“bloque_titulo”>Temperatura frigorífico 01D</div>
<div id=“descripcion_temperatura_frigorifico_d” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01D</div>
<div id=“fecha_temperatura_frigorifico_d” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_d” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_d” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_d” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
</body> <!– Final del cuerpo del documento HTML –>
</html> <!– Final del documento HTML –>
|
يمكنك أدناه رؤية الشكل الذي سيبدو عليه الكود السابق، منسقًا بالنمط CSS المقابلة، وتوليد مع جافا سكريبت الرسومات SVG مع قراءات الخادم للبيانات المخزنة بواسطة أجهزة الاستشعار المتصلة بإنترنت الأشياء. باستثناء أن البيانات لا يتم تحميلها من الخادم ولكن يتم إنشاؤها بشكل عشوائي في العميل (المتصفح الخاص بك)، فإن بقية التعليمات البرمجية هي ما سيتم استخدامه في الاقتراح المحدد في هذه السلسلة من المقالات.
المقالة التالية في هذه السلسلة توضح ذلك كيفية تحديد أنماط CSS لإضفاء مظهر على كود HTML الذي يعمل كحاوية للرسومات SVG والتي من خلالها تمثل حالة أجهزة الاستشعار المتصلة بإنترنت الأشياء (IoT).
تعليق