Meta Tags

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

	แอตทริบิวต์หลัก	คำอธิบาย
	property	กำหนดชื่อตัวแปรที่จะใช้ในโค้ดของคุณ
	label	ข้อความป้ายกำกับที่แสดงให้ผู้ใช้เห็นบนอินเทอร์เฟซของตัวควบคุม
	type	ระบุชนิดข้อมูล: number, hue, boolean หรือ color
	default	กำหนดค่าเริ่มต้นที่ตัวควบคุมใช้
	tooltip*	(*ไม่บังคับ) แสดงคำอธิบายสั้น ๆ เมื่อผู้ใช้วางเมาส์เหนือตัวควบคุม

แถบเลื่อนตัวเลข

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

<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">

เมื่อใช้งานจริงจะมีลักษณะดังนี้:

แถบเลื่อนตัวเลขต้องมีแอตทริบิวต์เพิ่มเติมสองตัวเพื่อให้ทำงานได้อย่างถูกต้อง:

แอตทริบิวต์	คำอธิบาย
min	กำหนดค่าต่ำสุดที่ผู้ใช้เลือกได้
max	กำหนดค่าสูงสุดที่ผู้ใช้เลือกได้

แถบเลื่อนเฉดสี

แถบเลื่อนเฉดสีช่วยให้ผู้ใช้เลือกเฉดสีโดยใช้แบบจำลองสี HSL (Hue, Saturation, Lightness) โดยทั่วไปใช้สำหรับการปรับสีพื้นฐาน หรือเลือกสีหลักให้กับเอฟเฟกต์และองค์ประกอบต่าง ๆ

<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">

เมื่อมองเห็นจะมีลักษณะดังนี้:

เพื่อให้ทำงานได้อย่างถูกต้อง แถบเลื่อนเฉดสีต้องมีแอตทริบิวต์เพิ่มเติมสองตัว:

แอตทริบิวต์	คำอธิบาย
min	กำหนดค่าเฉดสีต่ำสุดที่ผู้ใช้เลือกได้ ค่าต่ำสุดที่เป็นไปได้คือ 0
max	กำหนดค่าเฉดสีสูงสุดที่มีให้เลือก ค่าสูงสุดที่เป็นไปได้คือ 360

Boolean

สวิตช์ boolean ช่วยให้ผู้ใช้สลับระหว่างสองสถานะ คือ “เปิด” และ “ปิด” ค่าของมันจำกัดอยู่ที่ 0 (ปิด) หรือ 1 (เปิด) เท่านั้น ต่างจากตัวควบคุมอื่น boolean ใช้เพียงแอตทริบิวต์เริ่มต้นและไม่ต้องกำหนดค่าเพิ่มเติมใด ๆ

<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>

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

ต่อไปนี้เป็นตัวอย่างการแสดงผล:

ตัวเลือกสี

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

<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>

เมื่อมองเห็นจะมีลักษณะดังนี้:

ค่าเริ่มต้นของตัวเลือกสีต้องระบุในรูปแบบเลขฐานสิบหก นอกจากนี้ยังต้องมีแอตทริบิวต์เพิ่มเติมสองตัว:

แอตทริบิวต์	คำอธิบาย
min	ค่าต่ำสุดที่เลือกได้ ค่าต่ำสุดที่เป็นไปได้คือ 0
max	ค่าสูงสุดที่เลือกได้ ค่าสูงสุดที่เป็นไปได้คือ 360

ช่องข้อความ

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

<meta property="myText" label="Text Field" type="textfield" default="yourText">

มีลักษณะดังนี้:

แอตทริบิวต์	คำอธิบาย
default	ไม่มีอักขระก็ได้

รายการ

รายการ (list) ช่วยให้ผู้ใช้เลือกหนึ่งตัวเลือกจากรายการค่าที่กำหนดไว้ล่วงหน้า ตัวอย่างเช่น ผู้ใช้สามารถสลับระหว่างตัวละครหรือเอฟเฟกต์ต่าง ๆ เพื่อเลือกตัวเลือกที่ต้องการ

<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3"
    default="Low Health"/>

เมื่อใช้งานจริงจะมีลักษณะดังนี้:

แอตทริบิวต์ values กำหนดตัวเลือกทั้งหมดที่มีให้เลือก ส่วนแอตทริบิวต์ default ระบุว่าตัวเลือกใดถูกเลือกไว้ตั้งแต่แรก

แอตทริบิวต์	คำอธิบาย
values	รายการตัวเลือกสตริงที่เป็นไปได้ คั่นด้วยเครื่องหมายจุลภาค
default	กำหนดตัวเลือกที่เลือกไว้เป็นค่าเริ่มต้น หากค่านี้ไม่อยู่ในรายการ values กล่องคอมโบจะไม่แสดงตัวเลือกเริ่มต้นและอาจทำให้เกิดปัญหาได้

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการรวบรวมข้อมูลดิบจากแอปพลิเคชันของคุณ ลองดูหน้า Smart Tags ของเรา!