גרפי סטטוס של חיישנים המחוברים ל-Internet of Things IoT
אחד היתרונות של חיבור רשת חיישנים לאינטרנט של הדברים הוא היכולת לנתח את הנתונים המתקבלים. על ידי ייצוג גרפי של מידע זה, אדם (בניגוד לתוכנית) יכול להבין בצורה אינטואיטיבית יותר את המשמעות של הכמויות המנוטרות, למשל על ידי השוואה ביניהן או מעקב אחר התפתחותן לאורך זמן.
מאמר זה מתחיל סדרה, המורכבת מארבעה חלקים, המסבירה הצעה פשוטה לייצוג גרפי של נתונים המתקבלים על ידי חיישנים המחוברים ל-IoT. עם אותה פילוסופיה כמו במאמרים אחרים, השיטה המוצעת היא פונקציונלית לחלוטין אם כי המטרה העיקרית היא דידקטית. כפרופיל הטכני של הציבור אליו הבלוג polaridad.es, והטקסט הזה עוסק באלקטרוניקה ולא בפיתוח אתרים, כל אחד מהסעיפים משמש כמבוא לשפות או לטכנולוגיה שבה נעשה שימוש: HTML, CSS, SVG y JavaScript.
המאמרים בסדרה הקודמת על כיצד לאחסן נתונים שהושגו על ידי מכשירים המחוברים לאינטרנט של הדברים (IoT) הם סיימו בהסבר כיצד לגשת למידע המאוחסן במאגרי המידע. בדוגמאות של הסדרה, כדי להקל על התהליך, נעשה שימוש בשרת אינטרנט כמתווך שהיה אחראי על קבלת הנתונים באמצעות בקשות POST של פרוטוקול HTTP, אחסונם במסד נתונים והצגתם בדף אינטרנט.
למרות שהחיסרון העיקרי של מערכת זו הוא ביצועים (שניתן להקל עם חלופות כמו Node.js ו-MongoDB, שיוסברו במאמרים הבאים), בתמורה היא מספקת שני יתרונות גדולים: היישום שלה פשוט מאוד (כולל הזמינות של השירותים הציבוריים) ויכול להציג את הנתונים בדפדפן, כלומר, הוא אינו זקוק ליישומים ספציפיים (כגון אפליקציה למכשיר נייד) כדי להציג את המידע המאוחסן שייצג את המצב ההיסטורי של מכשירים המחוברים לאינטרנט של דברים.
תוך ניצול היתרון של היכולת להציג בקלות בדף אינטרנט את המידע שנשמר במערכת זו על מצב המכשירים המחוברים ל-IoT, מאמר זה מסביר כיצד להציג מידע זה בצורה גרפית באמצעות הפורמט SVG מן JavaScript כדי ליצור באופן דינמי דף אינטרנט HTML.
יש הרבה חנויות ספרים JavaScript בעזרתו ניתן לפתור את ההצגה הגרפית של הנתונים. מאמרים אלה אינם מתכוונים לפתח אחד נוסף; מטרת טקסט זה היא להבין את התהליך ולהיות מסוגל לפתח יישומים משלך; מטרה דידקטית וגם פרודוקטיבית. אם אתה מעוניין להשתמש במוצר במקום לפתח אותו בעצמך, אני ממליץ לך להסתכל על כמה מהספריות המצוינות ליצירת גרפיקה עם JavaScript עם רישיונות חינם כמו Charts.js, Highcharts, כלי תרשים של גוגל, תקופה, רפאל, תרשים (מבוסס על רפאל), dc.js, Chartist.js, D3.js (המלצה שלי), C3.js (מבוסס על D3.js), NVD3 (גרפיקה לשימוש חוזר עבור D3.js) ...
מבנה מסמך HTML עם גרפיקת SVG
בהצעה של מאמר זה להציג באופן גרפי נתוני חיישנים, דף האינטרנט שבו הוא מוצג מורכב מ:
- המסמך המשמש כמיכל נכתב ב HTML,
- מראה הדף מוגדר בקוד CSS,
- ציור הגרף נעשה באמצעות השפה SVG y
- קריאת נתונים מהשרת והצגת גרפים מתוכנתת JavaScript
כל האלמנטים, במיוחד הקוד HTML של העמוד, ניתן ליצור בשרת עם PHP כפי שהוסבר במאמר על שפת תכנות PHP מהסדרה על אחסון נתונים ממכשירים המחוברים לאינטרנט של הדברים.
הקוד CSS y JavaScript ניתן לטעון (לייבא) בקוד 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 באמצעותו ניתן לבצע פונקציה באופן אוטומטי JavaScript ברגע שהתוכן נטען. משאב זה מאפשר לך להתחיל בביצוע הקוד שיגדיר את האובייקטים הגרפיים ולעדכן אותם תוך כדי טעינת מידע מהשרת על מצב החיישנים המייצגים את הגרפיקה הזו.
מכל המטא-מידע שניתן לכלול בכותרת המסמך HTML, אנו מעוניינים במיוחד להכיר את המתואר בהנחיות הבאות:
-
<title>המשמשת לתת כותרת למסמך. בדרך כלל הוא יופיע בחלון הדפדפן או בכרטיסייה המתאימה ויעזור לנו לזהות את הגרפיקה שהוא מכיל. -
<charset>מצהיר על ערכת התווים המשמשת לקידוד המסמך. זה חשוב במיוחד עבור סימנים "מיוחדים" כגון eñes או מבטאים. -
<link>מאפשר יצירת קשר בין המסמך HTML נוכחיים ואחרים חיצוניים. זה יעזור לנו לטעון את גיליון הסגנונות בפורמט CSS עם מראה המסמך. -
<script>מכיל סקריפט עם קוד הפעלה. באמצעות הנחיה זו נטען את הפונקציות JavaScript בעזרתו ניתן ליצור או לשנות גרפיקה 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, בעוד במקרה של הקוד JavaScript זה בשימוש 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 ( <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, שאמורים ביחד להגדיר את המראה וההתנהגות של האלמנט. כפי שהוסבר במאמר הבא בנושא הגדרת גרפיקת חיישני IoT הופעת אינטרנט עם 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 נוצר או שונה מ JavaScript. הדוגמה להלן מכילה ארבעה בלוקים גרפיים המשתמשים בפורמט 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 מתכתב, מייצר עם JavaScript הגרפיקה SVG עם קריאות שרת של נתונים המאוחסנים על ידי חיישנים המחוברים ל-IoT. מלבד העובדה שהנתונים אינם נטענים מהשרת אלא נוצרים באופן אקראי בלקוח (הדפדפן שלך), שאר הקוד הוא מה שישמש בהצעה המוגדרת בסדרת מאמרים זו.
המאמר הבא בסדרה זו מסביר כיצד להגדיר סגנונות CSS לתת מראה לקוד HTML שפועל כמיכל לגרפיקה SVG שבאמצעותו לייצג את מצב החיישנים המחוברים לאינטרנט של הדברים (IoT).
1 תגובה