การใช้งาน Picture Element ใน Home Assistant เป็นวิธีที่ดีในการสร้างหน้าจอหลัก (dashboard) ที่มีการแสดงข้อมูลและควบคุมอุปกรณ์ได้อย่างสมบูรณ์ โดยสามารถปรับแต่งหน้าจอได้ตามต้องการของผู้ใช้งานโดยรวม Sensor ที่ใช้ภายในบ้านว่ามีอะไรบ้างและมีสถานะอะไร
โปรแกรมที่ต้องติดตั้งมี
- photoshop ในกรณีที่ไม่มีให้ใช้ photopea
- advance scanner ⇒ https://www.advanced-ip-scanner.com/th/
- nmap ⇒ https://nmap.org/
- หมายเหตูให้ในกรณีที่ไม่รู้ IP ของตัวกล้องว่าใช้ port
- https://imgtr.ee/ ใช้ในการ pubilsh รูปภาพให้แสดงผลบนหน้าเว็บได้
ปรับแต่งรูปภาพและอัพขึ้น publish link
ทำการตัดต่อรูปภาพให้มี ขนาด 500×600 ด้วยโปรแกรม phoshop
จากนั้น ทำการ publish รูปภาพด้วย imgtr > copy Image URL
Scan IP ⇒ IP camara
การค้นหา หรือ scan IP ของ กล้องโดยใช้ advance scanner โดยเมื่อเข้าโปรแกรมให้ Scan > ค้นหา IP ที่เป็นของตัวกล้อง
การค้นหา scan Port ของกล้องในกรณีที่ไม่รู้ โดยใช้ post ที่สามารถเข้าถึงได้โดยเราจะใช้ 8899
เพิ่ม Picture element
จากนั้นเข้าไปที่ Home Assistant > ภาพรวม > เพิ่มการ์ดใหม่
กดไปที่ Picture elements
กดบันทึก
เพิ่ม Ip camara ที่ onvif
สำคัญคือกล้องที่เราใช้นั้นต้อง support ตัว onvif
เข้าไปที่ Setting > Devices
ทำการกด ADD INTEGRATION
เลือกกดที่ ONVIF หรือ กล้องอื่นๆ
จากนั้นทำการ Set รายระเอียดตัวกล้องแล้วกด Submit
ตั้งค่ากล้องและ IP และ Port ของกล้อง
กดที่ Entity
จากนั้นกดที่มี Icon กล้อง จะได้ลักษณะกล้องแบบนี้
กดที่ icon
ให้ Copy Entity ID
เพิ่ม Ip camara และ หลอดไฟ ที่ Picture element
กลับไปที่หน้าภาพรวมแล้วทำการกดที่ แก้ไขที่ Picture element
type: picture-elements
elements:
# กำหนด icon สำหรับแสดงกล้อง CCTV
- type: icon
icon: mdi:cctv
entity: camera.cam01_profile_000
style:
top: 85%
left: 84%
width: 10%
# กำหนด icon สำหรับการควบคุมสวิตช์ไฟ 1
- type: icon
icon: mdi:lightbulb
entity: switch.sonoff_1000e99d49_1
style:
top: 72%
left: 65%
width: 10%
# กำหนด icon สำหรับการควบคุมสวิตช์ไฟ 2
- type: icon
icon: mdi:chandelier
entity: switch.sonoff_1000e99d49_2
style:
top: 72%
left: 75%
width: 10%
# กำหนดภาพพื้นหลังของ Picture Element
image: https://imgtr.ee/images/2024/04/17/f6d927cd698bb8383e29a628486e48ca.png
การทำ code ดังกล่าวไปใส่ใน Picture elements Card configuration > บันทึก
โดยหลักการทำการควมคุม สวิตช์ไฟ 1 และ สวิตช์ไฟ 2 ก็เป็นการนำ entity ของตัวหลอดไฟทั้งสองมาใช้ปิด-เปิด ไฟได้เช่นกัน
Code ที่ได้แก้ไขดังกล่าวจะทำให้เห็นเป็น icon ภายใน Picture element
ซึ่งสามารถควบคุมได้จากภาพข้างต้น
สรุปได้ว่า
การใช้งาน Picture Element ใน Home Assistant เป็นวิธีที่ดีในการสร้างหน้าจอหลักที่มีการแสดงข้อมูลและควบคุมอุปกรณ์ได้อย่างสมบูรณ์ โดยการปรับแต่งรูปภาพและอัพโหลดไปยัง imgtr เพื่อสร้างลิงก์การโพสต์ และการสแกน IP และพอร์ตของกล้องเป็นขั้นตอนสำคัญในการเพิ่มกล้องและอุปกรณ์ การเพิ่ม Picture element ที่มีอุปกรณ์ต่าง ๆ เช่น กล้องและหลอดไฟ ช่วยให้ผู้ใช้สามารถควบคุมและเข้าถึงข้อมูลได้อย่างสะดวก ด้วยการใช้ entity ID และการกำหนด icon เพื่อแสดงสถานะของอุปกรณ์ใน Picture element ลักษณะนี้ช่วยให้ผู้ใช้งานเข้าใจและควบคุมได้อย่างง่ายดาย
