ارسم رسومًا بيانية للبيانات من أجهزة الاستشعار المتصلة بإنترنت الأشياء (IoT) باستخدام SVG
في هذه المقالة في السلسلة على تمثيل الرسوم البيانية للبيانات في إنترنت الأشياء أشرح كيفية رسم الرسوم البيانية باستخدام لغة SVG. كما هو الحال في مناسبات أخرى، تعتبر المقالة أيضًا بمثابة مقدمة قصيرة للغة.
تنسيق SVG
SVG يتوافق مع اختصار Scalable Vector Graphics (رسومات متجهة قابلة للتحجيم، باللغة الإنجليزية). انه لغة توصيف النص وهو مبني على XML وهذا يسمح، بشكل أساسي، بوصف الرسم بالهندسة التي تحدده؛ على عكس طريقة المصفوفة، المستخدمة على سبيل المثال للصورة الفوتوغرافية، والتي تستخدم شبكة من البكسلات الملونة لتشفيرها.
داخل الرسم SVG يمكن أيضًا تضمين صورة (مصفوفة من وحدات البكسل)، إما تشير إلى مستند خارجي أو مضمنة داخل الرسم نفسه. SVG.
إصدار اللغة الحالي وقت كتابة هذه المقالة هو SVG 1.1 تحديث على الرغم من أن تعريف الإصدار قيد التطوير بالفعل SVG 2 تحديث. وسأحاول قدر الإمكان أن أحقق ما تم شرحه في المقدمة، حتى لو كان يشير إليه SVG 1.1 تحديث يخدم أيضا ل SVG 2 تحديث.
إذا كان الرسم SVG يتم تضمينه في مستند منفصل وليس ضمن التعليمات البرمجية HTML (اقتراحي في هذا الحل لتمثيل بيانات إنترنت الأشياء يدمجها في الكود HTML) يجب أن يرأسها مرجع XML وعلى تعريف نوع الوثيقة (DTD).
|
1
2
|
<?xml version=“1.0” encoding=“utf-8” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
|
في السطر الأول من الكود السابق يتم إخطار الإصدار XML يستخدم (1.0) ترميز الأحرف (UTF-8) ويشير إلى ما إذا كنت بحاجة إلى تعريفات خارجية (standalone="no") أم أنها مستند مستقل (standalone="yes"). السطر الثاني يعبر عن تعريف نوع الوثيقة (DTD)، والتي لن تكون هناك حاجة إليها في الإصدار التالي من SVG.
يتم وضع الرمز الذي تم تعريف الرسم به بين التسميات <sgv> y </sgv> والتي تشير أيضًا إلى ما سبق ذكره عند الحديث عنه كود HTML الذي يعمل كحاوية للرسوم البيانية للبيانات في إنترنت الأشياءوالقياسات والجزء من المجموع الممثل والنسبة وأيضا النوع والإصدار.
|
1
2
3
4
5
6
7
|
<?xml version=“1.0” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=“500px” height=“250px” viewBox=“20 10 460 80” preserveAspectRatio=“none” xmlns=“http://www.w3.org/2000/svg” version=“1.1”>
<!–
dibujo en formato SVG
–>
</svg>
|
يحدد المثال أعلاه رسمًا بعرض 500 بكسل وارتفاع 250 بكسل (منفذ عرض 500 × 250) سيتم اقتصاصه بمستطيل مقاس 460 × 80 (مربع عرض 460 × 80) بدءًا من الإحداثيات 20,10 باستخدام كل المساحة المتوفرة في الحاوية (عنصر على صفحة ويب، في حالتنا) دون احترام النسبة الأصلية للاستخدام preserveAspectRatio="none". بالإضافة إلى ذلك، يمكنك الآن رؤية المحتوى الأول للمستند، والتعليقات المضمنة فيه <!-- y --> كما هو الحال في الأشكال الأخرى بناءً على XML.
نظام الإحداثيات الذي اختاره SVG وهو موجه أفقياً (المحور X) وعمودياً (المحور Y) والاتجاه الموجب هو اتجاه الكتابة الغربية، أي أن قيم المحور X تنمو إلى اليمين وتنمو القيم الموجبة للمحور Y إلى الأسفل.
حدد الرسم البياني باستخدام SVG
لتحديد رسومات المعلومات المخزنة بواسطة أجهزة الاستشعار المتصلة بإنترنت الأشياء، سنحتاج إلى تحديد نوع الكائن الذي يتم رسمه، وهندسته (الإحداثيات، الأبعاد...) ومظهره (السُمك، اللون...) في مثال على هذه المقالة، رسم بياني خطي يمكن إنشاؤه من خلال ربط المقاطع الخطية بالكائن line، الأكثر فائدة لرسم العناصر المستقلة، أو كائن باستخدام خط متعدد المقاطع path، أكثر عملية لسلسلة من الخطوط المتصلة.
مع العنصر path الهدف هو عمل رسم مثل الذي في الصورة أدناه، والذي يتكون من مسار مغلق مملوء بلون أفتح يعلوه في الأعلى مسار مفتوح، بدون تعبئة ومرسوم بخط سميك.
لوصف خط يتم استخدام تعبير من النوع:
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” stroke-width=“5” />
|
حيث X1,Y1 هي إحداثيات النقطة الأولى على الخط وX2,Y2 هي إحداثيات النقطة الثانية. تم استخدام سمة stroke-width لتحديد سمك. هناك عدة طرق لتحديد مظهر الكائنات SVG، بخصائصه الفردية كالسابقة، أو بالخاصية style الذي يجمعهم جميعًا معًا وهو الأسلوب الذي سيتم استخدامه في مقترح المقالة.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
|
الكود أعلاه ينضم إلى الخاصية style قيم stroke (لون السكتة الدماغية) ، stroke-width (سمك الخط) و stroke-opacity (عتامة الكائن)
وصف الكائن path لديه الشكل
|
1
|
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
|
يستخدم الكود أعلاه العمليات SVG M, L y Z داخل العقار d، والتي تعني، على التوالي، "moveto" (الانتقال إلى)، و"lineto" (خط إلى)، و"Closepath" (مسار قريب). ويمكن التعبير عنها بأحرف كبيرة أو صغيرة للإشارة إلى قيمة مطلقة أو نسبية عند الاقتضاء (في حالة Z، على سبيل المثال، لا علاقة له بالموضوع). هناك العديد من العمليات الأخرى التي يمكننا مثلا من خلالها رسم منحنيات دائرية، منحنيات إهليلجية، منحنيات بيزييه... والتي لن نحتاجها في هذا المثال.
على الرغم من أن هذا الاقتراح يرسم رسومًا بيانية خطية يمكنها إحاطة منطقة ما، إلا أنه قد يكون من المفيد رسم عناصر بسيطة أخرى لتحديد النقاط أو إبراز المناطق. من تلك المتوفرة في SVG يمكن أن تكون المضلعات (التي يمكنك من خلالها أيضًا رسم الحشوة)، والمستطيلات (أكثر ملاءمة لحالة معينة)، والأشكال الناقصية والدوائر (كحالة معينة من علامات الحذف) مثيرة للاهتمام. يمكن رؤية بناء جملة هذه العناصر في كود المثال التالي.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<svg id=“formas_sencillas” width=“100%” height=“180px” viewBox=“0 0 100 100” preserveAspectRatio=“none” class=“foto_columna_sombra” style=“background-color:#A8C3EA;margin:20px auto;”>
<polygon points=“0,100 0,42 8,38 14,37 22,40 29,33 35,36 44,40 51,30 57,42 64,33 74,38 80,34 87,40 92,38 100,32 100,100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;fill:#205587;fill-opacity:0.5;” vector-effect=“non-scaling-stroke” />
<circle cx=“0” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“8” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“14” cy=“37” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“22” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“29” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“35” cy=“36” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“44” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“51” cy=“30” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“57” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“64” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“74” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“80” cy=“34” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“87” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“92” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“100” cy=“32” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<rect x=“0” y=“0” width=“100” height=“100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
|
سيكون مظهر الكود السابق مثل الصورة التالية (مع بعض الحيل لتتمكن من إعادة استخدام النقاط من المثال أعلاه)
نقاط المضلع (polygon) موضحة في العقار points كأزواج من إحداثيات x وy مفصولة بمسافات بينها. لتحديد علامات الحذف (ellipse) يتم استخدام الخصائص cx (x إحداثيات المركز)، cy (ص إحداثيات المركز)، rx (العرض) و ry (عالي). بدلاً من قيمتين لنصف القطر (نصف القطر الأفقي والرأسي، rx y ry) الدائرة (circle) يتم تعريفه بواسطة نصف قطر مع الخاصية r وإحداثيات المركز مع cx y cy. لتحديد المستطيل (rectangle) تتم الإشارة إلى إحداثيات الزاوية اليسرى العليا (x e y) العرض (width) والطويل (height)
وأخيرًا، لتضمين النص، يتم استخدام الكائن text على النحو التالي:
|
1
2
3
|
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
|
تتم الإشارة إلى موضع النص بإحداثيات x وy، والخط يتوافق مع الخاصية font-familyالحجم مع font-size واللون مع الخاصية fill.
HTML يسمح لك بدمج الرسومات SVG كعنصر آخر من الصفحة. مثل الكائنات الأخرى، يمكنك استخدام الخاصية ID لتعيين معرف فريد لهم يمكن من خلاله الرجوع إليهم منه جافا سكريبت للتلاعب بهم. من وجهة نظر HTML، شيء SVG سيكون لها النموذج التالي:
|
1
2
3
4
5
6
7
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
</svg>
|
مع ما رأيناه حتى الآن، سيكون من الممكن رسم نوع الرسم البياني الأساسي المطلوب في هذا الاقتراح، ولكن لإضفاء المرونة على مظهر الحاوية (صفحة الويب)، ستتأثر نسبة الرسم البياني (على سبيل المثال preserveAspectRatio="none") عن طريق تعديل حجمه ليتناسب مع التخطيط الموجود في نافذة المتصفح للعناصر HTML.
بشكل عام، هناك بديلان للسلوك عند تعديل حجم نافذة المتصفح التي تعرض صفحة الويب التي تحتوي على المخطط: (1) الحفاظ على حجم المخطط SVG ترك مساحة فارغة إذا كان هناك فائض أو إضافة أشرطة تمرير إذا كانت مفقودة أو (2) تعديل حجم الرسم البياني SVG بطريقة إيقاعية لتغيير حجم نافذة المتصفح التي تعرض الويب. إذا اخترت الصيغة الأولى، يمكنك التنبؤ بالمقادير والرسم بالقياسات المطلقة، على الرغم من تصحيحها بناءً على الحجم المختار وقيم الرسم البياني. إذا اخترت الطريقة الثانية، وهي الطريقة التي أقترحها، فإن المقادير تكون دائمًا نسبًا مئوية من القيم الممثلة. ميزة الطريقة الثانية هي قدرتها على التكيف مع الويب والعيب هو رسم العناصر المصاحبة للرسم البياني، مثل النقاط أو النصوص.
لتصحيح التشوه الذي قد يحدث في سمك الخطوط، يتم استخدام التأثير. vector-effect="non-scaling-stroke" على الطرق الضرورية (تلك التي لها قيمة stroke غير ذلك none). للكائنات text لا يوجد تأثير مماثل، لذلك من الضروري تشويهها (مع تلك المرتبطة بها) في الاتجاه المعاكس لذلك الناتج عن التغير في حجم الحاوية.
التحولات في SVG يمكن تطبيقها على مجموعات من الكائنات بحيث يمكن دمج العديد من النصوص والكائنات الأخرى في الرسم في مجموعة واحدة، وبشكل أكثر ملاءمة، إجراء تحويل لها جميعًا.
يتم تضمين العناصر التي تشكل جزءًا من المجموعة بين العلامات <g> y </g>، لتعيين تحويل يتم استخدام الخاصية transform وسلسلة من العمليات ذات الصلة بحالتنا scale، والذي يشار إليه بعامل التكبير الأفقي والرأسي. إذا كانت قيمة scale أكبر من واحد يؤدي إلى توسيع المحور المقابل، وإذا كان أقل من واحد، يحدث انخفاض في حجم الكائنات على طول هذا المحور.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<g transform=“scale(0.5,2.0)”>
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Primer texto
</text>
<text x=“10.0” y=“50.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Segundo texto
</text>
</g>
</svg>
|
في المثال السابق تم تعديل النص الأول والثاني عن طريق خفض قياسهما الأفقي إلى النصف ومضاعفة القياس الرأسي بالقيمتين 0.5 و 2.0 المستخدمتين في scale(0.5,2.0)
المقالة القادمة في السلسلة على تمثيل الرسوم البيانية للبيانات من أجهزة الاستشعار المتصلة بإنترنت الأشياء يشرح كيفية إنشاء أو تعديل الرسوم البيانية في الوقت الحقيقي باستخدام جافا سكريبت والذي سيسمح لك برؤية رسم بياني متحرك عند تمثيل القيم الأخيرة التي تم تحميلها من الخادم.
فيما يلي مثال لكيفية ظهور الرسوم البيانية التي تم إنشاؤها باستخدام هذا الاقتراح.
أكتب تعليق