צייר גרפי נתונים מחיישנים המחוברים לאינטרנט של הדברים (IoT) עם SVG
במאמר זה בסדרה על המייצגים גרפי נתונים ב-IoT אני מסביר כיצד לשרטט את הגרפים באמצעות ה שפת SVG. כמו בהזדמנויות אחרות, המאמר משמש גם כהקדמה קצרה לשפה.
פורמט SVG
SVG תואם את ראשי התיבות של Scalable Vector Graphics (גרפיקה וקטורית ניתנת להרחבה, באנגלית). זה שפת סימון שמבוסס על XML וזה מאפשר, בעיקר, לתאר ציור לפי הגיאומטריה המגדירה אותו; בניגוד לשיטת המטריצה, המשמשת למשל לצילום, שתשתמש ברשת של פיקסלים צבעוניים כדי לקודד אותו.
בתוך ציור SVG ניתן לכלול גם תמונה (מטריצה של פיקסלים), המתייחסת למסמך חיצוני או מוטמעת בתוך הציור עצמו. SVG.
גרסת השפה העדכנית בזמן כתיבת מאמר זה היא SVG 1.1 למרות שההגדרה של הגרסה כבר בפיתוח SVG 2. ככל האפשר, אשתדל לעשות את מה שמוסבר במבוא, גם אם זה מתייחס SVG 1.1 גם לשרת עבור SVG 2.
אם הציור SVG זה כלול במסמך נפרד ולא בתוך הקוד HTML (ההצעה שלי בפתרון הזה לייצוג נתוני IoT מטביעה אותם בקוד 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 שפועל כמיכל לגרפי נתונים ב-IoT, המידות, החלק מהסך המיוצג, הפרופורציה וגם הסוג והגרסה.
|
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 פיקסלים (יציאת תצוגה של 500x250) שיחתוך עם מלבן בגודל 460x80 (תיבת תצוגה 460x80) החל בקואורדינטות 20,10 תוך שימוש בכל השטח הזמין במיכל (אלמנט בדף אינטרנט, ב- במקרה שלנו) מבלי לכבד את הפרופורציה המקורית לשימוש preserveAspectRatio="none". בנוסף, כעת ניתן לראות את התוכן הראשון של המסמך, את ההערות הנכללות ביניהם <!-- y --> כמו בפורמטים אחרים המבוססים על XML.
מערכת הקואורדינטות שנבחרה על ידי SVG הוא מכוון אופקית (ציר X) ואנכית (ציר Y) והכיוון החיובי הוא של כתיבה מערבית, כלומר, ערכי ציר X גדלים ימינה והערכים החיוביים של ציר Y גדלים. כְּלַפֵּי מַטָה.
הגדר את הגרף עם SVG
כדי להגדיר את הגרפיקה של המידע המאוחסן על ידי החיישנים שלנו המחוברים ל-IoT נצטרך לציין את סוג האובייקט שצויר, הגיאומטריה שלו (קואורדינטות, מידות...) והמראה שלו (עובי, צבע...) דוגמה למאמר זה גרף קווים שניתן ליצור על ידי חיבור מקטעי קו עם האובייקט 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 (קואורדינטת y של המרכז), 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 להקצות להם מזהה ייחודי שממנו ניתן להפנות אליהם JavaScript לתמרן אותם. מנקודת המבט של 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)
המאמר הבא בסדרה בנושא ייצוג של גרפי נתונים מחיישנים המחוברים ל-IoT מסביר כיצד ליצור או לשנות גרפים בזמן אמת באמצעות JavaScript מה שיאפשר לך לראות אנימציה של הגרף כאשר מייצגים את הערכים האחרונים שנטענו מהשרת.
להלן דוגמה כיצד ייראו הגרפים שנוצרו באמצעות הצעה זו.
לפרסם תגובה