इंटरनेट ऑफ थिंग्स IoT से जुड़े सेंसरों के स्थिति ग्राफ़
सेंसर नेटवर्क को इंटरनेट ऑफ थिंग्स से जोड़ने का एक फायदा प्राप्त डेटा का विश्लेषण करने में सक्षम होना है। इस जानकारी को ग्राफिक रूप से प्रस्तुत करके, एक व्यक्ति (एक कार्यक्रम के विपरीत) मॉनिटर की गई मात्राओं के अर्थ को अधिक सहजता से समझ सकता है, उदाहरण के लिए, उन्हें एक-दूसरे के साथ तुलना करके या समय के साथ उनके विकास का अनुसरण करके।
यह आलेख चार भागों से बनी एक श्रृंखला शुरू करता है, जो IoT से जुड़े सेंसर द्वारा प्राप्त डेटा के ग्राफिकल प्रतिनिधित्व के लिए एक सरल प्रस्ताव बताता है। अन्य लेखों के समान दर्शन के साथ, सुझाई गई विधि पूरी तरह कार्यात्मक है, हालांकि मुख्य उद्देश्य उपदेशात्मक है। जनता की तकनीकी प्रोफ़ाइल के रूप में जिसे ब्लॉग pollaridad.es, और यह पाठ इलेक्ट्रॉनिक्स के बारे में है न कि वेब विकास के बारे में, प्रत्येक अनुभाग प्रयुक्त भाषाओं या प्रौद्योगिकी के परिचय के रूप में कार्य करता है: एचटीएमएल, सीएसएस, एसवीजी y जावास्क्रिप्ट.
पिछली श्रृंखला के लेख इंटरनेट ऑफ थिंग्स (IoT) से जुड़े उपकरणों द्वारा प्राप्त डेटा को कैसे संग्रहीत किया जाए उन्होंने यह समझाकर समाप्त किया कि डेटाबेस में संग्रहीत जानकारी तक कैसे पहुँचा जाए। श्रृंखला के उदाहरणों में, प्रक्रिया को आसान बनाने के लिए, एक वेब सर्वर का उपयोग एक मध्यस्थ के रूप में किया गया था जो HTTP प्रोटोकॉल के POST अनुरोधों के माध्यम से डेटा प्राप्त करने, इसे डेटाबेस में संग्रहीत करने और वेब पेज पर प्रदर्शित करने के लिए जिम्मेदार था।
हालाँकि इस प्रणाली का मुख्य दोष प्रदर्शन है (जिसे Node.js और MongoDB जैसे विकल्पों के साथ कम किया जा सकता है, जिसे भविष्य के लेखों में समझाया जाएगा), बदले में यह दो महान लाभ प्रदान करता है: इसका कार्यान्वयन बहुत सरल है (उपलब्धता सहित) सेवाओं का सार्वजनिक) और डेटा को एक ब्राउज़र में प्रदर्शित कर सकता है, अर्थात, संग्रहीत जानकारी प्रस्तुत करने के लिए इसे विशिष्ट एप्लिकेशन (जैसे मोबाइल डिवाइस के लिए एक ऐप) की आवश्यकता नहीं है जो इंटरनेट से जुड़े उपकरणों की ऐतिहासिक स्थिति का प्रतिनिधित्व करेगा। चीज़ें।
IoT से जुड़े उपकरणों की स्थिति के बारे में इस सिस्टम में संग्रहीत जानकारी को वेब पेज पर आसानी से प्रस्तुत करने में सक्षम होने का लाभ उठाते हुए, यह आलेख बताता है कि प्रारूप का उपयोग करके इस जानकारी को ग्राफिक रूप से कैसे प्रदर्शित किया जाए एसवीजी से जावास्क्रिप्ट गतिशील रूप से एक वेब पेज उत्पन्न करने के लिए एचटीएमएल.
वहां कई किताबों की दुकानें हैं जावास्क्रिप्ट जिससे डेटा की ग्राफ़िकल प्रस्तुति को हल किया जा सके। इन लेखों का इरादा किसी अन्य को विकसित करने का नहीं है; इस पाठ का उद्देश्य प्रक्रिया को समझना और अपना स्वयं का कार्यान्वयन विकसित करने में सक्षम होना है; एक उपदेशात्मक उद्देश्य के साथ-साथ एक उत्पादक भी। यदि आप किसी उत्पाद को स्वयं विकसित करने के बजाय उसका उपयोग करने में रुचि रखते हैं, तो मेरा सुझाव है कि आप ग्राफिक्स बनाने के लिए कुछ उत्कृष्ट पुस्तकालयों पर एक नज़र डालें जावास्क्रिप्ट जैसे निःशुल्क लाइसेंस के साथ चार्ट.जे.एस, Highcharts, गूगल चार्ट उपकरण, युग, Raphaël, चार्ट (पर आधारित Raphaël), dc.js, चार्टिस्ट.जे.एस, D3.js (मेरी सिफ़ारिश), C3.js (पर आधारित D3.js), एनवीडी3 (के लिए पुन: प्रयोज्य ग्राफिक्स D3.js) ...
एसवीजी ग्राफिक्स के साथ HTML दस्तावेज़ संरचना
सेंसर डेटा को ग्राफ़िक रूप से प्रस्तुत करने के इस आलेख के प्रस्ताव में, जिस वेब पेज पर इसे प्रदर्शित किया जाता है वह निम्न से बना है:
- दस्तावेज़ जो एक कंटेनर के रूप में कार्य करता है उसमें लिखा जाता है एचटीएमएल,
- पृष्ठ का स्वरूप कोड द्वारा परिभाषित किया गया है सीएसएस,
- ग्राफ़ का चित्रण भाषा का उपयोग करके किया जाता है एसवीजी y
- सर्वर से डेटा पढ़ना और ग्राफ़ प्रदर्शित करना प्रोग्राम किया गया है जावास्क्रिप्ट
सभी तत्व, विशेषकर कोड एचटीएमएल पेज का, PHP के साथ सर्वर पर जेनरेट किया जा सकता है जैसा कि लेख में बताया गया है PHP प्रोग्रामिंग भाषा के बारे में श्रृंखला से इंटरनेट ऑफ थिंग्स से जुड़े उपकरणों से डेटा भंडारण.
कोड सीएसएस y जावास्क्रिप्ट कोड में लोड (आयात) किया जा सकता है एचटीएमएल दस्तावेज़ के भाग के रूप में सीधे लिखे जाने के बजाय एचटीएमएल. इससे एक ही दस्तावेज़ को कई पृष्ठों पर पुन: उपयोग करने और उन्हें अधिक आराम से संपादित करने में सक्षम होने का लाभ है; लेकिन शायद लोड होने में थोड़ा अधिक समय लगने की असुविधा इस पर निर्भर करती है कि आप कैश में मौजूद कोड (पिछले उपयोग में लोड किया गया) का उपयोग कर सकते हैं या नहीं। CDN. उत्पादन चरण में PHP से सभी कोड को एकीकृत करना, एक दस्तावेज़ तैयार करना मामूली बात है एचटीएमएल यदि आप यह विकल्प चुनते हैं तो सारी जानकारी के साथ। लेखों की इस श्रृंखला में, स्पष्टता के लिए, यह माना जाता है कि हम अलग-अलग दस्तावेज़ों के साथ काम कर रहे हैं।
उन उद्देश्यों के लिए जिनमें हमारी रुचि है, इसे एक ग्राफ़िक्स कंटेनर के रूप में उपयोग करना, और बहुत मोटे तौर पर, किसी दस्तावेज़ की संरचना के पहले स्तर की सामग्री एचटीएमएल होगा:
|
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>
|
पहली पंक्ति वेब ब्राउज़र को यह इंगित करने का काम करती है कि वह जिस दस्तावेज़ को पढ़ रहा है वह उसमें लिखा गया है एचटीएमएल, विशेष रूप से संस्करण 5 में (के रूप में जाना जाता है)। HTML5). के पिछले संस्करण एचटीएमएल, पर आधारित SGML (मानक सामान्यीकृत मार्कअप भाषा), एक दस्तावेज़ प्रकार परिभाषा शामिल है (DTD) जिसमें दस्तावेज़ का वर्णन करने के लिए भाषा में प्रयुक्त नियमों के प्रकार की घोषणा की गई थी।
दूसरी और आखिरी पंक्तियों में कोड है एचटीएमएल निर्देशों के बीच <html> y </html> जो क्रमशः खोलने और बंद करने का कार्य करते हैं। निर्देश एचटीएमएल वे "से कम" और "से अधिक" संकेतों के बीच नाम और विशेषताओं को संलग्न करते हैं, जिससे एक प्रकार का "तीव्र कोष्ठक" संकेत बनता है। अवयव एचटीएमएल उस संलग्न सामग्री में एक समापन निर्देश होता है जिसमें नाम के सामने स्लैश शामिल होता है </html>.
तत्वों के गुणों या विशेषताओं को नाम और एक-दूसरे से रिक्त स्थान द्वारा अलग किया जाता है और सादे पाठ के रूप में या अधिक बार, पाठ (संपत्ति का नाम) के रूप में व्यक्त किया जाता है, जिसके बाद एक समान चिह्न और उद्धरण चिह्नों में संलग्न मूल्य होता है। कोड खोलने के निर्देश के मामले में एचटीएमएल संपत्ति का उपयोग किया गया है lang मान के साथ es, lang="es" यह इंगित करने के लिए कि दस्तावेज़ का पाठ एचटीएमएल स्पैनिश भाषा का उपयोग करता है.
HTML कोड के शुरुआती निर्देश के बाद एक टिप्पणी शामिल की गई है। टिप्पणियाँ में एचटीएमएल वे कई पंक्तियों पर कब्जा कर सकते हैं और कोड को शुरुआती संकेत के रूप में उपयोग कर सकते हैं <!-- और समापन के रूप में -->
कोड एचटीएमएल यह दो ब्लॉकों से बना है: हेडर <head> और शरीर <body>. पहले का उद्देश्य दस्तावेज़ के बारे में जानकारी देना है, जिसमें इसके बारे में जानकारी (मेटा-सूचना) शामिल है और दूसरा दस्तावेज़ की सामग्री का समर्थन करना है।
निर्देश में <body> एक घटना शामिल की गई है onload जिससे किसी फ़ंक्शन को स्वचालित रूप से निष्पादित किया जा सके जावास्क्रिप्ट एक बार सामग्री लोड हो जाने के बाद. यह संसाधन आपको उस कोड का निष्पादन शुरू करने की अनुमति देता है जो ग्राफिक ऑब्जेक्ट्स को परिभाषित करेगा और उन्हें अपडेट करेगा क्योंकि इन ग्राफिक्स का प्रतिनिधित्व करने वाले सेंसर की स्थिति के बारे में सर्वर से जानकारी लोड की जाती है।
उन सभी महत्वपूर्ण सूचनाओं में से जिन्हें दस्तावेज़ के शीर्षलेख में शामिल किया जा सकता है एचटीएमएल, हम विशेष रूप से निम्नलिखित निर्देशों द्वारा वर्णित एक को जानने में रुचि रखते हैं:
-
<title>जो दस्तावेज़ को एक शीर्षक देने का कार्य करता है। यह आम तौर पर ब्राउज़र विंडो या संबंधित टैब पर दिखाई देगा और हमें इसमें मौजूद ग्राफ़िक्स को पहचानने में मदद करेगा। -
<charset>दस्तावेज़ को एन्कोड करने के लिए उपयोग किए जाने वाले वर्ण सेट की घोषणा करता है। यह विशेष रूप से "विशेष" संकेतों जैसे कि एनेस या उच्चारण के लिए महत्वपूर्ण है। -
<link>दस्तावेज़ के बीच संबंध स्थापित करने की अनुमति देता है एचटीएमएल वर्तमान और अन्य बाहरी। यह हमें स्टाइल शीट को प्रारूप में लोड करने में मदद करेगा सीएसएस दस्तावेज़ की उपस्थिति के साथ. -
<script>इसमें निष्पादन योग्य कोड वाली एक स्क्रिप्ट शामिल है। इस निर्देश का उपयोग करके हम फ़ंक्शन लोड करेंगे जावास्क्रिप्ट जिससे ग्राफ़िक्स उत्पन्न या संशोधित किया जा सके एसवीजी.
|
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>
|
जैसा कि उदाहरण में देखा जा सकता है एचटीएमएल ऊपर, शैली के साथ दस्तावेज़ का नाम (और पथ, यदि लागू हो)। सीएसएस विशेषता के साथ दर्शाया गया है href, जबकि कोड के मामले में जावास्क्रिप्ट इसका उपयोग किया जाता है src. दोनों स्वामित्व साझा करते हैं type मान के साथ text/css y text/javascript क्रमशः.
दस्तावेज़ की सामग्री के संबंध में, वह भाग जो तत्व से मेल खाता है <body>, HTML5 यह आपको वेब पेज पर सबसे अधिक बार आने वाले घटकों जैसे फ़ूटर, साइड सेक्शन या नेविगेशन बार के लिए विशिष्ट संरचनाएं बनाने की अनुमति देता है, लेकिन दस्तावेज़ को ग्राफ़िक्स कंटेनर के रूप में उपयोग करने में हमारी रुचि क्या है। एसवीजी तत्व हैं <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> जिसमें दो अन्य शामिल हैं। यह उदाहरण उस कोड के उपयोग के लिए दो बहुत महत्वपूर्ण गुणों का परिचय देता है जो हम करना चाहते हैं। एचटीएमएल: id जिसका उपयोग किसी तत्व को एक विशिष्ट पहचानकर्ता निर्दिष्ट करने के लिए किया जाता है एचटीएमएल (ए <div>, इस मामले में) और class जिसके साथ इसे एक श्रेणी सौंपी गई है जिसका उपयोग हम उपस्थिति स्थापित करने के लिए करेंगे। श्रेणी, वर्ग, का अद्वितीय होना ज़रूरी नहीं है, वास्तव में, इसकी अधिकांश प्रभावशीलता एक ही पहलू को साझा करने वाले कई तत्वों में निहित है।
तत्व (या टैग) <p> एक अनुच्छेद को परिभाषित करने का कार्य करता है जिसमें सामान्यतः पाठ शामिल होगा (यद्यपि एचटीएमएल इस संबंध में कोई सीमा नहीं है)। किसी अनुच्छेद के भीतर समूह बनाना (या a <div>, कोई सीमाएँ भी नहीं हैं) टैग का उपयोग किया जाता है <span>. इस तत्व के साथ यह संभव है, उदाहरण के लिए, पैराग्राफ के भीतर पाठ को शामिल करके इसे एक अलग रूप दिया जा सकता है जैसे कि रेखांकित या बोल्ड।
ग्राफिक विशेषताओं की परिभाषा और सामान्य तौर पर, वह व्यवहार जो किसी तत्व से जुड़ा होता है एचटीएमएल किसी क्लास को एट्रिब्यूट करना कोड में किया जाता है सीएसएस; दस्तावेज़ में पिछले उदाहरण के मामले में aspecto.css.
विशेषताओं के असाइनमेंट को अनुकूलित करने के लिए सीएसएस यह संभव है कि वही तत्व हो एचटीएमएल कई वर्गों से संबंधित है और इस प्रकार उनकी उपस्थिति या व्यवहार उनके द्वारा परिभाषित होता है। इस असाइनमेंट को बनाने के लिए, विभिन्न वर्गों के नाम लिखें, उन्हें संपत्ति के दाईं ओर अल्पविराम से अलग करें। 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>
|
पिछले उदाहरण में, element <div> जिसकी पहचान इस प्रकार की गई है primer_hijo तीन वर्ग आवंटित किए गए हैं: aspecto_de_hijo, aspecto_raro y tipografia_grande, जो मिलकर तत्व की उपस्थिति और व्यवहार को परिभाषित करते हैं। जैसा कि निम्नलिखित लेख में बताया गया है सीएसएस के साथ IoT सेंसर ग्राफ़िक्स वेब उपस्थिति को परिभाषित करना, एकाधिक वर्गों का उपयोग करते समय, यदि पहलू को परिभाषित करने वाले गुणों में से कोई भी दोनों में परिभाषित किया गया है, तो अंतिम संदर्भित प्रबल होता है।
जैसा कि देखा गया है, तत्व <div> उनमें अन्य सहित अन्य तत्व शामिल हो सकते हैं <div>. एक सरल मामला होगा <div> जिसमें पाठ था. वह लुक जो स्टाइल को परिभाषित करता है सीएसएस तत्व में निहित पाठ को भी प्रभावित करेगा।
विशेषताओं के असाइनमेंट को अनुकूलित करने के लिए सीएसएस यह संभव है कि वही तत्व हो एचटीएमएल कई वर्गों से संबंधित है और इस प्रकार उनकी उपस्थिति या व्यवहार उनके द्वारा परिभाषित होता है। इस असाइनमेंट को बनाने के लिए, विभिन्न वर्गों के नाम लिखें, उन्हें संपत्ति के दाईं ओर अल्पविराम से अलग करें। 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> जिसमें विभिन्न ग्राफ़िक तत्व (रेखाएँ, वृत्त, आयत...) शामिल हैं
|
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>
|
यद्यपि यह कहा गया है कि तत्वों की ग्राफिक विशेषताएँ एचटीएमएल एक शैली में परिभाषित हैं सीएसएस और एक वर्ग के माध्यम से इसके साथ जुड़े हुए हैं, उनमें से कुछ को सीधे तत्वों को दो तरीकों से निर्दिष्ट करना भी संभव है। एक ओर, आप संपत्ति का उपयोग कर सकते हैं style और वस्तु की विभिन्न ग्राफिक विशेषताओं को उसके मूल्य के रूप में निर्दिष्ट करें। तार्किक रूप से, किसी वर्ग को पहलू निर्दिष्ट करने की उपरोक्त तकनीक का उपयोग करना बेहतर है, लेकिन इस संभावना के साथ आप एक नया वर्ग बनाए बिना किसी तत्व (एक बहुत ही विशेष अपवाद) में एक छोटा सा सुधार जोड़ सकते हैं।
दूसरी ओर, कुछ तत्व एचटीएमएल वे आपको विशिष्ट गुणों का उपयोग करने की अनुमति देते हैं जो उनकी उपस्थिति को परिभाषित करते हैं। सामान्य तौर पर, भले ही ये गुण मौजूद हों, वर्गों का उपयोग करना बेहतर होता है लेकिन, दुर्भाग्य से, सभी तत्व इस विकल्प की पेशकश नहीं करते हैं, कुछ उम्मीद करते हैं कि संबंधित वर्ग को संदर्भित करने के बजाय उन विशिष्ट गुणों के साथ एक निश्चित मूल्य सीधे इंगित किया जाएगा। इस प्रकार का व्यवहार करने वाले तत्वों में से एक बिल्कुल कोड है एसवीजी, जिसके लिए हमें गुणों में चौड़ाई और ऊंचाई का प्रतिशत मान निर्दिष्ट करना होगा width y height, क्रमशः, वर्ग के बजाय।
जैसा कि आगे विस्तार से देखा जाएगा लेख जो एसवीजी कोड के बारे में बात करता हैप्रस्तावित सरल विधि का उपयोग करने के लिए, ग्राफ़ के आयामों को प्रतिशत के रूप में मानने की सलाह दी जाती है। वस्तु के कुल आकार के मामले में, चौड़ाई और ऊंचाई मान में 100% इंगित करके, यह कंटेनर होगा जो अंतिम आयाम निर्धारित करता है ( <div> साथ id="dibujo", पिछले उदाहरण में)
ग्राफ़ के विभिन्न घटकों के मामले में एसवीजी (रेखाएँ, वृत्त, आयत...), एक ऐसे क्षेत्र में शामिल हैं जिसका माप 100×100 (कोई भी इकाई) है और अनुपात को संरक्षित किए बिना एक आयताकार आकार में विस्तारित होता है। गुण viewBox y preserveAspectRatio तत्व का एसवीजी वे इन मूल्यों को स्थापित करने के लिए जिम्मेदार हैं। पहले मामले में एक आयताकार दृश्य के साथ जो समन्वय बिंदु (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>
|
उपरोक्त सभी के साथ, अब आप एक पूर्ण कोड परिभाषित कर सकते हैं जो ग्राफिक्स कंटेनर के रूप में काम करेगा। एसवीजी से उत्पन्न या संशोधित जावास्क्रिप्ट. नीचे दिए गए उदाहरण में चार ग्राफ़िक्स ब्लॉक हैं जो प्रारूप का उपयोग करते हैं एचटीएमएल जिस प्रतिनिधित्व प्रस्ताव का हम उपयोग करने जा रहे हैं।
|
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 –>
|
नीचे आप देख सकते हैं कि शैली के साथ स्वरूपित पिछला कोड कैसा दिखेगा सीएसएस संगत, साथ उत्पन्न करना जावास्क्रिप्ट ग्राफिक्स एसवीजी IoT से जुड़े सेंसर द्वारा संग्रहीत डेटा की सर्वर रीडिंग के साथ। सिवाय इसके कि डेटा सर्वर से लोड नहीं किया जा रहा है, बल्कि क्लाइंट (आपके ब्राउज़र) में बेतरतीब ढंग से उत्पन्न किया जा रहा है, बाकी कोड का उपयोग लेखों की इस श्रृंखला में परिभाषित प्रस्ताव में किया जाएगा।
इस शृंखला का अगला लेख बताता है सीएसएस शैलियों को कैसे परिभाषित करें HTML कोड को रूप देने के लिए जो ग्राफ़िक्स के लिए एक कंटेनर के रूप में कार्य करता है एसवीजी जिसके साथ इंटरनेट ऑफ थिंग्स (IoT) से जुड़े सेंसर की स्थिति का प्रतिनिधित्व करना है।
1 टिप्पणी