एसवीजी के साथ इंटरनेट ऑफ थिंग्स (आईओटी) से जुड़े सेंसर से डेटा ग्राफ़ बनाएं

श्रृंखला के इस लेख में IoT में डेटा ग्राफ़ का प्रतिनिधित्व करना मैं समझाता हूं कि इसका उपयोग करके ग्राफ़ कैसे बनाएं एसवीजी भाषा. अन्य अवसरों की तरह, लेख भी भाषा के संक्षिप्त परिचय के रूप में कार्य करता है।

एसवीजी प्रारूप

एसवीजी स्केलेबल वेक्टर ग्राफ़िक्स (स्केलेबल वेक्टर ग्राफ़िक्स, अंग्रेजी में) के संक्षिप्त नाम से मेल खाता है। यह है एक मार्कअप भाषा जो पर आधारित है एक्सएमएल और यह, मुख्य रूप से, ज्यामिति द्वारा एक रेखाचित्र का वर्णन करने की अनुमति देता है जो इसे परिभाषित करता है; मैट्रिक्स विधि के विपरीत, उदाहरण के लिए एक तस्वीर के लिए उपयोग किया जाता है, जो इसे एन्कोड करने के लिए रंगीन पिक्सेल के ग्रिड का उपयोग करेगा।

एक ड्राइंग के अंदर एसवीजी एक छवि (पिक्सेल का एक मैट्रिक्स) भी शामिल किया जा सकता है, जो या तो किसी बाहरी दस्तावेज़ को संदर्भित करता है या ड्राइंग के भीतर ही एम्बेडेड होता है। एसवीजी.

इस लेख को लिखे जाने के समय जो भाषा संस्करण मौजूद है वह है एसवीजी 1.1 हालाँकि संस्करण की परिभाषा पहले से ही विकसित की जा रही है एसवीजी 2. जहां तक ​​संभव होगा, मैं प्रस्तावना में जो बताया गया है, उसे बनाने का प्रयास करूंगा, भले ही इसका संदर्भ हो एसवीजी 1.1 के लिए भी सेवा करें एसवीजी 2.

अगर ड्राइंग एसवीजी यह एक अलग दस्तावेज़ में शामिल है, कोड में नहीं एचटीएमएल (IoT डेटा का प्रतिनिधित्व करने के लिए इस समाधान में मेरा प्रस्ताव इसे कोड में एम्बेड करता है एचटीएमएल) का नेतृत्व एक संदर्भ द्वारा किया जाना चाहिए एक्सएमएल और एक दस्तावेज़ प्रकार परिभाषा (डीटीडी).

पिछले कोड की पहली पंक्ति में संस्करण अधिसूचित किया गया है एक्सएमएल प्रयुक्त (1.0) वर्ण एन्कोडिंग (UTF-8) और इंगित करता है कि क्या आपको बाहरी परिभाषाओं की आवश्यकता है (standalone="no") या क्या यह एक स्टैंड-अलोन दस्तावेज़ है (standalone="yes"). दूसरी पंक्ति व्यक्त करती है दस्तावेज़ प्रकार परिभाषा (डीटीडी)जिसकी अगले संस्करण में जरूरत नहीं होगी एसवीजी.

वह कोड जिसके साथ ड्राइंग को परिभाषित किया गया है वह लेबल के बीच संलग्न है <sgv> y </sgv> जो यह भी इंगित करता है, जैसा कि बात करते समय पहले ही उल्लेख किया गया है HTML कोड जो IoT में डेटा ग्राफ़ के लिए एक कंटेनर के रूप में कार्य करता है, माप, प्रतिनिधित्व किए गए कुल का हिस्सा, अनुपात और प्रकार और संस्करण भी।

ऊपर दिया गया उदाहरण 500 पिक्सेल चौड़े और 250 पिक्सेल ऊंचे (500x250 व्यूपोर्ट) चित्र को परिभाषित करता है, जिसे कंटेनर में उपलब्ध सभी स्थान (वेब ​​पेज पर एक तत्व) का उपयोग करके निर्देशांक 460 से शुरू करके 80x460 आयत (80x20,10 व्यूबॉक्स) के साथ क्रॉप किया जाएगा। हमारे मामले में) उपयोग के मूल अनुपात का सम्मान किए बिना preserveAspectRatio="none". इसके अलावा, अब आप दस्तावेज़ की पहली सामग्री, उसमें शामिल टिप्पणियाँ देख सकते हैं <!-- y --> जैसा कि अन्य प्रारूपों पर आधारित है एक्सएमएल.

द्वारा चुनी गई समन्वय प्रणाली एसवीजी यह क्षैतिज (X अक्ष) और लंबवत (Y अक्ष) उन्मुख है और सकारात्मक दिशा पश्चिमी लेखन की है, अर्थात, X अक्ष का मान दाईं ओर बढ़ता है और Y अक्ष का सकारात्मक मान बढ़ता है। नीचे की ओर.

एसवीजी के साथ ग्राफ को परिभाषित करें

IoT से जुड़े हमारे सेंसर द्वारा संग्रहीत जानकारी के ग्राफिक्स को परिभाषित करने के लिए हमें खींची गई वस्तु के प्रकार, उसकी ज्यामिति (निर्देशांक, आयाम...) और उसकी उपस्थिति (मोटाई, रंग...) को निर्दिष्ट करने की आवश्यकता होगी। इस आलेख का उदाहरण एक रेखा ग्राफ़ है जिसे वस्तु के साथ रेखाखंडों को जोड़कर बनाया जा सकता है line, स्वतंत्र तत्वों, या बहु-खंड रेखा, किसी ऑब्जेक्ट को प्लॉट करने के लिए सबसे उपयोगी है path, कनेक्टेड लाइनों की श्रृंखला के लिए अधिक व्यावहारिक।

तत्व के साथ path इसका उद्देश्य नीचे दी गई छवि की तरह एक चित्र बनाना है, जो हल्के रंग से भरे एक बंद रास्ते से बना है, जिसके ऊपर एक खुला रास्ता है, बिना भरा हुआ और एक मोटी रेखा के साथ खींचा गया है।

किसी पंक्ति का वर्णन करने के लिए प्रकार की अभिव्यक्ति का उपयोग किया जाता है:

जिसमें X1,Y1 रेखा पर पहले बिंदु के निर्देशांक हैं और X2,Y2 दूसरे बिंदु के निर्देशांक हैं। एक विशेषता का प्रयोग किया गया stroke-width मोटाई को परिभाषित करने के लिए. वस्तुओं के स्वरूप को परिभाषित करने के कई तरीके हैं एसवीजी, अपनी व्यक्तिगत संपत्तियों के साथ, पिछले वाले की तरह, या संपत्ति के साथ style जो उन सभी को एक साथ लाता है और वह कौन सी विधि है जिसका उपयोग लेख प्रस्ताव में किया जाएगा।

उपरोक्त कोड संपत्ति पर जुड़ता है style के मान stroke (स्ट्रोक का रंग), stroke-width (लाइन की मोटाई) और stroke-opacity (वस्तु की अस्पष्टता)

किसी वस्तु का वर्णन path रूप है

उपरोक्त कोड संचालन का उपयोग करता है एसवीजी M, L y Z संपत्ति के अंदर d, जिसका अर्थ क्रमशः, "मूवेटो" (आगे बढ़ना), "लिनेटो" (लाइन टू) और "क्लोज़पाथ" (नज़दीकी रास्ता) है। जहां उपयुक्त हो (के मामले में) निरपेक्ष या सापेक्ष मूल्य को इंगित करने के लिए उन्हें ऊपरी या निचले मामले में व्यक्त किया जा सकता है Z, उदाहरण के लिए, अप्रासंगिक है)। कई अन्य ऑपरेशन हैं जिनके साथ, उदाहरण के लिए, हम गोलाकार वक्र, अण्डाकार वक्र, बेज़ियर वक्र बना सकते हैं... जिनकी हमें इस उदाहरण में आवश्यकता नहीं होगी।

यद्यपि यह प्रस्ताव रेखा रेखाचित्र खींचता है जो एक क्षेत्र को घेर सकता है, यह बिंदुओं को चिह्नित करने या क्षेत्रों को उजागर करने के लिए अन्य सरल तत्वों को खींचने के लिए उपयोगी हो सकता है। उनमें से जो उपलब्ध हैं एसवीजी बहुभुज (जिससे आप भराई भी बना सकते हैं), आयत (विशिष्ट मामले के लिए अधिक सुविधाजनक), दीर्घवृत्त और वृत्त (दीर्घवृत्त के एक विशेष मामले के रूप में) दिलचस्प हो सकते हैं। इन तत्वों का सिंटैक्स निम्नलिखित उदाहरण कोड में देखा जा सकता है।

पिछले कोड की उपस्थिति निम्नलिखित छवि की तरह होगी (उपरोक्त उदाहरण से बिंदुओं का पुन: उपयोग करने में सक्षम होने के लिए कुछ युक्तियों के साथ)

बहुभुज के बिंदु (polygon) संपत्ति में दर्शाया गया है points x,y निर्देशांक के जोड़े के रूप में उनके बीच रिक्त स्थान द्वारा अलग किया गया है। दीर्घवृत्त को परिभाषित करने के लिए (ellipse) गुणों का उपयोग किया जाता है cx (x केंद्र का निर्देशांक), cy (y केंद्र का समन्वय), rx (चौड़ाई) और ry (उच्च)। दो त्रिज्या मानों (क्षैतिज और ऊर्ध्वाधर त्रिज्या) के बजाय, rx y ry) वृत्त (circle) संपत्ति के साथ त्रिज्या द्वारा परिभाषित किया गया है r और केंद्र के निर्देशांक के साथ cx y cy. आयत को परिभाषित करने के लिए (rectangle) ऊपरी बाएँ कोने के निर्देशांक दर्शाए गए हैं (x e y) चौड़ाई (width) और लंबा (height)

अंत में, टेक्स्ट को शामिल करने के लिए ऑब्जेक्ट का उपयोग किया जाता है text निम्नलिखित नुसार:

पाठ की स्थिति x और y निर्देशांक के साथ इंगित की जाती है, फ़ॉन्ट संपत्ति से मेल खाता है font-family, आकार के साथ font-size और संपत्ति के साथ रंग fill.

एचटीएमएल आपको चित्रों को एकीकृत करने की अनुमति देता है एसवीजी पृष्ठ के एक अन्य तत्व के रूप में। अन्य वस्तुओं की तरह, आप संपत्ति का उपयोग कर सकते हैं ID उन्हें एक विशिष्ट पहचानकर्ता निर्दिष्ट करना जिससे उन्हें संदर्भित किया जा सके जावास्क्रिप्ट उन्हें हेरफेर करने के लिए. के दृष्टिकोण से एचटीएमएल, एक वस्तु एसवीजी निम्नलिखित प्रपत्र होगा:

अब तक हमने जो देखा है, उसके आधार पर उस प्रकार का मूल ग्राफ बनाना संभव होगा जो इस प्रस्ताव में मांगा गया है, लेकिन कंटेनर (वेब ​​पेज) की उपस्थिति को लचीलापन देने के लिए, ग्राफ का अनुपात प्रभावित होगा (उदाहरण के लिए preserveAspectRatio="none") तत्वों की ब्राउज़र विंडो में लेआउट के अनुसार इसे अनुकूलित करने के लिए इसके आकार को संशोधित करके एचटीएमएल.

मोटे तौर पर, चार्ट वाले वेब पेज को प्रदर्शित करने वाली ब्राउज़र विंडो के आकार को संशोधित करते समय व्यवहार के दो विकल्प होते हैं: (1) चार्ट का आकार बनाए रखें एसवीजी यदि अधिक है तो रिक्त स्थान छोड़ना या यदि नहीं है तो स्क्रॉल बार जोड़ना या (2) ग्राफ़ के आकार को संशोधित करना एसवीजी वेब प्रदर्शित करने वाली ब्राउज़र विंडो के आकार को लयबद्ध तरीके से बदलने के लिए। यदि आप पहला सूत्र चुनते हैं, तो आप परिमाण की भविष्यवाणी कर सकते हैं और पूर्ण माप के साथ आकर्षित कर सकते हैं, हालांकि चुने हुए आकार और ग्राफ़ के मूल्यों के आधार पर सही किया जा सकता है। यदि आप दूसरा तरीका चुनते हैं, जो कि मैं प्रस्तावित करता हूं, तो परिमाण हमेशा दर्शाए गए मानों का प्रतिशत होता है। दूसरी विधि का लाभ वेब के प्रति इसकी अनुकूलनशीलता है और दोष ग्राफ़ के साथ आने वाले तत्वों, जैसे बिंदु या पाठ का चित्रण है।

रेखाओं की मोटाई में होने वाली विकृति को ठीक करने के लिए प्रभाव का उपयोग किया जाता है। vector-effect="non-scaling-stroke" उन मार्गों पर जो आवश्यक हैं (जिनका मूल्य है stroke के अलावा अन्य none). वस्तुओं के लिए text कोई तुलनीय प्रभाव नहीं है, इसलिए कंटेनर आकार में परिवर्तन से उत्पन्न होने वाली विपरीत दिशा में उन्हें (उनके साथ जुड़े लोगों के साथ) विकृत करना आवश्यक है।

में परिवर्तन एसवीजी उन्हें वस्तुओं के समूहों पर लागू किया जा सकता है ताकि ग्राफ़िक में कई पाठ और अन्य वस्तुओं को एक ही समूह में एकीकृत किया जा सके और, अधिक आसानी से, उन सभी के लिए परिवर्तन किया जा सके।

वे तत्व जो किसी समूह का हिस्सा हैं, उन्हें टैग में शामिल किया गया है <g> y </g>, परिवर्तन निर्दिष्ट करने के लिए संपत्ति का उपयोग किया जाता है transform और ऑपरेशनों की एक श्रृंखला, जो हमारे मामले के लिए प्रासंगिक है scale, जिसमें एक क्षैतिज और ऊर्ध्वाधर आवर्धन कारक दर्शाया गया है। यदि का मान scale एक से अधिक होने पर संबंधित अक्ष चौड़ा हो जाता है और यदि एक से कम होता है तो उस अक्ष पर वस्तुओं के आकार में कमी आ जाती है।

पिछले उदाहरण में, पहले और दूसरे पाठ को उनके क्षैतिज माप को आधा करके और ऊर्ध्वाधर माप को 0.5 और 2.0 में प्रयुक्त मानों द्वारा दोगुना करके संशोधित किया गया है। scale(0.5,2.0)

शृंखला का अगला लेख IoT से जुड़े सेंसर से डेटा ग्राफ़ का प्रतिनिधित्व वास्तविक समय में ग्राफ़ बनाने या संशोधित करने का तरीका बताता है जावास्क्रिप्ट जो आपको सर्वर से लोड किए गए अंतिम मानों का प्रतिनिधित्व करते समय ग्राफ़ का एक एनीमेशन देखने की अनुमति देगा।

निम्नलिखित एक उदाहरण है कि इस प्रस्ताव का उपयोग करके तैयार किए गए ग्राफ़ कैसे दिखेंगे।