การแสดงภาพพยากรณ์อากาศผ่านภาพภูมิทัศน์

• Weather as Landscape เป็นโปรเจกต์ที่ใส่พยากรณ์ 24 ชั่วโมงและสภาพอากาศปัจจุบันไว้ใน ภาพภูมิทัศน์ แทนแดชบอร์ดอากาศที่เน้นตัวเลข เพื่อให้ดูได้อย่างเป็นธรรมชาติมากขึ้น
• แกนนอนของภาพคือ ไทม์ไลน์ 24 ชั่วโมง ตั้งแต่เวลาปัจจุบันไปจนถึงวันถัดไป โดยบ้านจะแทนตำแหน่งปัจจุบัน และสภาพอากาศในอนาคตจะถูกวางไว้ทางขวา
• องค์ประกอบของภูมิทัศน์เข้ารหัสทั้งพระอาทิตย์ขึ้น·ตก เที่ยงวัน·เที่ยงคืน ทิศทางและความแรงลม การเปลี่ยนแปลงอุณหภูมิ อุณหภูมิสูงสุด·ต่ำสุด เมฆ ฝน สภาพปัจจุบันอย่างอุณหภูมิ·ความกดอากาศ ไปจนถึง เหตุการณ์ที่ไม่ใช่อากาศ เช่น วันเกิด·วันหยุด
• การพัฒนาใช้ Python 3.9, Pillow และข้อมูลจาก OpenWeather โดยภาพถูกออกแบบมาสำหรับจอ E-Ink ขนาด 296x128
• ชุด ESP32 กับโมดูล E-Ink ขนาด 2.9 นิ้วถูกตั้งค่าให้รับภาพจากอินเทอร์เน็ตและรีเฟรชทุก 15 นาที ส่วนการนำโค้ดสร้างภาพไปปรับให้เข้ากับ MicroPython บน ESP32 ได้หรือไม่นั้นยังไม่แน่ชัด

---

ดูสภาพอากาศเป็นภูมิทัศน์แทนตัวเลข

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

วิธีการเข้ารหัส

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

ข้อมูลที่ใส่ไว้ในภูมิทัศน์ได้

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

องค์ประกอบภาพและความหมาย

• โปรเจกต์นี้ประกอบภูมิทัศน์ขึ้นจากการผสานภาพเหตุการณ์หลายแบบ
  • ดวงอาทิตย์: พระอาทิตย์ขึ้น
  • ดวงจันทร์: พระอาทิตย์ตก
  • เมฆ: ปริมาณเมฆ
  • บ้าน: ตำแหน่งเวลาปัจจุบัน
  • ดอกไม้: เที่ยงคืนและเที่ยงวัน
  • สไปรต์ต้นไม้: ลมใต้ ลมตะวันออก ลมตะวันตก ลมเหนือ
  • ฝนและหิมะ: รูปแบบของหยาดน้ำฟ้า
  • ไอคอนความกดอากาศ: ความกดอากาศสูง ความกดอากาศปกติ ความกดอากาศต่ำ
  • ไอคอนวันหยุด: Non-weather event เช่น วันเกิดของใครบางคน
• ยิ่งต้นไม้ใหญ่ ก็ยิ่งหมายถึง ความแรงลม ที่คาดว่าจะสูงขึ้น
• หากมีต้นไม้ต่างชนิดผสมกันในป่า จะหมายถึง ลมจากทิศทางกึ่งกลาง

ตัวอย่างการตีความ

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

การรันและภาพที่สร้าง

• การเตรียมสภาพแวดล้อมบน Linux
  • ./makevenv.sh
  • source .venv/bin/activate
• การเตรียมสภาพแวดล้อมบน Windows
  • makevenv.bat
  • .venv/Scripts/Activate
• ทดสอบการสร้างภาพ
  • ต้องใส่ OpenWeather API key ลงในตัวแปร OWM_KEY ของ secrets.py
  • หากต้องการ สามารถเปลี่ยนพิกัดใน secrets.py เป็นตำแหน่งของผู้ใช้ได้
  • หลังรัน python run_test.py สามารถดูภาพที่สร้างได้ในโฟลเดอร์ tmp
• การรันเซิร์ฟเวอร์
  • python run_server.py
  • เมื่อเปิดหน้าเซิร์ฟเวอร์ในเบราว์เซอร์ จะเห็นจำนวนภาพที่ถูกสร้าง

การใช้งานกับ E-Ink และโทรศัพท์

• ฮาร์ดแวร์ประกอบด้วย ESP32 development board และ 2.9inch E-Ink display module
• ชุด E-Ink ปัจจุบันจะแสดงภาพที่ดึงมาจากอินเทอร์เน็ต และ รีเฟรชทุก 15 นาที
• ตอนนี้ยังไม่แน่ชัดว่าจะปรับโค้ดสร้างภาพให้ใช้กับ MicroPython บน ESP32 ได้หรือไม่
• รายละเอียดเพิ่มเติมอยู่ใน esp32/README.md
• ระหว่างการทดสอบจะมีการสร้างภาพหลายแบบ
  • ภาพขาวดำสำหรับโมดูล E-Ink
  • ภาพสีสามารถนำไปวางเป็นหน้าจอหลักของโทรศัพท์ได้
• บน Android สามารถใช้ Web Image Widget เพื่อสร้างวิดเจ็ตแสดงภาพจากอินเทอร์เน็ตได้
  • รันสคริปต์เซิร์ฟเวอร์ของรีโพซิทอรี
  • เพิ่มวิดเจ็ตที่ชี้ไปยังหนึ่งในภาพที่ถูกสร้าง

[GN⁺]

ความคิดเห็นบน Hacker News

• เมื่อไม่กี่ปีก่อนเคยลองทำโปรเจกต์ที่เลือกภาพตามสภาพอากาศ: https://bazzargh.github.io/weather/
  ถ้าเปลี่ยนเป็น manual filter แล้วตั้งค่าฟิลเตอร์สักสองสามตัว จะเห็นว่าภาพที่ติดแท็กออกมาเป็นอย่างไร ตอนนั้นคิดไว้ว่าใช้สร้างบรรยากาศบน กรอบรูปดิจิทัล หรือวอลล์เปเปอร์เดสก์ท็อป มากกว่าจะเป็นพยากรณ์อากาศที่แม่นยำ
  แท็กรูปภาพทั้งหมดอยู่ที่นี่: https://github.com/bazzargh/bazzargh.github.io/blob/master/w...
  ส่วนใหญ่ติดแท็กด้วยมือ โดยเริ่มจากเลือกรูปที่ชอบก่อน แล้วดูช่องว่างของแท็ก จากนั้นค่อยหารูปที่จะมาเติมช่องว่างนั้น

  • Chrome กำลังแสดงหน้านี้ว่าเป็น ฟิชชิง

• น่าสนุกดี ผมเอากรอบรูปเก่ามาต่อกับ ตัวสร้างภาพ DALL-E ของ OpenAI ให้สร้างภาพตามข้อมูลสภาพอากาศปัจจุบัน และอัปเดตทุกไม่กี่ชั่วโมง
  ภาพที่กำลังแสดงอยู่ตอนนี้คือภาพนี้: https://ibb.co/8K5jZ3B

  • ที่เกี่ยวข้องกันก็มีอันนี้ด้วย: https://github.com/blixt/sol-mate-eink ใช้ภาพเมือง

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

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

• น่ารักดี และถ้าปรับอีกนิดก็น่าจะใช้งานจริงได้ มีพื้นที่ให้ทำวิธีตีความให้ดีขึ้นได้อีก: ใช้ทิศทางที่ต้นไม้โค้งงอเพื่อแสดง ทิศทางลม ส่วนลมเหนือ/ลมใต้ก็จัดการอย่างสร้างสรรค์ เช่น ให้โค้งลงหรือโค้งออกไปด้านนอก และใช้ระดับการโค้ง ขนาดของต้นไม้ หรือความหนาแน่นเพื่อแสดงความแรงลม
  พระอาทิตย์ขึ้นและตกควรแสดงเป็นดวงอาทิตย์เหนือเส้นขอบฟ้าตรง ๆ ไม่ใช่ด้วยดวงอาทิตย์กับดวงจันทร์ และท้องฟ้ายามกลางคืนก็ควรใช้เฉดที่ต่างจากกลางวัน น่าจะดีกว่าถ้ากำหนดจุดเริ่มต้นเป็นเวลาคงที่ เช่น ตอนเช้าหรือเที่ยงคืน แทนที่จะเป็น “เวลาปัจจุบัน” แล้วใช้ตำแหน่งของบ้านเพื่อบอกว่า “ตอนนี้” อยู่ตรงไหน

  • ตัวไอเดียเองยังขยายเชิงสร้างสรรค์ได้อีกมาก แต่มีข้อจำกัดจาก หน้าจอขาวดำขนาดเล็ก ไม่มีทางแสดงให้เห็นต้นไม้โค้งตามลมหรือหอยทากคลานได้
    ถึงอย่างนั้นบนท้องฟ้าก็ยังมีพื้นที่เหลือให้ใส่องค์ประกอบสนุก ๆ เช่น นกกระสาสำหรับวันเกิด หรือเลื่อนซานตาในช่วงวันหยุดยาว ตอนนี้กำลังรอให้ จอ E-Ink ที่ใหญ่กว่าและเป็นสีมีราคาถูกลง
  • เห็นด้วยเป็นส่วนใหญ่ แต่ข้อ 4 ถ้าใช้สัตว์สักตัวเคลื่อนที่แทนบ้านน่าจะน่ารัก
    และการใช้มุมมองแบบภาพฉายไอโซเมตริกอาจช่วยในการทำให้ ทิศทางลม มองเห็นได้
  • ถ้าใช้เงา โดยเฉพาะ ความยาวและทิศทาง ร่วมกับเฉดของท้องฟ้าและพื้นดิน ก็น่าจะทำให้รู้สึกถึงช่วงเวลาของวันได้

• ใช้แนวคิดคล้าย ๆ กันเป็นวอลล์เปเปอร์ Android มาพักหนึ่งแล้ว[1]
  ชอบไอเดียของ งานอาร์ต ที่สื่อข้อมูลที่มีประโยชน์จริง ๆ
  [1]: https://play.google.com/store/apps/details?id=kaka.wallpaper...

  • ใช้ live wallpaper นี้มาหลายปีแล้ว และชอบมาตลอด

• ทำให้นึกถึงหน้าหลักของแอป Yr.no มันทำภาพให้เห็นเหมือนมองออกไปนอกหน้าต่างในช่วงเวลาต่าง ๆ ของวัน เพื่อแสดงสภาพอากาศ
  แค่ดูแอนิเมชันก็พอจับความรู้สึกเรื่อง ปริมาณฝน/หิมะและรูปแบบหยาดน้ำฟ้า รวมถึงลมได้ค่อนข้างง่าย แต่ข้อเสียคือเห็นได้ทีละช่วงเวลาเดียว ถ้าจะดูทั้งวันต้องเลื่อนแนวนอน และอุณหภูมิก็แสดงเป็นตัวเลขเท่านั้น
  https://apps.apple.com/no/app/yr/id490989206?l=nb
  https://play.google.com/store/apps/details?id=no.nrk.yr&pcam...

• งานยอดเยี่ยมมาก แต่ถ้าโฟกัสที่ประสบการณ์ผู้ใช้ windy.com น่าจะให้ประสบการณ์การสื่อสารสภาพอากาศดีที่สุด
  เช่น ผมแทบไม่สนใจพยากรณ์แบบ “โอกาสมีฝนโปรย 30% ตอนสองทุ่ม” สิ่งที่สำคัญกว่าคือเมฆหรือฝนกำลังเคลื่อนที่ไปในทิศทางไหน เพื่อจะได้ตัดสินใจได้ว่าจะขับรถไปทางที่มีแดดดีที่สุดหรือไม่ เป็นต้น
  อยากรู้ว่ามีที่ไหนทำคล้าย ๆ windy.com อีกไหม เท่าที่ใช้มาประสบการณ์ยอดเยี่ยมและแทบไม่มี dark pattern ด้าน UX เลย แต่ก็อยากให้มีการแข่งขันในด้านนี้มากขึ้น

  • ผมทำ แอปสภาพอากาศสำหรับโรดทริป ที่คำนวณพยากรณ์ให้เวลาคุณอยากหลีกเลี่ยงสภาพอากาศที่แย่ที่สุดระหว่างขับรถ เหมาะสำหรับตัดสินใจว่าจะออกเดินทางตอนเย็นหรือเช้าวันถัดไป
    ตราประทับเวลาสร้างจากเส้นทางของ Google ดังนั้นในปี 2024 จึงดูพยากรณ์ที่ใกล้เคียงกับความแม่นยำเท่าที่ทำได้
    เข้าใจความรู้สึกที่ว่าพยากรณ์แบบ “โอกาสมีฝนโปรย 30% ตอนสองทุ่ม” ไม่ค่อยดีนัก แต่พยากรณ์ระยะกลางตอนนี้โดยทั่วไปก็อยู่ประมาณระดับนั้น
    Android หรือ iOS: https://weatherthetrip.com/download
  • Weather Strip(iOS): https://apps.apple.com/us/app/weather-strip/id1528594026
  • ชอบ Meteoblue มาก มีการแสดงผล ensemble ของพยากรณ์หลายประเภท
    ในแง่ประสบการณ์ผู้ใช้อาจไม่เหมือน windy แต่สื่อความไม่แน่นอนของโมเดลและระดับความสอดคล้องระหว่างโมเดลได้ค่อนข้างดี
  • เมื่อต้นปีนี้ใช้ windy.com เลือกตำแหน่งดู สุริยุปราคาเต็มดวง ใน Texas มันแม่นมาก ได้ดูสุริยุปราคาเรียบร้อยแล้วเมฆถึงค่อยเคลื่อนเข้ามา
  • Zoom Earth คล้ายกับ Windy.com
    https://zoom.earth/

• เป็นไอเดียที่น่าสนใจ แต่มีบางจุดที่ความหมายของภาพคลาดเคลื่อนแปลก ๆ โดยเฉพาะ ท้องฟ้ายามกลางคืน ไม่ควรสว่าง และตอนพระอาทิตย์ขึ้น ดวงอาทิตย์ก็ไม่ควรลอยสูง
  ถ้าต้องเรียนรู้กฎที่ขัดกับสัญชาตญาณ เช่น “ถ้าเห็นดวงอาทิตย์ที่ไหนก็ได้บนท้องฟ้า แปลว่าพระอาทิตย์ขึ้น” หรือ “กลางคืนไม่ได้แสดงด้วยความมืด แต่ด้วยอะไรบางอย่างอื่น” ก็ดูเหมือนจะล้มเหลวต่อเป้าหมายหลัก
  แอปสภาพอากาศหลายตัวมีไทม์ไลน์จากซ้ายไปขวา และแสดงพระอาทิตย์ขึ้น/ตกด้วยไอคอนที่เข้าใจง่าย มุมมองไทม์ไลน์ของ Windy.com ใส่สภาพท้องฟ้า กลางวัน/กลางคืน ข้างขึ้นข้างแรม อุณหภูมิ หยาดน้ำฟ้า ความเร็วและทิศทางลมไว้ในไทม์ไลน์ซ้ายไปขวาได้อย่างกระชับ

• นึกไว้แล้วว่าจะเป็น LLM+AI สร้างภาพ ที่แปลงพยากรณ์อากาศเป็นภาพเหนือจริง แต่กลับกลายเป็นระบบที่คนจริง ๆ ตัดสินใจด้านดีไซน์และแมปข้อมูลเข้ากับองค์ประกอบภาพที่คัดมาอย่างรอบคอบ จึงน่าประหลาดใจในทางที่ดี สดใหม่อย่างแปลก ๆ