กราฟสถานะของเซ็นเซอร์ที่เชื่อมต่อกับ 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