กราฟสถานะของเซ็นเซอร์ที่เชื่อมต่อกับ Internet of Things IoT
ข้อดีอย่างหนึ่งของการเชื่อมต่อเครือข่ายเซ็นเซอร์กับ Internet of Things คือสามารถวิเคราะห์ข้อมูลที่ได้รับได้ ด้วยการนำเสนอข้อมูลนี้ในรูปแบบกราฟิก บุคคล (ซึ่งตรงข้ามกับโปรแกรม) สามารถเข้าใจความหมายของปริมาณที่ได้รับการตรวจสอบได้ง่ายขึ้น เช่น โดยการเปรียบเทียบระหว่างกันหรือติดตามการพัฒนาเมื่อเวลาผ่านไป
บทความนี้จะเริ่มต้นซีรีส์ที่ประกอบด้วยสี่ส่วนที่อธิบายข้อเสนอง่ายๆ สำหรับการแสดงข้อมูลแบบกราฟิกที่ได้รับจากเซ็นเซอร์ที่เชื่อมต่อกับ IoT ด้วยปรัชญาเดียวกันกับบทความอื่นๆ วิธีการที่แนะนำนี้ใช้งานได้อย่างสมบูรณ์แบบ แม้ว่าวัตถุประสงค์หลักจะเป็นการสอนก็ตาม เนื่องจากเป็นลักษณะทางเทคนิคของประชาชนทั่วไปซึ่ง บล็อกของ polaridad.esและข้อความนี้เป็นเรื่องเกี่ยวกับอิเล็กทรอนิกส์ไม่ใช่การพัฒนาเว็บ แต่ละส่วนทำหน้าที่เป็นการแนะนำภาษาหรือเทคโนโลยีที่ใช้: HTML, CSS, SVG y JavaScript.
บทความในชุดก่อนหน้านี้เกี่ยวกับ วิธีจัดเก็บข้อมูลที่ได้รับจากอุปกรณ์ที่เชื่อมต่อกับ Internet of Things (IoT) ปิดท้ายด้วยการอธิบายวิธีการเข้าถึงข้อมูลที่เก็บไว้ในฐานข้อมูล ในตัวอย่างของซีรีส์นี้ เพื่อให้กระบวนการง่ายขึ้น เว็บเซิร์ฟเวอร์ถูกใช้เป็นตัวกลางที่รับผิดชอบในการรับข้อมูลผ่านการร้องขอ POST ของโปรโตคอล HTTP จัดเก็บไว้ในฐานข้อมูลและแสดงข้อมูลบนหน้าเว็บ
แม้ว่าข้อเสียเปรียบหลักของระบบนี้คือประสิทธิภาพ (ซึ่งสามารถบรรเทาได้ด้วยทางเลือกอื่น เช่น Node.js และ MongoDB ซึ่งจะอธิบายในบทความต่อๆ ไป) แต่กลับให้ข้อดีสองประการที่ยอดเยี่ยม นั่นคือ การใช้งานนั้นง่ายมาก (รวมถึงความพร้อมใช้งานด้วย ของบริการสาธารณะ) และสามารถแสดงข้อมูลในเบราว์เซอร์ได้ กล่าวคือ ไม่จำเป็นต้องมีแอปพลิเคชันเฉพาะ (เช่น แอปสำหรับอุปกรณ์เคลื่อนที่) ในการนำเสนอข้อมูลที่เก็บไว้ซึ่งจะแสดงสถานะในอดีตของอุปกรณ์ที่เชื่อมต่อกับอินเทอร์เน็ตของ สิ่งของ.
การใช้ประโยชน์จากความสามารถในการนำเสนอข้อมูลที่เก็บไว้ในระบบนี้บนหน้าเว็บได้อย่างง่ายดายเกี่ยวกับสถานะของอุปกรณ์ที่เชื่อมต่อกับ IoT บทความนี้จะอธิบายวิธีการแสดงข้อมูลนี้ในรูปแบบกราฟิกโดยใช้รูปแบบ SVG จาก JavaScript เพื่อสร้างหน้าเว็บแบบไดนามิก HTML.
มีร้านหนังสือมากมาย JavaScript ซึ่งใช้ในการแก้ปัญหาการนำเสนอข้อมูลแบบกราฟิก บทความเหล่านี้ไม่ได้ตั้งใจจะพัฒนาบทความอื่น วัตถุประสงค์ของข้อความนี้คือเพื่อทำความเข้าใจกระบวนการและสามารถพัฒนาการใช้งานของคุณเองได้ วัตถุประสงค์ในการสอนเช่นเดียวกับวัตถุประสงค์ที่มีประสิทธิผล หากคุณสนใจที่จะใช้ผลิตภัณฑ์แทนที่จะพัฒนาด้วยตัวเอง ฉันขอแนะนำให้คุณดูไลบรารีที่ยอดเยี่ยมสำหรับการสร้างกราฟิกด้วย JavaScript พร้อมใบอนุญาตฟรีเช่น Charts.js, Highcharts, เครื่องมือแผนภูมิของ Google, ยุค, ราฟาเอล, กราฟฟิค (ขึ้นอยู่กับ ราฟาเอล), ดีซี.เจส, Chartist.js, D3.js (คำแนะนำของฉัน) C3.js (ขึ้นอยู่กับ D3.js), NVD3 (กราฟิกที่ใช้ซ้ำได้สำหรับ D3.js) ...
โครงสร้างเอกสาร HTML พร้อมกราฟิก SVG
ในข้อเสนอของบทความนี้เพื่อนำเสนอข้อมูลเซ็นเซอร์แบบกราฟิก หน้าเว็บที่จะแสดงประกอบด้วย:
- เอกสารที่ทำหน้าที่เป็นคอนเทนเนอร์ถูกเขียนไว้ HTML,
- ลักษณะที่ปรากฏของเพจถูกกำหนดด้วยโค้ด CSS,
- การวาดกราฟทำได้โดยใช้ภาษา SVG y
- การอ่านข้อมูลจากเซิร์ฟเวอร์และการแสดงกราฟถูกตั้งโปรแกรมไว้ JavaScript
องค์ประกอบทั้งหมด โดยเฉพาะโค้ด HTML ของหน้าสามารถสร้างได้บนเซิร์ฟเวอร์ด้วย PHP ตามที่อธิบายไว้ในบทความเรื่อง ภาษาโปรแกรม PHP จากซีรีส์เกี่ยวกับ การจัดเก็บข้อมูลจากอุปกรณ์ที่เชื่อมต่อกับ Internet of Things.
รหัส 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, ขึ้นอยู่กับ เอสจีเอ็มแอล (ภาษามาร์กอัปมาตรฐานทั่วไป) รวมคำจำกัดความประเภทเอกสาร (DTD) ซึ่งมีการประกาศประเภทของกฎที่ใช้ในภาษาเพื่ออธิบายเอกสาร
บรรทัดที่สองและบรรทัดสุดท้ายมีโค้ด HTML ท่ามกลางคำสั่ง <html> y </html> ซึ่งทำหน้าที่เป็นการเปิดและปิดตามลำดับ คำสั่ง HTML โดยใส่ชื่อและคุณลักษณะไว้ระหว่างเครื่องหมาย "น้อยกว่า" และ "มากกว่า" ทำให้เกิดเครื่องหมาย "วงเล็บเฉียบพลัน" องค์ประกอบต่างๆ HTML ที่ล้อมรอบเนื้อหามีคำสั่งปิดที่มีเครื่องหมายทับหน้าชื่อเหมือนใน </html>.
คุณสมบัติหรือคุณลักษณะขององค์ประกอบจะถูกคั่นด้วยช่องว่างจากชื่อและจากกัน และแสดงเป็นข้อความธรรมดาหรือบ่อยครั้งกว่านั้นแสดงเป็นข้อความ (ชื่อของคุณสมบัติ) ตามด้วยเครื่องหมายเท่ากับและค่าที่อยู่ในเครื่องหมายคำพูด ในกรณีของคำสั่งการเปิดรหัส HTML มีการใช้ทรัพย์สินแล้ว lang ด้วยค่า es, lang="es" เพื่อระบุว่าข้อความในเอกสาร HTML ที่ใช้ภาษาสเปน
ความคิดเห็นถูกรวมไว้หลังคำสั่งเปิดของโค้ด HTML ความเห็นใน HTML พวกเขาสามารถครอบครองหลายบรรทัดและใช้รหัสเป็นสัญญาณเปิด <!-- และเป็นการปิดท้าย -->
รหัส HTML ประกอบด้วยสองช่วงตึก: ส่วนหัว <head> และร่างกาย <body>. ประการแรกมีวัตถุประสงค์เพื่อแจ้งเกี่ยวกับตัวเอกสารเอง รวมถึงข้อมูลเกี่ยวกับเอกสารนั้น (meta-information) และประการที่สองคือเพื่อสนับสนุนเนื้อหาของเอกสาร
ในคำสั่ง <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 โดยเพื่อแสดงสถานะของเซ็นเซอร์ที่เชื่อมต่อกับ Internet of Things (IoT)
ความคิดเห็น 1