ส่วนประกอบหน้าเว็บ SVG สำหรับ IoT และผู้สร้าง (ตอนที่ 1)

ตลาด IoT ยังอยู่ในช่วงเริ่มต้น แต่กำลังรวบรวมไอน้ำ เราอยู่ในจุดสุดยอดในประวัติศาสตร์ของ IoT ตลาดกำลังเพิ่มขึ้นสี่เท่าในช่วงห้าปี 2015 ถึง 2020 สำหรับนักพัฒนาเว็บ การเติบโตของ IoT นี้มีความสำคัญ มีความต้องการเทคนิคเว็บ IoT เป็นอย่างมาก

อุปกรณ์จำนวนมากจะกระจายออกไปตามภูมิสารสนเทศ และเจ้าของอุปกรณ์จะต้องการการควบคุมระยะไกลและการจัดการ ต้องสร้างเว็บสแต็กแบบเต็มเพื่อสร้างช่องทางสำหรับการดำเนินการทางไกล นอกจากนี้ การโต้ตอบจะเกิดขึ้นกับอุปกรณ์ IoT หนึ่งเครื่องขึ้นไปในแต่ละครั้ง การโต้ตอบจะต้องอยู่ในเวลาจริงของโลกทางกายภาพ

การอภิปรายนี้เจาะลึกถึง ข้อกำหนดของอินเทอร์เฟซโดยใช้ Vue.js เป็นตัวเร่งปฏิกิริยา และแสดงวิธีหนึ่งในการสื่อสารหน้าเว็บไปยังอุปกรณ์จากหลายส่วนย่อย

นี่คือเป้าหมายบางส่วนที่วางแผนไว้สำหรับการสนทนานี้:

1. สร้างเว็บแอป SPWA หน้าเดียวที่โฮสต์กลุ่มอินเทอร์เฟซระหว่างมนุษย์และเครื่องจักร IoT (เราอาจเรียกว่า "กลุ่มแผง" เหล่านี้)
2. แสดงรายการของตัวระบุกลุ่มพาเนลอันเป็นผลมาจากการสืบค้นเซิร์ฟเวอร์
3. แสดงพาเนลของกลุ่มที่เลือกอันเป็นผลมาจากการสืบค้น
4. ตรวจสอบให้แน่ใจว่าจอแสดงผลถูกโหลดอย่างเกียจคร้านและเคลื่อนไหวอย่างรวดเร็ว
5. ตรวจสอบให้แน่ใจว่าพาเนลซิงโครไนซ์กับอุปกรณ์ IoT
   

IoT และการเติบโตอย่างรวดเร็วของหน้าเว็บ

การนำเสนอกราฟิกสำหรับการแสดงภาพและการควบคุมระยะไกลของฮาร์ดแวร์พร้อมกับการซิงโครไนซ์หน้าเว็บกับกระบวนการทางกายภาพแบบเรียลไทม์นั้นอยู่ในขอบเขตของการแก้ปัญหาหน้าเว็บที่มีอยู่ในอนาคต IoT นี้

พวกเราหลายคนกำลังเริ่มค้นหาเทคนิคการนำเสนอ IoT แต่มีมาตรฐานเว็บสองสามข้อพร้อมกับเทคนิคการนำเสนอบางอย่างที่เราสามารถเริ่มใช้งานได้ทันที เมื่อเราสำรวจมาตรฐานและเทคนิคเหล่านี้ร่วมกัน เราก็สามารถเข้าร่วมคลื่น IoT นี้ได้

แดชบอร์ดและการแสดงข้อมูลเป็นภาพเป็นที่ต้องการ นอกจากนี้ ความต้องการใช้งานมากกว่าหน้าเว็บที่มีแบบฟอร์มหรือแสดงรายการหรือเนื้อหาที่เป็นข้อความมีสูง แดชบอร์ดสำหรับ IoT ต้องเป็นรูปภาพและเคลื่อนไหว แอนิเมชั่นต้องซิงโครไนซ์กับกระบวนการทางกายภาพตามเวลาจริงเพื่อให้ผู้ใช้มองเห็นสถานะเครื่องได้ สถานะของเครื่องจักร เช่น เปลวไฟไหม้หรือไม่ สำคัญกว่าสถานะการใช้งาน และให้ข้อมูลที่สำคัญแก่ผู้ปฏิบัติงาน แม้กระทั่งข้อมูลด้านความปลอดภัย

แดชบอร์ดต้องการมากกว่าการแสดงข้อมูล เราต้องจำไว้ว่าส่วน ต่างๆ ของ IoT ก็คืออุปกรณ์ที่ไม่เพียงแต่มีเซ็นเซอร์เท่านั้น แต่ยังควบคุมอินเทอร์เฟซด้วย ในการใช้งานฮาร์ดแวร์ MCU จะได้รับการขยายด้วยสวิตช์ สวิตช์ขีดจำกัด การตั้งค่าพารามิเตอร์ และอื่นๆ อย่างไรก็ตาม หน้าเว็บอาจเข้ามาแทนที่ส่วนประกอบการควบคุมฮาร์ดแวร์เหล่านั้น

ไม่มีอะไรใหม่. อินเทอร์เฟซคอมพิวเตอร์สำหรับฮาร์ดแวร์มีมานานแล้ว แต่การเติบโตอย่างรวดเร็วของการใช้หน้าเว็บสำหรับอินเทอร์เฟซเหล่านี้เป็นส่วนหนึ่งของประสบการณ์ในปัจจุบันของเรา WebRTC และ Speech API อยู่ในเส้นทางการพัฒนาที่เริ่มต้นในปี 2555 WebSockets ได้รับการพัฒนาในกรอบเวลาเดียวกัน

IoT อยู่ในใจเรามานานแล้ว IoT เป็นส่วนหนึ่งของการสนทนาของมนุษย์ตั้งแต่ปี พ.ศ. 2375 แต่ IoT และไร้สายในขณะที่เรารู้ว่าเทสลาวาดภาพไว้เมื่อปี พ.ศ. 2469 Forbes 2018 State of Iot บอกเราว่าตลาดมุ่งเน้นในปัจจุบันสำหรับ IoT น่าสนใจสำหรับนักพัฒนาเว็บ บทความกล่าวถึงแดชบอร์ด:

“ผู้ใช้หรือผู้สนับสนุน IoT ในช่วงต้นจะจัดลำดับความสำคัญของแดชบอร์ด การรายงาน กรณีการใช้งาน IoT ที่ให้สตรีมข้อมูลซึ่งรวมอยู่ในการวิเคราะห์ การสร้างภาพขั้นสูง และการทำเหมืองข้อมูล”

ตลาด IoT นั้นใหญ่มาก บทความขนาดตลาดนี้ให้การคาดการณ์จำนวนอุปกรณ์ที่จะปรากฏ: 2018: 23.14 พันล้าน ⇒ 2025: 75.44 พันล้าน และมันพยายามที่จะใส่ตัวเลขทางการเงินลงไป: 2014: $2.99 ​​ล้านล้าน ⇒ 2020: $8.90 ล้านล้าน ความต้องการทักษะ IoT จะเติบโตเร็วที่สุด: IoT in Demand

ขณะที่เราพัฒนาอินเทอร์เฟซที่ชัดเจนสำหรับการควบคุมและตรวจสอบอุปกรณ์ เราพบปัญหาใหม่ในการพัฒนาอินเทอร์เฟซของเรา อุปกรณ์หลายพันล้านเครื่องจะเป็นของคนจำนวนมาก (หรือองค์กร) นอกจากนี้ แต่ละคนสามารถเป็นเจ้าของอุปกรณ์จำนวนเท่าใดก็ได้ บางทีแม้แต่อุปกรณ์บางอย่างก็จะถูกแชร์

อินเทอร์เฟซสมัยใหม่ที่สร้างขึ้นสำหรับการควบคุมเครื่องมักมีเค้าโครงที่กำหนดไว้อย่างดีสำหรับเครื่องบางเครื่องหรือการติดตั้งเครื่องบางเครื่อง ตัวอย่างเช่น ในสมาร์ทเฮาส์ ระบบระดับไฮเอนด์จะมีจอ LCD พร้อมแผงสำหรับอุปกรณ์ที่วางอย่างระมัดระวัง แต่เมื่อเราเติบโตไปพร้อมกับ IoT เวอร์ชันเว็บ จะมีแผงจำนวนเท่าใดก็ได้สำหรับสตรีมอุปกรณ์แบบไดนามิกและแม้กระทั่งอุปกรณ์เคลื่อนที่

การจัดการพาเนลสำหรับอุปกรณ์จะคล้ายกับการจัดการการเชื่อมต่อทางสังคมบนเว็บไซต์โซเชียล

“อินเทอร์เฟซผู้ใช้ของเราจะต้องเป็นไดนามิกในการจัดการแผงแบบเรียลไทม์ที่เคลื่อนไหวได้สูงจะต้องแสดง ณ เวลาใดเวลาหนึ่งสำหรับผู้ใช้แต่ละราย”

แดชบอร์ดเป็นเว็บแอป SPWA หน้าเดียว และเราสามารถจินตนาการถึงฐานข้อมูลของพาเนลได้ ดังนั้น หากผู้ใช้คนเดียวจะเข้าถึงแผงควบคุมและการกำหนดค่าจำนวนหนึ่งสำหรับอุปกรณ์ของเขาที่กระจายอยู่ทั่วโลก SPWA จำเป็นต้องเข้าถึงส่วนประกอบแผงตามต้องการ แผงและ JavaScript ที่รองรับบางส่วนจะต้องโหลดอย่างเกียจคร้าน

"อินเทอร์เฟซของเราจะต้องทำงานร่วมกับเฟรมเวิร์กของหน้าเว็บที่สามารถรวมการผูกส่วนประกอบแบบอะซิงโครนัสได้โดยไม่ต้องเริ่มต้นเฟรมเวิร์กใหม่"

ลองใช้ Vue.js, WebSockets, MQTT และ SVG เพื่อก้าวเข้าสู่ตลาด IoT

การอ่านที่แนะนำ : การสร้างอินโฟกราฟิกแบบโต้ตอบด้วย Vue.js

สถาปัตยกรรมระดับสูงสำหรับเว็บแอป IoT

เมื่อออกแบบอินเทอร์เฟซสำหรับหน้าเว็บ IoT เรามักมีตัวเลือกมากมาย ทางเลือกหนึ่งอาจเป็นการอุทิศหน้าเดียวให้กับอุปกรณ์เครื่องเดียว หน้าอาจแสดงผลทางฝั่งเซิร์ฟเวอร์ด้วยซ้ำ เซิร์ฟเวอร์มีหน้าที่ในการสอบถามอุปกรณ์เพื่อรับค่าเซ็นเซอร์ จากนั้นจึงใส่ค่าลงในตำแหน่งที่เหมาะสมในสตริง HTML

พวกเราหลายคนคุ้นเคยกับเครื่องมือที่อนุญาตให้เขียนเทมเพลต HTML ด้วยเครื่องหมายพิเศษที่ระบุตำแหน่งที่จะใส่ค่าตัวแปร การเห็น {{temperature}} ในเทมเพลตดังกล่าวบอกเราและเครื่องมือ ดู ให้นำอุณหภูมิที่สอบถามจากอุปกรณ์มาแทนที่สัญลักษณ์ {{temperature}} ด้วย ดังนั้นหลังจากรอให้เซิร์ฟเวอร์สอบถามอุปกรณ์ อุปกรณ์ตอบสนอง แสดงหน้า และนำส่งหน้า ผู้ใช้จะสามารถเห็นอุณหภูมิที่อุปกรณ์รายงานได้ในที่สุด

สำหรับหน้านี้ต่อสถาปัตยกรรมอุปกรณ์ ผู้ใช้อาจต้องการส่งคำสั่งไปยังอุปกรณ์ ไม่มีปัญหา เขาสามารถกรอกแบบฟอร์ม HTML และส่งได้ เซิร์ฟเวอร์อาจมีเส้นทางเฉพาะสำหรับอุปกรณ์ หรือบางทีอาจฉลาดกว่านั้นเล็กน้อย เส้นทางสำหรับประเภทของอุปกรณ์และ ID อุปกรณ์ จากนั้นเซิร์ฟเวอร์จะแปลข้อมูลในแบบฟอร์มเป็นข้อความเพื่อส่งไปยังอุปกรณ์ เขียนลงในตัวจัดการอุปกรณ์และรอการตอบรับ จากนั้นเซิร์ฟเวอร์อาจตอบสนองต่อคำขอโพสต์และบอกผู้ใช้ว่าอุปกรณ์ทุกอย่างเรียบร้อยดี

CMS จำนวนมากทำงานในลักษณะนี้ในการอัปเดตรายการบล็อกและสิ่งที่คล้ายกัน ไม่มีอะไรดูแปลกเกี่ยวกับเรื่องนี้ ดูเหมือนว่า HTML บน HTTP จะมีการออกแบบเสมอสำหรับรับหน้าที่แสดงผลและสำหรับการส่งข้อมูลแบบฟอร์มเพื่อจัดการโดยเว็บเซิร์ฟเวอร์ ยิ่งไปกว่านั้น มี CMS ให้เลือกนับพันรายการ ดังนั้น เพื่อให้ระบบ IoT ของเราทำงาน ดูเหมือนสมเหตุสมผลที่จะลุยผ่าน CMS นับพันเพื่อดูว่าอันไหนเหมาะกับงานนี้ หรือเราอาจใช้ตัวกรองเดียวกับ CMS เพื่อเริ่มต้น

เราต้องพิจารณาถึงลักษณะตามเวลาจริงของสิ่งที่เรากำลังเผชิญอยู่ด้วย ดังนั้น แม้ว่า HTML ในรูปแบบดั้งเดิมจะค่อนข้างดีสำหรับงานระดับองค์กรจำนวนมาก แต่ก็ต้องการความช่วยเหลือเล็กน้อยเพื่อที่จะเป็นกลไกการจัดส่งสำหรับการจัดการ IoT ดังนั้นเราจึงต้องการ CMS หรือเว็บเซิร์ฟเวอร์แบบกำหนดเองที่ช่วยให้ HTML ทำงาน IoT นี้ได้ เราสามารถนึกถึงเซิร์ฟเวอร์ได้เพราะเราถือว่า CMS มีฟังก์ชันเซิร์ฟเวอร์ให้ เราแค่ต้องจำไว้ว่าเซิร์ฟเวอร์ต้องจัดเตรียมแอนิเมชั่นที่ขับเคลื่อนด้วยเหตุการณ์ ดังนั้นหน้าเว็บจึงไม่สามารถพิมพ์สแตติกที่สรุปผลได้ 100%

ต่อไปนี้คือพารามิเตอร์บางส่วนที่อาจแนะนำตัวเลือกสำหรับหน้าเว็บที่เชื่อมโยงกับอุปกรณ์ของเรา สิ่งที่ควรทำ:

1. รับข้อมูลเซ็นเซอร์และข้อความสถานะอุปกรณ์อื่นๆ แบบอะซิงโครนัส
2. แสดงผลข้อมูลเซ็นเซอร์สำหรับหน้าในไคลเอนต์ (เกือบสัมพันธ์กับ 1);
3. เผยแพร่คำสั่งไปยังอุปกรณ์เฉพาะหรือกลุ่มของอุปกรณ์ แบบอะซิงโครนัส
4. เลือกที่จะส่งคำสั่งผ่านเซิร์ฟเวอร์หรือข้ามมัน
5. รักษาความสัมพันธ์ความเป็นเจ้าของระหว่างอุปกรณ์และผู้ใช้อย่างปลอดภัย
6. จัดการการทำงานของอุปกรณ์ที่สำคัญโดยไม่รบกวนหรือแทนที่

รายการนี้อยู่ในใจเมื่อนึกถึง หน้าเดียวที่ทำหน้าที่เป็นส่วนต่อประสานกับอุปกรณ์ที่เลือก เราต้องการสามารถสื่อสารกับอุปกรณ์ได้อย่างอิสระเมื่อพูดถึงคำสั่งและข้อมูล

สำหรับเพจ เราต้องขอเว็บเซิร์ฟเวอร์เพียงครั้งเดียว เราคาดหวังว่าเว็บเซิร์ฟเวอร์ (หรือแอปพลิเคชันที่เกี่ยวข้อง) จะให้เส้นทางการสื่อสารที่ปลอดภัย และพาธเวย์ไม่จำเป็นต้องผ่านเซิร์ฟเวอร์ หรือบางทีควรหลีกเลี่ยงเซิร์ฟเวอร์ทั้งหมด เนื่องจากเซิร์ฟเวอร์อาจมีงานที่มีลำดับความสำคัญสูงกว่าอื่นนอกเหนือจากการดูแลการสื่อสารของหน้าเว็บหนึ่งๆ สำหรับข้อมูลที่มาจากเซ็นเซอร์

ที่จริงแล้ว เราสามารถจินตนาการว่าข้อมูลที่เข้ามาจากเซ็นเซอร์หนึ่งครั้งต่อวินาที และเราไม่ได้คาดหวังว่าเว็บเซิร์ฟเวอร์เองจะให้วินาทีที่คงที่โดยการอัปเดตครั้งที่สองสำหรับสตรีมเซ็นเซอร์แต่ละตัวคูณด้วยผู้ชมหลายพันคน แน่นอน เว็บเซิร์ฟเวอร์สามารถแบ่งพาร์ติชั่นหรือตั้งค่าในเฟรมเวิร์กโหลดบาลานซ์ได้ แต่มีบริการอื่นๆ ที่ปรับแต่งสำหรับการส่งเซ็นเซอร์และคำสั่งมาร์แชลไปยังฮาร์ดแวร์

เว็บเซิร์ฟเวอร์จะต้องส่งแพ็กเก็ตเพื่อให้หน้าสามารถสร้างช่องทางการสื่อสารที่ปลอดภัยกับอุปกรณ์ได้ เราต้องระวังในการส่งข้อความในช่องที่ไม่ได้จัดการข้อความบางประเภทที่ส่งผ่าน ต้องมีความรู้บางอย่างว่าอุปกรณ์อยู่ในโหมดที่สามารถถูกขัดจังหวะหรืออาจมีความต้องการให้ผู้ใช้ดำเนินการหากอุปกรณ์นั้นไม่สามารถควบคุมได้ ดังนั้น เว็บเซิร์ฟเวอร์จึงสามารถช่วยให้ลูกค้าได้รับทรัพยากรที่เหมาะสมซึ่งสามารถทราบข้อมูลเพิ่มเติมเกี่ยวกับอุปกรณ์ได้ การส่งข้อความสามารถทำได้ด้วยบางอย่างเช่นเซิร์ฟเวอร์ MQTT และอาจมีบริการบางอย่างในการเตรียมเซิร์ฟเวอร์ MQTT ที่สามารถเริ่มต้นได้เมื่อผู้ใช้เข้าถึงแผงควบคุมของตนผ่านเว็บเซิร์ฟเวอร์

เนื่องจากโลกทางกายภาพที่มีความต้องการแบบเรียลไทม์และเนื่องจากการพิจารณาด้านความปลอดภัยเพิ่มเติม ไดอะแกรมของเราจึงแตกต่างไปจากเดิมเล็กน้อย

เราจะไม่หยุดที่นี่ การตั้งค่าหน้าเดียวต่ออุปกรณ์ แม้ว่าจะตอบสนองและจัดการการสื่อสารได้ดี แต่ก็ไม่ใช่สิ่งที่เราขอ เราต้องถือว่าผู้ใช้จะเข้าสู่บัญชีของเขาและเข้าถึงแดชบอร์ดของเขา จากนั้นเขาจะขอรายชื่อโครงการเนื้อหา (โครงการที่มีแนวโน้มมากที่สุดที่เขากำลังทำอยู่) แต่ละรายการในรายการจะอ้างอิงถึงทรัพยากรจำนวนหนึ่ง เมื่อเขาเลือกรายการโดยการคลิกหรือแตะ เขาจะสามารถเข้าถึงคอลเลกชั่นแผงต่างๆ ซึ่งแต่ละส่วนจะมีข้อมูลบางอย่างเกี่ยวกับทรัพยากรเฉพาะหรืออุปกรณ์ IoT

แผงหน้าปัดจำนวนเท่าใดก็ได้ที่ส่งตามคำค้นหาที่สร้างขึ้นจากการดำเนินการกับอินเทอร์เฟซของผู้ใช้อาจเป็นแผงที่โต้ตอบกับอุปกรณ์ที่ใช้งานจริง ดังนั้น ทันทีที่แผงควบคุมปรากฏขึ้น จะแสดงกิจกรรมแบบเรียลไทม์และสามารถส่งคำสั่งไปยังอุปกรณ์ได้

วิธีดูพาเนลบนหน้าคือการตัดสินใจออกแบบ อาจเป็นหน้าต่างลอยหรืออาจเป็นกล่องบนพื้นหลังที่เลื่อนได้ อย่างไรก็ตาม ที่นำเสนอนี้ แผงหน้าปัดจะแสดงเวลา อุณหภูมิ ความดัน ความเร็วลม หรืออะไรก็ตามที่คุณจินตนาการได้ เราคาดว่าแผงจะเคลื่อนไหวตามขนาดกราฟิกต่างๆ สามารถแสดงอุณหภูมิเป็นเทอร์โมมิเตอร์ ความเร็วเป็นมาตรวัดความเร็วครึ่งวงกลม เสียงเป็นรูปคลื่นสตรีมมิ่ง และอื่นๆ

เว็บเซิร์ฟเวอร์มีหน้าที่ส่งพาเนลที่ถูกต้องไปยังผู้ใช้ที่เหมาะสม โดยให้สอบถามไปยังฐานข้อมูลของพาเนล และเนื่องจากอุปกรณ์นั้นจะต้องพร้อมใช้งานจริง ยิ่งไปกว่านั้น เนื่องจากจะมีอุปกรณ์หลายประเภท แผงสำหรับแต่ละอุปกรณ์จึงมีแนวโน้มที่จะแตกต่างกัน ดังนั้น เว็บเซิร์ฟเวอร์ควรจะสามารถส่งข้อมูลภาพที่จำเป็นสำหรับการแสดงพาเนลได้ อย่างไรก็ตาม หน้า HTML สำหรับแดชบอร์ดไม่ควรโหลดด้วยแผงที่เป็นไปได้ทั้งหมด ไม่รู้ว่าจะมีสักกี่คน

ต่อไปนี้คือพารามิเตอร์บางส่วนที่อาจแนะนำตัวเลือกสำหรับหน้าแดชบอร์ดของเรา สิ่งที่ควรทำ:

1. นำเสนอวิธีการเลือกกลุ่มแผงอุปกรณ์ที่เกี่ยวข้อง
2. ใช้ประโยชน์จากกลไกการสื่อสารอุปกรณ์พร้อมกันสำหรับอุปกรณ์จำนวนหนึ่ง
3. เปิดใช้งานแผงอุปกรณ์เมื่อผู้ใช้ร้องขอ
4. รวมกราฟิกที่โหลดอย่างเกียจคร้านสำหรับการออกแบบแผงที่ไม่ซ้ำใคร
5. ใช้โทเค็นการรักษาความปลอดภัยและพารามิเตอร์ที่เกี่ยวข้องกับแต่ละแผง
6. รักษาข้อมูลให้ตรงกันกับอุปกรณ์ทั้งหมดภายใต้การตรวจสอบของผู้ใช้

เราสามารถเริ่มเห็นการเปลี่ยนแปลงของเกม แต่ในโลกของการออกแบบแดชบอร์ด เกมมีการเปลี่ยนแปลงเล็กน้อยที่นี่และที่นั่นบางเวลา เราแค่ต้องจำกัดตัวเองให้แคบลงด้วยเครื่องมือพัฒนาเพจที่ทันสมัยและมีประโยชน์เพื่อพัฒนาตัวเองและเดินหน้าต่อไป

มาเริ่มกันที่วิธีที่เราสามารถแสดงพาเนลได้ นี่ดูเหมือนเป็นงานใหญ่อยู่แล้ว เรากำลังจินตนาการถึงแผงต่างๆ มากมาย แต่ถ้าคุณเคยใช้เพลง DAW คุณจะเห็นว่าพวกเขาใช้กราฟิกเพื่อทำให้แผงดูเหมือนอุปกรณ์แอนะล็อกที่ใช้โดยวงดนตรีเมื่อนานมาแล้วอย่างไร แผงทั้งหมดใน DAW วาดโดยปลั๊กอินที่ทำงานด้วยเสียง อันที่จริง ปลั๊กอินของ DAW จำนวนมากอาจใช้ SVG เพื่อแสดงอินเทอร์เฟซ ดังนั้นเราจึงจำกัดตัวเองให้จัดการอินเทอร์เฟซ SVG ซึ่งจะเป็นภาพกราฟิกที่เราจินตนาการได้

การเลือก SVG สำหรับพาเนล

แน่นอน ฉันชอบ DAW และจะใช้สิ่งนั้นเป็นตัวอย่าง แต่ SVG เป็นมาตรฐานของหน้าเว็บ SVG เป็นมาตรฐาน W3C ใช้สำหรับลากเส้นไปยังหน้าเว็บ SVG เคยเป็นพลเมืองชั้นสองบนหน้าเว็บ โดยต้องอยู่ใน iFrames แต่เนื่องจาก HTML5 เป็นพลเมืองชั้นหนึ่ง บางทีเมื่อ SVG2 ออกมา มันก็จะสามารถใช้องค์ประกอบของฟอร์มได้ สำหรับตอนนี้ องค์ประกอบของแบบฟอร์มเป็นวัตถุแปลกปลอมใน SVG แต่นั่นไม่ควรหยุดเราไม่ให้ SVG เป็นสารตั้งต้นสำหรับแผง

สามารถวาด SVG เก็บไว้เพื่อแสดงผล และโหลดได้แบบเกียจคร้าน อันที่จริง เมื่อเราสำรวจระบบส่วนประกอบ เราจะเห็นว่า SVG สามารถใช้เป็นเทมเพลตส่วนประกอบได้ ในการสนทนานี้ เราจะใช้ Vue.js เพื่อสร้างส่วนประกอบสำหรับพาเนล

การวาด SVG ไม่ใช่เรื่องยากเพราะมีโปรแกรมวาดเส้นมากมายที่หาได้ง่าย หากคุณใช้จ่ายเงิน คุณจะได้รับ Adobe Illustrator ซึ่งส่งออก SVG Inkscape เป็นสิ่งที่ต้องทำสำหรับการสร้าง SVG มาระยะหนึ่งแล้ว เป็นโอเพ่นซอร์สและทำงานได้ดีบน Linux แต่สามารถทำงานบน Mac และ Windows ได้เช่นกัน จากนั้นมีโปรแกรมแก้ไข SVG ของหน้าเว็บหลายโปรแกรมที่เป็นโอเพ่นซอร์สและ SaaS บางเวอร์ชันด้วยเช่นกัน

ฉันได้มองหาตัวแก้ไข SVG บนเว็บแบบโอเพ่นซอร์ส หลังจากมองไปรอบๆ ฉันก็พบกับ SVG-Edit คุณสามารถรวมไว้ในหน้าเว็บของคุณเอง บางทีถ้าคุณสร้างบล็อกที่ใช้ SVG หรืออะไรก็ตาม

เมื่อคุณบันทึกงานของคุณเป็นไฟล์ SVG-Edit จะดาวน์โหลดในเบราว์เซอร์ของคุณ และคุณสามารถรับไฟล์จากไดเร็กทอรีดาวน์โหลดของคุณ

รูปภาพที่ฉันวาดแสดงให้เห็นประตู AND ที่ควบคุมผู้รวมระบบ นั่นไม่ใช่สิ่งที่เราคาดหวังจากแผงสำหรับ MCU แผงควบคุมอาจมีปุ่มเพื่อป้อนหนึ่งในอินพุตเกตและบางที จากนั้นอาจมีจอแสดงผลจาก ADC ที่อ่านเอาต์พุตของผู้รวมระบบ บางทีนั่นอาจเป็นแผนภูมิเส้นบนแกนเวลา แผงส่วนใหญ่จะมีกราฟิกที่อนุญาตให้ผู้ใช้เชื่อมโยงกับสิ่งที่เกิดขึ้นภายใน MCU และถ้าวงจรของเราจะอยู่ที่ใดก็ได้ มันจะอยู่ภายใน MCU

ไดอะแกรมอิเล็กทรอนิกส์ของเราสามารถใช้เพื่อหารือเกี่ยวกับแอนิเมชั่นได้เช่นเดียวกัน สิ่งที่เราต้องการทำคือดูที่ SVG และดูว่าเราจะหาแท็ก DOM บางส่วนที่เราต้องการเปลี่ยนแปลงได้ที่ไหนบ้าง จากนั้นเราสามารถทำให้ SVG เคลื่อนไหวได้โดยใช้ JavaScript วานิลลาเล็กน้อยและตัวจับเวลา มาทำให้เกท AND กะพริบในสีต่างๆ กันเถอะ

SVG ที่เรากำลังมองหาอยู่ในกล่องรหัสต่อไปนี้ โปรแกรมเมอร์ดูไม่เป็นมิตรนัก แม้ว่าผู้ใช้จะค่อนข้างพอใจ อย่างไรก็ตาม ยังมีสัญญาณบางอย่างที่ต้องหาว่าองค์ประกอบ DOM ใดที่เราต้องการดำเนินการ อย่างแรก เครื่องมือวาดภาพ SVG ส่วนใหญ่มีวิธีเข้าถึงคุณสมบัติของวัตถุ โดยเฉพาะแอตทริบิวต์ id SVG-Edit ก็มีวิธีเช่นกัน ในเอดิเตอร์ เลือกเกท AND และสังเกตแถบเครื่องมือ คุณจะเห็นฟิลด์สำหรับ id และ class CSS ด้วย

หากคุณไม่สามารถไปที่เครื่องมือแก้ไขด้วยเหตุผลบางประการ คุณสามารถเปิด SVG ในเบราว์เซอร์และตรวจสอบ DOM ไม่ว่าในกรณีใด เราพบว่าเกตของเรามี id = “svg_1”

 <svg width="640" height="480" xmlns="https://www.w3.org/2000/svg" xmlns:svg="https://www.w3.org/2000/svg"> <g class="layer"> <title>Layer 1</title> <path d="m80.59881,87.020171l14.714795,0m-14.714793,-11.938687l14.714797,0.000004m-0.033867,-6.543869l0,24.758504c42.377882,2.221929 43.364812,-27.139117 0,-24.758504zm47.366321,12.333056l-15.303943,0m-48.188699,-6.489897l1.454753,0l0,1.454751l-1.454753,0l0,-1.454751zm-0.068425,11.869359l1.454753,0l0,1.454753l-1.454753,0l0,-1.454753zm63.545246,-6.089294l1.454751,0l0,1.454751l-1.454751,0l0,-1.454751z" fill="#FF0000" stroke="#000000"/> <path d="m48.58886,119.662231l18.234678,0l2.523043,-7.173309l4.128604,13.808613l4.587337,-13.987948l4.013933,13.808613l4.35797,-13.629278l4.35797,13.718944l2.408353,-6.72497l18.349357,0m-64.482612,-0.623112l1.515724,0l0,1.515728l-1.515724,0l0,-1.515728zm64.484275,-0.103111l1.515721,0l0,1.515728l-1.515721,0l0,-1.515728z" fill="#FF0000" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" transform="rotate(90.3367 80.0675 119.304)"/> <polygon cx="108.5" cy="79.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="#000000"/> <polygon cx="215.5" cy="192.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="none"/> <polygon cx="165.5" cy="164.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="none"/> <polygon cx="161.5" cy="138.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="none"/> <polygon cx="160.5" cy="161.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="none"/> <g> <path d="m225.016923,53.008793l0,3.419331m-4.558966,-1.709666l9.11791,0m10.303228,4.235512l-25.770656,0m-34.429182,0l24.544724,0m0.220544,-4.058194l1.543807,0l0,8.164451l-1.543807,0l0,-8.164451zm7.939567,-4.473673l1.543805,0l0,16.999955l-1.543805,0l0,-16.999955zm-34.176663,8.126854l1.474036,0l0,0.747515l-1.474036,0l0,-0.747515zm61.677552,0.018809l1.474038,0l0,0.747515l-1.474038,0l0,-0.747515z" fill="#FF0000" sides="3" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null"/> <polygon cx="171.5" cy="159.5" edge="43.256342" fill="#ffffff" orient="x" points="223.47406005859375,91.5 186.01296997070312,113.128173828125 186.01296997070312,69.871826171875 223.47406005859375,91.5 " shape="regularPoly" sides="3" stroke="#000000" stroke-width="null" strokeWidth="null" strokecolor="#000000"/> <line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="171" x2="186" y1="103.5" y2="103.5"/> <path d="m130.801817,80.659041l15.333707,0l2.12165,-4.564833l3.47178,8.787299l3.857534,-8.901421l3.375353,8.787299l3.664657,-8.673176l3.664657,8.730237l2.025206,-4.279526l15.430142,0m-54.224016,-0.396526l1.274586,0l0,0.964554l-1.274586,0l0,-0.964554zm54.225414,-0.065616l1.274584,0l0,0.964554l-1.274584,0l0,-0.964554z" fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null"/> <line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="171.5" x2="171.5" y1="103.75" y2="135.388167"/> <line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="177.75" x2="177.75" y1="58.75" y2="80.255951"/> <line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="223.75" x2="266.854524" y1="91.75" y2="91.75"/> <line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="241.75" x2="241.75" y1="59.75" y2="91.754167"/> <line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="168.25" x2="180.75" y1="135.75" y2="135.75"/> <line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="169.75" x2="179.25" y1="138.5" y2="138.5"/> <line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" x1="171" x2="179.75" y1="141.25" y2="141.25"/> </g> </g> </svg>

ทั้งหมดที่เราต้องการตอนนี้คือ JavaScript เพียงเล็กน้อย เราทราบก่อนว่าแอตทริบิวต์องค์ประกอบ "เติม" มีอยู่ จากนั้นก็มีโปรแกรมง่ายๆดังนี้:

 <html> <head> </head> <body> <!-- ALL THE SVG FROM ABOVE GOES HERE --> </body> <html> </svg> <script> // Set up a timer interval flash the color. var gateElement = document.getElementById("svg_1"); if ( gateElement ) { setInterval( () => { var fillC = gateElement.getAttribute("fill"); gateElement.setAttribute("fill", (fillC == "#00FF00") ? "#FF0000" : "#00FF00" ); }, 2000 ) } </script>

สังเกตว่าสิ่งที่เรามีคือหน้า HTML ขั้นต่ำ คุณสามารถตัดและวางโค้ดลงในโปรแกรมแก้ไขที่คุณชื่นชอบได้ จากนั้นอย่าลืมตัดและวาง SVG เพื่อแทนที่ความคิดเห็น Chrome เวอร์ชันของฉันกำหนดให้หน้าเป็น HTML เพื่อให้มีส่วน JavaScript นั่นคือเบราว์เซอร์เดียวที่ยังคงถือว่า SVG เป็นสิ่งที่แยกจากกัน แต่มันอยู่ไกลจาก <iframe> วัน

หากคุณตัดและวางอย่างถูกต้อง คุณสามารถเปิดหน้าขึ้นมาและดูว่าเกท AND เปลี่ยนจากสีแดงเป็นสีเขียวซ้ำแล้วซ้ำอีก

การอ่านที่แนะนำ : SVG Circle Decomposition To Paths

การสร้างแผงจากส่วนประกอบ VUE

เรากำลังดำเนินการเพื่อสร้างแผงใดแผงหนึ่งให้มีชีวิต แต่ถ้าเราต้องการจัดการคอลเลกชันจำนวนมากด้วยวิธีการที่เหมาะสม เราก็จะต้องตัดงานของเราออกไป โดยเฉพาะอย่างยิ่งจะเป็นกรณีนี้ถ้าเราเพียงแค่สร้างจากตัวอย่างแรกของเรา

ในขณะที่ตัวอย่างแรกแสดงให้เราเห็นว่าเราสามารถเปลี่ยนมุมมองอ็อบเจ็กต์แบบอะซิงโครนัสได้อย่างไร แต่ไม่ได้แสดงให้เราเห็นถึงวิธีการผูกมุมมองกับสถานะของออบเจ็กต์ข้อมูลใด ๆ นับไม่ถ้วนที่จัดการเครื่อง เราสามารถเข้าใจได้อย่างชัดเจนว่าการสาธิต setInterval สามารถแทนที่ด้วยตัวจัดการการ fetch ได้อย่างไร แต่เราอาจไม่ได้รับสถานะของเครื่องจากเว็บเซิร์ฟเวอร์ที่ให้บริการหน้าที่มี SVG นอกจากนี้ เมื่อเราได้รับข้อมูล โปรแกรมของเราจำเป็นต้องรู้เกี่ยวกับโครงสร้าง DOM ของหน้าที่กำหนด

โชคดีที่เฟรมเวิร์ก เช่น Vue ได้รับความนิยม และสามารถช่วยเราประหยัดเวลาได้มาก

ง่ายต่อการค้นหาข้อมูลเกี่ยวกับ Vue เอกสาร Vue สามารถเข้าถึงได้มาก ดังนั้น หากการสนทนานี้ก้าวไปข้างหน้ามากเกินไป คุณอาจใช้เวลาเรียนรู้เกี่ยวกับ Vue บนเว็บไซต์ของตัวเอง แต่มีการสนทนาที่ดีมากในหน้า Smashing Krutie Patel เขียนบทความที่น่าทึ่งเกี่ยวกับการสร้างอินโฟกราฟิก Souvik Sarkar บอกเราถึงวิธีสร้างแดชบอร์ดสภาพอากาศด้วย Vue

การเลือกกลุ่มของแผงที่เกี่ยวข้อง

สำหรับขั้นตอนแรก เราควรจัดการกับการค้นหากลุ่มของแผง เหตุผลหนึ่งที่ต้องทำสิ่งนี้ก่อนคือมันอยู่ที่ระดับเฟรมเวิร์กของการปฏิสัมพันธ์ของมนุษย์

ผู้ใช้ค้นหาบางสิ่งที่เขาสนใจ บางทีเขาอาจสนใจอุปกรณ์ทั้งหมดในสถานที่ในเมืองเดียว บางทีเขาอาจมีผลิตภัณฑ์ของเหลวหลายชุด และเขาต้องการจำกัดผลิตภัณฑ์ให้เหลือเพียงประเภทเดียวโดยแต่ละกลุ่มควบคุมโดยกลุ่มอุปกรณ์ IoT ขนาดเล็ก ดังนั้น ผู้ใช้จะค้นหารายการเล็ก ๆ ก่อน

นี่คือกระบวนการ:

1. ค้นหากลุ่มแผงตามคุณสมบัติ/พารามิเตอร์
2. ดูรายการไอคอนที่เป็นตัวแทนของกลุ่ม
3. เลือกไอคอน (คลิก/แตะ)
4. เริ่มใช้แผงที่มีไอคอนเมื่อปรากฏขึ้น

อีกเหตุผลหนึ่งที่เป็นขั้นตอนแรกที่ดีก็คือ เราสามารถใช้ Vue ในรูปแบบที่ง่ายที่สุดได้ ไม่จำเป็นต้องใช้เครื่องมือสร้าง เราจะรวม vue.js ด้วยแท็กสคริปต์ใน HTML ที่จริงแล้วเราไม่ต้องดาวน์โหลดด้วยซ้ำ มีไซต์ที่ให้บริการสำเนา vue.js

ทั้งหมดที่เราต้องการคือแท็กต่อไปนี้:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

ฉันคัดลอกแท็กสคริปต์โดยตรงจากเอกสาร Vue เกี่ยวกับการติดตั้ง

ตอนนี้ เราต้องการหน้าเว็บที่สามารถโหลดไอคอนและทำให้มันเป็นสิ่งที่คลิกได้ วิวทำให้เรื่องนั้นง่ายมาก อันที่จริง ฉันเพิ่งเขียนแอพเล็กๆ เพื่อจัดการรายการ Twitter โดยใช้ Vue มันแค่จัดการฟิลด์ข้อความ เนื่องจากมันง่ายกว่า SPWA เล็กน้อย โดยใช้ไอคอน เราสามารถดูมันแล้วเปลี่ยนเป็นเฟรมเวิร์กแอปหน้าเดียวที่ต้องการได้

นี่คือส่วนหนึ่งของหน้าตา:

หน้านี้ดูเหมือนค่อนข้างง่าย รายการตัวเลขภายนอกแต่ละรายการเป็นช่วงเวลาที่มีทวีตหนึ่งหรือสองรายการ ทวีตที่สองเป็นทางเลือก หากคุณแก้ไขทวีต กลไก Vue จะอัปเดตออบเจ็กต์ JavaScript หน้านี้ปล่อยให้ผู้ใช้คลิกปุ่ม "อัปเดตรายการ" เพื่อบอกเซิร์ฟเวอร์ว่ามีบางอย่างเปลี่ยนแปลงผ่านฟังก์ชันตัวจัดการปุ่ม

เพื่อให้ตัวจัดการปุ่มถ่ายทอดข้อมูลไปยังเซิร์ฟเวอร์ จะต้องเปลี่ยนวัตถุข้อมูล Vue เป็นสตริง JSON ตอนนี้ คุณอาจสงสัยว่าการแปลวัตถุ Vue เป็น JSON จะยากเพียงใด กลายเป็นรหัสหนึ่งบรรทัด คุณสามารถค้นหาบรรทัดในซอร์สโค้ดต่อไปนี้ แต่ถ้าคุณต้องการค้นหาเร็วขึ้น บรรทัดนั้นจะถูกเน้นในย่อหน้าหลังซอร์สโค้ด

หน้าดูเรียบง่าย รูปลักษณ์สามารถหลอกลวงได้ แน่นอน หน้าดูเรียบง่าย แต่รหัสง่ายไหม ใช่มันเป็นอย่างนั้นจริงๆ! เมื่อใช้ Vue เพจจะจัดการเนื้อหาของฟิลด์ต่างๆ อย่างน่าอัศจรรย์ นี่คือรหัส:

 <!DOCTYPE html> <html lang="en" prefix="og: https://ogp.me/ns#"> <!-- define microdata scope and type --> <head itemscope itemtype="https://schema.org/Article"> <title>Tweet Keeper</title> <style> body { margin: 2em; } .entryart { border: solid 1px navy; width: 80%; padding: 2px; padding-left: 6px; margin-bottom: 3px; background-color: #EEF4EE; } </style> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body onload="GetTweets()"> <!-- some old fashioned handling --> <!-- The Vue app starts here. This is the HTML part of the Vue object --> <div> <!-- Recognize the name from the Vue doc --> <div itemscope itemtype="https://schema.org/Article"> <h1 itemprop="name">mangage tweets</h1> <p itemprop="description">My personal Tweet engine. This page accesses a personal tweet page that belongs to {{tweetOwner}}.</p> <!-- {{tweetOwner}} is in the data model. --> <button>Update Entries</button> </div> <!-- Here is a Vue loop for generating a lit --> <ol> <li v-for="tweet in tweets"> <!-- here is the first tweet represented as an object with a lable and tweet text --> <div class="entryart"> <input v-model="tweet.def[0].label" /> <input v-model="tweet.def[0].tweet" /> </div> <!-- here is the second tweet in the slot. But, notice that it is optional. --> <div class="entryart" v-if="tweet.def.length > 1"> <input v-model="tweet.def[1].label"/> <input v-model="tweet.def[1].tweet"/> </div> </li> </ol> </div> <script> var twtApp = new Vue({ el: '#tweetAppDiv', data: { tweets: [ // Where is the data? Still on the server.s ], tweetOwner : "Lucky Dude" // picked a name for demo } }); </script> </body> </html> <script> // Notice that you don't have to do everything in the Vue framework. // Here we are using some native API calls var gDefaultPostInfo = { // there server is beyond simple - an example from node.js docs method: 'POST', // or 'PUT' mode: "cors", // no-cors, cors, *same-origin cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached credentials: "same-origin", // include, *same-origin, omit redirect: "follow", // manual, *follow, error referrer: "no-referrer", // no-referrer, *client body: "", headers:{ 'Content-Type': 'application/json' } } // // // recall the "onload" function GetTweets(event) { var url = "https://localhost:8080/twitlist1.json" // We have a fixed file name. fetch(url).then((response) => { // this is now browser native response.text().then((text) => { var newData = JSON.parse(text); // DATA UPDATE! This is it. twtApp.tweets = newData // the page update right away with new data. }); }); } function sendTweets() { // recall the button up above. This is not a Vue style button, but still in the Vue app. var url = "https://localhost:8080/" var data = twtApp.tweets; // GET THE DATA OUT OF VUE. That's all folks. // // so happens that Vue pulls out the right data and stringifies it. var jdata = JSON.stringify(data); // data can be `string` or {object}! // gDefaultPostInfo.body = jdata; // that's for fetch - not Vue related // fetch(url,gDefaultPostInfo).then(res => { // We use fetch to POST as well as GET res.json() }).then(response => { console.log('Success:', JSON.stringify(response)) // promises }).catch(error => { console.error('Error:', error) }); } // // // </script>

ดังนั้น เพื่อเน้นเส้นที่น่าทึ่งที่พูดถึงพลังของเฟรมเวิร์ก มาทำซ้ำที่นี่:

A. นี่คือการดึงข้อมูลออกมา

 postOptionsObject.body = JSON.stringify(twtApp.tweets);

B. นี่คือการใส่ข้อมูลลงใน Vue และเห็นการอัพเดตหน้าจอ:

 twtApp.tweets = JSON.parse(text) // text is the server response

งานเท่าไหร่เนี่ย?

ดูเหมือนว่าจะมีวิธีที่ดีในการแสดงว่าข้อมูลจะอัปเดตพาเนลสำหรับ IoT อย่างไร

ตอนนี้ มาเปลี่ยนทวีตเป็นไอคอนที่คลิกได้ซึ่งออกแบบมาเพื่อดึงส่วนประกอบจากเว็บเซิร์ฟเวอร์

จากทวีตสู่แผงดึงไอคอน

คนชอบใช้ SVG สำหรับไอคอน พวกเขาชอบที่ใช้สำหรับ SVG มากกว่าสิ่งอื่นๆ เท่าที่ฉันสามารถบอกได้ ฉันกำลังดูเว็บไซต์ที่ขายหรือแจกไอคอนที่สร้างใน SVG เท่านั้น จุดขายคือกราฟิกแบบเส้นมีไบต์น้อยกว่ารูปภาพ และถ้าฉันจะขอรายการรูปภาพที่มีพฤติกรรมเหมือนปุ่ม ฉันอาจคว้า PNG หรือ JPEG ในสมัยที่ SVG อยู่ใน iframes But, we can even find libraries in the Vue contributor lists that help us to a serving of icons.

We can turn the tweets page into an icon list returned as a search result. Just a little code has to be changed. Of course, there are a few things to be careful about if we want SVG icons to be loaded as buttons. Vue provides mechanisms for putting HTML into the application. These mechanisms have to be used or DOM elements fetched from the server don't get interpreted.

Here is the kind of rendering you can get from view if you follow your first impulse in creating a handlebars style variable location in the application DOM.

Here is the code that produces the result in the picture:

 <div> <div class="entryart"> <span class="oneItem" v-for="icon in iconList"> {{icon}} </span> </div> </div> <script> var iconApp = new Vue({ el: '#iconAppTry', data: { iconList: [ // Where is the data? Still on the server. ], queryToken : "Thermo Batches" // picked a name for demo } }); </script>

Notice that we have gone from looping over tweets to looping over icons. tweet in tweets changed into icon in iconList . Our twtApp hooks into the DOM element #tweetAppDiv , while our iconApp hooks into the DOM element #iconAppTry . Within the Vue option object, the data subobject has a tweets in the first app, and iconList in the second. The fields are both empty arrays that receive data when the fetch routine does its job.

But, we have imitated our tweet app too closely. In the code above, the iconList is an array, and the server is expected to send an array of strings. So, let's say the server has sent us HTML, and we have it properly decoded with the array assigned to data.iconList . Then, the picture above can be seen.

Now, let's change the code just a little. In this revised code, we can see the following:

 v-html="icon">

Vue responds to the v-html syntax by putting in the DOM of the icon element. Notice that the syntax is included after the loop directive as another attribute to the span tag.

By removing the handlebars syntax and using v-html , our picture changes to something more comprehensible:

 <div> <div class="entryart"> <span class="oneItem" v-for="icon in iconList" v-html="icon"> </span> </div> </div> <script> var iconApp = new Vue({ el: '#iconAppTry2', data: { iconList: [ // Where is the data? Still on the server. ], queryToken : "Thermo Batches" // picked a name for demo } }); </script> 

While v-html is a quick way to do things, the Vue team recommends using components to get the desired HTML into the page. That seems like a good idea, and we shall soon set about doing that.

But, let's use the v-html syntax for our next example.

It's time to set up our working example for fetching SVG icons. Let's have those icons be responsive to a button click. Once those are working, we can get the panels associated with an icon.

Let's suppose that the SVG required for icons is stored in a database. For our example, we can just fetch a JSON file from the server. The grown-up version of the icon server would store many such files in a database, and deliver them to the page with the same mechanisms.

Also, it's best if the SVG arrives on the page URL encoded since we will be using JSON parse. The SVG can be decoded by calling JavaScript's decodeURIComponent function.

In order to simulate the response to searching, we can make use of several JSON files. The page can have one button for each file. Here is the code for the page:

 <!DOCTYPE html> <html lang="en" prefix="og: https://ogp.me/ns#"> <!-- define microdata scope and type --> <head itemscope itemtype="https://schema.org/Article"> <title>Search Bar</title> <style> body { margin: 2em; } div { margin: 6px; } .entryart { border: solid 1px navy; width: 80%; padding: 2px; padding-left: 6px; margin: 2px; margin-bottom: 3px; background-color: #EEF4EE; } .oneItem { background-color: #EEFFFF; margin: 2px; padding: 4px; border: solid 1px purple; } </style> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <!-- some old fashioned handling --> <!-- The Vue app starts here. This is the HTML part of the Vue object --> <div> <!-- Recognize the name from the Vue doc --> <div> <h2 itemprop="name">Request MCU Groups</h2> <p itemprop="description">These are groups satistfying this query: {{queryToken}}.</p> <!-- {{tweetOwner}} is in the data model. --> <button>Find All</button> <button>Find 5 Point</button> <button>Find 6 Point</button> </div> <!-- Here is a Vue loop for generating a lit --> <div class="entryart"> <button v-for="iconEntry in iconList" @click="goGetPanel(iconEntry.name)" > <div v-html="iconEntry.icon"> </div> </button> </div> </div> <script> var iconApp = new Vue({ el: '#iconAppTry', data: { iconList: [ // Where is the data? Still on the server. ], queryToken : "Thermo Batches" // picked a name for demo }, methods : { goGetPanel: (pname) => { // `this` inside methods points to the Vue instance alert('Hello ' + pname + '!') } } }); </script> </body> </html> <script> // // recall the "onclick" on the <buttons> function GetIcons(points) { // special file names instead of search parameters // var url = (points == 11) ? "https://localhost:8080/batchQuery-all.json" : ((points == 5) ? "https://localhost:8080/batchQuery-five.json" : "https://localhost:8080/batchQuery-six.json") fetch(url).then((response) => { // this is now browser native response.text().then((text) => { var newData = JSON.parse(text); // DATA UPDATE! This is it. newData = newData.map(obj => { obj.icon = decodeURIComponent(obj.icon); return(obj) }); iconApp.iconList = newData; // the page update right away with new data. }); }); } </script>

Here is one display of icons that have been fetched from the server:

The data being sent is an array with the following kind of structure:

{ "style" : { "color" : "red", "backgroundColor" : "yellow" }, "icon" : svg1, "name" : "thermos" },

ที่นี่ svg1 คือ SVG ที่นำมาจากไฟล์ แน่นอน เซิร์ฟเวอร์ที่ถูกต้องจะต้องใช้โครงสร้างจากฐานข้อมูล โดยที่ SVG จะถูกเก็บไว้ในโครงสร้าง

นี่คือตัวอย่างจากโค้ดด้านบน นี่คือโค้ดที่ดึง JSON และวางอาร์เรย์ของโครงสร้างลงในแอป Vue คุณสามารถดูโครงสร้างสัญญาของการ fetch ที่ใช้งาน ข้อความจะถูกแยกวิเคราะห์ และในบรรทัดถัดไป SVG ที่เข้ารหัสจะถูกถอดรหัส อีกหนึ่งบรรทัดและ Vue อัปเดตหน้า จำนวนปุ่มในแถบปุ่มจะเท่ากับความยาวของอาร์เรย์ JSON

 fetch(url).then((response) => { // this is now browser native response.text().then((text) => { var newData = JSON.parse(text); // DATA UPDATE! This is it. newData = newData.map(obj => { obj.icon = decodeURIComponent(obj.icon); return(obj) }); // the page update right away with new data. iconApp.iconList = newData; }); });

ตอนนี้มีตัวอย่างเพิ่มเติมเพียงสองรายการ แอพวิว ผู้อ่านจะสังเกตเห็นว่ามีการรวมคำสั่ง @click ไว้ที่ปุ่มต่างๆ อิลิเมนต์ข้อมูล iconEntry.name ถูกส่งไปยังเมธอดภายในเครื่องหมายคำพูด

มีการกำหนดวิธีการภายในแอป Vue:

 <div class="entryart"> <button v-for="iconEntry in iconList" @click="goGetPanel(iconEntry.name)" > <div v-html="iconEntry.icon"> </div> </button> </div> </div>

นี่คือตัวอย่างสำหรับคำจำกัดความของวิธีการ วัตถุ methods ถูกเพิ่มหลังจากวัตถุ data ภายในวัตถุพารามิเตอร์แอป:

 , methods: { goGetPanel: (pname) => { // `this` inside methods points to the Vue instance alert('Hello ' + pname + '!') } }

ผู้อ่านควรพบคำจำกัดความ goGetPanel และมีการชี้ให้เห็นการใช้งานสำหรับตัวจัดการ @click ในแอปพลิเคชันสุดท้ายของเรา การเรียก alert สามารถแทนที่ด้วยฟังก์ชันที่ดึงข้อมูลพาเนลจากเซิร์ฟเวอร์

ไลบรารีส่วนประกอบสำหรับแผง IoT

เราสามารถตัดสินใจได้ว่าพาเนลที่เราดึงมาจากเซิร์ฟเวอร์สามารถเป็น HMTL หรือแค่แบบร่าง SVG ได้ แต่ถ้าจะมีพาเนลหลายประเภท เราหวังว่างานสร้างพาเนลจะง่ายขึ้นโดยมีไลบรารีของส่วนประกอบ เลือกจาก. เราสามารถจินตนาการได้ว่าตัวแก้ไข SVG สามารถปรับปรุงได้เพื่อให้องค์ประกอบไลบรารีสามารถวางลงบนรูปภาพได้ซึ่งเป็นส่วนหนึ่งของการแก้ไข จากนั้น หากโปรแกรมแก้ไข SVG สามารถส่งออกเวอร์ชันของรูปภาพที่มีแท็กส่วนประกอบได้ การใช้ Vue จะทำให้สามารถสร้างรูปภาพได้ในขณะที่ทำให้แน่ใจว่าการทำงานอัตโนมัติของ JavaScript และแอนิเมชั่นนั้นถูกรวมเข้าด้วยกันอย่างประณีต สำหรับการสนทนาของเรา การแก้ไขด้วยมือสามารถช่วยเราได้

หากเราต้องการสร้างพาเนลจากคอมโพเนนต์ Vue เราก็ควรคิดหาวิธีสร้างส่วนประกอบและรวบรวมเข้าด้วยกันเป็นสิ่งที่มีประโยชน์ เราจะต้องเปลี่ยนไปใช้เครื่องมือบรรทัดคำสั่งของ Vue และจัดระเบียบเวิร์กโฟลว์ของเรา

ส่วนประกอบ

เอกสารประกอบ Vue ชี้ให้เห็นว่าส่วน data ส่วนประกอบ (อ็อบเจ็กต์ย่อย) ของข้อกำหนดส่วนประกอบต้องเป็นฟังก์ชันที่ส่งคืนข้อมูล เหตุผลก็คือ Vue จำเป็นต้องแยกข้อมูลระหว่างอินสแตนซ์ต่างๆ ดังนั้น จากการเริ่มต้นแอปพลิเคชัน Vue ไปสู่การกำหนดส่วนประกอบ จึงมีการเปลี่ยนแปลงโค้ดเล็กน้อยอีก

ในตัวอย่างโค้ดแรกนี้ แอปพลิเคชัน Vue กำลังถูกเตรียมใช้งาน:

 var iconApp = new Vue({ el: '#iconApp', data: { // this is the data field that can be easily updated }, methods : { ... } });

ในตัวอย่างโค้ดใหม่นี้ คอมโพเนนต์จะถูกกำหนดและลงทะเบียน ก่อนอื่น ให้สังเกตว่าแทนที่จะสร้างอินสแตนซ์ new Vue คอมโพเนนต์ที่ชื่อ iconic กำลังถูกลงทะเบียน จากนั้น ฟิลด์ data จะส่งคืนข้อมูลที่กำหนดเองสำหรับอินสแตนซ์ที่ iconic ใดๆ ที่แอป Vue สร้าง สุดท้าย ฟิลด์ template จะปรากฏที่ส่วนท้ายของการลงทะเบียนส่วนประกอบ HTML ใดๆ ที่อาจเขียนบนหน้าเว็บเพื่อแสดงส่วนประกอบสามารถเป็นส่วนหนึ่งของ template ได้

 Vue.component('iconic', data: () => { var instanceData = { // data fields named for the // variables appearing in the template onevar : "test" } return(instanceData); }, methods : { ... }, template: '<div>This appears in every instance {{onevar}}</div>' });

เราสามารถจินตนาการถึงแผงที่มีเทอร์โมมิเตอร์ได้ ดังนั้น ถ้ามีคนให้ส่วนประกอบ thermometer เราคาดว่าจะมีการกำหนดส่วนประกอบที่ใดที่หนึ่งในโค้ดของเรา เช่นนี้:

 Vue.component('thermometer', data: () => { var instanceData = { // data fields named for the // variables appearing in the template temperature : 0 } return(instanceData); }, methods : { ... }, template: '<div>Some SVG will go here</div>' });

เรากำลังพยายามสร้างบางสิ่งที่มีลักษณะดังนี้:

ส่วนประกอบเทอร์โมมิเตอร์นั้นคล้ายกับส่วนประกอบแรกที่คุณจะเจอในบทช่วยสอน Vue แต่การหาวิธีอัปเดตนั้นค่อนข้างยุ่งยากเล็กน้อย มีวิธีที่ดีกว่าในการกำหนดองค์ประกอบสำหรับการเกิดปฏิกิริยาโดยใช้คุณสมบัติ และนั่นคือในสิ่งต่อไปนี้:

 Vue.component('thermometer', { props: ['temperature'], computed : { y: function() { var t = this.temperature/100; var h = 54.724472; var y_bar = 41.176476 // starts near the top // pretend the scale is 1 to 100, so that the temperature is a precentage return((1 - t)*h + y_bar) }, height : function() { var t = this.temperature/100; var h = 54.724472; // as high as the whole range var y_bar = 41.176476 // pretend the scale is 1 to 100, so that the temperature is a precentage return(t*h) } }, template: '#thermometer-template' })

ดังนั้น แทนที่จะแสดงอุณหภูมิเป็นองค์ประกอบข้อมูล มันถูกแสดงเป็นทรัพย์สินภายใต้ props จากนั้นจะมีส่วนใหม่ที่ คำนวณ ซึ่งจัดเตรียมตัวแปรที่เป็นฟังก์ชันของคุณสมบัติ เราเห็นสิ่งนี้ this.temperature ที่ใช้สำหรับทั้ง y และ height ตัวแปรที่คำนวณเหล่านี้ถูกใช้ใน SVG เป็นแอตทริบิวต์สำหรับสี่เหลี่ยมผืนผ้า

ใน SVG y เติบโตจากบนลงล่าง ดังนั้น เมื่อเราต้องการให้สี่เหลี่ยมเล็กที่ด้านล่างของเทอร์โมมิเตอร์ y ของกล่องสีแดงจะต้องต่ำกว่า และต้องลดความสูงลงเพื่อให้ ( y + height ) อยู่ที่ศูนย์เทอร์โมมิเตอร์

สังเกตฟิลด์ template ในคำจำกัดความของส่วนประกอบ อันที่จริงแล้ว รหัสองค์ประกอบเอกสาร องค์ประกอบที่ถูกอ้างถึงเป็นส่วนสคริปต์ที่มีประเภทพิเศษ: type="text/x-template" องค์ประกอบสคริปต์คือตำแหน่งที่ SVG สำหรับเทอร์โมมิเตอร์อยู่ และ SVG ใช้ประโยชน์จากตัวแปร Vue และเงื่อนไขการควบคุม เพื่อให้สามารถกำหนดปฏิกิริยาได้

นี่คือบางส่วนของ SVG:

 <script type="text/x-template"> <svg xmlns:svg="https://www.w3.org/2000/svg" xmlns="https://www.w3.org/2000/svg" width="20" height="70" version="1.1" > <g transform="translate(0,-180)"> <g transform="matrix(2.0111869,0,0,1.0489665,-215.11053,144.5592)"> <rect stroke-linecap="null" stroke-linejoin="null" width="2.9665921" height="54.724472" x="111.90748" y="41.176476" /> <rect stroke-linecap="null" stroke-linejoin="null" width="2.9665921" x="111.90748" :height="height" :y="y" /> <g transform="matrix(0.76503813,0,0,1,26.586929,0)"> <line y2="57.306953" y1="57.306953" x2="113.15423" x1="107.22105" stroke-linejoin="null" stroke-linecap="null" /> <line y2="74.408356" y1="74.408356" x2="113.15423" x1="107.22105" stroke-linejoin="null" stroke-linecap="null"

ผู้อ่านสามารถค้นหา id="thermometer-template" ได้ที่ด้านบน และเมื่อมองลงไปที่ rect ทางตรง คุณจะพบตัวแปรที่คำนวณได้

ที่นี่การใช้ตัวแปรจะถูกแยกออก มีการใช้ไวยากรณ์ชวเลข Vue สำหรับ v-bind โดย :height="height" และเหมือนกันสำหรับ y :

 x="111.90748" :height="height" :y="y"

เมื่อพาเรนต์ขององค์ประกอบ SVG ตั้งค่าตัวแปรที่ทำหน้าที่เป็นอินพุตสำหรับ temperature คุณสมบัติของเทอร์โมมิเตอร์ Vue จะคำนวณ height และ y อีกครั้ง ส่งผลให้ตำแหน่งและความสูงของกล่องสีแดงเปลี่ยนไป

ช่วยให้มีรายชื่อแอพ Vue ที่ใช้เทอร์โมมิเตอร์

 <body> <!-- The Vue app starts here. This is the HTML part of the Vue object --> <div> <!-- Recognize the name from the Vue doc --> <div> <h2 itemprop="name">Set Temperature</h2> <p itemprop="description">These are groups satistfying this query: {{queryToken}}.</p> <!-- {{tweetOwner}} is in the data model. --> <button @click="updateTemp(50,50)">mid</button> <button @click="updateTemp(20,80)">low</button> <button @click="updateTemp(80,20)">high</button> </div> <thermometer :temperature="temp1" ></thermometer> <thermometer :temperature="temp2" ></thermometer> </div> <script> var thermoApp = new Vue({ el: '#thermoApp', data: { temp1 : 30, temp2 : 60, queryToken : "HEAT" }, methods : { updateTemp: function (tval1,tval2) { this.temp1 = tval1; this.temp2 = tval2; } } }); </script> </body>

นั่นคือสิ่งทั้งหมด มีปุ่มสามปุ่มที่เรียกใช้เมธอด updateTemp ของแอปพลิเคชัน thermoApp Vue ส่วนข้อมูลมีตัวแปรอุณหภูมิสองแบบ และ thermometer แต่ละตัวจะอัปเดตอุณหภูมิเมื่อค่าเปลี่ยนไป

รหัสสำหรับเทอร์โมมิเตอร์สองตัวที่เรียกด้านล่างสามารถพบได้ใน HTML ที่กำหนดให้กับแอป Vue

 <thermometer :temperature="temp1" ></thermometer> <thermometer :temperature="temp2" ></thermometer>

สังเกตว่า แอปพลิเคชันใช้ function ฟอร์มาลิซึมสำหรับนิยามเมธอด การกำหนด updateTemp ด้วยวิธีนี้ updateTemp: function (tval1,tval2) อนุญาตให้เข้าถึงตัวแปรอินสแตนซ์ this ได้

นอกจากนี้ การกำหนด updateTemp ด้วยวิธีนี้ updateTemp: (tval1,tval2) => กำหนด this ให้กับโครงสร้างข้อมูลภายในที่ไม่ตอบสนองและอัปเดตมุมมอง

การประกอบแผง

แผง IoT แต่ละแผงสามารถเป็นส่วนประกอบได้ Vue จัดเตรียมวิธีการกำหนดส่วนประกอบด้วยส่วนประกอบย่อย อีกทางหนึ่ง มีกลไกสล็อตที่สามารถใช้เพื่อสร้างส่วนประกอบที่สามารถล้อมรอบเนื้อหา HTML ใดๆ ได้

ในย่อหน้าต่อไปนี้ มาดูการสร้างแผงจากองค์ประกอบย่อยกัน มีสองรูปแบบที่ตามมาอย่างรวดเร็วจากตัวอย่างของเรา ในกรณีหนึ่ง เทอร์โมมิเตอร์สามารถเป็นส่วนประกอบย่อยที่เรียกออกมาใน JavaScript ในอีกกรณีหนึ่ง ส่วนประกอบถูกกำหนดอย่างอิสระแต่มีการกล่าวถึงใน HTML

ในทั้งสองกรณี สามารถใช้ HTML เดียวกันสำหรับเทมเพลตได้ นี่คือแผงของเราในรูปแบบเทมเพลต:

 <script type="text/x-template"> <div> <thermometer :temperature="temp1" ></thermometer> <thermometer :temperature="temp2" ></thermometer> </div> </script>

ความแตกต่างเพียงอย่างเดียวระหว่างรายละเอียดแรกของแอปพลิเคชันคือองค์ประกอบ div ล้อมรอบเทอร์โมมิเตอร์สองตัว Vue จะแสดงข้อผิดพลาดหากเทมเพลตไม่มีองค์ประกอบ DOM ระดับบนสุด div ผ่านข้อกำหนดของ Vue และอาจรวมองค์ประกอบหลายอย่างไว้ข้างใน

ตอนนี้ เราอาจเห็นเทอร์โมมิเตอร์ทั้งสองข้างกัน การส่งผ่านอุณหภูมิจากด้านบนไปยังเทอร์โมมิเตอร์ขั้นสุดท้ายมีค่าลดหลั่นลง ที่ระดับบนสุด แผงควบคุมจะเข้าร่วมแอปพลิเคชันเมื่อมีบรรทัดเดียวรวมอยู่ใน DOM ของแอปพลิเคชัน

 <themo-panel :temp1="temp1" :temp2="temp2" ></themo-panel>

เทมเพลตสำหรับแผงควบคุม แม้ว่าจะเรียบง่าย แต่ดูเหมือนว่าจะบ่งบอกว่าแผงต่างๆ สามารถออกแบบได้ง่ายในแง่ของส่วนประกอบ เหมือนกับว่าสามารถใช้ภาษาสำหรับส่วนประกอบ IoT เท่านั้น

ตอนนี้ การกำหนดเทมเพลตสำหรับพาเนลนั้นง่ายพอสมควร นี่คือองค์ประกอบย่อยที่กำหนดไว้อย่างอิสระ:

 Vue.component('thermo-panel', { props: ['temp1','temp2'], template: '#thermo-panel-template' });

นั่นก็เพียงพอแล้วในการทำให้แผงควบคุมทำงานได้ เวอร์ชันนี้อาศัยรายการคุณสมบัติจำนวนมากในการกำหนดค่าที่จะอัปเดตเมื่อมีข้อความเข้ามาในหน้า แต่นี่เป็นการเริ่มต้นที่ดี การอัปเดตออบเจ็กต์ data ที่ระดับบนสุดทำหน้าที่ทำให้เทอร์โมมิเตอร์เคลื่อนไหว อย่างไรก็ตาม เนื่องจากแผงมีความซับซ้อน จึงอาจต้องมีวิธีอื่นในการแสดงการเปลี่ยนแปลง

เมื่อกล่าวถึงวิธีอื่นๆ ในการระบุองค์ประกอบย่อยแล้ว สำหรับแผง เราควรพิจารณาดู นี่คือ:

 Vue.component('thermo-panel', { props: ['temp1','temp2'], template: '#thermo-panel-template', components: { // a sub component for the labels 'thermometer': { props: { temperature: Number, }, template: '#thermometer-template', computed : { y: function() { var t = this.temperature/100; var h = 54.724472; var y_bar = 41.176476 // starts near the top // pretend the scale is 1 to 100, so that the temperature is a precentage return((1 - t)*h + y_bar) }, height : function() { var t = this.temperature/100; var h = 54.724472; // as high as the whole range var y_bar = 41.176476 // pretend the scale is 1 to 100, so that the temperature is a precentage return(t*h) } } } } });

มีโค้ดมากกว่านี้ แต่นั่นเป็นเพราะ JavaScript สำหรับส่วนประกอบ thermometer รวมอยู่ในรายการส่วนประกอบของ thermo-panel ทั้งสองวิธีทำงานเหมือนกัน แต่มีวิธีการกำหนดส่วนประกอบบรรจุภัณฑ์ที่แตกต่างกัน

ในขณะนี้ ความชอบของฉันคือวิธีแรก การแก้ไขพาเนลน่าจะง่ายกว่ามาก และให้เรียกแผงไดนามิกไดนามิก หากจำเป็นต้องเปลี่ยนเทมเพลตและคุณสมบัติเท่านั้น ด้วยเหตุนี้ ส่วนประกอบที่กำหนดอย่างอิสระจะสร้างไลบรารีส่วนประกอบ แต่ถึงแม้จะดูดีกว่า ต่อไปนี้จะสะดวกกว่าถ้าใช้วิธีที่สองซึ่งดูละเอียดกว่า

เนื่องจากเราสามารถสร้างแผงแบบตอบสนองจากส่วนประกอบต่างๆ ด้วยวิธีที่กำหนดไว้อย่างชัดเจน ฉันจะอธิบายวิธีที่เราสามารถจัดการแผงดังกล่าวเป็นฐานข้อมูลที่สามารถสร้างการสืบค้นแบบง่ายๆ ในส่วนถัดไปของบทความของฉัน