วิดเจ็ต
วิดเจ็ต “กิจกรรมที่จะถึง” แบบใหม่ ใช้ภาษาเดียวกับ drawer ในแอป แถบฟ้า 24 ชั่วโมงบอกรูปร่างของวัน ขีดใต้แถบคือกิจกรรม แถวที่กำลังเกิดจางจากซ้ายตามเวลาที่ผ่านไป งานหลายวันย่อเป็นชิปแถวเดียวแทนที่จะกินแถวละงาน วิดเจ็ตวาดใหม่ทุกนาทีไม่ได้ ตัวหนังสือจึงบอกแต่เวลาบนนาฬิกา ส่วนเวลาที่เหลือให้สีเป็นคนบอก ลากแถบเวลาด้านบนเพื่อดูวิดเจ็ตทุกตัวเปลี่ยนตาม
บนหน้าจอหลัก
หกขนาดบนตาราง 4 คอลัมน์ ทุกตัวอ่านข้อมูลชุดเดียวกัน ช่องสูง 1 แถวเหลือแถบฟ้ากับงานเดียว ช่องที่สูงขึ้นได้รายการของวันนี้และวันถัดไป พื้นวิดเจ็ตเป็นสีแผ่นของแอป มุมโค้งใช้ค่าของ launcher
โครง
เรียงตามที่สายตาต้องการ วันอะไร วันนี้หน้าตาเป็นยังไง มีงานยาวอะไรค้างอยู่ แล้วอะไรกำลังเกิดและกำลังจะมา
ทุกส่วนแตะได้ และพาไปที่ที่มันบอก (LaunchLink ชุดเดิม)
- หัววันเลขวันตัวบาง ชื่อวัน เดือนและปี พ.ศ. แตะเพื่อเปิดวันนี้ในแอป ขวาคือพระอาทิตย์ขึ้นหรือตกครั้งถัดไป (ไม่รู้ตำแหน่งก็ไม่แสดง) และปุ่มเพิ่มกิจกรรม วง 36 dp ในพื้นที่แตะ 48 dp
- แถบฟ้า 24 ชั่วโมงสีฟ้าจริงของแต่ละชั่วโมง ขีดใต้แถบคือกิจกรรมที่มีเวลาทุกงานของวันนี้ งานที่จบแล้วเหลือเป็นขีดจาง เส้นตั้งคือตอนนี้ ทั้งแถบอ่านออกเสียงเป็นประโยคเดียว เช่น “วันนี้ 7 กิจกรรม ผ่านไปแล้ว 2”
- งานทั้งวันและงานหลายวันชิปแบบเดียวกับใน drawer เรียงแถวเดียว แบ่งความกว้างเท่ากัน ขีดใต้ชื่อคือวันทั้งหมดของงาน วันที่ผ่านไปจาง วันนี้สูงกว่า เกินสองงานยุบเป็น +N
- แถวที่กำลังเกิดพื้นจางจากซ้ายตามเวลาที่ผ่านไป รอยต่อมีขีดสีเต็มที่ขอบบนและล่าง เวลาเริ่มถอยเป็นตัวรอง เวลาจบขึ้นเป็นตัวหนา เพราะสิ่งที่ยังเหลือคือเวลาจบ
- แถวที่ยังไม่ถึงพื้นสีอ่อนของกิจกรรมเอง เวลาเริ่มหนา เวลาจบเป็นตัวรอง สถานที่อยู่ใต้ชื่อ แตะเพื่อเปิดกิจกรรม
- ช่วงว่างระหว่างงานของวันนี้ที่ห่างกันตั้งแต่ 45 นาที เส้นประกับเวลาว่าง เหมือนใน drawer
- วันถัดไปหัวข้อวัน เสาร์และอาทิตย์ใช้สีเดียวกับบนเดือน แตะเพื่อเปิดวันนั้น วันที่ไม่มีอะไรใหม่ไม่ขึ้น
ขนาด
วิดเจ็ตไม่ย่อทั้งก้อนตามช่อง แต่เลือกว่าจะเหลืออะไร ความสูงเลือกแบบ (บรรทัดเดียว กะทัดรัด เต็ม) ความกว้างเลือกว่าวันที่อยู่บนหรืออยู่ข้าง และเวลาอยู่ข้างชื่อหรือใต้ชื่อ ลากเพื่อลองขนาดอื่น
SizeMode.Responsive ส่ง layout ไปทีละถัง launcher เลือกถังใหญ่สุดที่ใส่ได้ แบบจึงเปลี่ยนตามถัง ไม่ใช่ตามขนาดจริงทุก dp
แต่ละแบบเหลืออะไร
| ถังความสูง | แบบ | วันที่ | แถบฟ้า | งานทั้งวัน | รายการ |
|---|---|---|---|---|---|
| 80 dp | บรรทัดเดียว | บรรทัดย่อ “ศ. 2 ต.ค.” เวลาของงานอยู่ฝั่งตรงข้าม กว้างตั้งแต่ 320 dp เป็นเลขวันอยู่ข้าง พร้อมปุ่มเพิ่ม | 8 dp | เม็ดสี หนึ่งเม็ดต่องาน (กว้างตั้งแต่ 200 dp) | แถวเดียว งานที่กำลังเกิด ไม่มีก็งานถัดไป |
| 160 dp | กะทัดรัด | เลขวัน 30 sp อยู่บน กว้างตั้งแต่ 320 dp ย้ายไปอยู่ข้าง (40 sp) รายการได้ความสูงทั้งหมด | 10 dp | ชิป | เลื่อนได้ มีช่วงว่าง |
| 280 dp | เต็ม | เลขวัน 40 sp ชื่อวัน เดือน และเวลาพระอาทิตย์เมื่อกว้างตั้งแต่ 260 dp | 12 dp มีเลขชั่วโมง | ชิป | เลื่อนได้ มีช่วงว่าง |
ถังความกว้างคงเดิม 110, 200, 260, 320 dp ต่ำกว่า 200 dp หัวเหลือเลขวันกับชื่อวัน ชิปเหลือ 1 งานกับ +N เวลาอยู่ใต้ชื่อ และไม่แสดงสถานที่ ถังความสูง 280 dp เป็นของใหม่ (เดิมมี 80 กับ 160)
ตัวหนังสือบอกนาฬิกา สีบอกเวลาที่เหลือ
ในแอป แถวบอกว่า “อีก 18 นาที” ได้เพราะวาดใหม่ทุกนาที วิดเจ็ตทำอย่างนั้นไม่ได้ ข้อความนับถอยหลังจะผิดทันทีที่วาดเสร็จ วิดเจ็ตนี้จึงไม่มีข้อความนับถอยหลังเลย ทุกคำจริงไปจนถึงขอบเวลาถัดไป (งานเริ่ม งานจบ เที่ยงคืน) ซึ่งเป็นจังหวะที่วิดเจ็ตวาดใหม่อยู่แล้ว
สิ่งที่เดินตามเวลาคือสี เส้นตอนนี้บนแถบฟ้ากับพื้นของแถวที่กำลังเกิด วาดใหม่ทุก 5 นาทีตอนจอเปิด คลาดได้ไม่เกิน 5 นาที บนแถบกว้าง 340 dp คือราว 1 dp ตัวอย่างในหน้านี้วาดแบบเดียวกัน ลากแถบเวลาด้านบนแล้วเส้นจะขยับทีละ 5 นาที
กำลังเกิด
ศุกร์ 10:42 แถวแรกคืองานที่กำลังเกิด พื้นจางไปแล้วเกือบครึ่ง เวลาจบ 11:30 เป็นตัวหนา
ว่างอยู่
ศุกร์ 11:40 บรรทัดแรกเป็นสีของ “ตอนนี้” บอกว่าว่างถึงกี่โมง ไม่บอกว่าอีกกี่นาที จึงจริงไปจนถึง 12:00
หมดวันแล้ว
ศุกร์ 22:10 งานที่มีเวลาจบหมดแล้ว เหลือเป็นขีดจางบนแถบ รายการบอกว่าวันนี้ไม่มีอะไรแล้ว ต่อด้วยวันถัดไป
วันว่าง
อาทิตย์ 25 ต.ค. ไม่มีอะไรเลย แถบฟ้าไม่มีขีด รายการบอกว่าวันนี้ยังว่าง แล้วไปวันถัดไปที่มีงาน
ข้ามคืน
อาทิตย์ 11 ต.ค. 01:20 งานที่เริ่มเมื่อวานยังไม่จบ เวลาเริ่มมีเลข −1 กำกับ เวลาจบเป็นตัวหนา หัววันบอกเวลาพระอาทิตย์ขึ้นแทนตก
ยังไม่ได้อนุญาต
ไม่มีสิทธิ์อ่านปฏิทิน แถบฟ้ากับเส้นตอนนี้ยังอยู่เพราะไม่ต้องใช้ข้อมูลปฏิทิน แตะเพื่อเปิดแอปไปขอสิทธิ์
อะไรขึ้นในรายการ
- วันนี้ขึ้นก่อนเสมอ งานที่มีเวลาซึ่งจบแล้วหลุดจากรายการ เหลือเป็นขีดจางบนแถบฟ้า (กติกาเดิมของ
WidgetAgenda) - งานหลายวันขึ้นครั้งเดียว ในวันแรกที่วิดเจ็ตเห็น ขีดวันบนชิปบอกเองว่ายาวถึงเมื่อไร ของเดิมขึ้นซ้ำทุกวันจนรายการสองสัปดาห์ยาวเกิน
- งานข้ามคืนขึ้นในวันที่เริ่ม เลขเล็ก +1 ที่เวลาจบแปลว่าจบวันถัดไป −1 ที่เวลาเริ่มแปลว่าเริ่มเมื่อวาน
- วันถัดไปขึ้นเฉพาะวันที่มีอะไรใหม่ มองไปข้างหน้า 14 วัน และตัดที่ 24 แถวเหมือนเดิม
- ช่วงว่างบอกเฉพาะวันนี้ วันอื่นเป็นแค่ตัวอย่างล่วงหน้า ไม่ต้องละเอียดเท่า
สว่างและมืด
วิดเจ็ตอยู่บนหน้าจอหลักซึ่งเป็นของระบบ จึงสลับสว่างมืดตามระบบ ไม่ตามธีมที่ตั้งในแอป สีมาจาก
LightAxyraColors และ DarkAxyraColors ชุดเดียวกับแอป โหมดมืดพื้นแถวผสมสีกิจกรรมมากขึ้นเหมือนใน drawer แถบฟ้าใช้สีเดียวกันทั้งสองโหมด
ตัวอักษรใหญ่
ทุกข้อความโตตามขนาดตัวอักษรของเครื่อง แถวสูงขึ้นเอง แถบฟ้ากับขีดไม่โต เมื่อคอลัมน์เวลากินเกิน 30% ของความกว้าง เวลาย้ายลงไปอยู่ใต้ชื่อ ชื่อจึงได้ความกว้างเต็ม (กติกาเดิม)
เทียบกับของเดิม
ขนาดเดียวกัน เวลาเดียวกัน ข้อมูลเดียวกัน ซ้ายคือวิดเจ็ตที่อยู่ในแอปตอนนี้ วาดตาม UpcomingEventsContent.kt ขวาคือแบบใหม่
- งานหลายวันไม่กินแถวละงานอีก สองงานอยู่ในแถวเดียว และไม่ขึ้นซ้ำใต้ทุกวัน ที่ 4×2 จึงเห็นงานที่มีเวลาได้มากขึ้น
- เห็นทั้งวันในแถบเดียว ของเดิมรู้แค่งานที่ยังเหลือ ไม่รู้ว่าวันนี้ผ่านอะไรมาแล้วและตอนนี้อยู่ตรงไหนของวัน
- งานที่กำลังเกิดบอกด้วยพื้นที่จาง แทนเวลาเริ่มสีแดง ซึ่งบอกได้แค่ว่ากำลังเกิด ไม่บอกว่าเหลืออีกเท่าไร
- รู้ว่าว่างถึงกี่โมง และว่างระหว่างงานนานแค่ไหน ของเดิมต้องลบเวลาเอง
- ช่องกว้างและเตี้ยใช้ที่คุ้มขึ้น วันที่ย้ายไปอยู่ข้าง หัวไม่กินความสูงของรายการ
- สิ่งที่เสียไป ที่ 4×4 แถบฟ้ากับบรรทัดช่วงว่างใช้ที่ราวหนึ่งแถว วันที่งานแน่นจึงเห็นงานของวันนี้น้อยลงหนึ่งแถวก่อนต้องเลื่อน (ในตัวอย่างนี้ 4 จากเดิม 5)
จากเอกสารไปโค้ด
ทุกอย่างในหน้านี้ออกแบบให้ทำได้ด้วย Glance แต่ยังไม่ได้ลองสร้างจริง ตารางนี้คือทางที่คิดไว้ จุดที่ต้องพิสูจน์ก่อนคือ bitmap ของแถบฟ้า
ซึ่งส่งไปหนึ่งใบต่อถังขนาด ต้องไม่ทำให้ binder transaction ใหญ่เกิน (ปัญหาเดียวกับที่ทำให้มี MAX_ROWS)
| ส่วน | ในโค้ด | งาน |
|---|---|---|
| เนื้อหาของรายการ | WidgetAgenda.of() | ปรับ: งานหลายวันขึ้นครั้งเดียว งานข้ามคืนขึ้นในวันที่เริ่ม เพิ่มช่วงว่างของวันนี้และ “ว่างถึง” ทดสอบใน WidgetAgendaTest |
| จังหวะวาดใหม่ | WidgetRefresh, agendaFlow | ปรับ: refreshAt ไม่เกินขั้น 5 นาทีถัดไป ยังเป็นนาฬิกาปลุกแบบไม่ปลุกเครื่อง จอดับไม่วาด |
| แถบฟ้า ขีด เส้นตอนนี้ | ใหม่ ใน UpcomingEventsContent.kt | วาดลง bitmap ใบเดียว ความสูงจริง ความกว้างยืดเต็ม (ContentScale.FillBounds) สีจาก Sky และ DaylightRepository |
| พื้นแถวที่กำลังเกิด | TimedRow | ปรับ: bitmap สองสี (rowPast แล้ว row) ยืดเต็มแถว รวมขีดรอยต่อไว้ในใบเดียวกัน เลิกใช้เวลาเริ่มสี now |
| ชิป | AllDayPill | ปรับ: เรียงใน Row น้ำหนักเท่ากัน ขีดวันเป็น Box น้ำหนักเท่ากันทุกวัน วันนี้สูงกว่า |
| ขนาด | sizeMode ใน UpcomingEventsWidget.kt | ปรับ: เพิ่มถังความสูง 280 dp แยกสามแบบตามตารางด้านบน ขนาดเริ่มต้นในตัวเลือกวิดเจ็ต 4×2 เท่ากับนาฬิกา (targetCellWidth ใน upcoming_events_widget_info.xml) คนจึงเลือกจากชื่อและรูป ไม่ใช่จากขนาด |
| ตัวอักษร | Glance Text | คงเดิม: ฟอนต์ของระบบ เพราะ Glance ตั้งได้แค่ชื่อฟอนต์ของระบบ น้ำหนักมีแค่ปกติ กลาง หนา ตัวอย่างในหน้านี้จึงใช้ Roboto กับ Noto Sans Thai ไม่ใช่ Anuphan |
| รูปตัวอย่างในตัวเลือกวิดเจ็ต | providePreview, widget_upcoming_preview.webp | ถ่ายใหม่ทั้งไทยและอังกฤษ |